diff options
Diffstat (limited to 'devtools/shared/layout')
| -rw-r--r-- | devtools/shared/layout/dom-matrix-2d.js | 297 | ||||
| -rw-r--r-- | devtools/shared/layout/moz.build | 7 | ||||
| -rw-r--r-- | devtools/shared/layout/utils.js | 927 |
3 files changed, 1231 insertions, 0 deletions
diff --git a/devtools/shared/layout/dom-matrix-2d.js b/devtools/shared/layout/dom-matrix-2d.js new file mode 100644 index 0000000000..f6e3e73067 --- /dev/null +++ b/devtools/shared/layout/dom-matrix-2d.js @@ -0,0 +1,297 @@ +/* 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"; + +/** + * Returns a matrix for the scaling given. + * Calling `scale()` or `scale(1) returns a new identity matrix. + * + * @param {Number} [sx = 1] + * the abscissa of the scaling vector. + * If unspecified, it will equal to `1`. + * @param {Number} [sy = sx] + * The ordinate of the scaling vector. + * If not present, its default value is `sx`, leading to a uniform scaling. + * @return {Array} + * The new matrix. + */ +const scale = (sx = 1, sy = sx) => [sx, 0, 0, 0, sy, 0, 0, 0, 1]; +exports.scale = scale; + +/** + * Returns a matrix for the translation given. + * Calling `translate()` or `translate(0) returns a new identity matrix. + * + * @param {Number} [tx = 0] + * The abscissa of the translating vector. + * If unspecified, it will equal to `0`. + * @param {Number} [ty = tx] + * The ordinate of the translating vector. + * If unspecified, it will equal to `tx`. + * @return {Array} + * The new matrix. + */ +const translate = (tx = 0, ty = tx) => [1, 0, tx, 0, 1, ty, 0, 0, 1]; +exports.translate = translate; + +/** + * Returns a matrix that reflects about the Y axis. For example, the point (x1, y1) would + * become (-x1, y1). + * + * @return {Array} + * The new matrix. + */ +const reflectAboutY = () => [-1, 0, 0, 0, 1, 0, 0, 0, 1]; +exports.reflectAboutY = reflectAboutY; + +/** + * Returns a matrix for the rotation given. + * Calling `rotate()` or `rotate(0)` returns a new identity matrix. + * + * @param {Number} [angle = 0] + * The angle, in radians, for which to return a corresponding rotation matrix. + * If unspecified, it will equal `0`. + * @return {Array} + * The new matrix. + */ +const rotate = (angle = 0) => { + const cos = Math.cos(angle); + const sin = Math.sin(angle); + + return [cos, sin, 0, -sin, cos, 0, 0, 0, 1]; +}; +exports.rotate = rotate; + +/** + * Returns a new identity matrix. + * + * @return {Array} + * The new matrix. + */ +const identity = () => [1, 0, 0, 0, 1, 0, 0, 0, 1]; +exports.identity = identity; + +/** + * Multiplies two matrices and returns a new matrix with the result. + * + * @param {Array} M1 + * The first operand. + * @param {Array} M2 + * The second operand. + * @return {Array} + * The resulting matrix. + */ +const multiply = (M1, M2) => { + const c11 = M1[0] * M2[0] + M1[1] * M2[3] + M1[2] * M2[6]; + const c12 = M1[0] * M2[1] + M1[1] * M2[4] + M1[2] * M2[7]; + const c13 = M1[0] * M2[2] + M1[1] * M2[5] + M1[2] * M2[8]; + + const c21 = M1[3] * M2[0] + M1[4] * M2[3] + M1[5] * M2[6]; + const c22 = M1[3] * M2[1] + M1[4] * M2[4] + M1[5] * M2[7]; + const c23 = M1[3] * M2[2] + M1[4] * M2[5] + M1[5] * M2[8]; + + const c31 = M1[6] * M2[0] + M1[7] * M2[3] + M1[8] * M2[6]; + const c32 = M1[6] * M2[1] + M1[7] * M2[4] + M1[8] * M2[7]; + const c33 = M1[6] * M2[2] + M1[7] * M2[5] + M1[8] * M2[8]; + + return [c11, c12, c13, c21, c22, c23, c31, c32, c33]; +}; +exports.multiply = multiply; + +/** + * Applies the given matrix to a point. + * + * @param {Array} M + * The matrix to apply. + * @param {Array} P + * The point's vector. + * @return {Array} + * The resulting point's vector. + */ +const apply = (M, P) => [ + M[0] * P[0] + M[1] * P[1] + M[2], + M[3] * P[0] + M[4] * P[1] + M[5], +]; +exports.apply = apply; + +/** + * Returns `true` if the given matrix is a identity matrix. + * + * @param {Array} M + * The matrix to check + * @return {Boolean} + * `true` if the matrix passed is a identity matrix, `false` otherwise. + */ +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; + +/** + * Get the change of basis matrix and inverted change of basis matrix + * for the coordinate system based on the two given vectors, as well as + * the lengths of the two given vectors. + * + * @param {Array} u + * The first vector, serving as the "x axis" of the coordinate system. + * @param {Array} v + * The second vector, serving as the "y axis" of the coordinate system. + * @return {Object} + * { basis, invertedBasis, uLength, vLength } + * basis and invertedBasis are the change of basis matrices. uLength and + * vLength are the lengths of u and v. + */ +const getBasis = (u, v) => { + const uLength = Math.abs(Math.sqrt(u[0] ** 2 + u[1] ** 2)); + const vLength = Math.abs(Math.sqrt(v[0] ** 2 + v[1] ** 2)); + const basis = [ + u[0] / uLength, + v[0] / vLength, + 0, + u[1] / uLength, + v[1] / vLength, + 0, + 0, + 0, + 1, + ]; + const determinant = 1 / (basis[0] * basis[4] - basis[1] * basis[3]); + const invertedBasis = [ + basis[4] / determinant, + -basis[1] / determinant, + 0, + -basis[3] / determinant, + basis[0] / determinant, + 0, + 0, + 0, + 1, + ]; + return { basis, invertedBasis, uLength, vLength }; +}; +exports.getBasis = getBasis; + +/** + * Convert the given matrix to a new coordinate system, based on the change of basis + * matrix. + * + * @param {Array} M + * The matrix to convert + * @param {Array} basis + * The change of basis matrix + * @param {Array} invertedBasis + * The inverted change of basis matrix + * @return {Array} + * The converted matrix. + */ +const changeMatrixBase = (M, basis, invertedBasis) => { + return multiply(invertedBasis, multiply(M, basis)); +}; +exports.changeMatrixBase = changeMatrixBase; + +/** + * Returns the transformation matrix for the given node, relative to the ancestor passed + * as second argument; considering the ancestor transformation too. + * If no ancestor is specified, it will returns the transformation matrix relative to the + * node's parent element. + * + * @param {DOMNode} node + * The node. + * @param {DOMNode} ancestor + * The ancestor of the node given. + * @return {Array} + * The transformation matrix. + */ +function getNodeTransformationMatrix(node, ancestor = node.parentElement) { + const { a, b, c, d, e, f } = ancestor + .getTransformToParent() + .multiply(node.getTransformToAncestor(ancestor)); + + return [a, c, e, b, d, f, 0, 0, 1]; +} +exports.getNodeTransformationMatrix = getNodeTransformationMatrix; + +/** + * Returns the matrix to rotate, translate, and reflect (if needed) from the element's + * top-left origin into the actual writing mode and text direction applied to the element. + * + * @param {Object} size + * An element's untransformed content `width` and `height` (excluding any margin, + * borders, or padding). + * @param {Object} style + * The computed `writingMode` and `direction` properties for the element. + * @return {Array} + * The matrix with adjustments for writing mode and text direction, if any. + */ +function getWritingModeMatrix(size, style) { + let currentMatrix = identity(); + const { width, height } = size; + const { direction, writingMode } = style; + + switch (writingMode) { + case "horizontal-tb": + // This is the initial value. No further adjustment needed. + break; + case "vertical-rl": + currentMatrix = multiply(translate(width, 0), rotate(-Math.PI / 2)); + break; + case "vertical-lr": + currentMatrix = multiply(reflectAboutY(), rotate(-Math.PI / 2)); + break; + case "sideways-rl": + currentMatrix = multiply(translate(width, 0), rotate(-Math.PI / 2)); + break; + case "sideways-lr": + currentMatrix = multiply(rotate(Math.PI / 2), translate(-height, 0)); + break; + default: + console.error(`Unexpected writing-mode: ${writingMode}`); + } + + switch (direction) { + case "ltr": + // This is the initial value. No further adjustment needed. + break; + case "rtl": + let rowLength = width; + if (writingMode != "horizontal-tb") { + rowLength = height; + } + currentMatrix = multiply(currentMatrix, translate(rowLength, 0)); + currentMatrix = multiply(currentMatrix, reflectAboutY()); + break; + default: + console.error(`Unexpected direction: ${direction}`); + } + + return currentMatrix; +} +exports.getWritingModeMatrix = getWritingModeMatrix; + +/** + * Convert from the matrix format used in this module: + * a, c, e, + * b, d, f, + * 0, 0, 1 + * to the format used by the `matrix()` CSS transform function: + * a, b, c, d, e, f + * + * @param {Array} M + * The matrix in this module's 9 element format. + * @return {String} + * The matching 6 element CSS transform function. + */ +function getCSSMatrixTransform(M) { + const [a, c, e, b, d, f] = M; + return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`; +} +exports.getCSSMatrixTransform = getCSSMatrixTransform; diff --git a/devtools/shared/layout/moz.build b/devtools/shared/layout/moz.build new file mode 100644 index 0000000000..da30931458 --- /dev/null +++ b/devtools/shared/layout/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules("dom-matrix-2d.js", "utils.js") diff --git a/devtools/shared/layout/utils.js b/devtools/shared/layout/utils.js new file mode 100644 index 0000000000..ebd2353414 --- /dev/null +++ b/devtools/shared/layout/utils.js @@ -0,0 +1,927 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "DevToolsUtils", + "resource://devtools/shared/DevToolsUtils.js" +); +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + NetUtil: "resource://gre/modules/NetUtil.sys.mjs", +}); + +const SHEET_TYPE = { + agent: "AGENT_SHEET", + user: "USER_SHEET", + author: "AUTHOR_SHEET", +}; + +// eslint-disable-next-line no-unused-vars +loader.lazyRequireGetter( + this, + "setIgnoreLayoutChanges", + "resource://devtools/server/actors/reflow.js", + true +); +exports.setIgnoreLayoutChanges = (...args) => + this.setIgnoreLayoutChanges(...args); + +/** + * Returns the `DOMWindowUtils` for the window given. + * + * @param {DOMWindow} win + * @returns {DOMWindowUtils} + */ +const utilsCache = new WeakMap(); +function utilsFor(win) { + // XXXbz Given that we now have a direct getter for the DOMWindowUtils, is + // this weakmap cache path any faster than just calling the getter? + if (!utilsCache.has(win)) { + utilsCache.set(win, win.windowUtils); + } + return utilsCache.get(win); +} + +/** + * Check a window is part of the boundary window given. + * + * @param {DOMWindow} boundaryWindow + * @param {DOMWindow} win + * @return {Boolean} + */ +function isWindowIncluded(boundaryWindow, win) { + if (win === boundaryWindow) { + return true; + } + + const parent = win.parent; + + if (!parent || parent === win) { + return false; + } + + return isWindowIncluded(boundaryWindow, parent); +} +exports.isWindowIncluded = isWindowIncluded; + +/** + * like win.frameElement, but goes through mozbrowsers and mozapps iframes. + * + * @param {DOMWindow} win + * The window to get the frame for + * @return {DOMNode} + * The element in which the window is embedded. + */ +const getFrameElement = win => { + const isTopWindow = win && DevToolsUtils.getTopWindow(win) === win; + return isTopWindow ? null : win.browsingContext.embedderElement; +}; +exports.getFrameElement = getFrameElement; + +/** + * Get the x/y offsets for of all the parent frames of a given node, limited to + * the boundary window given. + * + * @param {DOMWindow} boundaryWindow + * The window where to stop to iterate. If `null` is given, the top + * window is used. + * @param {DOMNode} node + * The node for which we are to get the offset + * @return {Array} + * The frame offset [x, y] + */ +function getFrameOffsets(boundaryWindow, node) { + let xOffset = 0; + let yOffset = 0; + + let frameWin = getWindowFor(node); + const scale = getCurrentZoom(node); + + if (boundaryWindow === null) { + boundaryWindow = DevToolsUtils.getTopWindow(frameWin); + } else if (typeof boundaryWindow === "undefined") { + throw new Error("No boundaryWindow given. Use null for the default one."); + } + + while (frameWin !== boundaryWindow) { + const frameElement = getFrameElement(frameWin); + if (!frameElement) { + break; + } + + // We are in an iframe. + // We take into account the parent iframe position and its + // offset (borders and padding). + const frameRect = frameElement.getBoundingClientRect(); + + const [offsetTop, offsetLeft] = getFrameContentOffset(frameElement); + + xOffset += frameRect.left + offsetLeft; + yOffset += frameRect.top + offsetTop; + + frameWin = frameWin.parent; + } + + return [xOffset * scale, yOffset * scale]; +} +exports.getFrameOffsets = getFrameOffsets; + +/** + * Get box quads adjusted for iframes and zoom level. + * + * Warning: this function returns things that look like DOMQuad objects but + * aren't (they resemble an old version of the spec). Unlike the return value + * of node.getBoxQuads, they have a .bounds property and not a .getBounds() + * method. + * + * @param {DOMWindow} boundaryWindow + * The window where to stop to iterate. If `null` is given, the top + * window is used. + * @param {DOMNode} node + * The node for which we are to get the box model region + * quads. + * @param {String} region + * The box model region to return: "content", "padding", "border" or + * "margin". + * @param {Object} [options.ignoreZoom=false] + * Ignore zoom used in the context of e.g. canvas. + * @return {Array} + * An array of objects that have the same structure as quads returned by + * getBoxQuads. An empty array if the node has no quads or is invalid. + */ +function getAdjustedQuads( + boundaryWindow, + node, + region, + { ignoreZoom, ignoreScroll } = {} +) { + if (!node || !node.getBoxQuads) { + return []; + } + + const quads = node.getBoxQuads({ + box: region, + relativeTo: boundaryWindow.document, + createFramesForSuppressedWhitespace: false, + }); + + if (!quads.length) { + return []; + } + + const scale = ignoreZoom ? 1 : getCurrentZoom(node); + const { scrollX, scrollY } = ignoreScroll + ? { scrollX: 0, scrollY: 0 } + : boundaryWindow; + + const xOffset = scrollX * scale; + const yOffset = scrollY * scale; + + const adjustedQuads = []; + for (const quad of quads) { + const bounds = quad.getBounds(); + adjustedQuads.push({ + p1: { + w: quad.p1.w * scale, + x: quad.p1.x * scale + xOffset, + y: quad.p1.y * scale + yOffset, + z: quad.p1.z * scale, + }, + p2: { + w: quad.p2.w * scale, + x: quad.p2.x * scale + xOffset, + y: quad.p2.y * scale + yOffset, + z: quad.p2.z * scale, + }, + p3: { + w: quad.p3.w * scale, + x: quad.p3.x * scale + xOffset, + y: quad.p3.y * scale + yOffset, + z: quad.p3.z * scale, + }, + p4: { + w: quad.p4.w * scale, + x: quad.p4.x * scale + xOffset, + y: quad.p4.y * scale + yOffset, + z: quad.p4.z * scale, + }, + bounds: { + bottom: bounds.bottom * scale + yOffset, + height: bounds.height * scale, + left: bounds.left * scale + xOffset, + right: bounds.right * scale + xOffset, + top: bounds.top * scale + yOffset, + width: bounds.width * scale, + x: bounds.x * scale + xOffset, + y: bounds.y * scale + yOffset, + }, + }); + } + + return adjustedQuads; +} +exports.getAdjustedQuads = getAdjustedQuads; + +/** + * Compute the absolute position and the dimensions of a node, relativalely + * to the root window. + + * @param {DOMWindow} boundaryWindow + * The window where to stop to iterate. If `null` is given, the top + * window is used. + * @param {DOMNode} node + * a DOM element to get the bounds for + * @param {DOMWindow} contentWindow + * the content window holding the node + * @return {Object} + * A rect object with the {top, left, width, height} properties + */ +function getRect(boundaryWindow, node, contentWindow) { + let frameWin = node.ownerDocument.defaultView; + const clientRect = node.getBoundingClientRect(); + + if (boundaryWindow === null) { + boundaryWindow = DevToolsUtils.getTopWindow(frameWin); + } else if (typeof boundaryWindow === "undefined") { + throw new Error("No boundaryWindow given. Use null for the default one."); + } + + // Go up in the tree of frames to determine the correct rectangle. + // clientRect is read-only, we need to be able to change properties. + const rect = { + top: clientRect.top + contentWindow.pageYOffset, + left: clientRect.left + contentWindow.pageXOffset, + width: clientRect.width, + height: clientRect.height, + }; + + // We iterate through all the parent windows. + while (frameWin !== boundaryWindow) { + const frameElement = getFrameElement(frameWin); + if (!frameElement) { + break; + } + + // We are in an iframe. + // We take into account the parent iframe position and its + // offset (borders and padding). + const frameRect = frameElement.getBoundingClientRect(); + + const [offsetTop, offsetLeft] = getFrameContentOffset(frameElement); + + rect.top += frameRect.top + offsetTop; + rect.left += frameRect.left + offsetLeft; + + frameWin = frameWin.parent; + } + + return rect; +} +exports.getRect = getRect; + +/** + * Get the 4 bounding points for a node taking iframes into account. + * Note that for transformed nodes, this will return the untransformed bound. + * + * @param {DOMWindow} boundaryWindow + * The window where to stop to iterate. If `null` is given, the top + * window is used. + * @param {DOMNode} node + * @return {Object} + * An object with p1,p2,p3,p4 properties being {x,y} objects + */ +function getNodeBounds(boundaryWindow, node) { + if (!node) { + return null; + } + const { scrollX, scrollY } = boundaryWindow; + const scale = getCurrentZoom(node); + + // Find out the offset of the node in its current frame + let offsetLeft = 0; + let offsetTop = 0; + let el = node; + while (el?.parentNode) { + offsetLeft += el.offsetLeft; + offsetTop += el.offsetTop; + el = el.offsetParent; + } + + // Also take scrolled containers into account + el = node; + while (el?.parentNode) { + if (el.scrollTop) { + offsetTop -= el.scrollTop; + } + if (el.scrollLeft) { + offsetLeft -= el.scrollLeft; + } + el = el.parentNode; + } + + // And add the potential frame offset if the node is nested + let [xOffset, yOffset] = getFrameOffsets(boundaryWindow, node); + xOffset += (offsetLeft + scrollX) * scale; + yOffset += (offsetTop + scrollY) * scale; + + // Get the width and height + const width = node.offsetWidth * scale; + const height = node.offsetHeight * scale; + + return { + p1: { x: xOffset, y: yOffset }, + p2: { x: xOffset + width, y: yOffset }, + p3: { x: xOffset + width, y: yOffset + height }, + p4: { x: xOffset, y: yOffset + height }, + top: yOffset, + right: xOffset + width, + bottom: yOffset + height, + left: xOffset, + width, + height, + }; +} +exports.getNodeBounds = getNodeBounds; + +/** + * Same as doing iframe.contentWindow but works with all types of container + * elements that act like frames (e.g. <embed>), where 'contentWindow' isn't a + * property that can be accessed. + * This uses the inIDeepTreeWalker instead. + * @param {DOMNode} frame + * @return {Window} + */ +function safelyGetContentWindow(frame) { + if (frame.contentWindow) { + return frame.contentWindow; + } + + const walker = Cc["@mozilla.org/inspector/deep-tree-walker;1"].createInstance( + Ci.inIDeepTreeWalker + ); + walker.showSubDocuments = true; + walker.showDocumentsAsNodes = true; + walker.init(frame); + walker.currentNode = frame; + + const document = walker.nextNode(); + if (!document || !document.defaultView) { + throw new Error("Couldn't get the content window inside frame " + frame); + } + + return document.defaultView; +} + +/** + * Returns a frame's content offset (frame border + padding). + * Note: this function shouldn't need to exist, had the platform provided a + * suitable API for determining the offset between the frame's content and + * its bounding client rect. Bug 626359 should provide us with such an API. + * + * @param {DOMNode} frame + * The frame. + * @return {Array} [offsetTop, offsetLeft] + * offsetTop is the distance from the top of the frame and the top of + * the content document. + * offsetLeft is the distance from the left of the frame and the left + * of the content document. + */ +function getFrameContentOffset(frame) { + const style = safelyGetContentWindow(frame).getComputedStyle(frame); + + // In some cases, the computed style is null + if (!style) { + return [0, 0]; + } + + const paddingTop = parseInt(style.getPropertyValue("padding-top"), 10); + const paddingLeft = parseInt(style.getPropertyValue("padding-left"), 10); + + const borderTop = parseInt(style.getPropertyValue("border-top-width"), 10); + const borderLeft = parseInt(style.getPropertyValue("border-left-width"), 10); + + return [borderTop + paddingTop, borderLeft + paddingLeft]; +} + +/** + * Check if a node and its document are still alive + * and attached to the window. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isNodeConnected(node) { + if (!node.ownerDocument || !node.ownerDocument.defaultView) { + return false; + } + + try { + return !( + node.compareDocumentPosition(node.ownerDocument.documentElement) & + node.DOCUMENT_POSITION_DISCONNECTED + ); + } catch (e) { + // "can't access dead object" error + return false; + } +} +exports.isNodeConnected = isNodeConnected; + +/** + * Determine whether a node is anonymous. + * + * @param {DOMNode} node + * @return {Boolean} + * + * FIXME(bug 1597411): Remove one of these (or both, as + * `node.isNativeAnonymous` is quite clear). + */ +const isAnonymous = node => node.isNativeAnonymous; +exports.isAnonymous = isAnonymous; +exports.isNativeAnonymous = isAnonymous; + +/** + * Determine whether a node is a template element. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isTemplateElement(node) { + return ( + node.ownerGlobal && node.ownerGlobal.HTMLTemplateElement.isInstance(node) + ); +} +exports.isTemplateElement = isTemplateElement; + +/** + * Determine whether a node is a shadow root. + * + * @param {DOMNode} node + * @return {Boolean} + */ +const isShadowRoot = node => node.containingShadowRoot == node; +exports.isShadowRoot = isShadowRoot; + +/* + * Gets the shadow root mode (open or closed). + * + * @param {DOMNode} node + * @return {String|null} + */ +function getShadowRootMode(node) { + return isShadowRoot(node) ? node.mode : null; +} +exports.getShadowRootMode = getShadowRootMode; + +/** + * Determine whether a node is a shadow host, ie. an element that has a shadowRoot + * attached to itself. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isShadowHost(node) { + const shadowRoot = node.openOrClosedShadowRoot; + return shadowRoot && shadowRoot.nodeType === Node.DOCUMENT_FRAGMENT_NODE; +} +exports.isShadowHost = isShadowHost; + +/** + * Determine whether a node is a child of a shadow host. Even if the element has been + * assigned to a slot in the attached shadow DOM, the parent node for this element is + * still considered to be the "host" element, and we need to walk them differently. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isDirectShadowHostChild(node) { + // Pseudo elements and native anonymous elements are always part of the anonymous tree. + if ( + isMarkerPseudoElement(node) || + isBeforePseudoElement(node) || + isAfterPseudoElement(node) || + node.isNativeAnonymous + ) { + return false; + } + + const parentNode = node.parentNode; + return parentNode && !!parentNode.openOrClosedShadowRoot; +} +exports.isDirectShadowHostChild = isDirectShadowHostChild; + +/** + * Determine whether a node is a ::marker pseudo. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isMarkerPseudoElement(node) { + return node.nodeName === "_moz_generated_content_marker"; +} +exports.isMarkerPseudoElement = isMarkerPseudoElement; + +/** + * Determine whether a node is a ::before pseudo. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isBeforePseudoElement(node) { + return node.nodeName === "_moz_generated_content_before"; +} +exports.isBeforePseudoElement = isBeforePseudoElement; + +/** + * Determine whether a node is a ::after pseudo. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isAfterPseudoElement(node) { + return node.nodeName === "_moz_generated_content_after"; +} +exports.isAfterPseudoElement = isAfterPseudoElement; + +/** + * Get the current zoom factor applied to the container window of a given node. + * @param {DOMNode|DOMWindow} + * The node for which the zoom factor should be calculated, or its + * owner window. + * @return {Number} + */ +function getCurrentZoom(node) { + const win = getWindowFor(node); + + if (!win) { + throw new Error("Unable to get the zoom from the given argument."); + } + + return win.browsingContext?.fullZoom || 1.0; +} +exports.getCurrentZoom = getCurrentZoom; + +/** + * Get the display pixel ratio for a given window. + * The `devicePixelRatio` property is affected by the zoom (see bug 809788), so we have to + * divide by the zoom value in order to get just the display density, expressed as pixel + * ratio (the physical display pixel compares to a pixel on a “normal” density screen). + * + * @param {DOMNode|DOMWindow} + * The node for which the zoom factor should be calculated, or its + * owner window. + * @return {Number} + */ +function getDisplayPixelRatio(node) { + const win = getWindowFor(node); + return win.devicePixelRatio / getCurrentZoom(node); +} +exports.getDisplayPixelRatio = getDisplayPixelRatio; + +/** + * Returns the window's dimensions for the `window` given. + * + * @return {Object} An object with `width` and `height` properties, representing the + * number of pixels for the document's size. + */ +function getWindowDimensions(window) { + // First we'll try without flushing layout, because it's way faster. + const windowUtils = utilsFor(window); + let { width, height } = windowUtils.getRootBounds(); + + if (!width || !height) { + // We need a flush after all :'( + width = window.innerWidth + window.scrollMaxX - window.scrollMinX; + height = window.innerHeight + window.scrollMaxY - window.scrollMinY; + + const scrollbarHeight = {}; + const scrollbarWidth = {}; + windowUtils.getScrollbarSize(false, scrollbarWidth, scrollbarHeight); + width -= scrollbarWidth.value; + height -= scrollbarHeight.value; + } + + return { width, height }; +} +exports.getWindowDimensions = getWindowDimensions; + +/** + * Returns the viewport's dimensions for the `window` given. + * + * @return {Object} An object with `width` and `height` properties, representing the + * number of pixels for the viewport's size. + */ +function getViewportDimensions(window) { + const windowUtils = utilsFor(window); + + const scrollbarHeight = {}; + const scrollbarWidth = {}; + windowUtils.getScrollbarSize(false, scrollbarWidth, scrollbarHeight); + + const width = window.innerWidth - scrollbarWidth.value; + const height = window.innerHeight - scrollbarHeight.value; + + return { width, height }; +} +exports.getViewportDimensions = getViewportDimensions; + +/** + * Return the default view for a given node, where node can be: + * - a DOM node + * - the document node + * - the window itself + * @param {DOMNode|DOMWindow|DOMDocument} node The node to get the window for. + * @return {DOMWindow} + */ +function getWindowFor(node) { + if (Node.isInstance(node)) { + if (node.nodeType === node.DOCUMENT_NODE) { + return node.defaultView; + } + return node.ownerDocument.defaultView; + } else if (node instanceof Ci.nsIDOMWindow) { + return node; + } + return null; +} + +/** + * Synchronously loads a style sheet from `uri` and adds it to the list of + * additional style sheets of the document. + * The sheets added takes effect immediately, and only on the document of the + * `window` given. + * + * @param {DOMWindow} window + * @param {String} url + * @param {String} [type="agent"] + */ +function loadSheet(window, url, type = "agent") { + if (!(type in SHEET_TYPE)) { + type = "agent"; + } + + const windowUtils = utilsFor(window); + try { + windowUtils.loadSheetUsingURIString(url, windowUtils[SHEET_TYPE[type]]); + } catch (e) { + // The method fails if the url is already loaded. + } +} +exports.loadSheet = loadSheet; + +/** + * Remove the document style sheet at `sheetURI` from the list of additional + * style sheets of the document. The removal takes effect immediately. + * + * @param {DOMWindow} window + * @param {String} url + * @param {String} [type="agent"] + */ +function removeSheet(window, url, type = "agent") { + if (!(type in SHEET_TYPE)) { + type = "agent"; + } + + const windowUtils = utilsFor(window); + try { + windowUtils.removeSheetUsingURIString(url, windowUtils[SHEET_TYPE[type]]); + } catch (e) { + // The method fails if the url is already removed. + } +} +exports.removeSheet = removeSheet; + +/** + * Get the untransformed coordinates for a node. + * + * @param {DOMNode} node + * The node for which the DOMQuad is to be returned. + * @param {String} region + * The box model region to return: "content", "padding", "border" or + * "margin". + * @return {DOMQuad} + * A DOMQuad representation of the node. + */ +function getUntransformedQuad(node, region = "border") { + // Get the inverse transformation matrix for the node. + const matrix = node.getTransformToViewport(); + const inverse = matrix.inverse(); + const win = node.ownerGlobal; + + // Get the adjusted quads for the node (including scroll offsets). + const quads = getAdjustedQuads(win, node, region, { + ignoreZoom: true, + }); + + // Create DOMPoints from the transformed node position. + const p1 = new DOMPoint(quads[0].p1.x, quads[0].p1.y); + const p2 = new DOMPoint(quads[0].p2.x, quads[0].p2.y); + const p3 = new DOMPoint(quads[0].p3.x, quads[0].p3.y); + const p4 = new DOMPoint(quads[0].p4.x, quads[0].p4.y); + + // Apply the inverse transformation matrix to the points to get the + // untransformed points. + const ip1 = inverse.transformPoint(p1); + const ip2 = inverse.transformPoint(p2); + const ip3 = inverse.transformPoint(p3); + const ip4 = inverse.transformPoint(p4); + + // Save the results in a DOMQuad. + const quad = new DOMQuad( + { x: ip1.x, y: ip1.y }, + { x: ip2.x, y: ip2.y }, + { x: ip3.x, y: ip3.y }, + { x: ip4.x, y: ip4.y } + ); + + // Remove the border offsets because we include them when calculating + // offsets in the while loop. + const style = win.getComputedStyle(node); + const leftAdjustment = parseInt(style.borderLeftWidth, 10) || 0; + const topAdjustment = parseInt(style.borderTopWidth, 10) || 0; + + quad.p1.x -= leftAdjustment; + quad.p2.x -= leftAdjustment; + quad.p3.x -= leftAdjustment; + quad.p4.x -= leftAdjustment; + quad.p1.y -= topAdjustment; + quad.p2.y -= topAdjustment; + quad.p3.y -= topAdjustment; + quad.p4.y -= topAdjustment; + + // Calculate offsets. + while (node) { + const nodeStyle = win.getComputedStyle(node); + const borderLeftWidth = parseInt(nodeStyle.borderLeftWidth, 10) || 0; + const borderTopWidth = parseInt(nodeStyle.borderTopWidth, 10) || 0; + const leftOffset = node.offsetLeft - node.scrollLeft + borderLeftWidth; + const topOffset = node.offsetTop - node.scrollTop + borderTopWidth; + + quad.p1.x += leftOffset; + quad.p2.x += leftOffset; + quad.p3.x += leftOffset; + quad.p4.x += leftOffset; + quad.p1.y += topOffset; + quad.p2.y += topOffset; + quad.p3.y += topOffset; + quad.p4.y += topOffset; + + node = node.offsetParent; + } + + return quad; +} +exports.getUntransformedQuad = getUntransformedQuad; + +/** + * Calculate the total of the node and all of its ancestor's scrollTop and + * scrollLeft values. + * + * @param {DOMNode} node + * The node for which the absolute scroll offsets should be calculated. + * @return {Object} object + * An object containing scrollTop and scrollLeft values. + * @return {Number} object.scrollLeft + * The total scrollLeft values of the node and all of its ancestors. + * @return {Number} object.scrollTop + * The total scrollTop values of the node and all of its ancestors. + */ +function getAbsoluteScrollOffsetsForNode(node) { + const doc = node.ownerDocument; + + // Our walker will only iterate up to document.body so we start by saving the + // scroll values for `document.documentElement`. + let scrollTop = doc.documentElement.scrollTop; + let scrollLeft = doc.documentElement.scrollLeft; + const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT); + walker.currentNode = node; + let currentNode = walker.currentNode; + + // Iterate from `node` up the tree to `document.body` adding scroll offsets + // as we go. + while (currentNode) { + const nodeScrollTop = currentNode.scrollTop; + const nodeScrollLeft = currentNode.scrollLeft; + + if (nodeScrollTop || nodeScrollLeft) { + scrollTop += nodeScrollTop; + scrollLeft += nodeScrollLeft; + } + + currentNode = walker.parentNode(); + } + + return { + scrollLeft, + scrollTop, + }; +} +exports.getAbsoluteScrollOffsetsForNode = getAbsoluteScrollOffsetsForNode; + +/** + * Check if the provided node is a <frame> or <iframe> element. + * + * @param {DOMNode} node + * @returns {Boolean} + */ +function isFrame(node) { + const className = ChromeUtils.getClassName(node); + return className == "HTMLIFrameElement" || className == "HTMLFrameElement"; +} + +/** + * Check if the provided node is representing a remote <browser> element. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isRemoteBrowserElement(node) { + return ( + ChromeUtils.getClassName(node) == "XULFrameElement" && + !node.childNodes.length && + node.getAttribute("remote") == "true" + ); +} +exports.isRemoteBrowserElement = isRemoteBrowserElement; + +/** + * Check if the provided node is representing a remote frame. + * + * - In the context of the browser toolbox, a remote frame can be the <browser remote> + * element found inside each tab. + * - In the context of the content toolbox, a remote frame can be a <iframe> that contains + * a different origin document. + * + * @param {DOMNode} node + * @return {Boolean} + */ +function isRemoteFrame(node) { + if (isFrame(node)) { + return node.frameLoader?.isRemoteFrame; + } + + if (isRemoteBrowserElement(node)) { + return true; + } + + return false; +} +exports.isRemoteFrame = isRemoteFrame; + +/** + * Check if the provided node is representing a frame that has its own dedicated child target. + * + * @param {BrowsingContextTargetActor} targetActor + * @param {DOMNode} node + * @returns {Boolean} + */ +function isFrameWithChildTarget(targetActor, node) { + // If the iframe is blocked because of CSP, it won't have a document (and no associated targets) + if (isFrameBlockedByCSP(node)) { + return false; + } + + return isRemoteFrame(node) || (isFrame(node) && targetActor.ignoreSubFrames); +} + +exports.isFrameWithChildTarget = isFrameWithChildTarget; + +/** + * Check if the provided node is representing a frame that is blocked by CSP. + * + * @param {DOMNode} node + * @returns {Boolean} + */ +function isFrameBlockedByCSP(node) { + if (!isFrame(node)) { + return false; + } + + if (!node.src) { + return false; + } + + let uri; + try { + uri = lazy.NetUtil.newURI(node.src); + } catch (e) { + return false; + } + + const res = node.ownerDocument.csp.shouldLoad( + Ci.nsIContentPolicy.TYPE_SUBDOCUMENT, + null, // nsICSPEventListener + null, // nsILoadInfo + uri, + null, // aOriginalURIIfRedirect + false // aSendViolationReports + ); + + return res !== Ci.nsIContentPolicy.ACCEPT; +} + +exports.isFrameBlockedByCSP = isFrameBlockedByCSP; |