Bug 1341580 - DevTools Inspector tooltip get element width/height wrong when browser zoomed; r=gl
authorMatteo Ferretti <mferretti@mozilla.com>
Sun, 26 Feb 2017 16:11:51 +0100
changeset 394083 d18a90d8df3e4b7f1182e64cf3eba720bb7febca
parent 394082 c33858dc5b8f482e3b5abec89a5a3038ee484c77
child 394084 4f0fce98dd3a7bdc4d4961a978f328e37bff615e
push id1468
push userasasaki@mozilla.com
push dateMon, 05 Jun 2017 19:31:07 +0000
treeherdermozilla-release@0641fc6ee9d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1341580
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1341580 - DevTools Inspector tooltip get element width/height wrong when browser zoomed; r=gl - Considered page's zoom when element's dimensions are displayed on the infobar - Added unit test MozReview-Commit-ID: 9Mk4ttswpZ2
devtools/client/inspector/test/browser.ini
devtools/client/inspector/test/browser_inspector_infobar_04.js
devtools/server/actors/highlighters/box-model.js
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -111,16 +111,17 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_inspector_highlighter-selector_01.js]
 [browser_inspector_highlighter-selector_02.js]
 [browser_inspector_highlighter-xbl.js]
 [browser_inspector_highlighter-zoom.js]
 [browser_inspector_iframe-navigation.js]
 [browser_inspector_infobar_01.js]
 [browser_inspector_infobar_02.js]
 [browser_inspector_infobar_03.js]
+[browser_inspector_infobar_04.js]
 [browser_inspector_infobar_textnode.js]
 [browser_inspector_initialization.js]
 skip-if = (e10s && debug) # Bug 1250058 - Docshell leak on debug e10s
 [browser_inspector_inspect-object-element.js]
 [browser_inspector_inspect_node_contextmenu.js]
 [browser_inspector_invalidate.js]
 [browser_inspector_keyboard-shortcuts-copy-outerhtml.js]
 subsuite = clipboard
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_infobar_04.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Check the position and text content of the highlighter nodeinfo bar under page zoom.
+
+const TEST_URI = URL_ROOT + "doc_inspector_infobar_01.html";
+
+add_task(function* () {
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
+  let testData = {
+    selector: "#top",
+    dims: "500" + " \u00D7 " + "100"
+  };
+
+  yield testInfobar(testData, inspector, testActor);
+  info("Change zoom page to level 2.");
+  yield testActor.zoomPageTo(2);
+  info("Testing again the infobar after zoom.");
+  yield testInfobar(testData, inspector, testActor);
+});
+
+function* testInfobar(test, inspector, testActor) {
+  info(`Testing ${test.selector}`);
+
+  yield selectAndHighlightNode(test.selector, inspector);
+
+  // Ensure the node is the correct one.
+  let id = yield testActor.getHighlighterNodeTextContent(
+    "box-model-infobar-id");
+  is(id, test.selector, `Node ${test.selector} selected.`);
+
+  let dims = yield testActor.getHighlighterNodeTextContent(
+    "box-model-infobar-dimensions");
+  is(dims, test.dims, "Node's infobar displays the right dimensions.");
+}
--- a/devtools/server/actors/highlighters/box-model.js
+++ b/devtools/server/actors/highlighters/box-model.js
@@ -10,17 +10,20 @@ const {
   CanvasFrameAnonymousContentHelper,
   createNode,
   createSVGNode,
   getBindingElementAndPseudo,
   hasPseudoClassLock,
   isNodeValid,
   moveInfobar,
 } = require("./utils/markup");
-const { setIgnoreLayoutChanges } = require("devtools/shared/layout/utils");
+const {
+  setIgnoreLayoutChanges,
+  getCurrentZoom,
+ } = require("devtools/shared/layout/utils");
 const inspector = require("devtools/server/actors/inspector");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 
 // Note that the order of items in this array is important because it is used
 // for drawing the BoxModelHighlighter's path elements correctly.
 const BOX_MODEL_REGIONS = ["margin", "border", "padding", "content"];
 const BOX_MODEL_SIDES = ["top", "right", "bottom", "left"];
 // Width of boxmodelhighlighter guides
@@ -665,20 +668,24 @@ BoxModelHighlighter.prototype = extend(A
                     : "";
 
     let pseudos = this._getPseudoClasses(node).join("");
     if (pseudo) {
       // Display :after as ::after
       pseudos += ":" + pseudo;
     }
 
-    let rect = this._getOuterQuad("border").bounds;
-    let dim = parseFloat(rect.width.toPrecision(6)) +
+    // We want to display the original `width` and `height`, instead of the ones affected
+    // by any zoom. Since the infobar can be displayed also for text nodes, we can't
+    // access the computed style for that, and this is why we recalculate them here.
+    let zoom = getCurrentZoom(this.win);
+    let { width, height } = this._getOuterQuad("border").bounds;
+    let dim = parseFloat((width / zoom).toPrecision(6)) +
               " \u00D7 " +
-              parseFloat(rect.height.toPrecision(6));
+              parseFloat((height / zoom).toPrecision(6));
 
     this.getElement("infobar-tagname").setTextContent(displayName);
     this.getElement("infobar-id").setTextContent(id);
     this.getElement("infobar-classes").setTextContent(classList);
     this.getElement("infobar-pseudo-classes").setTextContent(pseudos);
     this.getElement("infobar-dimensions").setTextContent(dim);
 
     this._moveInfobar();