зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1370278 - used `getTransformToAncestor` in Grid Inspector highlighter; r=pbro
Used the new chrome-only API to obtain the transformation matrix of the current node, relative to the inspected window's root element. That also includes all the transformations from the element's ancestor; plus the method is more robust and we can simplify the current code, removing also some hack. MozReview-Commit-ID: 35rs34RSMYA
This commit is contained in:
Родитель
73da6dadb9
Коммит
d52072a4a8
|
@ -17,7 +17,6 @@ const {
|
|||
getCurrentZoom,
|
||||
getDisplayPixelRatio,
|
||||
setIgnoreLayoutChanges,
|
||||
getNodeBounds,
|
||||
getViewportDimensions,
|
||||
} = require("devtools/shared/layout/utils");
|
||||
const {
|
||||
|
@ -26,8 +25,8 @@ const {
|
|||
translate,
|
||||
multiply,
|
||||
scale,
|
||||
isIdentity,
|
||||
getNodeTransformationMatrix,
|
||||
getNodeTransformOrigin
|
||||
} = require("devtools/shared/layout/dom-matrix-2d");
|
||||
const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
|
@ -1047,9 +1046,6 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
|
|||
* bug 1355675).
|
||||
*/
|
||||
updateCurrentMatrix() {
|
||||
let origin = getNodeTransformOrigin(this.currentNode);
|
||||
let bounds = getNodeBounds(this.win, this.currentNode);
|
||||
let nodeMatrix = getNodeTransformationMatrix(this.currentNode);
|
||||
let computedStyle = this.currentNode.ownerGlobal.getComputedStyle(this.currentNode);
|
||||
|
||||
let paddingTop = parseFloat(computedStyle.paddingTop);
|
||||
|
@ -1057,32 +1053,25 @@ CssGridHighlighter.prototype = extend(AutoRefreshHighlighter.prototype, {
|
|||
let borderTop = parseFloat(computedStyle.borderTopWidth);
|
||||
let borderLeft = parseFloat(computedStyle.borderLeftWidth);
|
||||
|
||||
// Subtract padding and border values to compensate for top/left being moved by
|
||||
// padding and / or borders.
|
||||
let ox = origin[0] - paddingLeft - borderLeft;
|
||||
let oy = origin[1] - paddingTop - borderTop;
|
||||
let nodeMatrix = getNodeTransformationMatrix(this.currentNode,
|
||||
this.win.document.documentElement);
|
||||
|
||||
let m = identity();
|
||||
|
||||
// First, we scale based on the display's current pixel ratio.
|
||||
m = multiply(m, scale(getDisplayPixelRatio(this.win)));
|
||||
// Then we translate the origin to the node's top left corner.
|
||||
m = multiply(m, translate(bounds.p1.x, bounds.p1.y));
|
||||
// And scale based on the current zoom factor.
|
||||
m = multiply(m, scale(getCurrentZoom(this.win)));
|
||||
// Then translate the origin based on the node's padding and border values.
|
||||
m = multiply(m, translate(paddingLeft + borderLeft, paddingTop + borderTop));
|
||||
// Finally, we can apply the current node's transformation matrix, taking in account
|
||||
// the `transform-origin` property and the node's top and left padding.
|
||||
if (nodeMatrix) {
|
||||
m = multiply(m, translate(ox, oy));
|
||||
m = multiply(m, nodeMatrix);
|
||||
m = multiply(m, translate(-ox, -oy));
|
||||
this.hasNodeTransformations = true;
|
||||
} else {
|
||||
// First, we scale based on the device pixel ratio.
|
||||
m = multiply(m, scale(this.win.devicePixelRatio));
|
||||
// Then, we apply the current node's transformation matrix, relative to the
|
||||
// inspected window's root element, but only if it's not a identity matrix.
|
||||
if (isIdentity(nodeMatrix)) {
|
||||
this.hasNodeTransformations = false;
|
||||
} else {
|
||||
m = multiply(m, nodeMatrix);
|
||||
this.hasNodeTransformations = true;
|
||||
}
|
||||
|
||||
// Finally, we translate the origin based on the node's padding and border values.
|
||||
m = multiply(m, translate(paddingLeft + borderLeft, paddingTop + borderTop));
|
||||
|
||||
this.currentMatrix = m;
|
||||
},
|
||||
|
||||
|
|
|
@ -105,48 +105,34 @@ const apply = (M, P) => [
|
|||
exports.apply = apply;
|
||||
|
||||
/**
|
||||
* Returns the transformation origin point for the given node.
|
||||
* Returns `true` if the given matrix is a identity matrix.
|
||||
*
|
||||
* @param {DOMNode} node
|
||||
* The node.
|
||||
* @return {Array}
|
||||
* The transformation origin point.
|
||||
* @param {Array} M
|
||||
* The matrix to check
|
||||
* @return {Boolean}
|
||||
* `true` if the matrix passed is a identity matrix, `false` otherwise.
|
||||
*/
|
||||
function getNodeTransformOrigin(node) {
|
||||
let origin = node.ownerGlobal.getComputedStyle(node).transformOrigin;
|
||||
|
||||
return origin.split(/ /).map(parseFloat);
|
||||
}
|
||||
exports.getNodeTransformOrigin = getNodeTransformOrigin;
|
||||
const isIdentity = (M) =>
|
||||
M[0] === 1 && M[1] === 0 && M[2] === 0 &&
|
||||
M[3] === 0 && M[4] === 1 && M[5] === 0 &&
|
||||
M[6] === 0 && M[7] === 0 && M[8] === 1;
|
||||
exports.isIdentity = isIdentity;
|
||||
|
||||
/**
|
||||
* Returns the transformation matrix for the given node.
|
||||
* Returns the transformation matrix for the given node, relative to the ancestor passed
|
||||
* as second argument.
|
||||
* If no ancestor is specified, it will returns the transformation matrix relative to the
|
||||
* node's parent element.
|
||||
*
|
||||
* @param {DOMNode} node
|
||||
* The node.
|
||||
* @return {Array}
|
||||
* @param {DOMNode} ancestor
|
||||
* The ancestor of the node given.
|
||||
** @return {Array}
|
||||
* The transformation matrix.
|
||||
*/
|
||||
function getNodeTransformationMatrix(node) {
|
||||
let t = node.ownerGlobal.getComputedStyle(node).transform;
|
||||
|
||||
if (t === "none") {
|
||||
return null;
|
||||
}
|
||||
|
||||
// We're assuming is a 2d matrix.
|
||||
let m = t.substring(t.indexOf("(") + 1, t.length - 1).split(/,\s*/).map(Number);
|
||||
let [a, b, c, d, e, f] = m;
|
||||
|
||||
// If the length is 16, it's a 3d matrix: in that case we'll extrapolate only the values
|
||||
// we need for the 2D transformation; this cover the scenario where 3D CSS properties
|
||||
// are used only for HW acceleration on 2D transformation.
|
||||
if (m.length === 16) {
|
||||
c = m[4];
|
||||
d = m[5];
|
||||
e = m[12];
|
||||
f = m[13];
|
||||
}
|
||||
function getNodeTransformationMatrix(node, ancestor = node.parentElement) {
|
||||
let { a, b, c, d, e, f } = node.getTransformToAncestor(ancestor);
|
||||
|
||||
return [
|
||||
a, c, e,
|
||||
|
|
Загрузка…
Ссылка в новой задаче