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: Show parent style rules for nested style rules in Styl…
…es sidebar https://bugs.webkit.org/show_bug.cgi?id=250088 rdar://100522930 Reviewed by Antti Koivisto. Add basic support for viewing and editing parent style rule selectors for nested style rules. This uses the same mechanism we already use for showing parent `@rule`s, including support for editing. * LayoutTests/inspector/css/getMatchesStylesForNodeNestingStyleGrouping-expected.txt: Added. * LayoutTests/inspector/css/getMatchesStylesForNodeNestingStyleGrouping.html: Added. * LayoutTests/inspector/css/setGroupingHeaderText-expected.txt: * LayoutTests/inspector/css/setGroupingHeaderText.html: - Add test cases for modifying a parent Style rule's selector via a Grouping on a child nested rule. * Source/JavaScriptCore/inspector/protocol/CSS.json: - Add new "StyleRule" grouping type to represent parent style rules. * Source/WebCore/WebCore.xcodeproj/project.pbxproj: * Source/WebCore/css/CSSStyleRule.cpp: (WebCore::CSSStyleRule::CSSStyleRule): (WebCore::CSSStyleRule::length const): (WebCore::CSSStyleRule::item const): (WebCore::CSSStyleRule::cssRules const): * Source/WebCore/css/CSSStyleRule.h: - Add support for getting the nested rules inside a CSSStyleRule. * Source/WebCore/css/StyleRule.cpp: (WebCore::StyleRuleBase::createCSSOMWrapper const): * Source/WebCore/css/StyleRule.h: - Support creating a wrapper with a CSSStyleRule as a parent. * Source/WebCore/css/parser/CSSParser.cpp: (WebCore::CSSParser::parseSelector): * Source/WebCore/css/parser/CSSParser.h: - Allow callers to enable nesting syntax for parsing a selector, which is done to verify a selector is valid by Web Inspector when editing a nested rule's selector. * Source/WebCore/inspector/InspectorStyleSheet.cpp: (WebCore::flatteningStrategyForStyleRuleType): - Style rules can now contain rules, so get rid of the `Commit` strategy and use the existing `CommitSelfThenChildren` for style rules instead. (WebCore::isValidRuleHeaderText): - Pass through the nesting mode for parsing selectors. (WebCore::protocolGroupingTypeForStyleRuleType): (WebCore::flattenSourceData): - Get rid of `Commit` strategy. (WebCore::StyleSheetHandler::startRuleHeader): - It is no longer invalid to encounter the start of a style rule before encountering the end of the previous style rule. (WebCore::asCSSRuleList): (WebCore::InspectorStyleSheet::buildArrayForGroupings): - Start with the parent of the passed CSSRule, otherwise every style rule will include itself as a grouping. (WebCore::isNestedContext): (WebCore::InspectorStyleSheet::setRuleHeaderText): - Nested rules should allow relevant syntax for selectors. (WebCore::InspectorStyleSheet::collectFlatRules): * Source/WebCore/style/InspectorCSSOMWrappers.cpp: (WebCore::Style::InspectorCSSOMWrappers::collect): - Eagerly create CSSOM wrappers for nested rules. * Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js: (WI.CSSGrouping.prototype.get isStyle): (WI.CSSGrouping.prototype.get prefix): (WI.CSSGrouping): - Nested rules don't have a prefix like `@rule`s do, so provide a null prefix. * Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js: (WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderGroupings): - Support groupings without a prefix by not prepending the prefix. Canonical link: https://commits.webkit.org/258555@main
- Loading branch information
1 parent
0a3c1ae
commit b5cf192
Showing
19 changed files
with
342 additions
and
51 deletions.
There are no files selected for viewing
33 changes: 33 additions & 0 deletions
33
LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-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,33 @@ | ||
| Tests for the CSS.getMatchedStyleForNode command and container rule groups. | ||
|
|
||
|
|
||
| == Running test suite: CSS.getMatchedStyleForNode.NestingStyleGrouping | ||
| -- Running test case: CSS.getMatchedStyleForNode.NestingStyleGrouping.NormalProperty | ||
| PASS: Should have 1 authored rules. | ||
| - Testing rule #0 | ||
| PASS: Selector text should be "#outerA". | ||
| PASS: "color" property value should be "red". | ||
| PASS: Rule should have no groupings. | ||
|
|
||
| -- Running test case: CSS.getMatchedStyleForNode.NestingStyleGrouping.NestedRulePropertyWithImplicitAmpersand | ||
| PASS: Should have 2 authored rules. | ||
| - Testing rule #0 | ||
| PASS: Selector text should be ".innerA". | ||
| PASS: "color" property value should be "green". | ||
| PASS: Rule should have 1 grouping(s). | ||
| PASS: Grouping 0 should have a type of "style-rule". | ||
| PASS: Grouping 0 should have a text of "#outerA". | ||
| - Testing rule #1 | ||
| PASS: Selector text should be "#outerA". | ||
| PASS: "color" property value should be "red". | ||
| PASS: Rule should have no groupings. | ||
|
|
||
| -- Running test case: CSS.getMatchedStyleForNode.NestingStyleGrouping.NestedRulePropertyWithImplicitAmpersand | ||
| PASS: Should have 1 authored rules. | ||
| - Testing rule #0 | ||
| PASS: Selector text should be ".outer:not(&)". | ||
| PASS: "color" property value should be "blue". | ||
| PASS: Rule should have 1 grouping(s). | ||
| PASS: Grouping 0 should have a type of "style-rule". | ||
| PASS: Grouping 0 should have a text of "#outerA". | ||
|
|
133 changes: 133 additions & 0 deletions
133
LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.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,133 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> | ||
| <script> | ||
| function test() | ||
| { | ||
| let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.NestingStyleGrouping"); | ||
|
|
||
| function expectRuleAtIndex(rules, index, {selectorText, colorPropertyValue, groupings}) | ||
| { | ||
| InspectorTest.log(`- Testing rule #${index}`); | ||
|
|
||
| let rule = rules[index]; | ||
| InspectorTest.expectEqual(rule.selectorText, selectorText, `Selector text should be "${selectorText}".`); | ||
| InspectorTest.expectEqual(rule.style.propertyForName("color").value, colorPropertyValue, `"color" property value should be "${colorPropertyValue}".`); | ||
|
|
||
| if (!groupings) { | ||
| InspectorTest.expectEmpty(rule.groupings, "Rule should have no groupings."); | ||
| return; | ||
| } | ||
|
|
||
| InspectorTest.expectEqual(rule.groupings.length, groupings.length, `Rule should have ${groupings.length} grouping(s).`); | ||
|
|
||
| for (let i = 0; i < groupings.length; ++i) { | ||
| InspectorTest.expectEqual(rule.groupings[i].type, groupings[i].type, `Grouping ${i} should have a type of "${groupings[i].type}".`); | ||
|
|
||
| if (groupings[i].text) | ||
| InspectorTest.expectEqual(rule.groupings[i].text, groupings[i].text, `Grouping ${i} should have a text of "${groupings[i].text}".`); | ||
| else | ||
| InspectorTest.expectNull(rule.groupings[i].text, `Grouping ${i} should not have any text.`); | ||
| } | ||
| } | ||
|
|
||
| function addTestCase({name, description, selector, expectedAuthoredRuleCount, authoredRulesHandler}) | ||
| { | ||
| suite.addTestCase({ | ||
| name, | ||
| description, | ||
| async test() { | ||
| let documentNode = await WI.domManager.requestDocument(); | ||
| let nodeId = await documentNode.querySelector(selector); | ||
| let domNode = WI.domManager.nodeForId(nodeId); | ||
| InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`); | ||
|
|
||
| let domNodeStyles = WI.cssManager.stylesForNode(domNode); | ||
| InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`); | ||
| await domNodeStyles.refresh(); | ||
|
|
||
| let flatInheritedRules = domNodeStyles.inheritedRules.flatMap((inheritedRuleInfo) => inheritedRuleInfo.matchedRules); | ||
|
|
||
| let authoredRules = [...domNodeStyles.matchedRules, ...flatInheritedRules].filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author); | ||
| InspectorTest.expectEqual(authoredRules.length, expectedAuthoredRuleCount, `Should have ${expectedAuthoredRuleCount} authored rules.`); | ||
| authoredRulesHandler(authoredRules); | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| addTestCase({ | ||
| name: "CSS.getMatchedStyleForNode.NestingStyleGrouping.NormalProperty", | ||
| description: "Non-nested properties should be visible even when nested style rules are present.", | ||
| selector: "#outerA", | ||
| expectedAuthoredRuleCount: 1, | ||
| authoredRulesHandler(rules) { | ||
| expectRuleAtIndex(rules, 0, { | ||
| selectorText: "#outerA", | ||
| colorPropertyValue: "red", | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| addTestCase({ | ||
| name: "CSS.getMatchedStyleForNode.NestingStyleGrouping.NestedRulePropertyWithImplicitAmpersand", | ||
| description: "Nested rules with an implicit ampersand should have a grouping representing the outer style rule.", | ||
| selector: "#outerA .innerA", | ||
| expectedAuthoredRuleCount: 2, | ||
| authoredRulesHandler(rules) { | ||
| expectRuleAtIndex(rules, 0, { | ||
| selectorText: ".innerA", | ||
| colorPropertyValue: "green", | ||
| groupings: [ | ||
| {type: WI.CSSGrouping.Type.StyleRule, text: "#outerA"}, | ||
| ], | ||
| }); | ||
| expectRuleAtIndex(rules, 1, { | ||
| selectorText: "#outerA", | ||
| colorPropertyValue: "red", | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| addTestCase({ | ||
| name: "CSS.getMatchedStyleForNode.NestingStyleGrouping.NestedRulePropertyWithImplicitAmpersand", | ||
| description: "Nested rules with an explicit ampersand should have a grouping representing the outer style rule, even when the outer rule's style does not apply to the element.", | ||
| selector: "#outerB", | ||
| expectedAuthoredRuleCount: 1, | ||
| authoredRulesHandler(rules) { | ||
| expectRuleAtIndex(rules, 0, { | ||
| selectorText: ".outer:not(&)", | ||
| colorPropertyValue: "blue", | ||
| groupings: [ | ||
| {type: WI.CSSGrouping.Type.StyleRule, text: "#outerA"}, | ||
| ], | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| suite.runTestCasesAndFinish(); | ||
| } | ||
| </script> | ||
| <style> | ||
| #outerA { | ||
| color: red; | ||
|
|
||
| .innerA { | ||
| color: green; | ||
| } | ||
|
|
||
| .outer:not(&) { | ||
| color: blue; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body onload="runTest()"> | ||
| <p>Tests for the CSS.getMatchedStyleForNode command and container rule groups.</p> | ||
| <div id="outerA" class="outer"> | ||
| <div class="innerA"></div> | ||
| </div> | ||
| <div id="outerB" class="outer"> | ||
| </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
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.