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

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);
     }
   },
 

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

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>");

browser/devtools/inspector/test/browser_inspector_breadcrumbs.js

@@ -3,7 +3,6 @@
 
 function test()
 {
-  waitForExplicitFinish();
   ignoreAllUncaughtExceptions();
 
   let nodes = [

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];
 

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;

browser/devtools/inspector/test/browser_inspector_bug_672902_keyboard_shortcuts.js

@@ -7,8 +7,6 @@
 
 function test()
 {
-  waitForExplicitFinish();
-
   let doc;
   let node;
   let inspector;

browser/devtools/inspector/test/browser_inspector_bug_674871.js

@@ -3,8 +3,6 @@
 
 function test()
 {
-  waitForExplicitFinish();
-
   let doc;
   let iframeNode, iframeBodyNode;
   let inspector;

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);

browser/devtools/inspector/test/browser_inspector_bug_817558_delete_node.js

@@ -3,7 +3,6 @@
 
 function test()
 {
-  waitForExplicitFinish();
   //ignoreAllUncaughtExceptions();
 
   let node, iframe, inspector;

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]

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]

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;

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";
 

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() {

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>";
 

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);

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);

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);

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);

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();
 

browser/devtools/inspector/test/browser_inspector_destroyselection.js

@@ -3,8 +3,6 @@
 
 function test()
 {
-  waitForExplicitFinish();
-
   let node, iframe, inspector;
 
   gBrowser.selectedTab = gBrowser.addTab();

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>

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");
+  const TEST_URI = "http://example.com/browser/browser/devtools/inspector/" +
-  yield addTab("data:text/html;charset=utf-8,browser_inspector_highlighter.js");
+                   "test/browser_inspector_highlighter.html";
-  createDocument(content.document);
+
+  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");
+
+}

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);

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;

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);

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);

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;
 

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);

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() {

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();

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);

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);

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() {

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);

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);

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;
+}

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,14 +725,10 @@ 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)) {
-      return false;
-    }
 
+    if (this._nodeNeedsHighlighting()) {
       for (let boxType in this._boxModelNodes) {
-      let {p1, p2, p3, p4} = boxType === "margin" ? this.rect :
+        let {p1, p2, p3, p4} =
           this.layoutHelpers.getAdjustedQuads(this.currentNode, boxType);
 
         let boxNode = this._boxModelNodes[boxType];
@@ -737,6 +744,56 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
       }
 
       return true;
+    }
+
+    this._hideBoxModel();
+    return false;
+  },
+
+  _nodeNeedsHighlighting: function() {
+    if (!this.currentNode) {
+      return false;
+    }
+
+    if (!this._computedStyle) {
+      this._computedStyle =
+        this.currentNode.ownerDocument.defaultView.getComputedStyle(this.currentNode);
+    }
+
+    return this._computedStyle.getPropertyValue("display") !== "none";
+  },
+
+  _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 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._getOuterBounds();
-      let bounds = this.rect.bounds;
+
+    if (bounds.width > 0 || bounds.height > 0) {
       let winHeight = this.win.innerHeight * this.zoom;
       let winWidth = this.win.innerWidth * this.zoom;