Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 01:05:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1521151 - Make Flexbox Inspector canvas take zoom into account when scrolling r=gl

Browse Source 
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:
Michael Ratcliffe 2019-03-19 15:33:43 +00:00
parent 1e86e44154
commit eecca073ec
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
devtools/server/actors/highlighters/flexbox.js
View File

@ -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 } =

15
devtools/server/actors/highlighters/utils/canvas.js
View File

@ -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",