Bug 694958 - [highlighter] [infobar] limit the size of the infobar. r=dao

browser/base/content/highlighter.css

@@ -48,6 +48,7 @@
 
 #highlighter-nodeinfobar-container {
   position: absolute;
+  max-width: 95%;
 }
 
 #highlighter-nodeinfobar-container:not([disable-transitions]) {
@@ -60,15 +61,17 @@
   display: block;
   white-space: nowrap;
   direction: ltr;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar {
   pointer-events: auto;
 }
 
-#highlighter-nodeinfobar-id,
-.highlighter-nodeinfobar-class,
-#highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-id,
+html|*#highlighter-nodeinfobar-classes,
+html|*#highlighter-nodeinfobar-tagname {
   -moz-user-select: text;
   cursor: text;
 }
@@ -89,10 +92,6 @@
   visibility: hidden;
 }
 
-#highlighter-nodeinfobar-id:empty {
-  display: none;
-}
-
-#highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   text-transform: lowercase;
 }

browser/devtools/highlighter/highlighter.jsm

@@ -409,11 +409,11 @@ Highlighter.prototype = {
    *
    * <box id="highlighter-nodeinfobar-container">
    *   <box id="Highlighter-nodeinfobar-arrow-top"/>
-   *   <vbox id="highlighter-nodeinfobar">
-   *     <label id="highlighter-nodeinfobar-tagname"/>
-   *     <label id="highlighter-nodeinfobar-id"/>
-   *     <vbox id="highlighter-nodeinfobar-classes"/>
-   *   </vbox>
+   *   <hbox id="highlighter-nodeinfobar">
+   *     <xhtml:span id="highlighter-nodeinfobar-tagname"/>
+   *     <xhtml:span id="highlighter-nodeinfobar-id"/>
+   *     <xhtml:span id="highlighter-nodeinfobar-classes"/>
+   *   </hbox>
    *   <box id="Highlighter-nodeinfobar-arrow-bottom"/>
    * </box>
    *
@@ -438,16 +438,16 @@ Highlighter.prototype = {
     arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
     arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
 
-    let tagNameLabel = this.chromeDoc.createElement("label");
+    let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
     tagNameLabel.id = "highlighter-nodeinfobar-tagname";
-    tagNameLabel.className = "plain";
 
-    let idLabel = this.chromeDoc.createElement("label");
+    let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
     idLabel.id = "highlighter-nodeinfobar-id";
-    idLabel.className = "plain";
 
-    let classesBox = this.chromeDoc.createElement("hbox");
+    let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
     classesBox.id = "highlighter-nodeinfobar-classes";
+    // Add some content to force a better boundingClientRect down below.
+    classesBox.textContent = "&nbsp;";
 
     nodeInfobar.appendChild(tagNameLabel);
     nodeInfobar.appendChild(idLabel);
@@ -528,7 +528,7 @@ Highlighter.prototype = {
   },
 
   /**
-   * Update node information (tagName#id.class) 
+   * Update node information (tagName#id.class)
    */
   updateInfobar: function Highlighter_updateInfobar()
   {
@@ -540,20 +540,9 @@ Highlighter.prototype = {
 
     // Classes
     let classes = this.nodeInfo.classesBox;
-    while (classes.hasChildNodes()) {
-      classes.removeChild(classes.firstChild);
-    }
 
-    if (this.node.className) {
-      let fragment = this.chromeDoc.createDocumentFragment();
-      for (let i = 0; i < this.node.classList.length; i++) {
-        let classLabel = this.chromeDoc.createElement("label");
-        classLabel.className = "highlighter-nodeinfobar-class plain";
-        classLabel.textContent = "." + this.node.classList[i];
-        fragment.appendChild(classLabel);
-      }
-      classes.appendChild(fragment);
-    }
+    classes.textContent = this.node.classList.length ?
+                            "." + Array.join(this.node.classList, ".") : "";
   },
 
   /**

browser/devtools/highlighter/test/browser_inspector_infobar.js

@@ -25,7 +25,7 @@ function test()
   function setupInfobarTest()
   {
     nodes = [
-      {node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1 .class2"},
+      {node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1.class2"},
       {node: doc.querySelector("#vertical"), position: "overlap", tag: "DIV", id: "#vertical", classes: ""},
       {node: doc.querySelector("#bottom"), position: "top", tag: "DIV", id: "#bottom", classes: ""},
       {node: doc.querySelector("body"), position: "overlap", tag: "BODY", id: "", classes: ""},
@@ -86,14 +86,7 @@ function test()
     is(idLabel.textContent, nodes[cursor].id, "node " + cursor  + ": id matches.");
 
     let classesBox = document.getElementById("highlighter-nodeinfobar-classes");
-
-    let displayedClasses = [];
-    for (let i = 0; i < classesBox.childNodes.length; i++) {
-      displayedClasses.push(classesBox.childNodes[i].textContent);
-    }
-    displayedClasses = displayedClasses.join(" ");
-
-    is(displayedClasses, nodes[cursor].classes, "node " + cursor  + ": classes match.");
+    is(classesBox.textContent, nodes[cursor].classes, "node " + cursor  + ": classes match.");
   }
 
   function finishUp() {

browser/themes/gnomestripe/browser.css

@@ -2019,21 +2019,18 @@ panel[dimmed="true"] {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-#highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-.highlighter-nodeinfobar-class {
-  color: hsl(200, 100%, 65%);
-}
-
 /* Highlighter - Node Infobar - box & arrow */
 
 #highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
   padding: 8px 16px;

browser/themes/pinstripe/browser.css

@@ -2768,21 +2768,18 @@ panel[dimmed="true"] {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-#highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-.highlighter-nodeinfobar-class {
-  color: hsl(200, 100%, 65%);
-}
-
 /* Highlighter - Node Infobar - box & arrow */
 
 #highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
   padding: 8px 16px;

browser/themes/winstripe/browser.css

@@ -2699,21 +2699,18 @@ panel[dimmed="true"] {
 
 /* Highlighter - Node Infobar - text */
 
-#highlighter-nodeinfobar-tagname {
+html|*#highlighter-nodeinfobar-tagname {
   color: white;
 }
 
-#highlighter-nodeinfobar-id {
+html|*#highlighter-nodeinfobar-id {
   color: hsl(90, 79%, 52%);
 }
 
-.highlighter-nodeinfobar-class {
-  color: hsl(200, 100%, 65%);
-}
-
 /* Highlighter - Node Infobar - box & arrow */
 
 #highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
   border: 1px solid hsla(210, 19%, 63%, .5);
   border-radius: 3px;
   padding: 8px 16px;