Bug 611440 - Smart abbreviation for URLs in the Web Console; f=mihai.sucan,dolske r=dolske approval2.0=dolske

toolkit/components/console/hudservice/HUDService.jsm

@@ -2188,7 +2188,7 @@ HUD_SERVICE.prototype =
             });
 
             // Store the loggedNode and the httpActivity object for later reuse.
-            let linkNode = loggedNode.querySelector(".webconsole-msg-url");
+            let linkNode = loggedNode.querySelector(".webconsole-msg-link");
 
             httpActivity.messageObject = {
               messageNode: loggedNode,
@@ -2236,7 +2236,7 @@ HUD_SERVICE.prototype =
             let msgObject = httpActivity.messageObject;
 
             let updatePanel = false;
-            let data, textNode;
+            let data;
             // Store the time information for this activity subtype.
             httpActivity.timing[transCodes[aActivitySubtype]] = aTimestamp;
 
@@ -2286,25 +2286,17 @@ HUD_SERVICE.prototype =
                 httpActivity.response.status =
                   aExtraStringData.split(/\r\n|\n|\r/)[0];
 
-                // Remove the text node from the URL node and add a new one that
-                // contains the response status.
-                textNode = msgObject.linkNode.firstChild;
-                textNode.parentNode.removeChild(textNode);
+                // Add the response status.
+                let linkNode = msgObject.linkNode;
+                let statusNode = linkNode.
+                  querySelector(".webconsole-msg-status");
+                let statusText = "[" + httpActivity.response.status + "]";
+                statusNode.setAttribute("value", statusText);
 
-                data = [ httpActivity.url,
-                         httpActivity.response.status ];
-
-                // Format the pieces of data. The result will be something like
-                // "http://example.com/ [HTTP/1.0 200 OK]".
-                let text = self.getFormatStr("networkUrlWithStatus", data);
-
-                // Replace the displayed text and the clipboard text with the
-                // new data.
-                let chromeDocument = msgObject.messageNode.ownerDocument;
-                msgObject.linkNode.appendChild(
-                  chromeDocument.createTextNode(text));
+                let clipboardTextPieces =
+                  [ httpActivity.method, httpActivity.url, statusText ];
                 msgObject.messageNode.clipboardText =
-                  msgObject.messageNode.textContent;
+                  clipboardTextPieces.join(" ");
 
                 let status = parseInt(httpActivity.response.status.
                   replace(/^HTTP\/\d\.\d (\d+).+$/, "$1"));
@@ -2325,27 +2317,21 @@ HUD_SERVICE.prototype =
                   Math.round((timing.RESPONSE_COMPLETE -
                                 timing.REQUEST_HEADER) / 1000);
 
-                // Remove the text node from the link node and add a new one
-                // that contains the request duration.
-                textNode = msgObject.linkNode.firstChild;
-                textNode.parentNode.removeChild(textNode);
+                // Add the request duration.
+                let linkNode = msgObject.linkNode;
+                let statusNode = linkNode.
+                  querySelector(".webconsole-msg-status");
 
-                data = [ httpActivity.url,
-                         httpActivity.response.status,
-                         requestDuration ];
+                let statusText = httpActivity.response.status;
+                let timeText = self.getFormatStr("NetworkPanel.durationMS",
+                                                 [ requestDuration ]);
+                let fullStatusText = "[" + statusText + " " + timeText + "]";
+                statusNode.setAttribute("value", fullStatusText);
 
-                // Format the pieces of data. The result will be something like
-                // "http://example.com/ [HTTP/1.0 200 OK 200 ms]".
-                let text = self.getFormatStr("networkUrlWithStatusAndDuration",
-                                             data);
-
-                // Replace the displayed text and the clipboard text with the
-                // new data.
-                let chromeDocument = msgObject.messageNode.ownerDocument;
-                msgObject.linkNode.appendChild(
-                  chromeDocument.createTextNode(text));
+                let clipboardTextPieces =
+                  [ httpActivity.method, httpActivity.url, fullStatusText ];
                 msgObject.messageNode.clipboardText =
-                  msgObject.messageNode.textContent;
+                  clipboardTextPieces.join(" ");
 
                 delete self.openRequests[item.id];
                 updatePanel = true;
@@ -2452,19 +2438,36 @@ HUD_SERVICE.prototype =
     let outputNode = this.hudReferences[hudId].outputNode;
 
     let chromeDocument = outputNode.ownerDocument;
-    let msgNode = chromeDocument.createElementNS(HTML_NS, "html:span");
+    let msgNode = chromeDocument.createElementNS(XUL_NS, "xul:hbox");
 
-    // Create the method part of the message (e.g. "GET").
-    let method = chromeDocument.createTextNode(aActivityObject.method + " ");
-    msgNode.appendChild(method);
+    let methodNode = chromeDocument.createElementNS(XUL_NS, "xul:label");
+    methodNode.setAttribute("value", aActivityObject.method);
+    methodNode.classList.add("webconsole-msg-body-piece");
+    msgNode.appendChild(methodNode);
 
-    // Create the clickable URL part of the message.
-    let linkNode = chromeDocument.createElementNS(HTML_NS, "html:span");
-    linkNode.appendChild(chromeDocument.createTextNode(aActivityObject.url));
-    linkNode.classList.add("hud-clickable");
-    linkNode.classList.add("webconsole-msg-url");
+    let linkNode = chromeDocument.createElementNS(XUL_NS, "xul:hbox");
+    linkNode.setAttribute("flex", "1");
+    linkNode.classList.add("webconsole-msg-body-piece");
+    linkNode.classList.add("webconsole-msg-link");
     msgNode.appendChild(linkNode);
 
+    let urlNode = chromeDocument.createElementNS(XUL_NS, "xul:label");
+    urlNode.setAttribute("crop", "center");
+    urlNode.setAttribute("flex", "1");
+    urlNode.setAttribute("title", aActivityObject.url);
+    urlNode.setAttribute("value", aActivityObject.url);
+    urlNode.classList.add("hud-clickable");
+    urlNode.classList.add("webconsole-msg-body-piece");
+    urlNode.classList.add("webconsole-msg-url");
+    linkNode.appendChild(urlNode);
+
+    let statusNode = chromeDocument.createElementNS(XUL_NS, "xul:label");
+    statusNode.setAttribute("value", "");
+    statusNode.classList.add("hud-clickable");
+    statusNode.classList.add("webconsole-msg-body-piece");
+    statusNode.classList.add("webconsole-msg-status");
+    linkNode.appendChild(statusNode);
+
     let clipboardText = aActivityObject.method + " " + aActivityObject.url;
 
     let messageNode = ConsoleUtils.createMessageNode(chromeDocument,

toolkit/components/console/hudservice/tests/browser/browser_webconsole_basic_net_logging.js

@@ -60,15 +60,13 @@ function onLoad(aEvent) {
 function testBasicNetLogging(aEvent) {
   browser.removeEventListener(aEvent.type, arguments.callee, true);
 
-  hudBox = HUDService.getHeadsUpDisplay(hudId);
+  outputNode = HUDService.hudReferences[hudId].outputNode;
 
   executeSoon(function() {
-    let text = hudBox.querySelector(".hud-output-node").textContent;
-
-    isnot(text.indexOf("test-network.html"), -1, "found test-network.html");
-    isnot(text.indexOf("testscript.js"), -1, "found testscript.js");
-    isnot(text.indexOf("test-image.png"), -1, "found test-image.png");
-    isnot(text.indexOf("network console"), -1, "found network console");
+    findLogEntry("test-network.html");
+    findLogEntry("testscript.js");
+    findLogEntry("test-image.png");
+    findLogEntry("network console");
 
     finishTest();
   });

toolkit/components/console/hudservice/tests/browser/browser_webconsole_bug_582201_duplicate_errors.js

@@ -87,8 +87,7 @@ var consoleObserver = {
           "no duplicate for fooDuplicateError1");
       }
 
-      ok(text.indexOf("test-duplicate-error.html") > -1,
-        "found test-duplicate-error.html");
+      findLogEntry("test-duplicate-error.html");
 
       finishTest();
     });

toolkit/components/console/hudservice/tests/browser/browser_webconsole_bug_593003_iframe_wrong_hud.js

@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *  Mihai Șucan <mihai.sucan@gmail.com>
+ *  Patrick Walton <pcwalton@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or

toolkit/components/console/hudservice/tests/browser/browser_webconsole_bug_601177_log_levels.js

@@ -18,41 +18,35 @@ function onContentLoaded()
   let HUD = HUDService.hudReferences[hudId];
   msgs = HUD.outputNode.querySelectorAll(".hud-msg-node");
 
-  ok(findEntry("hud-networkinfo", "test-bug-601177-log-levels.html"),
-    "found test-bug-601177-log-levels.html");
+  findEntry(HUD, "hud-networkinfo", "test-bug-601177-log-levels.html",
+            "found test-bug-601177-log-levels.html");
 
-  ok(findEntry("hud-networkinfo", "test-bug-601177-log-levels.js"),
-    "found test-bug-601177-log-levels.js");
+  findEntry(HUD, "hud-networkinfo", "test-bug-601177-log-levels.js",
+            "found test-bug-601177-log-levels.js");
 
-  ok(findEntry("hud-networkinfo", "test-image.png"),
-    "found test-image.png");
+  findEntry(HUD, "hud-networkinfo", "test-image.png", "found test-image.png");
 
-  ok(findEntry("hud-network", "foobar-known-to-fail.png"),
-    "found foobar-known-to-fail.png");
+  findEntry(HUD, "hud-network", "foobar-known-to-fail.png",
+            "found foobar-known-to-fail.png");
 
-  ok(findEntry("hud-exception", "foobarBug601177exception"),
-    "found exception");
+  findEntry(HUD, "hud-exception", "foobarBug601177exception",
+            "found exception");
 
-  ok(findEntry("hud-jswarn", "undefinedPropertyBug601177"),
-    "found strict warning");
+  findEntry(HUD, "hud-jswarn", "undefinedPropertyBug601177",
+            "found strict warning");
 
-  ok(findEntry("hud-jswarn", "foobarBug601177strictError"),
-    "found strict error");
+  findEntry(HUD, "hud-jswarn", "foobarBug601177strictError",
+            "found strict error");
 
   msgs = null;
   Services.prefs.setBoolPref("javascript.options.strict", false);
   finishTest();
 }
 
-function findEntry(aClass, aString)
+function findEntry(aHUD, aClass, aString, aMessage)
 {
-  for (let i = 0, n = msgs.length; i < n; i++) {
-    if (msgs[i].classList.contains(aClass) &&
-        msgs[i].textContent.indexOf(aString) > -1) {
-      return true;
-    }
-  }
-  return false;
+  return testLogEntry(aHUD.outputNode, aString, aMessage, false, false,
+                      aClass);
 }
 
 function test()

toolkit/components/console/hudservice/tests/browser/head.js

@@ -95,15 +95,20 @@ function addTab(aURL)
  *        find only messages that are visible, not hidden by the filter.
  * @param {boolean} [aFailIfFound=false]
  *        fail the test if the string is found in the output node.
+ * @param {string} aClass [optional]
+ *        find only messages with the given CSS class.
  */
 function testLogEntry(aOutputNode, aMatchString, aMsg, aOnlyVisible,
-                      aFailIfFound)
+                      aFailIfFound, aClass)
 {
   let selector = ".hud-msg-node";
   // Skip entries that are hidden by the filter.
   if (aOnlyVisible) {
     selector += ":not(.hud-filtered-by-type)";
   }
+  if (aClass) {
+    selector += "." + aClass;
+  }
 
   let msgs = aOutputNode.querySelectorAll(selector);
   let found = false;
@@ -113,10 +118,31 @@ function testLogEntry(aOutputNode, aMatchString, aMsg, aOnlyVisible,
       found = true;
       break;
     }
+
+    // Search the labels too.
+    let labels = msgs[i].querySelectorAll("label");
+    for (let j = 0; j < labels.length; j++) {
+      if (labels[j].getAttribute("value").indexOf(aMatchString) > -1) {
+        found = true;
+        break;
+      }
+    }
   }
+
   is(found, !aFailIfFound, aMsg);
 }
 
+/**
+ * A convenience method to call testLogEntry().
+ *
+ * @param string aString
+ *        The string to find.
+ */
+function findLogEntry(aString)
+{
+  testLogEntry(outputNode, aString, "found " + aString);
+}
+
 function openConsole()
 {
   HUDService.activateHUDForContext(tab);

toolkit/locales/en-US/chrome/global/headsUpDisplay.properties

@@ -87,27 +87,6 @@ selectAllCmd.accesskey=A
 timestampFormat=%02S:%02S:%02S.%03S
 
 helperFuncUnsupportedTypeError=Can't call pprint on this type of object.
-# LOCALIZATION NOTE (networkUrlWithStatus):
-#
-# When the HTTP request is started only the URL of the request is printed to the
-# WebConsole. As the response status of the HTTP request arrives, the URL string
-# is replaced by this string (the response status can look like `HTTP/1.1 200 OK`).
-# The bracket is not closed to mark that this request is not done by now. As the
-# request is finished (the HTTP connection is closed) this string is replaced
-# by `networkUrlWithStatusAndDuration` which has a closing the braket.
-#
-# %1$S = URL of network request
-# %2$S = response status code from the server (e.g. `HTTP/1.1 200 OK`)
-networkUrlWithStatus=%1$S [%2$S
-# LOCALIZATION NOTE (networkUrlWithStatusAndDuration):
-#
-# When the HTTP request is finished (the HTTP connection is closed) this string
-# replaces the former `networkUrlWithStatus` string in the WebConsole.
-#
-# %1$S = URL of network request
-# %2$S = response status code from the server (e.g. `HTTP/1.1 200 OK`)
-# %3$S = duration for the complete network request in milliseconds
-networkUrlWithStatusAndDuration=%1$S [%2$S %3$Sms]
 NetworkPanel.label=Inspect Network Request
 # LOCALIZATION NOTE (NetworkPanel.deltaDurationMS):
 #

toolkit/themes/gnomestripe/global/webConsole.css

@@ -91,6 +91,14 @@
   -moz-margin-end: 6px;
 }
 
+.webconsole-msg-body-piece {
+  margin: 0;
+}
+
+.webconsole-msg-url {
+  margin: 0 6px;
+}
+
 .webconsole-location {
   margin-top: 0;
   margin-bottom: 0;

toolkit/themes/pinstripe/global/webConsole.css

@@ -94,6 +94,14 @@
   -moz-margin-end: 6px;
 }
 
+.webconsole-msg-body-piece {
+  margin: 0;
+}
+
+.webconsole-msg-url {
+  margin: 0 6px;
+}
+
 .webconsole-location {
   margin-top: 0;
   margin-bottom: 0;

toolkit/themes/winstripe/global/webConsole.css

@@ -90,6 +90,14 @@
   -moz-margin-end: 6px;
 }
 
+.webconsole-msg-body-piece {
+  margin: 0;
+}
+
+.webconsole-msg-url {
+  margin: 0 6px;
+}
+
 .webconsole-location {
   margin-top: 0;
   margin-bottom: 0;