mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1521151 - Make Flexbox Inspector canvas take zoom into account when scrolling r=gl
The Flexbox Inspector uses platform APIs that don't take zoom into account whilst the Grid Inspector uses APIs that do take zoom into account. This means that the zoom calculations when repositioning the canvas need to be different when called from the Flexbox Inspector than when called from the grid inspector. I have added a `zoomWindow` option to `canvas.js::updateCanvasElement()` that allows us to optionally apply zoom to the current canvas position and the flexbox issue reported in the bug now works just fine. All the usual other test cases work just fine with this patch applied. Differential Revision: https://phabricator.services.mozilla.com/D23887 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
1e86e44154
commit
eecca073ec
@ -715,7 +715,9 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
|
||||
|
||||
// Updates the <canvas> element's position and size.
|
||||
// It also clear the <canvas>'s drawing context.
|
||||
updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio);
|
||||
updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio, {
|
||||
zoomWindow: this.win,
|
||||
});
|
||||
|
||||
// Update the current matrix used in our canvas' rendering
|
||||
const { currentMatrix, hasNodeTransformations } =
|
||||
|
@ -14,7 +14,7 @@ const {
|
||||
scale,
|
||||
translate,
|
||||
} = require("devtools/shared/layout/dom-matrix-2d");
|
||||
const { getViewportDimensions } = require("devtools/shared/layout/utils");
|
||||
const { getCurrentZoom, getViewportDimensions } = require("devtools/shared/layout/utils");
|
||||
const { getComputedStyle } = require("./markup");
|
||||
|
||||
// A set of utility functions for highlighters that render their content to a <canvas>
|
||||
@ -426,11 +426,20 @@ function getPointsFromDiagonal(x1, y1, x2, y2, matrix = identity()) {
|
||||
* corner of the page.
|
||||
* @param {Number} devicePixelRatio
|
||||
* The device pixel ratio.
|
||||
* @param {Window} [options.zoomWindow]
|
||||
* Optional window object used to calculate zoom (default = undefined).
|
||||
*/
|
||||
function updateCanvasElement(canvas, canvasPosition, devicePixelRatio) {
|
||||
const { x, y } = canvasPosition;
|
||||
function updateCanvasElement(
|
||||
canvas, canvasPosition, devicePixelRatio, { zoomWindow } = {}) {
|
||||
let { x, y } = canvasPosition;
|
||||
const size = CANVAS_SIZE / devicePixelRatio;
|
||||
|
||||
if (zoomWindow) {
|
||||
const zoom = getCurrentZoom(zoomWindow);
|
||||
x *= zoom;
|
||||
y *= zoom;
|
||||
}
|
||||
|
||||
// Resize the canvas taking the dpr into account so as to have crisp lines, and
|
||||
// translating it to give the perception that it always covers the viewport.
|
||||
canvas.setAttribute("style",
|
||||
|
Loading…
Reference in New Issue
Block a user