diff --git a/devtools/server/actors/highlighters/box-model.js b/devtools/server/actors/highlighters/box-model.js index ddde818ecad9..4be5b0bd4623 100644 --- a/devtools/server/actors/highlighters/box-model.js +++ b/devtools/server/actors/highlighters/box-model.js @@ -16,7 +16,6 @@ const { moveInfobar, } = require("./utils/markup"); const { - findFlexOrGridParentContainerForNode, getCurrentZoom, setIgnoreLayoutChanges, } = require("devtools/shared/layout/utils"); @@ -440,7 +439,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter { } else { // The highlighted element is not a flexbox container so we need to check // if it is a flex item. - const container = findFlexOrGridParentContainerForNode(node, "flex"); + const container = node.parentFlexElement; if (container) { for (const region of BOX_MODEL_REGIONS) { diff --git a/devtools/server/actors/inspector/walker.js b/devtools/server/actors/inspector/walker.js index e0f8fb455039..d58d04132cee 100644 --- a/devtools/server/actors/inspector/walker.js +++ b/devtools/server/actors/inspector/walker.js @@ -36,7 +36,6 @@ loader.lazyRequireGetter(this, "SKIP_TO_SIBLING", "devtools/server/actors/inspec loader.lazyRequireGetter(this, "NodeActor", "devtools/server/actors/inspector/node", true); loader.lazyRequireGetter(this, "NodeListActor", "devtools/server/actors/inspector/node", true); loader.lazyRequireGetter(this, "LayoutActor", "devtools/server/actors/layout", true); -loader.lazyRequireGetter(this, "findFlexOrGridParentContainerForNode", "devtools/server/actors/layout", true); loader.lazyRequireGetter(this, "getLayoutChangesObserver", "devtools/server/actors/reflow", true); loader.lazyRequireGetter(this, "releaseLayoutChangesObserver", "devtools/server/actors/reflow", true); loader.lazyRequireGetter(this, "WalkerSearch", "devtools/server/actors/utils/walker-search", true); @@ -560,9 +559,7 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, { rawNode.nodeName === "SLOT" && isDirectShadowHostChild(firstChild); - const isFlexItem = - !!firstChild && - findFlexOrGridParentContainerForNode(firstChild, "flex", this); + const isFlexItem = !!(firstChild && firstChild.parentFlexElement); if (!firstChild || walker.nextSibling() || diff --git a/devtools/server/actors/layout.js b/devtools/server/actors/layout.js index addd639737e5..a6abc87aa04e 100644 --- a/devtools/server/actors/layout.js +++ b/devtools/server/actors/layout.js @@ -355,8 +355,7 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, { return new FlexboxActor(this, node); } - const container = findFlexOrGridParentContainerForNode(node, type, this.walker); - + const container = node.parentFlexElement; if (container) { return new FlexboxActor(this, container); } @@ -372,10 +371,11 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, { // Note that text nodes that are children of flex/grid containers are wrapped in // anonymous containers, so even if their displayType getter returns null we still // want to walk up the chain to find their container. - const container = findFlexOrGridParentContainerForNode(node, type, this.walker); - if (container && flexType) { + const parentFlexElement = node.parentFlexElement; + if (parentFlexElement && flexType) { return new FlexboxActor(this, container); } + const container = findGridParentContainerForNode(node, type, this.walker); if (container && gridType) { return new GridActor(this, container); } @@ -457,25 +457,19 @@ function isNodeDead(node) { } /** - * If the provided node is a grid of flex item, then return its parent grid or flex - * container. + * If the provided node is a grid item, then return its parent grid. * * @param {DOMNode} node - * The node that is supposedly a grid or flex item. - * @param {String} type - * The type of container/item to look for: "flex" or "grid". + * The node that is supposedly a grid item. * @param {WalkerActor} walkerActor * The current instance of WalkerActor. * @return {DOMNode|null} - * The parent grid or flex container if found, null otherwise. + * The parent grid if found, null otherwise. */ -function findFlexOrGridParentContainerForNode(node, type, walker) { +function findGridParentContainerForNode(node, walker) { const treeWalker = walker.getDocumentWalker(node, SHOW_ELEMENT); let currentNode = treeWalker.currentNode; - const flexType = type === "flex"; - const gridType = type === "grid"; - try { while ((currentNode = treeWalker.parentNode())) { const displayType = walker.getNode(currentNode).displayType; @@ -483,11 +477,7 @@ function findFlexOrGridParentContainerForNode(node, type, walker) { break; } - if (flexType && displayType.includes("flex")) { - if (isNodeAFlexItemInContainer(node, currentNode, walker)) { - return currentNode; - } - } else if (gridType && displayType.includes("grid")) { + if (displayType.includes("grid")) { return currentNode; } else if (displayType === "contents") { // Continue walking up the tree since the parent node is a content element. @@ -503,36 +493,7 @@ function findFlexOrGridParentContainerForNode(node, type, walker) { return null; } -/** - * Returns whether or not the given node is actually considered a flex item by its - * container. - * - * @param {Node|NodeActor} supposedItem - * The node that might be a flex item of its container. - * @param {Node} container - * The node's container. - * @return {Boolean} - * Whether or not the node we are looking at is a flex item of its container. - */ -function isNodeAFlexItemInContainer(supposedItem, container, walker) { - const containerDisplayType = walker.getNode(container).displayType; - - if (containerDisplayType.includes("flex")) { - const containerFlex = container.getAsFlexContainer(); - - for (const line of containerFlex.getLines()) { - for (const item of line.getItems()) { - if (item.node === supposedItem) { - return true; - } - } - } - } - - return false; -} - -exports.findFlexOrGridParentContainerForNode = findFlexOrGridParentContainerForNode; +exports.findGridParentContainerForNode = findGridParentContainerForNode; exports.FlexboxActor = FlexboxActor; exports.FlexItemActor = FlexItemActor; exports.GridActor = GridActor; diff --git a/devtools/shared/layout/utils.js b/devtools/shared/layout/utils.js index 3523f22761a9..17596914538e 100644 --- a/devtools/shared/layout/utils.js +++ b/devtools/shared/layout/utils.js @@ -908,22 +908,17 @@ function getUntransformedQuad(node, region = "border") { exports.getUntransformedQuad = getUntransformedQuad; /** - * If the provided node is a grid of flex item, then return its parent grid or flex - * container. + * If the provided node is a grid item, then return its parent grid. * * @param {DOMNode} node - * The node that is supposedly a grid or flex item. - * @param {String} type - * The type of container/item to look for: "flex" or "grid". + * The node that is supposedly a grid item. * @return {DOMNode|null} - * The parent grid or flex container if found, null otherwise. + * The parent grid container if found, null otherwise. */ -function findFlexOrGridParentContainerForNode(node, type) { +function findGridParentContainerForNode(node) { const doc = node.ownerDocument; const win = doc.defaultView; const treeWalker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT); - const flexType = type === "flex"; - const gridType = type === "grid"; let currentNode = null; treeWalker.currentNode = node; @@ -935,11 +930,7 @@ function findFlexOrGridParentContainerForNode(node, type) { break; } - if (flexType && displayType.includes("flex")) { - if (isNodeAFlexItemInContainer(node, currentNode)) { - return currentNode; - } - } else if (gridType && displayType.includes("grid")) { + if (displayType.includes("grid")) { return currentNode; } else if (displayType === "contents") { // Continue walking up the tree since the parent node is a content element. @@ -954,39 +945,7 @@ function findFlexOrGridParentContainerForNode(node, type) { return null; } -exports.findFlexOrGridParentContainerForNode = findFlexOrGridParentContainerForNode; - -/** - * Returns whether or not the given node is actually considered a flex item by its - * container. - * - * @param {DOMNode} supposedItem - * The node that might be a flex item of its container. - * @param {DOMNode} container - * The node's container. - * @return {Boolean} - * Whether or not the node we are looking at is a flex item of its container. - */ -function isNodeAFlexItemInContainer(supposedItem, container) { - const doc = container.ownerDocument; - const win = doc.defaultView; - const containerDisplayType = win.getComputedStyle(container).display; - - if (containerDisplayType.includes("flex")) { - const containerFlex = container.getAsFlexContainer(); - - for (const line of containerFlex.getLines()) { - for (const item of line.getItems()) { - if (item.node === supposedItem) { - return true; - } - } - } - } - - return false; -} -exports.isNodeAFlexItemInContainer = isNodeAFlexItemInContainer; +exports.findGridParentContainerForNode = findGridParentContainerForNode; /** * Calculate the total of the node and all of its ancestor's scrollTop and