Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-27 04:38:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1497181 - Display sizing info for text nodes too; r=gl

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D8976

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Patrick Brosset 2018-10-18 17:23:32 +00:00
parent f7f74b95e3
commit c7a8a18e88
5 changed files with 104 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
devtools/client/inspector/flexbox/test/browser.ini
View File

@ -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]

38
devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_text_nodes.js Normal file
View File

@ -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");
});

27
devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js Normal file
View File

@ -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");
});

19
devtools/client/inspector/flexbox/test/doc_flexbox_text_nodes.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.container {
width: 400px;
display: flex;
}
.container div {
flex-basis: 100px;
flex-shrink: 0;
background: #f06;
align-self: stretch;
}
</style>
<div class="container">
A text node will be wrapped into an anonymous block container
<div></div>
Here is yet another text node
</div>

6
devtools/server/actors/layout.js
View File

@ -315,6 +315,8 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, {
let currentNode = treeWalker.currentNode;
let displayType = this.walker.getNode(currentNode).displayType;
// 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;
}
@ -329,9 +331,13 @@ const LayoutActor = ActorClassWithSpec(layoutSpec, {
(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;