Bug 718250 - Add the dimensions of the node in the NodeInfobar r=jwalker

browser/base/content/highlighter.css

@@ -45,6 +45,7 @@ svg|line.box-model-guide-bottom[hidden] {
 html|*.highlighter-nodeinfobar-id,
 html|*.highlighter-nodeinfobar-classes,
 html|*.highlighter-nodeinfobar-pseudo-classes,
+html|*.highlighter-nodeinfobar-dimensions,
 html|*.highlighter-nodeinfobar-tagname {
   -moz-user-select: text;
   -moz-user-focus: normal;

browser/devtools/inspector/test/browser_inspector_infobar.js

@@ -17,19 +17,58 @@ function test() {
     waitForFocus(setupInfobarTest, content);
   }, true);
 
-  let style = "body{width:100%;height: 100%} div {position: absolute;height: 100px;width: 500px}#bottom {bottom: 0px}#vertical {height: 100%}#farbottom{bottom: -200px}";
-  let html = "<style>" + style + "</style><div id=vertical></div><div id=top class='class1 class2'></div><div id=bottom></div><div id=farbottom></div>"
+  let style = "body{width:100%;height: 100%} div {position: absolute;" +
+              "height: 100px;width: 500px}#bottom {bottom: 0px}#vertical {"+
+              "height: 100%}#farbottom{bottom: -200px}";
+  let html = "<style>" + style + "</style><div id=vertical></div>" +
+             "<div id=top class='class1 class2'></div><div id=bottom></div>" +
+             "<div id=farbottom></div>"
 
-  content.location = "data:text/html," + encodeURIComponent(html);
+  content.location = "data:text/html;charset=utf-8," + encodeURIComponent(html);
 
   function setupInfobarTest() {
     nodes = [
-      {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: ""},
-      {node: doc.querySelector("#farbottom"), position: "top", tag: "DIV", id: "#farbottom", classes: ""},
-    ]
+      {
+        node: doc.querySelector("#top"),
+        position: "bottom",
+        tag: "DIV",
+        id: "#top",
+        classes: ".class1.class2",
+        dims: "500 x 100"
+      },
+      {
+        node: doc.querySelector("#vertical"),
+        position: "overlap",
+        tag: "DIV",
+        id: "#vertical",
+        classes: ""
+        // No dims as they will vary between computers
+      },
+      {
+        node: doc.querySelector("#bottom"),
+        position: "top",
+        tag: "DIV",
+        id: "#bottom",
+        classes: "",
+        dims: "500 x 100"
+      },
+      {
+        node: doc.querySelector("body"),
+        position: "overlap",
+        tag: "BODY",
+        id: "",
+        classes: ""
+        // No dims as they will vary between computers
+      },
+      {
+        node: doc.querySelector("#farbottom"),
+        position: "top",
+        tag: "DIV",
+        id: "#farbottom",
+        classes: "",
+        dims: "500 x 100"
+      },
+    ];
 
     for (let i = 0; i < nodes.length; i++) {
       ok(nodes[i].node, "node " + i + " found");
@@ -74,16 +113,24 @@ function test() {
     let stack = browser.parentNode;
 
     let container = stack.querySelector(".highlighter-nodeinfobar-positioner");
-    is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");
+    is(container.getAttribute("position"),
+      nodes[cursor].position, "node " + cursor + ": position matches.");
 
     let tagNameLabel = stack.querySelector(".highlighter-nodeinfobar-tagname");
-    is(tagNameLabel.textContent, nodes[cursor].tag, "node " + cursor  + ": tagName matches.");
+    is(tagNameLabel.textContent, nodes[cursor].tag,
+      "node " + cursor  + ": tagName matches.");
 
     let idLabel = stack.querySelector(".highlighter-nodeinfobar-id");
     is(idLabel.textContent, nodes[cursor].id, "node " + cursor  + ": id matches.");
 
     let classesBox = stack.querySelector(".highlighter-nodeinfobar-classes");
-    is(classesBox.textContent, nodes[cursor].classes, "node " + cursor  + ": classes match.");
+    is(classesBox.textContent, nodes[cursor].classes,
+      "node " + cursor  + ": classes match.");
+
+    if (nodes[cursor].dims) {
+      let dimBox = stack.querySelector(".highlighter-nodeinfobar-dimensions");
+      is(dimBox.textContent, nodes[cursor].dims, "node " + cursor  + ": dims match.");
+    }
   }
 
   function finishUp() {

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

@@ -74,6 +74,13 @@ html|*.highlighter-nodeinfobar-pseudo-classes {
   color: hsl(200,74%,57%);
 }
 
+html|*.highlighter-nodeinfobar-dimensions {
+  color: hsl(210,30%,85%);
+  -moz-border-start: 1px solid #5a6169;
+  -moz-margin-start: 6px;
+  -moz-padding-start: 6px;
+}
+
 /* Highlighter - Node Infobar - box & arrow */
 
 .highlighter-nodeinfobar-arrow {

toolkit/devtools/server/actors/highlighter.js

@@ -398,6 +398,9 @@ BoxModelHighlighter.prototype = {
     let pseudoClassesBox = this.chromeDoc.createElementNS(XHTML_NS, "span");
     pseudoClassesBox.className = "highlighter-nodeinfobar-pseudo-classes";
 
+    let dimensionBox = this.chromeDoc.createElementNS(XHTML_NS, "span");
+    dimensionBox.className = "highlighter-nodeinfobar-dimensions";
+
     // Add some content to force a better boundingClientRect
     pseudoClassesBox.textContent = " ";
 
@@ -411,6 +414,7 @@ BoxModelHighlighter.prototype = {
     texthbox.appendChild(idLabel);
     texthbox.appendChild(classesBox);
     texthbox.appendChild(pseudoClassesBox);
+    texthbox.appendChild(dimensionBox);
 
     nodeInfobar.appendChild(texthbox);
 
@@ -427,6 +431,7 @@ BoxModelHighlighter.prototype = {
       idLabel: idLabel,
       classesBox: classesBox,
       pseudoClassesBox: pseudoClassesBox,
+      dimensionBox: dimensionBox,
       positioner: infobarPositioner,
       barHeight: barHeight,
     };
@@ -702,29 +707,36 @@ BoxModelHighlighter.prototype = {
    * Update node information (tagName#id.class)
    */
   _updateInfobar: function() {
-    if (this.currentNode) {
-      // Tag name
-      this.nodeInfo.tagNameLabel.textContent = this.currentNode.tagName;
-
-      // ID
-      this.nodeInfo.idLabel.textContent = this.currentNode.id ? "#" + this.currentNode.id : "";
-
-      // Classes
-      let classes = this.nodeInfo.classesBox;
-
-      classes.textContent = this.currentNode.classList.length ?
-                              "." + Array.join(this.currentNode.classList, ".") : "";
-
-      // Pseudo-classes
-      let pseudos = PSEUDO_CLASSES.filter(pseudo => {
-        return DOMUtils.hasPseudoClassLock(this.currentNode, pseudo);
-      }, this);
-
-      let pseudoBox = this.nodeInfo.pseudoClassesBox;
-      pseudoBox.textContent = pseudos.join("");
-
-      this._moveInfobar();
+    if (!this.currentNode) {
+      return;
     }
+
+    // Tag name
+    this.nodeInfo.tagNameLabel.textContent = this.currentNode.tagName;
+
+    // ID
+    this.nodeInfo.idLabel.textContent = this.currentNode.id ? "#" + this.currentNode.id : "";
+
+    // Classes
+    let classes = this.nodeInfo.classesBox;
+
+    classes.textContent = this.currentNode.classList.length ?
+                            "." + Array.join(this.currentNode.classList, ".") : "";
+
+    // Pseudo-classes
+    let pseudos = PSEUDO_CLASSES.filter(pseudo => {
+      return DOMUtils.hasPseudoClassLock(this.currentNode, pseudo);
+    }, this);
+
+    let pseudoBox = this.nodeInfo.pseudoClassesBox;
+    pseudoBox.textContent = pseudos.join("");
+
+    // Dimensions
+    let dimensionBox = this.nodeInfo.dimensionBox;
+    let rect = this.currentNode.getBoundingClientRect();
+    dimensionBox.textContent = Math.ceil(rect.width) + " x " +
+                               Math.ceil(rect.height);
+    this._moveInfobar();
   },
 
   /**