Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Web Inspector: Add
CSS.setLayoutContextTypeChangedMode for getting …
…information about all layout contexts https://bugs.webkit.org/show_bug.cgi?id=221449 Source/JavaScriptCore: Reviewed by Devin Rousso. Added `CSS.setLayoutContextTypeChangedMode` command and `CSS.LayoutContextTypeChangedMode` enum for controlling if the frontend should be informed of all layout context type changes, or if only currently instrumented nodes should be observed. * inspector/protocol/CSS.json: Source/WebCore: Reviewed by Devin Rousso. Test: inspector/css/setLayoutContextTypeChangedMode.html Backend support for changing the `LayoutContextTypeChangedMode`. * inspector/agents/InspectorCSSAgent.cpp: (WebCore::pushChildrenNodesToFrontendIfLayoutContextTypePresent): - Recursively pushes children node paths to the frontend if a `LayoutContextType` exists for the node, which allows the frontend to have a complete picture of the layout contexts in the document. (WebCore::InspectorCSSAgent::setLayoutContextTypeChangedMode): - If the mode is changed to `All`, then make sure any node with a `LayoutContextType` inside any document is sent to the frontend. (WebCore::InspectorCSSAgent::nodeLayoutContextTypeChanged): - If the `LayoutContextTypeChangedMode` is `All`, inform the frontend of the node when it changes layout context, even if the node was not previously instrumented. * inspector/agents/InspectorCSSAgent.h: Source/WebInspectorUI: Reviewed by Devin Rousso. * UserInterface/Controllers/CSSManager.js: - Added CSS.LayoutContextTypeChangedMode enum values. (WI.CSSManager.prototype.set layoutContextTypeChangedMode): * UserInterface/Controllers/DOMManager.js: (WI.DOMManager.prototype.nodesWithLayoutContextType): - Added ability to get all instrumented nodes of a specific layout context type. * UserInterface/Views/LayoutDetailsSidebarPanel.js: (WI.LayoutDetailsSidebarPanel.prototype.attached): (WI.LayoutDetailsSidebarPanel.prototype.detached): - Change the LayoutContextTypeChangedMode when showing/hiding the Layout panel. LayoutTests: Reviewed by Devin Rousso Added layout tests for `CSS.setLayoutContextTypeChangedMode` command. * inspector/css/setLayoutContextTypeChangedMode-expected.txt: Added. * inspector/css/setLayoutContextTypeChangedMode.html: Added. Canonical link: https://commits.webkit.org/233838@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@272566 268f45cc-cd09-0410-ab3c-d52691b4dbfc
- Loading branch information
1 parent
ce8b610
commit 50eacad
Showing
12 changed files
with
352 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
LayoutTests/inspector/css/setLayoutContextTypeChangedMode-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| Tests for the CSS.setLayoutContextTypeChangedMode command. | ||
|
|
||
|
|
||
| == Running test suite: CSS.setLayoutContextTypeChangedMode | ||
| -- Running test case: CSS.setLayoutContextTypeChangedMode.queryGrid | ||
| PASS: 0 grid nodes should be instrumented. | ||
| Querying document for selector `#queryGrid`... | ||
| PASS: 1 grid node should be instrumented. | ||
| Changing `#queryGrid` to `display: block;`... | ||
| PASS: 0 grid nodes should be instrumented. | ||
| Changing `#queryGrid` to `display: grid;`... | ||
| PASS: 1 grid node should be instrumented. | ||
| Changing `#queryGrid` to `display: block;`... | ||
| PASS: 0 grid nodes should be instrumented. | ||
| Changing `#queryGrid` to `display: inline-grid;`... | ||
| PASS: 1 grid node should be instrumented. | ||
|
|
||
| -- Running test case: CSS.setLayoutContextTypeChangedMode.normalGrid | ||
| PASS: 1 grid node should be instrumented. | ||
| Changing `layoutContextTypeChangedMode` to `All`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `layoutContextTypeChangedMode` to `Observed`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `#normalGrid` to `display: block;`... | ||
| PASS: 1 grid node should be instrumented. | ||
| Changing `#normalGrid` to `display: grid;`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
|
|
||
| -- Running test case: CSS.setLayoutContextTypeChangedMode.normalNonGrid | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `#normalNonGrid` to `display: grid;`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `#normalNonGrid` to `display: block;`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `layoutContextTypeChangedMode` to `All`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
| Changing `#normalNonGrid` to `display: grid;`... | ||
| PASS: 3 grid nodes should be instrumented. | ||
| Changing `#normalNonGrid` to `display: block;`... | ||
| PASS: 2 grid nodes should be instrumented. | ||
|
|
173 changes: 173 additions & 0 deletions
173
LayoutTests/inspector/css/setLayoutContextTypeChangedMode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> | ||
| <script> | ||
| function changeElementDisplayValue(id, value) | ||
| { | ||
| document.getElementById(id).style.display = value; | ||
| } | ||
|
|
||
| function test() | ||
| { | ||
| let suite = InspectorTest.createAsyncSuite("CSS.setLayoutContextTypeChangedMode"); | ||
|
|
||
| async function changeElementDisplayValue(id, value) | ||
| { | ||
| await InspectorTest.evaluateInPage(`changeElementDisplayValue("${id}", "${value}")`); | ||
| } | ||
|
|
||
| async function setLayoutContextTypeChangeMode(layoutContextTypeChangedMode) | ||
| { | ||
| WI.cssManager.layoutContextTypeChangedMode = layoutContextTypeChangedMode; | ||
| } | ||
|
|
||
| suite.addTestCase({ | ||
| name: "CSS.setLayoutContextTypeChangedMode.queryGrid", | ||
| description: "Test that the expected number of grids are instrumented without chagning the LayoutContextTypeChangedMode.", | ||
| async test() { | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); | ||
|
|
||
| // Query for the node, sending it to the frontend. | ||
| InspectorTest.log("Querying document for selector `#queryGrid`..."); | ||
| let documentNode = await WI.domManager.requestDocument(); | ||
| let queryNode = WI.domManager.nodeForId(await documentNode.querySelector("#queryGrid")); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#queryGrid` to `display: block;`..."); | ||
| await Promise.all([ | ||
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("queryGrid", "block"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#queryGrid` to `display: grid;`..."); | ||
| await Promise.all([ | ||
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("queryGrid", "grid"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#queryGrid` to `display: block;`..."); | ||
| await Promise.all([ | ||
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("queryGrid", "block"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 0, "0 grid nodes should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#queryGrid` to `display: inline-grid;`..."); | ||
| await Promise.all([ | ||
| queryNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("queryGrid", "inline-grid"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); | ||
| } | ||
| }); | ||
|
|
||
| suite.addTestCase({ | ||
| name: "CSS.setLayoutContextTypeChangedMode.normalGrid", | ||
| description: "Test that grids become instrumented when chagning the mode to `All`.", | ||
| async test() { | ||
| await WI.domManager.requestDocument(); | ||
|
|
||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); | ||
|
|
||
| // Grid layout contexts are sent to the frontend when the mode is changed to all. | ||
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `All`..."); | ||
| await Promise.all([ | ||
| WI.domManager.awaitEvent(WI.DOMManager.Event.NodeInserted), | ||
| setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.All), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| // Once a node has been observed, it will always be kept up-to-date. | ||
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `Observed`..."); | ||
| await setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.Observed), | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#normalGrid` to `display: block;`..."); | ||
| await Promise.all([ | ||
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("normalGrid", "block"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 1, "1 grid node should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#normalGrid` to `display: grid;`..."); | ||
| await Promise.all([ | ||
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("normalGrid", "grid"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
| } | ||
| }); | ||
|
|
||
| suite.addTestCase({ | ||
| name: "CSS.setLayoutContextTypeChangedMode.normalNonGrid", | ||
| description: "Ensure that layout context type changes for unobserved nodes do not fire events when the mode is `Observed`.", | ||
| async test() { | ||
| await WI.domManager.requestDocument(); | ||
|
|
||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| // Changes to unobserved nodes should not change the grid count. | ||
| InspectorTest.log("Changing `#normalNonGrid` to `display: grid;`..."); | ||
| await changeElementDisplayValue("normalNonGrid", "grid"); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#normalNonGrid` to `display: block;`..."); | ||
| await changeElementDisplayValue("normalNonGrid", "block"); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| // Enabling `All` mode should not change the grid count. | ||
| InspectorTest.log("Changing `layoutContextTypeChangedMode` to `All`..."); | ||
| await setLayoutContextTypeChangeMode(WI.CSSManager.LayoutContextTypeChangedMode.All), | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
|
|
||
| // Changing a node to a grid after enabling `All` mode will increase the count. | ||
| InspectorTest.log("Changing `#normalNonGrid` to `display: grid;`..."); | ||
| await Promise.all([ | ||
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("normalNonGrid", "grid"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 3, "3 grid nodes should be instrumented."); | ||
|
|
||
| InspectorTest.log("Changing `#normalNonGrid` to `display: block;`..."); | ||
| await Promise.all([ | ||
| WI.DOMNode.awaitEvent(WI.DOMNode.Event.LayoutContextTypeChanged), | ||
| changeElementDisplayValue("normalNonGrid", "block"), | ||
| ]); | ||
| InspectorTest.expectEqual(WI.domManager.nodesWithLayoutContextType(WI.DOMNode.LayoutContextType.Grid).length, 2, "2 grid nodes should be instrumented."); | ||
| } | ||
| }); | ||
|
|
||
| suite.runTestCasesAndFinish(); | ||
| } | ||
| </script> | ||
| <style> | ||
| .grid-container { | ||
| display: grid; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body onload="runTest()"> | ||
| <p>Tests for the CSS.setLayoutContextTypeChangedMode command.</p> | ||
| <div id="queryGrid" class="grid-container"> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <div id="normalGrid" class="grid-container"> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <div id="normalNonGrid"> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.