Bug 1020984 - Fix highlighter when transforms have width & height of 0 r=pbrosset

2014-06-20 13:32:32 +01:00 · 2014-06-20 13:32:32 +01:00 · 1220898967
--- a/browser/devtools/framework/gDevTools.jsm
+++ b/browser/devtools/framework/gDevTools.jsm
@ -57,8 +57,6 @@ DevTools.prototype = {
      // testing/profiles/prefs_general.js so lets set it to the same as it is
      // in a default browser profile for the duration of the test.
      Services.prefs.setBoolPref("dom.send_after_paint_to_content", false);
-    } else {
-      Services.prefs.setBoolPref("dom.send_after_paint_to_content", true);
    }
  },

--- a/browser/devtools/inspector/test/browser.ini
+++ b/browser/devtools/inspector/test/browser.ini
@ -8,6 +8,7 @@ support-files =
  browser_inspector_cmd_inspect.html
  browser_inspector_dead_node_exception.html
  browser_inspector_destroyselection.html
+  browser_inspector_highlighter.html
  browser_inspector_menu.html
  browser_inspector_select_last_selected.html
  browser_inspector_select_last_selected2.html
--- a/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
@ -6,9 +6,6 @@

 // Test that hovering over nodes in the markup-view shows the highlighter over
 // those nodes
-
-waitForExplicitFinish();
-
 let test = asyncTest(function*() {
  info("Loading the test document and opening the inspector");
  yield addTab("data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>");
--- a/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
+++ b/browser/devtools/inspector/test/browser_inspector_breadcrumbs.js
@ -3,7 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
  ignoreAllUncaughtExceptions();

  let nodes = [
--- a/browser/devtools/inspector/test/browser_inspector_bug_650804_search.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_650804_search.js
@ -3,8 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let inspector, searchBox, state;
  let keypressStates = [3,4,8,18,19,20,21,22];

--- a/browser/devtools/inspector/test/browser_inspector_bug_665880.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_665880.js
@ -2,7 +2,6 @@
   http://creativecommons.org/publicdomain/zero/1.0/ */

 function test() {
-  waitForExplicitFinish();
  ignoreAllUncaughtExceptions();

  let doc;
--- a/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js
@ -7,8 +7,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let doc;
  let node;
  let inspector;
--- a/browser/devtools/inspector/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
@ -3,8 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let doc;
  let iframeNode, iframeBodyNode;
  let inspector;
--- a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
@ -65,8 +65,6 @@ function test() {
    });
  }

-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
--- a/browser/devtools/inspector/test/browser_inspector_bug_817558_delete_node.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_817558_delete_node.js
@ -3,7 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
  //ignoreAllUncaughtExceptions();

  let node, iframe, inspector;
--- a/browser/devtools/inspector/test/browser_inspector_bug_831693_combinator_suggestions.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_831693_combinator_suggestions.js
@ -3,8 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let inspector, searchBox, state, popup;

  // The various states of the inspector: [key, suggestions array]
--- a/browser/devtools/inspector/test/browser_inspector_bug_831693_input_suggestion.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_831693_input_suggestion.js
@ -3,8 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let inspector, searchBox, state, popup;

  // The various states of the inspector: [key, suggestions array]
--- a/browser/devtools/inspector/test/browser_inspector_bug_831693_searchbox_panel_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_831693_searchbox_panel_navigation.js
@ -3,7 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
  requestLongerTimeout(2);

  let inspector, searchBox, state, panel;
--- a/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
@ -6,8 +6,6 @@ let Toolbox = devtools.Toolbox;
 let TargetFactory = devtools.TargetFactory;

 function test() {
-  waitForExplicitFinish();
-
  const URL_1 = "data:text/plain;charset=UTF-8,abcde";
  const URL_2 = "data:text/plain;charset=UTF-8,12345";

--- a/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_848731_reset_selection_on_delete.js
@ -13,8 +13,6 @@ const TEST_PAGE = "http://mochi.test:8888/browser/browser/devtools/inspector/tes
 function test() {
  let inspector, toolbox;

-  waitForExplicitFinish();
-
  // Create a tab, load test HTML, wait for load and start the tests
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
--- a/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_922125_destroy_on_navigate.js
@ -5,8 +5,6 @@ let Toolbox = devtools.Toolbox;
 let TargetFactory = devtools.TargetFactory;

 function test() {
-  waitForExplicitFinish();
-
  const URL_1 = "data:text/html;charset=UTF-8,<div id='one' style='color:red;'>ONE</div>";
  const URL_2 = "data:text/html;charset=UTF-8,<div id='two' style='color:green;'>TWO</div>";

--- a/browser/devtools/inspector/test/browser_inspector_bug_958169_switch_to_inspector_on_pick.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_958169_switch_to_inspector_on_pick.js
@ -8,8 +8,6 @@ let doc;
 let toolbox;

 function test() {
-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload(evt) {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_bug_958456_highlight_comments.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_958456_highlight_comments.js
@ -15,7 +15,6 @@ const TEST_PAGE = "http://mochi.test:8888/browser/browser/devtools/inspector/tes
 let inspector, markupView, doc;

 function test() {
-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_bug_961771_picker_stops_on_tool_select.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_961771_picker_stops_on_tool_select.js
@ -8,8 +8,6 @@
 function test() {
  let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});

-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_bug_962478_picker_stops_on_destroy.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_962478_picker_stops_on_destroy.js
@ -8,8 +8,6 @@
 function test() {
  let {Task} = Cu.import("resource://gre/modules/Task.jsm", {});

-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_dead_node_exception.js
+++ b/browser/devtools/inspector/test/browser_inspector_dead_node_exception.js
@ -4,8 +4,6 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
 function test() {
  let contentTab, contentDoc, inspector;

-  waitForExplicitFinish();
-
  // Create a tab
  contentTab = gBrowser.selectedTab = gBrowser.addTab();

--- a/browser/devtools/inspector/test/browser_inspector_destroyselection.js
+++ b/browser/devtools/inspector/test/browser_inspector_destroyselection.js
@ -3,8 +3,6 @@

 function test()
 {
-  waitForExplicitFinish();
-
  let node, iframe, inspector;

  gBrowser.selectedTab = gBrowser.addTab();
--- a/browser/devtools/inspector/test/browser_inspector_highlighter.html
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+    div {
+      position:absolute;
+    }
+
+    #simple-div {
+      padding: 5px;
+      border: 7px solid red;
+      margin: 9px;
+      top: 30px;
+      left: 150px;
+    }
+
+    #rotated-div {
+      padding: 5px;
+      border: 7px solid red;
+      margin: 9px;
+      transform: rotate(45deg);
+      top: 30px;
+      left: 80px;
+    }
+
+    #widthHeightZero-div {
+      top: 30px;
+      left: 10px;
+      width: 0;
+      height: 0;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="simple-div">Gort! Klaatu barada nikto!</div>
+    <div id="rotated-div"></div>
+    <div id="widthHeightZero-div">Width &amp; height = 0</div>
+  </body>
+</html>
--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@ -8,18 +8,18 @@

 // Test that the highlighter is correctly displayed over a variety of elements

-waitForExplicitFinish();
-
 let test = asyncTest(function*() {
-  info("Adding the test tab and creating the document");
-  yield addTab("data:text/html;charset=utf-8,browser_inspector_highlighter.js");
-  createDocument(content.document);
+  const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
+                   "test/browser_inspector_highlighter.html";
+
+  info("Opening the document");
+  yield addTab(TEST_URI);

  info("Opening the inspector");
  let {toolbox, inspector} = yield openInspector();

  info("Selecting the simple, non-transformed DIV");
-  let div = getNode(".simple-div");
+  let div = getNode("#simple-div");
  yield selectNode(div, inspector, "highlight");

  testSimpleDivHighlighted(div);
@ -28,36 +28,24 @@ let test = asyncTest(function*() {
  yield zoomTo(1);

  info("Selecting the rotated DIV");
-  let rotated = getNode(".rotated-div");
+  let rotated = getNode("#rotated-div");
  let onBoxModelUpdate = waitForBoxModelUpdate();
  yield selectNode(rotated, inspector, "highlight");
  yield onBoxModelUpdate;

  testMouseOverRotatedHighlights(rotated);

+  info("Selecting the zero width height DIV");
+  let zeroWidthHeight = getNode("#widthHeightZero-div");
+  let onBoxModelUpdate = waitForBoxModelUpdate();
+  yield selectNode(zeroWidthHeight, inspector, "highlight");
+  yield onBoxModelUpdate;
+
+  testMouseOverWidthHeightZeroDiv(zeroWidthHeight);
+
  gBrowser.removeCurrentTab();
 });

-function createDocument(doc) {
-  info("Creating the test document");
-
-  let div = doc.createElement("div");
-  div.className = "simple-div";
-  div.setAttribute("style",
-                   "padding:5px; border:7px solid red; margin: 9px; " +
-                   "position:absolute; top:30px; left:150px;");
-  div.appendChild(doc.createTextNode("Gort! Klaatu barada nikto!"));
-  doc.body.appendChild(div);
-
-  let rotatedDiv = doc.createElement("div");
-  rotatedDiv.className = "rotated-div";
-  rotatedDiv.setAttribute("style",
-                       "padding:5px; border:7px solid red; margin: 9px; " +
-                       "transform:rotate(45deg); " +
-                       "position:absolute; top:30px; left:80px;");
-  doc.body.appendChild(rotatedDiv);
-}
-
 function testSimpleDivHighlighted(div) {
  ok(isHighlighting(), "The highlighter is shown");
  is(getHighlitNode(), div, "The highlighter's outline corresponds to the simple div");
@ -89,3 +77,10 @@ function testMouseOverRotatedHighlights(rotated) {
  info("Checking that the rotated div is correctly highlighted");
  isNodeCorrectlyHighlighted(rotated, "rotated");
 }
+
+function testMouseOverWidthHeightZeroDiv(zeroHeightWidthDiv) {
+  ok(isHighlighting(), "The highlighter is shown");
+  info("Checking that the zero width height div is correctly highlighted");
+  isNodeCorrectlyHighlighted(zeroHeightWidthDiv, "zero width height");
+
+}
--- a/browser/devtools/inspector/test/browser_inspector_iframeTest.js
+++ b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
@ -99,8 +99,6 @@ function finishUp() {
 }

 function test() {
-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/browser_inspector_infobar.js
+++ b/browser/devtools/inspector/test/browser_inspector_infobar.js
@ -2,7 +2,6 @@
   http://creativecommons.org/publicdomain/zero/1.0/ */

 function test() {
-  waitForExplicitFinish();
  ignoreAllUncaughtExceptions();

  let doc;
--- a/browser/devtools/inspector/test/browser_inspector_initialization.js
+++ b/browser/devtools/inspector/test/browser_inspector_initialization.js
@ -129,7 +129,6 @@ function finishInspectorTests(subject, topic, aWinIdString)

 function test()
 {
-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/browser_inspector_invalidate.js
+++ b/browser/devtools/inspector/test/browser_inspector_invalidate.js
@ -43,7 +43,6 @@ function test() {
    });
  }

-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/browser_inspector_menu.js
+++ b/browser/devtools/inspector/test/browser_inspector_menu.js
@ -5,9 +5,6 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
 function test() {

  let clipboard = require("sdk/clipboard");
-
-  waitForExplicitFinish();
-
  let doc;
  let inspector;

--- a/browser/devtools/inspector/test/browser_inspector_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_navigation.js
@ -8,8 +8,6 @@
 function test() {
  let inspector, toolbox;

-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoClass_menu.js
@ -12,7 +12,6 @@ function test() {
  let menu;
  let inspector;

-  waitForExplicitFinish();
  ignoreAllUncaughtExceptions();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
--- a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
@ -16,8 +16,6 @@ const TEST_URL = 'data:text/html,' +
                 '  </div>' +
                 '</body>';

-waitForExplicitFinish();
-
 function test() {
  ignoreAllUncaughtExceptions();
  gBrowser.selectedTab = gBrowser.addTab();
--- a/browser/devtools/inspector/test/browser_inspector_reload.js
+++ b/browser/devtools/inspector/test/browser_inspector_reload.js
@ -8,8 +8,6 @@
 function test() {
  let inspector, toolbox;

-  waitForExplicitFinish();
-
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
--- a/browser/devtools/inspector/test/browser_inspector_scrolling.js
+++ b/browser/devtools/inspector/test/browser_inspector_scrolling.js
@ -65,7 +65,6 @@ function finishUp()

 function test()
 {
-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/browser_inspector_select_last_selected.js
+++ b/browser/devtools/inspector/test/browser_inspector_select_last_selected.js
@ -9,8 +9,6 @@ function test() {
  let page1 = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_select_last_selected.html";
  let page2 = "http://mochi.test:8888/browser/browser/devtools/inspector/test/browser_inspector_select_last_selected2.html";

-  waitForExplicitFinish();
-
  // Create a tab, load test HTML, wait for load and start the tests
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function onload() {
--- a/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
+++ b/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
@ -60,7 +60,6 @@ function finishTest()

 function test()
 {
-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/browser_inspector_tree_height.js
+++ b/browser/devtools/inspector/test/browser_inspector_tree_height.js
@ -98,7 +98,6 @@ function finishInspectorTests()

 function test()
 {
-  waitForExplicitFinish();
  gBrowser.selectedTab = gBrowser.addTab();
  gBrowser.selectedBrowser.addEventListener("load", function() {
    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@ -16,6 +16,9 @@ const Cc = Components.classes;
 const { Promise: promise } = Cu.import("resource://gre/modules/Promise.jsm", {});
 const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;

+// All test are asynchronous
+waitForExplicitFinish();
+
 let tempScope = {};
 Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", tempScope);
 let LayoutHelpers = tempScope.LayoutHelpers;
@ -507,3 +510,32 @@ SimpleTest.registerCleanupFunction(function () {
  let target = TargetFactory.forTab(gBrowser.selectedTab);
  gDevTools.closeToolbox(target);
 });
+
+/**
+ * Define an async test based on a generator function
+ */
+function asyncTest(generator) {
+  return () => Task.spawn(generator).then(null, ok.bind(null, false)).then(finish);
+}
+
+/**
+ * Add a new test tab in the browser and load the given url.
+ * @param {String} url The url to be loaded in the new tab
+ * @return a promise that resolves to the tab object when the url is loaded
+ */
+function addTab(url) {
+  info("Adding a new tab with URL: '" + url + "'");
+  let def = promise.defer();
+
+  let tab = gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onload() {
+    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+    info("URL '" + url + "' loading complete");
+    waitForFocus(() => {
+      def.resolve(tab);
+    }, content);
+  }, true);
+  content.location = url;
+
+  return def.promise;
+}
--- a/toolkit/devtools/server/actors/highlighter.js
+++ b/toolkit/devtools/server/actors/highlighter.js
@ -481,6 +481,8 @@ function BoxModelHighlighter(tabActor) {
  this.layoutHelpers = new LayoutHelpers(this.win);
  this._initMarkup();
  EventEmitter.decorate(this);
+
+  this._currentNode = null;
 }

 BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
@ -489,6 +491,15 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
               .getInterface(Ci.nsIDOMWindowUtils).fullZoom;
  },

+  get currentNode() {
+    return this._currentNode;
+  },
+
+  set currentNode(node) {
+    this._currentNode = node;
+    this._computedStyle = null;
+  },
+
  _initMarkup: function() {
    let stack = this.browser.parentNode;

@ -612,7 +623,7 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
    this._highlighterContainer = null;

    this.nodeInfo = null;
-    this.rect = null;
+    this._currentNode = null;
  },

  /**
@ -714,29 +725,75 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
   */
  _updateBoxModel: function(options) {
    options.region = options.region || "content";
-    this.rect = this.layoutHelpers.getAdjustedQuads(this.currentNode, "margin");

-    if (!this.rect || (this.rect.bounds.width <= 0 && this.rect.bounds.height <= 0)) {
+    if (this._nodeNeedsHighlighting()) {
+      for (let boxType in this._boxModelNodes) {
+        let {p1, p2, p3, p4} =
+          this.layoutHelpers.getAdjustedQuads(this.currentNode, boxType);
+
+        let boxNode = this._boxModelNodes[boxType];
+        boxNode.setAttribute("points",
+                             p1.x + "," + p1.y + " " +
+                             p2.x + "," + p2.y + " " +
+                             p3.x + "," + p3.y + " " +
+                             p4.x + "," + p4.y);
+
+        if (boxType === options.region) {
+          this._showGuides(p1, p2, p3, p4);
+        }
+      }
+
+      return true;
+    }
+
+    this._hideBoxModel();
+    return false;
+  },
+
+  _nodeNeedsHighlighting: function() {
+    if (!this.currentNode) {
      return false;
    }

-    for (let boxType in this._boxModelNodes) {
-      let {p1, p2, p3, p4} = boxType === "margin" ? this.rect :
-        this.layoutHelpers.getAdjustedQuads(this.currentNode, boxType);
+    if (!this._computedStyle) {
+      this._computedStyle =
+        this.currentNode.ownerDocument.defaultView.getComputedStyle(this.currentNode);
+    }

-      let boxNode = this._boxModelNodes[boxType];
-      boxNode.setAttribute("points",
-                           p1.x + "," + p1.y + " " +
-                           p2.x + "," + p2.y + " " +
-                           p3.x + "," + p3.y + " " +
-                           p4.x + "," + p4.y);
+    return this._computedStyle.getPropertyValue("display") !== "none";
+  },

-      if (boxType === options.region) {
-        this._showGuides(p1, p2, p3, p4);
+  _getOuterBounds: function() {
+    for (let region of ["margin", "border", "padding", "content"]) {
+      let quads = this.layoutHelpers.getAdjustedQuads(this.currentNode, region);
+
+      if (!quads) {
+        // Invisible element such as a script tag.
+        break;
+      }
+
+      let {bottom, height, left, right, top, width, x, y} = quads.bounds;
+
+      if (width > 0 || height > 0) {
+        return this._boundsHelper(bottom, height, left, right, top, width, x, y);
      }
    }

-    return true;
+    return this._boundsHelper();
+  },
+
+  _boundsHelper: function(bottom=0, height=0, left=0, right=0,
+                          top=0, width=0, x=0, y=0) {
+    return {
+      bottom: bottom,
+      height: height,
+      left: left,
+      right: right,
+      top: top,
+      width: width,
+      x: x,
+      y: y
+    };
  },

  /**
@ -867,8 +924,9 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
   * Move the Infobar to the right place in the highlighter.
   */
  _moveInfobar: function() {
-    if (this.rect) {
-      let bounds = this.rect.bounds;
+    let bounds = this._getOuterBounds();
+
+    if (bounds.width > 0 || bounds.height > 0) {
      let winHeight = this.win.innerHeight * this.zoom;
      let winWidth = this.win.innerWidth * this.zoom;