From 32230477c611d6baddb4f2f6caf5c55c8b8cc198 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 28 Feb 2018 08:41:01 +0100 Subject: DevTools - Inspector - tooltip get element width/height wrong when browser zoomed https://github.com/MoonchildProductions/moebius/pull/54 --- devtools/client/inspector/test/browser.ini | 1 + .../inspector/test/browser_inspector_infobar_04.js | 38 ++++++++++++++++++++++ devtools/server/actors/highlighters/box-model.js | 15 ++++++--- 3 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 devtools/client/inspector/test/browser_inspector_infobar_04.js diff --git a/devtools/client/inspector/test/browser.ini b/devtools/client/inspector/test/browser.ini index 65ad71c0c..499df25f0 100644 --- a/devtools/client/inspector/test/browser.ini +++ b/devtools/client/inspector/test/browser.ini @@ -113,6 +113,7 @@ subsuite = clipboard [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 diff --git a/devtools/client/inspector/test/browser_inspector_infobar_04.js b/devtools/client/inspector/test/browser_inspector_infobar_04.js new file mode 100644 index 000000000..f1b9eca49 --- /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."); +} diff --git a/devtools/server/actors/highlighters/box-model.js b/devtools/server/actors/highlighters/box-model.js index 35f201a04..ae4284424 100644 --- a/devtools/server/actors/highlighters/box-model.js +++ b/devtools/server/actors/highlighters/box-model.js @@ -15,7 +15,10 @@ const { 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"); @@ -670,10 +673,14 @@ BoxModelHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, { 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); -- cgit v1.2.3