From c7a8a18e88cbc842fc54d8c578aa531a4d410051 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Thu, 18 Oct 2018 17:23:32 +0000 Subject: [PATCH] Bug 1497181 - Display sizing info for text nodes too; r=gl Differential Revision: https://phabricator.services.mozilla.com/D8976 --HG-- extra : moz-landing-system : lando --- .../client/inspector/flexbox/test/browser.ini | 3 ++ ...wser_flexbox_sizing_info_for_text_nodes.js | 38 +++++++++++++++++++ .../browser_flexbox_text_nodes_are_listed.js | 27 +++++++++++++ .../flexbox/test/doc_flexbox_text_nodes.html | 19 ++++++++++ devtools/server/actors/layout.js | 28 ++++++++------ 5 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js create mode 100644 devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js create mode 100644 devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html diff --git a/devtools/client/inspector/flexbox/test/browser.ini b/devtools/client/inspector/flexbox/test/browser.ini index 04cc21bac9ad..2d25ffe769f2 100644 --- a/devtools/client/inspector/flexbox/test/browser.ini +++ b/devtools/client/inspector/flexbox/test/browser.ini @@ -4,6 +4,7 @@ subsuite = devtools support-files = doc_flexbox_simple.html doc_flexbox_pseudos.html + doc_flexbox_text_nodes.html head.js !/devtools/client/inspector/test/head.js !/devtools/client/inspector/test/shared-head.js @@ -20,4 +21,6 @@ support-files = [browser_flexbox_pseudo_elements_are_listed.js] [browser_flexbox_sizing_info_exists.js] [browser_flexbox_sizing_info_for_pseudos.js] +[browser_flexbox_sizing_info_for_text_nodes.js] [browser_flexbox_sizing_info_has_correct_sections.js] +[browser_flexbox_text_nodes_are_listed.js] diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js new file mode 100644 index 000000000000..00804235d810 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js @@ -0,0 +1,38 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the flex item sizing UI also appears for text nodes. + +const TEST_URI = URL_ROOT + "doc_flexbox_text_nodes.html"; + +add_task(async function() { + await addTab(TEST_URI); + const { inspector, flexboxInspector } = await openLayoutView(); + const { document: doc } = flexboxInspector; + + info("Select the first text node in the flex container"); + const containerNode = await getNodeFront(".container", inspector); + const { nodes } = await inspector.walker.children(containerNode); + const firstTextNode = nodes[0]; + + const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing"); + const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container"); + await selectNode(firstTextNode, inspector); + const [flexSizingContainer] = await onFlexItemSizingRendered; + const [flexOutlineContainer] = await onFlexItemOutlineRendered; + + ok(flexSizingContainer, "The flex sizing exists in the DOM"); + ok(flexOutlineContainer, "The flex outline exists in the DOM"); + + info("Check that the various sizing sections are displayed"); + const allSections = [...flexSizingContainer.querySelectorAll(".section")]; + ok(allSections.length, "Sizing sections are displayed"); + + info("Check that the various parts of the outline are displayed"); + const [basis, final] = [...flexOutlineContainer.querySelectorAll( + ".flex-outline-basis, .flex-outline-final")]; + ok(basis && final, "The final and basis parts of the outline exist"); +}); diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js new file mode 100644 index 000000000000..cb0305c8cf69 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js @@ -0,0 +1,27 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that text nodes that are flex items do appear in the list of items. + +const TEST_URI = URL_ROOT + "doc_flexbox_text_nodes.html"; + +add_task(async function() { + await addTab(TEST_URI); + const { inspector, flexboxInspector } = await openLayoutView(); + const { document: doc } = flexboxInspector; + + // Select the flex container in the inspector. + const onItemsListRendered = waitForDOM(doc, + "#layout-flexbox-container .flex-item-list"); + await selectNode(".container", inspector); + const [flexItemList] = await onItemsListRendered; + + const items = [...flexItemList.querySelectorAll("li")]; + is(items.length, 3, "There are 3 items displayed in the list"); + + is(items[0].textContent, "#text", "The first item is a text node"); + is(items[2].textContent, "#text", "The third item is a text node"); +}); diff --git a/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html b/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html new file mode 100644 index 000000000000..4dd2e829161b --- /dev/null +++ b/devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html @@ -0,0 +1,19 @@ + + + +
+ A text node will be wrapped into an anonymous block container +
+ Here is yet another text node +
diff --git a/devtools/server/actors/layout.js b/devtools/server/actors/layout.js index 65c1420d0abc..3dccd3f40398 100644 --- a/devtools/server/actors/layout.js +++ b/devtools/server/actors/layout.js @@ -315,23 +315,29 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, { let currentNode = treeWalker.currentNode; let displayType = this.walker.getNode(currentNode).displayType; - if (!displayType) { - return null; - } - - if (type == "flex") { - if (displayType == "inline-flex" || displayType == "flex") { - return new FlexboxActor(this, currentNode); - } else if (onlyLookAtCurrentNode) { + // If the node is an element, check first if it is itself a flex or a grid. + if (currentNode.nodeType === currentNode.ELEMENT_NODE) { + if (!displayType) { return null; } - } else if (type == "grid" && - (displayType == "inline-grid" || displayType == "grid")) { - return new GridActor(this, currentNode); + + if (type == "flex") { + if (displayType == "inline-flex" || displayType == "flex") { + return new FlexboxActor(this, currentNode); + } else if (onlyLookAtCurrentNode) { + return null; + } + } else if (type == "grid" && + (displayType == "inline-grid" || displayType == "grid")) { + return new GridActor(this, currentNode); + } } // Otherwise, check if this is a flex/grid item or the parent node is a flex/grid // container. + // 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. while ((currentNode = treeWalker.parentNode())) { if (!currentNode) { break;