Bug 689939 - Infobar disappears when node fills top and bottom of screen during page zoom in highlighter; r=rcampbell

browser/devtools/highlighter/inspector.jsm

@@ -160,6 +160,7 @@ Highlighter.prototype = {
 
     this.transitionDisabler = null;
 
+    this.computeZoomFactor();
     this.handleResize();
   },
 
@@ -441,16 +442,10 @@ Highlighter.prototype = {
       return this._highlighting; // same rectangle
     }
 
-    // get page zoom factor, if any
-    let zoom =
-      this.win.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-      .getInterface(Components.interfaces.nsIDOMWindowUtils)
-      .screenPixelsPerCSSPixel;
-
     // adjust rect for zoom scaling
     let aRectScaled = {};
     for (let prop in aRect) {
-      aRectScaled[prop] = aRect[prop] * zoom;
+      aRectScaled[prop] = aRect[prop] * this.zoom;
     }
 
     if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
@@ -545,7 +540,7 @@ Highlighter.prototype = {
       if (rect.top < this.nodeInfo.barHeight) {
         // No. Can we move the toolbar under the node?
         if (rect.top + rect.height +
-            this.nodeInfo.barHeight > this.win.innerHeight) {
+            this.nodeInfo.barHeight > winHeight) {
           // No. Let's move it inside.
           this.nodeInfo.container.style.top = rect.top + "px";
           this.nodeInfo.container.setAttribute("position", "overlap");
@@ -569,8 +564,8 @@ Highlighter.prototype = {
         left = 0;
         this.nodeInfo.container.setAttribute("hide-arrow", "true");
       } else {
-        if (left + barWidth > this.win.innerWidth) {
-          left = this.win.innerWidth - barWidth;
+        if (left + barWidth > winWidth) {
+          left = winWidth - barWidth;
           this.nodeInfo.container.setAttribute("hide-arrow", "true");
         } else {
           this.nodeInfo.container.removeAttribute("hide-arrow");
@@ -653,6 +648,16 @@ Highlighter.prototype = {
     return !INSPECTOR_INVISIBLE_ELEMENTS[nodeName];
   },
 
+  /**
+   * Store page zoom factor.
+   */
+  computeZoomFactor: function Highlighter_computeZoomFactor() {
+    this.zoom =
+      this.win.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+      .getInterface(Components.interfaces.nsIDOMWindowUtils)
+      .screenPixelsPerCSSPixel;
+  },
+
   /////////////////////////////////////////////////////////////////////////
   //// Event Handling
 
@@ -691,6 +696,7 @@ Highlighter.prototype = {
         this.handleMouseMove(aEvent);
         break;
       case "resize":
+        this.computeZoomFactor();
         this.brieflyDisableTransitions();
         this.handleResize(aEvent);
         break;

browser/devtools/highlighter/test/browser_inspector_highlighter.js

@@ -153,29 +153,27 @@ function finishTestComparisons()
                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
   contentViewer.fullZoom = 2;
 
-  // check what zoom factor we're at, should be 2
-  let zoom =
-      InspectorUI.win.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-      .getInterface(Components.interfaces.nsIDOMWindowUtils)
-      .screenPixelsPerCSSPixel;
+  executeSoon(function() {
+    // check what zoom factor we're at, should be 2
+    let zoom = InspectorUI.highlighter.zoom;
+    is(zoom, 2, "zoom is 2?");
 
-  is(zoom, 2, "zoom is 2?");
+    // simulate the zoomed dimensions of the div element
+    let divDims = div.getBoundingClientRect();
+    let divWidth = divDims.width * zoom;
+    let divHeight = divDims.height * zoom;
 
-  // simulate the zoomed dimensions of the div element
-  let divDims = div.getBoundingClientRect();
-  let divWidth = divDims.width * zoom;
-  let divHeight = divDims.height * zoom;
+    // now zoomed, get new dimensions of transparent veil box over element
+    let veilBoxDims = InspectorUI.highlighter.veilTransparentBox.getBoundingClientRect();
+    let veilBoxWidth = veilBoxDims.width;
+    let veilBoxHeight = veilBoxDims.height;
 
-  // now zoomed, get new dimensions of transparent veil box over element
-  let veilBoxDims = InspectorUI.highlighter.veilTransparentBox.getBoundingClientRect();
-  let veilBoxWidth = veilBoxDims.width;
-  let veilBoxHeight = veilBoxDims.height;
+    is(veilBoxWidth, divWidth, "transparent veil box width matches width of element (2x zoom)");
+    is(veilBoxHeight, divHeight, "transparent veil box height matches width of element (2x zoom)");
 
-  is(veilBoxWidth, divWidth, "transparent veil box width matches width of element (2x zoom)");
-  is(veilBoxHeight, divHeight, "transparent veil box height matches width of element (2x zoom)");
-
-  doc = h1 = div = null;
-  executeSoon(finishUp);
+    doc = h1 = div = null;
+    executeSoon(finishUp);
+  });
 }
 
 function finishUp() {