Bug 1124246 - Visually differentiate XHR network logs in the webconsole. r=past

browser/devtools/webconsole/test/browser_console.js

@@ -7,6 +7,8 @@
 
 const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console.html?" + Date.now();
 
+const TEST_XHR_ERROR_URI = `http://example.com/404.html?${Date.now()}`;
+
 "use strict";
 
 let test = asyncTest(function*() {
@@ -49,6 +51,12 @@ function consoleOpened(hud)
   xhr.open("get", TEST_URI, true);
   xhr.send();
 
+  // Check for xhr error.
+  let xhrErr = new XMLHttpRequest();
+  xhrErr.onload = () => console.log("xhr error loaded, status is: " + xhrErr.status);
+  xhrErr.open("get", TEST_XHR_ERROR_URI, true);
+  xhrErr.send();
+
   return waitForMessages({
     webconsole: hud,
     messages: [
@@ -81,6 +89,14 @@ function consoleOpened(hud)
         text: "test-console.html",
         category: CATEGORY_NETWORK,
         severity: SEVERITY_INFO,
+        isXhr: true,
+      },
+      {
+        name: "xhr error message",
+        text: "404.html",
+        category: CATEGORY_NETWORK,
+        severity: SEVERITY_ERROR,
+        isXhr: true,
       },
     ],
   });

browser/devtools/webconsole/test/browser_webconsole_bug_632817.js

@@ -4,7 +4,7 @@
 
 // Tests that network log messages bring up the network panel.
 
-const TEST_NETWORK_REQUEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-network-request.html";
+const TEST_NETWORK_REQUEST_URI = "https://example.com/browser/browser/devtools/webconsole/test/test-network-request.html";
 
 const TEST_IMG = "http://example.com/browser/browser/devtools/webconsole/test/test-image.png";
 
@@ -20,14 +20,20 @@ let hud, browser;
 function test()
 {
   const PREF = "devtools.webconsole.persistlog";
-  let original = Services.prefs.getBoolPref("devtools.webconsole.filter.networkinfo");
-  let originalXhr = Services.prefs.getBoolPref("devtools.webconsole.filter.netxhr");
-  Services.prefs.setBoolPref("devtools.webconsole.filter.networkinfo", true);
-  Services.prefs.setBoolPref("devtools.webconsole.filter.netxhr", true);
+  const NET_PREF = "devtools.webconsole.filter.networkinfo";
+  const NETXHR_PREF = "devtools.webconsole.filter.netxhr"
+  const MIXED_AC_PREF = "security.mixed_content.block_active_content"
+  let original = Services.prefs.getBoolPref(NET_PREF);
+  let originalXhr = Services.prefs.getBoolPref(NETXHR_PREF);
+  let originalMixedActive = Services.prefs.getBoolPref(MIXED_AC_PREF);
+  Services.prefs.setBoolPref(NET_PREF, true);
+  Services.prefs.setBoolPref(NETXHR_PREF, true);
+  Services.prefs.setBoolPref(MIXED_AC_PREF, false);
   Services.prefs.setBoolPref(PREF, true);
   registerCleanupFunction(() => {
-    Services.prefs.setBoolPref("devtools.webconsole.filter.networkinfo", original);
-    Services.prefs.setBoolPref("devtools.webconsole.filter.netxhr", originalXhr);
+    Services.prefs.setBoolPref(NET_PREF, original);
+    Services.prefs.setBoolPref(NETXHR_PREF, originalXhr);
+    Services.prefs.setBoolPref(MIXED_AC_PREF, originalMixedActive);
     Services.prefs.clearUserPref(PREF);
   });
 
@@ -100,13 +106,27 @@ function testXhrGet()
     is(lastRequest.request.method, "GET", "Method is correct");
     lastRequest = null;
     requestCallback = null;
-    executeSoon(testXhrPost);
+    executeSoon(testXhrWarn);
   };
 
   // Start the XMLHttpRequest() GET test.
   content.wrappedJSObject.testXhrGet();
 }
 
+function testXhrWarn()
+{
+  requestCallback = function() {
+    ok(lastRequest, "testXhrWarn() was logged");
+    is(lastRequest.request.method, "GET", "Method is correct");
+    lastRequest = null;
+    requestCallback = null;
+    executeSoon(testXhrPost);
+  };
+
+  // Start the XMLHttpRequest() warn test.
+  content.wrappedJSObject.testXhrWarn();
+}
+
 function testXhrPost()
 {
   requestCallback = function() {
@@ -143,8 +163,16 @@ function testFormSubmission()
           text: "test-data.json",
           category: CATEGORY_NETWORK,
           severity: SEVERITY_INFO,
+          isXhr: true,
           count: 2,
         },
+        {
+          text: "http://example.com/",
+          category: CATEGORY_NETWORK,
+          severity: SEVERITY_WARNING,
+          isXhr: true,
+          count: 1,
+        },
       ],
     }).then(testLiveFilteringOnSearchStrings);
   };

browser/devtools/webconsole/test/head.js

@@ -1117,6 +1117,14 @@ function waitForMessages(aOptions)
     return true;
   }
 
+  function hasXhrLabel(aElement) {
+    let xhr = aElement.querySelector('.xhr');
+    if (!xhr) {
+      return false;
+    }
+    return true;
+  }
+
   function checkMessage(aRule, aElement)
   {
     let elemText = aElement.textContent;
@@ -1161,6 +1169,14 @@ function waitForMessages(aOptions)
       return false;
     }
 
+    if (aRule.isXhr && !hasXhrLabel(aElement)) {
+      return false;
+    }
+
+    if (!aRule.isXhr && hasXhrLabel(aElement)) {
+      return false;
+    }
+
     let partialMatch = !!(aRule.consoleTrace || aRule.consoleTime ||
                           aRule.consoleTimeEnd);
 

browser/devtools/webconsole/test/test-network-request.html

@@ -19,6 +19,10 @@
         makeXhr('get', 'test-data.json', null, aCallback);
       }
 
+      function testXhrWarn(aCallback) {
+        makeXhr('get', 'http://example.com', null, aCallback);
+      }
+
       function testXhrPost(aCallback) {
         makeXhr('post', 'test-data.json', "Hello world!", aCallback);
       }
@@ -28,7 +32,7 @@
     <h1>Heads Up Display HTTP Logging Testpage</h1>
     <h2>This page is used to test the HTTP logging.</h2>
 
-    <form action="http://example.com/browser/browser/devtools/webconsole/test/test-network-request.html" method="post">
+    <form action="https://example.com/browser/browser/devtools/webconsole/test/test-network-request.html" method="post">
       <input name="name" type="text" value="foo bar"><br>
       <input name="age" type="text" value="144"><br>
     </form>

browser/devtools/webconsole/webconsole.js

@@ -1499,6 +1499,7 @@ WebConsoleFrame.prototype = {
     let clipboardText = request.method + " " + request.url;
     let severity = SEVERITY_LOG;
     if (networkInfo.isXHR) {
+      clipboardText = request.method + " XHR " + request.url;
       severity = SEVERITY_INFO;
     }
     let mixedRequest =
@@ -1523,6 +1524,14 @@ WebConsoleFrame.prototype = {
     let body = methodNode.parentNode;
     body.setAttribute("aria-haspopup", true);
 
+    if (networkInfo.isXHR) {
+      let xhrNode = this.document.createElementNS(XHTML_NS, "span");
+      xhrNode.className = "xhr";
+      xhrNode.textContent = l10n.getStr("webConsoleXhrIndicator");
+      body.appendChild(xhrNode);
+      body.appendChild(this.document.createTextNode(" "));
+    }
+
     let displayUrl = request.url;
     let pos = displayUrl.indexOf("?");
     if (pos > -1) {
@@ -1855,6 +1864,7 @@ WebConsoleFrame.prototype = {
     let hasEventTimings = updates.indexOf("eventTimings") > -1;
     let hasResponseStart = updates.indexOf("responseStart") > -1;
     let request = networkInfo.request;
+    let methodText = (networkInfo.isXHR)? request.method + ' XHR' : request.method;
     let response = networkInfo.response;
     let updated = false;
 
@@ -1872,7 +1882,7 @@ WebConsoleFrame.prototype = {
       let statusNode = messageNode.getElementsByClassName("status")[0];
       statusNode.textContent = statusText;
 
-      messageNode.clipboardText = [request.method, request.url, statusText]
+      messageNode.clipboardText = [methodText, request.url, statusText]
                                   .join(" ");
 
       if (hasResponseStart && response.status >= MIN_HTTP_ERROR_CODE &&

browser/locales/en-US/chrome/browser/devtools/webconsole.properties

@@ -70,6 +70,11 @@ ConsoleAPIDisabled=The Web Console logging API (console.log, console.info, conso
 # the URL the correct direction. Parameters: %S is the web page URL.
 webConsoleWindowTitleAndURL=Web Console - %S
 
+# LOCALIZATION NOTE (webConsoleXhrIndicator): the indicator displayed before
+# a URL in the Web Console that was requested using an XMLHttpRequest.
+# Should probably be the same as &btnConsoleXhr; in webConsole.dtd
+webConsoleXhrIndicator=XHR
+
 # LOCALIZATION NOTE (webConsoleMixedContentWarning): the message displayed
 # after a URL in the Web Console that has been flagged for Mixed Content (i.e.
 # http content in an https page).

browser/themes/shared/devtools/webconsole.inc.css

@@ -262,6 +262,17 @@ a {
   margin: 0 6px;
 }
 
+.message[category=network] .xhr {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 10px;
+  padding: 2px;
+  line-height: 10px;
+  -moz-margin-end: 1ex;
+}
+
 /* CSS styles */
 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#2DC3F3, #00B6F0);