Bug 566092 - Inspector highlight doesn't handle reflows correctly; r=rcampbell

browser/devtools/highlighter/highlighter.jsm

@@ -698,12 +698,14 @@ Highlighter.prototype = {
   {
     this.browser.addEventListener("resize", this, true);
     this.browser.addEventListener("scroll", this, true);
+    this.browser.addEventListener("MozAfterPaint", this, true);
   },
 
   detachPageListeners: function Highlighter_detachPageListeners()
   {
     this.browser.removeEventListener("resize", this, true);
     this.browser.removeEventListener("scroll", this, true);
+    this.browser.removeEventListener("MozAfterPaint", this, true);
   },
 
   attachKeysListeners: function Highlighter_attachKeysListeners()
@@ -734,8 +736,10 @@ Highlighter.prototype = {
         this.handleMouseMove(aEvent);
         break;
       case "resize":
-      case "scroll":
         this.computeZoomFactor();
+        break;
+      case "MozAfterPaint":
+      case "scroll":
         this.brieflyDisableTransitions();
         this.invalidateSize();
         break;
@@ -745,7 +749,6 @@ Highlighter.prototype = {
         aEvent.stopPropagation();
         aEvent.preventDefault();
         break;
-        break;
       case "keypress":
         switch (aEvent.keyCode) {
           case this.chromeWin.KeyEvent.DOM_VK_RETURN:

browser/devtools/highlighter/test/Makefile.in

@@ -69,6 +69,7 @@ _BROWSER_FILES = \
 		browser_inspector_changes.js \
 		browser_inspector_ruleviewstore.js \
 		browser_inspector_duplicate_ruleview.js \
+		browser_inspector_invalidate.js \
 		head.js \
 		$(NULL)
 

browser/devtools/highlighter/test/browser_inspector_invalidate.js

@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let doc;
+let div;
+
+function createDocument()
+{
+  div = doc.createElement("div");
+  div.setAttribute("style", "width: 100px; height: 100px;");
+  doc.body.appendChild(div);
+
+  Services.obs.addObserver(runTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runTest(subject)
+{
+  Services.obs.removeObserver(runTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  InspectorUI.highlighter.highlight(div);
+
+  executeSoon(function() {
+    let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
+    is(veilBoxDims.style.width, "100px", "selection has the right width");
+
+    div.style.width = "200px";
+    setTimeout(function () {
+      let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
+      is(veilBoxDims.style.width, "200px", "selection updated");
+      InspectorUI.closeInspectorUI();
+      gBrowser.removeCurrentTab();
+      finish();
+    }, 1000);
+  });
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+