Bug 920321 - Do not truncate the source line number in the web console; r=msucan

browser/devtools/webconsole/webconsole.js

@@ -2606,29 +2606,28 @@ WebConsoleFrame.prototype = {
   createLocationNode: function WCF_createLocationNode(aSourceURL, aSourceLine)
   {
     let locationNode = this.document.createElementNS(XHTML_NS, "a");
+    let filenameNode = this.document.createElementNS(XHTML_NS, "span");
 
     // Create the text, which consists of an abbreviated version of the URL
-    // plus an optional line number. Scratchpad URLs should not be abbreviated.
-    let displayLocation;
+    // Scratchpad URLs should not be abbreviated.
+    let filename;
     let fullURL;
     let isScratchpad = false;
 
     if (/^Scratchpad\/\d+$/.test(aSourceURL)) {
-      displayLocation = aSourceURL;
+      filename = aSourceURL;
       fullURL = aSourceURL;
       isScratchpad = true;
     }
     else {
       fullURL = aSourceURL.split(" -> ").pop();
-      displayLocation = WebConsoleUtils.abbreviateSourceURL(fullURL);
+      filename = WebConsoleUtils.abbreviateSourceURL(fullURL);
     }
 
-    if (aSourceLine) {
-      displayLocation += ":" + aSourceLine;
-      locationNode.sourceLine = aSourceLine;
-    }
+    filenameNode.className = "filename";
+    filenameNode.textContent = " " + filename;
+    locationNode.appendChild(filenameNode);
 
-    locationNode.textContent = " " + displayLocation;
     locationNode.href = isScratchpad ? "#" : fullURL;
     locationNode.draggable = false;
     locationNode.setAttribute("title", aSourceURL);
@@ -2651,6 +2650,14 @@ WebConsoleFrame.prototype = {
       }
     });
 
+    if (aSourceLine) {
+      let lineNumberNode = this.document.createElementNS(XHTML_NS, "span");
+      lineNumberNode.className = "line-number";
+      lineNumberNode.textContent = ":" + aSourceLine;
+      locationNode.appendChild(lineNumberNode);
+      locationNode.sourceLine = aSourceLine;
+    }
+
     return locationNode;
   },
 

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

@@ -66,16 +66,14 @@ a {
 
 .message > .location {
   -moz-margin-start: 6px;
+  display: flex;
   flex: 0 0 auto;
   align-self: flex-start;
+  justify-content: flex-end;
   width: 10em;
   margin-top: 4px;
-  text-align: end;
   color: -moz-nativehyperlinktext;
-  text-overflow: ellipsis;
   text-decoration: none;
-  overflow: hidden;
-  white-space: nowrap;
 }
 
 .message > .location:hover,
@@ -83,6 +81,17 @@ a {
   text-decoration: underline;
 }
 
+.message > .location > .filename {
+  text-overflow: ellipsis;
+  text-align: end;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.message > .location > .line-number {
+  flex: 0 0 auto;
+}
+
 .jsterm-input-container {
   background: white;
 }