From b5cf192b43bc91e0a18cf1399fd5f64d152e969c Mon Sep 17 00:00:00 2001
From: Patrick Angle <pangle@apple.com>
Date: Fri, 6 Jan 2023 12:29:07 -0800
Subject: [PATCH] Web Inspector: Show parent style rules for nested style rules
 in Styles 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
---
 ...esForNodeNestingStyleGrouping-expected.txt |  33 +++++
 ...chedStylesForNodeNestingStyleGrouping.html | 133 ++++++++++++++++++
 .../css/setGroupingHeaderText-expected.txt    |  20 +++
 .../inspector/css/setGroupingHeaderText.html  |  32 ++++-
 .../inspector/protocol/CSS.json               |   4 +-
 Source/WebCore/Headers.cmake                  |   2 +
 .../WebCore/WebCore.xcodeproj/project.pbxproj |   2 +-
 Source/WebCore/css/CSSStyleRule.cpp           |  29 ++++
 Source/WebCore/css/CSSStyleRule.h             |   8 ++
 Source/WebCore/css/StyleRule.cpp              |   7 +-
 Source/WebCore/css/StyleRule.h                |   4 +-
 Source/WebCore/css/parser/CSSParser.cpp       |   4 +-
 Source/WebCore/css/parser/CSSParser.h         |   3 +-
 .../WebCore/inspector/InspectorStyleSheet.cpp |  88 +++++++-----
 .../inspector/agents/InspectorCSSAgent.cpp    |   2 +-
 .../WebCore/style/InspectorCSSOMWrappers.cpp  |   3 +
 .../UserInterface/Models/CSSGrouping.js       |   9 ++
 .../Models/CSSStyleDeclaration.js             |   5 +-
 .../SpreadsheetCSSStyleDeclarationSection.js  |   5 +-
 19 files changed, 342 insertions(+), 51 deletions(-)
 create mode 100644 LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt
 create mode 100644 LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html

diff --git a/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt b/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt
new file mode 100644
index 000000000000..2df786e9f03c
--- /dev/null
+++ b/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping-expected.txt
@@ -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".
+
diff --git a/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html b/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html
new file mode 100644
index 000000000000..b8659aba45eb
--- /dev/null
+++ b/LayoutTests/inspector/css/getMatchedStylesForNodeNestingStyleGrouping.html
@@ -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>
diff --git a/LayoutTests/inspector/css/setGroupingHeaderText-expected.txt b/LayoutTests/inspector/css/setGroupingHeaderText-expected.txt
index 4f25da3e2faf..f4d6da286b6b 100644
--- a/LayoutTests/inspector/css/setGroupingHeaderText-expected.txt
+++ b/LayoutTests/inspector/css/setGroupingHeaderText-expected.txt
@@ -186,3 +186,23 @@ PASS: Setting text should succeed.
 PASS: Text should change.
 PASS: Text should change on the same grouping attached to a different rule.
 
+-- Running test case: CSS.setGroupingHeaderText.StyleRule
+PASS: Should have 2 authored rule.
+PASS: Should find grouping of type 'style-rule'.
+Setting text to '#test, #test2'.
+PASS: Setting text should succeed.
+PASS: Text should change.
+PASS: Text should change on the same grouping attached to a different rule.
+Setting text to '#test {} #test'.
+PASS: Setting text should fail.
+PASS: Text should not change.
+PASS: Text should not change on the same grouping attached to a different rule.
+Setting text to ''.
+PASS: Setting text should fail.
+PASS: Text should not change.
+PASS: Text should not change on the same grouping attached to a different rule.
+Setting text to '#test'.
+PASS: Setting text should succeed.
+PASS: Text should change.
+PASS: Text should change on the same grouping attached to a different rule.
+
diff --git a/LayoutTests/inspector/css/setGroupingHeaderText.html b/LayoutTests/inspector/css/setGroupingHeaderText.html
index 4e3329cc8a8f..3181f8e45c5b 100644
--- a/LayoutTests/inspector/css/setGroupingHeaderText.html
+++ b/LayoutTests/inspector/css/setGroupingHeaderText.html
@@ -7,14 +7,14 @@
 {
     let suite = InspectorTest.createAsyncSuite("CSS.setGroupingHeaderText");
 
-    function addTestCase({name, description, groupingType, subtestCases})
+    function addTestCase({name, description, selector, groupingType, subtestCases})
     {
         suite.addTestCase({
             name,
             description,
             async test() {
                 let documentNode = await WI.domManager.requestDocument();
-                let nodeId = await documentNode.querySelector("#test");
+                let nodeId = await documentNode.querySelector(selector);
                 let domNode = WI.domManager.nodeForId(nodeId);
                 InspectorTest.assert(domNode, `Should find DOM Node for selector '#test'.`);
 
@@ -60,6 +60,7 @@
     addTestCase({
         name: "CSS.setGroupingHeaderText.MediaRule",
         description: "@media rules should be mutable and should only accept syntactically correct text.",
+        selector: "#test",
         groupingType: WI.CSSGrouping.Type.MediaRule,
         subtestCases: [
             { text: "not print" },
@@ -78,6 +79,7 @@
     addTestCase({
         name: "CSS.setGroupingHeaderText.SupportsRule",
         description: "@supports rules should be mutable and should only accept syntactically correct text.",
+        selector: "#test",
         groupingType: WI.CSSGrouping.Type.SupportsRule,
         subtestCases: [
             { text: "(color: purple)" },
@@ -98,6 +100,7 @@
     addTestCase({
         name: "CSS.setGroupingHeaderText.LayerRule",
         description: "@layer rules should be mutable and should only accept syntactically correct text.",
+        selector: "#test",
         groupingType: WI.CSSGrouping.Type.LayerRule,
         subtestCases: [
             { text: "howdy" },
@@ -112,6 +115,7 @@
     addTestCase({
         name: "CSS.setGroupingHeaderText.ContainerRule",
         description: "@container rules should be mutable and should only accept syntactically correct text.",
+        selector: "#test",
         groupingType: WI.CSSGrouping.Type.ContainerRule,
         subtestCases: [
             { text: "name (min-width: 42px)" },
@@ -127,6 +131,18 @@
         ],
     });
 
+    addTestCase({
+        name: "CSS.setGroupingHeaderText.StyleRule",
+        description: "Parent style rules for a nested style rule should be mutable and should only accept syntactically correct text.",
+        selector: "#nested",
+        groupingType: WI.CSSGrouping.Type.StyleRule,
+        subtestCases: [
+            { text: "#test, #test2" },
+            { text: "#test {} #test", expectsFailure: true },
+            { text: "", expectsFailure: true },
+        ],
+    });
+
     suite.runTestCasesAndFinish();
 }
 </script>
@@ -141,6 +157,14 @@
                 @container (min-width: 1px) {
                     #test {
                         color: lawngreen;
+
+                        #nested {
+                            color: rebeccapurple;
+                        }
+
+                        .nested {
+                            color: seagreen;
+                        }
                     }
 
                     .test {
@@ -154,6 +178,8 @@
 </head>
 <body onload="runTest()">
     <p>Tests for the CSS.setGroupingHeaderText command.</p>
-    <div id="test" class="test"></div>
+    <div id="test" class="test">
+        <div id="nested" class="nested"></div>
+    </div>
 </body>
 </html>
diff --git a/Source/JavaScriptCore/inspector/protocol/CSS.json b/Source/JavaScriptCore/inspector/protocol/CSS.json
index e887c3529e06..4d1ce3ee03ab 100644
--- a/Source/JavaScriptCore/inspector/protocol/CSS.json
+++ b/Source/JavaScriptCore/inspector/protocol/CSS.json
@@ -242,8 +242,8 @@
             "type": "object",
             "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.), @supports, and @layer descriptor.",
             "properties": [
-                { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-rule", "layer-rule", "layer-import-rule", "container-rule"], "description": "Source of the media query: \"media-rule\" if specified by a @media rule, \"media-import-rule\" if specified by an @import rule, \"media-link-node\" if specified by a \"media\" attribute in a linked style sheet's LINK tag, \"media-style-node\" if specified by a \"media\" attribute in an inline style sheet's STYLE tag, \"supports-rule\" if specified by an @supports rule, \"layer-rule\" if specified by an @layer rule, \"container-rule\" if specified by an @container rule." },
-                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier for the `@rule` (absent for non-editable grouping rules). In CSSOM terms, this is the parent rule of either the previous Grouping for a CSSRule, or of a CSSRule itself."},
+                { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-rule", "layer-rule", "layer-import-rule", "container-rule", "style-rule"], "description": "Source of the media query: \"media-rule\" if specified by a @media rule, \"media-import-rule\" if specified by an @import rule, \"media-link-node\" if specified by a \"media\" attribute in a linked style sheet's LINK tag, \"media-style-node\" if specified by a \"media\" attribute in an inline style sheet's STYLE tag, \"supports-rule\" if specified by an @supports rule, \"layer-rule\" if specified by an @layer rule, \"container-rule\" if specified by an @container rule, \"style-rule\" if specified by a CSSStyleRule containing the rule inside this grouping." },
+                { "name": "ruleId", "$ref": "CSSRuleId", "optional": true, "description": "The CSS rule identifier for the `@rule` (absent for non-editable grouping rules) or the nesting parent style rule's selector. In CSSOM terms, this is the parent rule of either the previous Grouping for a CSSRule, or of a CSSRule itself."},
                 { "name": "text", "type": "string", "optional": true, "description": "Query text if specified by a @media, @supports, or @container rule. Layer name (or not present for anonymous layers) for @layer rules." },
                 { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." },
                 { "name": "range", "$ref": "SourceRange", "optional": true, "description": "@-rule's header text range in the enclosing stylesheet (if available). This is from the first non-whitespace character after the @ declarartion to the last non-whitespace character before an opening curly bracket or semicolon." }
diff --git a/Source/WebCore/Headers.cmake b/Source/WebCore/Headers.cmake
index f75b855da317..331a06bdc251 100644
--- a/Source/WebCore/Headers.cmake
+++ b/Source/WebCore/Headers.cmake
@@ -653,8 +653,10 @@ set(WebCore_PRIVATE_FRAMEWORK_HEADERS
     css/parser/CSSParser.h
     css/parser/CSSParserContext.h
     css/parser/CSSParserMode.h
+    css/parser/CSSParserSelector.h
     css/parser/CSSParserToken.h
     css/parser/CSSParserTokenRange.h
+    css/parser/CSSSelectorParser.h
 
     css/query/GenericMediaQueryTypes.h
     css/query/MediaQuery.h
diff --git a/Source/WebCore/WebCore.xcodeproj/project.pbxproj b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
index c68679419767..7759464c739c 100644
--- a/Source/WebCore/WebCore.xcodeproj/project.pbxproj
+++ b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
@@ -3279,7 +3279,7 @@
 		949C77091D6E498700C0DE4F /* CSSParserObserverWrapper.h in Headers */ = {isa = PBXBuildFile; fileRef = 949C77071D6E48ED00C0DE4F /* CSSParserObserverWrapper.h */; };
 		949C770B1D6E49ED00C0DE4F /* CSSParserObserver.h in Headers */ = {isa = PBXBuildFile; fileRef = 949C770A1D6E49C300C0DE4F /* CSSParserObserver.h */; };
 		94DE5C821D7F3A1400164F2A /* CSSAtRuleID.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C801D7F39D000164F2A /* CSSAtRuleID.h */; };
-		94DE5C8E1D80802700164F2A /* CSSSelectorParser.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C8C1D80801500164F2A /* CSSSelectorParser.h */; };
+		94DE5C8E1D80802700164F2A /* CSSSelectorParser.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C8C1D80801500164F2A /* CSSSelectorParser.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		94DE5C921D83011D00164F2A /* CSSSupportsParser.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C901D8300CB00164F2A /* CSSSupportsParser.h */; };
 		94DE5C961D8301BD00164F2A /* CSSParserImpl.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DE5C941D8301B000164F2A /* CSSParserImpl.h */; };
 		94E839511DFB2A0E007BC6A7 /* CSSNamespaceRule.h in Headers */ = {isa = PBXBuildFile; fileRef = 94E8394F1DFB2700007BC6A7 /* CSSNamespaceRule.h */; settings = {ATTRIBUTES = (Private, ); }; };
diff --git a/Source/WebCore/css/CSSStyleRule.cpp b/Source/WebCore/css/CSSStyleRule.cpp
index c45da88b738a..0b7b782591b5 100644
--- a/Source/WebCore/css/CSSStyleRule.cpp
+++ b/Source/WebCore/css/CSSStyleRule.cpp
@@ -23,6 +23,7 @@
 #include "CSSStyleRule.h"
 
 #include "CSSParser.h"
+#include "CSSRuleList.h"
 #include "CSSStyleSheet.h"
 #include "DeclaredStylePropertyMap.h"
 #include "PropertySetCSSStyleDeclaration.h"
@@ -45,6 +46,7 @@ CSSStyleRule::CSSStyleRule(StyleRule& styleRule, CSSStyleSheet* parent)
     : CSSRule(parent)
     , m_styleRule(styleRule)
     , m_styleMap(DeclaredStylePropertyMap::create(*this))
+    , m_childRuleCSSOMWrappers(styleRule.nestedRules().size())
 {
 }
 
@@ -152,4 +154,31 @@ void CSSStyleRule::reattach(StyleRuleBase& rule)
         m_propertiesCSSOMWrapper->reattach(m_styleRule->mutableProperties());
 }
 
+unsigned CSSStyleRule::length() const
+{
+    return m_styleRule->nestedRules().size();
+}
+
+CSSRule* CSSStyleRule::item(unsigned index) const
+{
+    if (index >= length())
+        return nullptr;
+
+    ASSERT(m_childRuleCSSOMWrappers.size() == m_styleRule->nestedRules().size());
+
+    auto& rule = m_childRuleCSSOMWrappers[index];
+    if (!rule)
+        rule = m_styleRule->nestedRules()[index]->createCSSOMWrapper(const_cast<CSSStyleRule&>(*this));
+
+    return rule.get();
+}
+
+CSSRuleList& CSSStyleRule::cssRules() const
+{
+    if (!m_ruleListCSSOMWrapper)
+        m_ruleListCSSOMWrapper = makeUnique<LiveCSSRuleList<CSSStyleRule>>(const_cast<CSSStyleRule&>(*this));
+
+    return *m_ruleListCSSOMWrapper;
+}
+
 } // namespace WebCore
diff --git a/Source/WebCore/css/CSSStyleRule.h b/Source/WebCore/css/CSSStyleRule.h
index 3d710e0ae566..b13f63c309b5 100644
--- a/Source/WebCore/css/CSSStyleRule.h
+++ b/Source/WebCore/css/CSSStyleRule.h
@@ -26,6 +26,7 @@
 
 namespace WebCore {
 
+class CSSRuleList;
 class CSSStyleDeclaration;
 class DeclaredStylePropertyMap;
 class StylePropertyMap;
@@ -46,6 +47,10 @@ class CSSStyleRule final : public CSSRule, public CanMakeWeakPtr<CSSStyleRule> {
     // FIXME: Not CSSOM. Remove.
     StyleRule& styleRule() const { return m_styleRule.get(); }
 
+    CSSRuleList& cssRules() const;
+    unsigned length() const;
+    CSSRule* item(unsigned index) const;
+
     StylePropertyMap& styleMap();
 
 private:
@@ -60,6 +65,9 @@ class CSSStyleRule final : public CSSRule, public CanMakeWeakPtr<CSSStyleRule> {
     Ref<StyleRule> m_styleRule;
     Ref<DeclaredStylePropertyMap> m_styleMap;
     RefPtr<StyleRuleCSSStyleDeclaration> m_propertiesCSSOMWrapper;
+
+    mutable Vector<RefPtr<CSSRule>> m_childRuleCSSOMWrappers;
+    mutable std::unique_ptr<CSSRuleList> m_ruleListCSSOMWrapper;
 };
 
 } // namespace WebCore
diff --git a/Source/WebCore/css/StyleRule.cpp b/Source/WebCore/css/StyleRule.cpp
index ac8056e3da39..401e76cf1b75 100644
--- a/Source/WebCore/css/StyleRule.cpp
+++ b/Source/WebCore/css/StyleRule.cpp
@@ -65,6 +65,11 @@ Ref<CSSRule> StyleRuleBase::createCSSOMWrapper(CSSGroupingRule& parentRule) cons
     return createCSSOMWrapper(nullptr, &parentRule);
 }
 
+Ref<CSSRule> StyleRuleBase::createCSSOMWrapper(CSSStyleRule& parentRule) const
+{
+    return createCSSOMWrapper(nullptr, &parentRule);
+}
+
 Ref<CSSRule> StyleRuleBase::createCSSOMWrapper() const
 {
     return createCSSOMWrapper(nullptr, nullptr);
@@ -141,7 +146,7 @@ Ref<StyleRuleBase> StyleRuleBase::copy() const
     });
 }
 
-Ref<CSSRule> StyleRuleBase::createCSSOMWrapper(CSSStyleSheet* parentSheet, CSSGroupingRule* parentRule) const
+Ref<CSSRule> StyleRuleBase::createCSSOMWrapper(CSSStyleSheet* parentSheet, CSSRule* parentRule) const
 {
     // FIXME: const_cast is required here because a wrapper for a style rule can be used to *modify* the style rule's selector; use of const in the style system is thus inaccurate.
     auto wrapper = const_cast<StyleRuleBase&>(*this).visitDerived(WTF::makeVisitor(
diff --git a/Source/WebCore/css/StyleRule.h b/Source/WebCore/css/StyleRule.h
index 0d712356e0f0..85d1653ac347 100644
--- a/Source/WebCore/css/StyleRule.h
+++ b/Source/WebCore/css/StyleRule.h
@@ -40,6 +40,7 @@ namespace WebCore {
 
 class CSSRule;
 class CSSGroupingRule;
+class CSSStyleRule;
 class CSSStyleSheet;
 class MutableStyleProperties;
 class StyleRuleKeyframe;
@@ -76,6 +77,7 @@ class StyleRuleBase : public RefCounted<StyleRuleBase> {
 
     Ref<CSSRule> createCSSOMWrapper(CSSStyleSheet& parentSheet) const;
     Ref<CSSRule> createCSSOMWrapper(CSSGroupingRule& parentRule) const;
+    Ref<CSSRule> createCSSOMWrapper(CSSStyleRule& parentRule) const;
 
     // This is only needed to support getMatchedCSSRules.
     Ref<CSSRule> createCSSOMWrapper() const;
@@ -92,7 +94,7 @@ class StyleRuleBase : public RefCounted<StyleRuleBase> {
     template<typename Visitor> constexpr decltype(auto) visitDerived(Visitor&&);
     template<typename Visitor> constexpr decltype(auto) visitDerived(Visitor&&) const;
 
-    Ref<CSSRule> createCSSOMWrapper(CSSStyleSheet* parentSheet, CSSGroupingRule* parentRule) const;
+    Ref<CSSRule> createCSSOMWrapper(CSSStyleSheet* parentSheet, CSSRule* parentRule) const;
 
     unsigned m_type : 5; // StyleRuleType
 
diff --git a/Source/WebCore/css/parser/CSSParser.cpp b/Source/WebCore/css/parser/CSSParser.cpp
index 861b3c0c3935..767d317ce8ca 100644
--- a/Source/WebCore/css/parser/CSSParser.cpp
+++ b/Source/WebCore/css/parser/CSSParser.cpp
@@ -171,9 +171,9 @@ CSSParser::ParseResult CSSParser::parseValue(MutableStyleProperties& declaration
     return CSSParserImpl::parseValue(&declaration, propertyID, string, important, m_context);
 }
 
-std::optional<CSSSelectorList> CSSParser::parseSelector(const String& string, StyleSheetContents* styleSheet)
+std::optional<CSSSelectorList> CSSParser::parseSelector(const String& string, StyleSheetContents* styleSheet, CSSSelectorParser::IsNestedContext isNestedContext)
 {
-    return parseCSSSelector(CSSTokenizer(string).tokenRange(), m_context, styleSheet, CSSSelectorParser::IsNestedContext::No);
+    return parseCSSSelector(CSSTokenizer(string).tokenRange(), m_context, styleSheet, isNestedContext);
 }
 
 Ref<ImmutableStyleProperties> CSSParser::parseInlineStyleDeclaration(const String& string, const Element* element)
diff --git a/Source/WebCore/css/parser/CSSParser.h b/Source/WebCore/css/parser/CSSParser.h
index 15c9689e9a49..5f5241ab38c8 100644
--- a/Source/WebCore/css/parser/CSSParser.h
+++ b/Source/WebCore/css/parser/CSSParser.h
@@ -23,6 +23,7 @@
 #pragma once
 
 #include "CSSParserContext.h"
+#include "CSSSelectorParser.h"
 #include "CSSValue.h"
 #include "ColorTypes.h"
 #include "WritingMode.h"
@@ -83,7 +84,7 @@ class CSSParser {
     WEBCORE_EXPORT bool parseDeclaration(MutableStyleProperties&, const String&);
     static Ref<ImmutableStyleProperties> parseInlineStyleDeclaration(const String&, const Element*);
 
-    std::optional<CSSSelectorList> parseSelector(const String&, StyleSheetContents* = nullptr);
+    std::optional<CSSSelectorList> parseSelector(const String&, StyleSheetContents* = nullptr, CSSSelectorParser::IsNestedContext = CSSSelectorParser::IsNestedContext::No);
 
     RefPtr<CSSValue> parseValueWithVariableReferences(CSSPropertyID, const CSSValue&, Style::BuilderState&);
     RefPtr<CSSCustomPropertyValue> parseCustomPropertyValueWithVariableReferences(const CSSCustomPropertyValue&, Style::BuilderState&);
diff --git a/Source/WebCore/inspector/InspectorStyleSheet.cpp b/Source/WebCore/inspector/InspectorStyleSheet.cpp
index b3f3d600670a..b243351e9f1a 100644
--- a/Source/WebCore/inspector/InspectorStyleSheet.cpp
+++ b/Source/WebCore/inspector/InspectorStyleSheet.cpp
@@ -40,6 +40,7 @@
 #include "CSSPropertySourceData.h"
 #include "CSSRule.h"
 #include "CSSRuleList.h"
+#include "CSSSelectorParser.h"
 #include "CSSStyleRule.h"
 #include "CSSStyleSheet.h"
 #include "CSSSupportsRule.h"
@@ -79,7 +80,6 @@ using namespace Inspector;
 
 enum class RuleFlatteningStrategy {
     Ignore,
-    Commit,
     CommitSelfThenChildren,
 };
 
@@ -87,8 +87,6 @@ static RuleFlatteningStrategy flatteningStrategyForStyleRuleType(StyleRuleType s
 {
     switch (styleRuleType) {
     case StyleRuleType::Style:
-        return RuleFlatteningStrategy::Commit;
-
     case StyleRuleType::Media:
     case StyleRuleType::Supports:
     case StyleRuleType::LayerBlock:
@@ -127,7 +125,7 @@ static CSSParserContext parserContextForDocument(Document* document)
     return document ? CSSParserContext(*document) : strictCSSParserContext();
 }
 
-static bool isValidRuleHeaderText(const String& headerText, StyleRuleType styleRuleType, Document* document)
+static bool isValidRuleHeaderText(const String& headerText, StyleRuleType styleRuleType, Document* document, CSSSelectorParser::IsNestedContext isNestedContext)
 {
     auto isValidAtRuleHeaderText = [&] (const String& atRuleIdentifier) {
         if (headerText.isEmpty())
@@ -162,7 +160,7 @@ static bool isValidRuleHeaderText(const String& headerText, StyleRuleType styleR
     switch (styleRuleType) {
     case StyleRuleType::Style: {
         CSSParser parser(parserContextForDocument(document));
-        return !!parser.parseSelector(headerText);
+        return !!parser.parseSelector(headerText, nullptr, isNestedContext);
     }
     case StyleRuleType::Media:
         return isValidAtRuleHeaderText("@media"_s);
@@ -180,6 +178,8 @@ static bool isValidRuleHeaderText(const String& headerText, StyleRuleType styleR
 static std::optional<Protocol::CSS::Grouping::Type> protocolGroupingTypeForStyleRuleType(StyleRuleType styleRuleType)
 {
     switch (styleRuleType) {
+    case StyleRuleType::Style:
+        return Protocol::CSS::Grouping::Type::StyleRule;
     case StyleRuleType::Media:
         return Protocol::CSS::Grouping::Type::MediaRule;
     case StyleRuleType::Supports:
@@ -229,10 +229,6 @@ static void flattenSourceData(RuleSourceDataList& dataList, RuleSourceDataList&
 {
     for (auto& data : dataList) {
         switch (flatteningStrategyForStyleRuleType(data->type)) {
-        case RuleFlatteningStrategy::Commit:
-            target.append(data.copyRef());
-            break;
-
         case RuleFlatteningStrategy::CommitSelfThenChildren:
             target.append(data.copyRef());
             flattenSourceData(data->childRules, target);
@@ -537,6 +533,9 @@ static RefPtr<CSSRuleList> asCSSRuleList(CSSRule* rule)
     if (!rule)
         return nullptr;
 
+    if (auto* styleRule = dynamicDowncast<CSSStyleRule>(rule))
+        return &styleRule->cssRules();
+
     if (is<CSSMediaRule>(*rule))
         return &downcast<CSSMediaRule>(*rule).cssRules();
 
@@ -603,30 +602,35 @@ Ref<JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>> InspectorStyleSheet::buil
     auto groupingsPayload = JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>::create();
 
     auto* parentRule = &rule;
+
     while (parentRule) {
-        if (auto groupingRule = buildObjectForGrouping(parentRule))
-            groupingsPayload->addItem(groupingRule.releaseNonNull());
-        else if (auto* importRule = dynamicDowncast<CSSImportRule>(parentRule)) {
-            // FIXME: <webkit.org/b/246958> Show import rule as a single rule, instead of two rules for media and layer.
-            auto sourceURL = sourceURLForCSSRule(*importRule);
-            if (auto layerName = importRule->layerName(); !layerName.isNull()) {
-                auto layerRulePayload = Protocol::CSS::Grouping::create()
-                    .setType(Protocol::CSS::Grouping::Type::LayerImportRule)
-                    .release();
-                layerRulePayload->setText(layerName);
-                if (!sourceURL.isEmpty())
-                    layerRulePayload->setSourceURL(sourceURL);
-                groupingsPayload->addItem(WTFMove(layerRulePayload));
-            }
+        // The rule for which we are building groupings should not be included in the array of groupings, otherwise
+        // every CSSStyleRule will have itself as its first grouping.
+        if (parentRule != &rule) {
+            if (auto groupingRule = buildObjectForGrouping(parentRule))
+                groupingsPayload->addItem(groupingRule.releaseNonNull());
+            else if (auto* importRule = dynamicDowncast<CSSImportRule>(parentRule)) {
+                // FIXME: <webkit.org/b/246958> Show import rule as a single rule, instead of two rules for media and layer.
+                auto sourceURL = sourceURLForCSSRule(*importRule);
+                if (auto layerName = importRule->layerName(); !layerName.isNull()) {
+                    auto layerRulePayload = Protocol::CSS::Grouping::create()
+                        .setType(Protocol::CSS::Grouping::Type::LayerImportRule)
+                        .release();
+                    layerRulePayload->setText(layerName);
+                    if (!sourceURL.isEmpty())
+                        layerRulePayload->setSourceURL(sourceURL);
+                    groupingsPayload->addItem(WTFMove(layerRulePayload));
+                }
 
-            if (auto& media = importRule->media(); media.length() && media.mediaText() != "all"_s) {
-                auto mediaRulePayload = Protocol::CSS::Grouping::create()
-                    .setType(Protocol::CSS::Grouping::Type::MediaImportRule)
-                    .release();
-                mediaRulePayload->setText(media.mediaText());
-                if (!sourceURL.isEmpty())
-                    mediaRulePayload->setSourceURL(sourceURL);
-                groupingsPayload->addItem(WTFMove(mediaRulePayload));
+                if (auto& media = importRule->media(); media.length() && media.mediaText() != "all"_s) {
+                    auto mediaRulePayload = Protocol::CSS::Grouping::create()
+                        .setType(Protocol::CSS::Grouping::Type::MediaImportRule)
+                        .release();
+                    mediaRulePayload->setText(media.mediaText());
+                    if (!sourceURL.isEmpty())
+                        mediaRulePayload->setSourceURL(sourceURL);
+                    groupingsPayload->addItem(WTFMove(mediaRulePayload));
+                }
             }
         }
 
@@ -1051,6 +1055,16 @@ ExceptionOr<String> InspectorStyleSheet::ruleHeaderText(const InspectorCSSId& id
     return sheetText.substring(sourceData->ruleHeaderRange.start, sourceData->ruleHeaderRange.length());
 }
 
+static CSSSelectorParser::IsNestedContext isNestedContext(CSSRule* rule)
+{
+    for (CSSRule *parentRule = rule->parentRule(); parentRule; parentRule = parentRule->parentRule()) {
+        if (is<CSSStyleRule>(parentRule))
+            return CSSSelectorParser::IsNestedContext::Yes;
+    }
+
+    return CSSSelectorParser::IsNestedContext::No;
+}
+
 ExceptionOr<void> InspectorStyleSheet::setRuleHeaderText(const InspectorCSSId& id, const String& newHeaderText)
 {
     if (!m_pageStyleSheet)
@@ -1060,7 +1074,7 @@ ExceptionOr<void> InspectorStyleSheet::setRuleHeaderText(const InspectorCSSId& i
     if (!rule)
         return Exception { NotFoundError };
 
-    if (!isValidRuleHeaderText(newHeaderText, rule->styleRuleType(), m_pageStyleSheet->ownerDocument()))
+    if (!isValidRuleHeaderText(newHeaderText, rule->styleRuleType(), m_pageStyleSheet->ownerDocument(), isNestedContext(rule)))
         return Exception { SyntaxError };
 
     CSSStyleSheet* styleSheet = rule->parentStyleSheet();
@@ -1112,7 +1126,7 @@ ExceptionOr<CSSStyleRule*> InspectorStyleSheet::addRule(const String& selector)
     if (!m_pageStyleSheet)
         return Exception { NotSupportedError };
 
-    if (!isValidRuleHeaderText(selector, StyleRuleType::Style, m_pageStyleSheet->ownerDocument()))
+    if (!isValidRuleHeaderText(selector, StyleRuleType::Style, m_pageStyleSheet->ownerDocument(), CSSSelectorParser::IsNestedContext::No))
         return Exception { SyntaxError };
 
     auto text = this->text();
@@ -1241,6 +1255,10 @@ static Ref<Protocol::CSS::CSSSelector> buildObjectForSelectorHelper(const String
         .setText(selectorText)
         .release();
 
+    // FIXME: <webkit.org/b/250141> Add support for resolving the specificity of a nested selector.
+    if (selector.hasExplicitNestingParent())
+        return inspectorSelector;
+
     auto specificity = selector.computeSpecificityTuple();
 
     auto tuple = JSON::ArrayOf<int>::create();
@@ -1705,10 +1723,6 @@ void InspectorStyleSheet::collectFlatRules(RefPtr<CSSRuleList>&& ruleList, Vecto
             continue;
 
         switch (flatteningStrategyForStyleRuleType(rule->styleRuleType())) {
-        case RuleFlatteningStrategy::Commit:
-            result->append(rule);
-            break;
-
         case RuleFlatteningStrategy::CommitSelfThenChildren: {
             result->append(rule);
 
diff --git a/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp b/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
index 94c1236f5b4e..017c7e0474cc 100644
--- a/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
+++ b/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
@@ -1268,7 +1268,7 @@ Ref<JSON::ArrayOf<Protocol::CSS::RuleMatch>> InspectorCSSAgent::buildArrayForMat
             continue;
 
         auto matchingSelectors = JSON::ArrayOf<int>::create();
-        const CSSSelectorList& selectorList = matchedRule->selectorList();
+        const CSSSelectorList& selectorList = matchedRule->resolvedSelectorList();
         int index = 0;
         for (const CSSSelector* selector = selectorList.first(); selector; selector = CSSSelectorList::next(selector)) {
             bool matched = selectorChecker.match(*selector, element, context);
diff --git a/Source/WebCore/style/InspectorCSSOMWrappers.cpp b/Source/WebCore/style/InspectorCSSOMWrappers.cpp
index 67a798ee73e1..3911996960ce 100644
--- a/Source/WebCore/style/InspectorCSSOMWrappers.cpp
+++ b/Source/WebCore/style/InspectorCSSOMWrappers.cpp
@@ -81,6 +81,9 @@ void InspectorCSSOMWrappers::collect(ListType* listType)
             break;
         case StyleRuleType::Style:
             m_styleRuleToCSSOMWrapperMap.add(&downcast<CSSStyleRule>(*cssRule).styleRule(), downcast<CSSStyleRule>(cssRule));
+
+            // Eagerly collect rules nested in this style rule.
+            collect(downcast<CSSStyleRule>(cssRule));
             break;
         default:
             break;
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js b/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js
index 6963b1cbef58..368c6d9c7323 100644
--- a/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js
@@ -121,6 +121,11 @@ WI.CSSGrouping = class CSSGrouping extends WI.Object
         return this._type === WI.CSSGrouping.Type.ContainerRule;
     }
 
+    get isStyle()
+    {
+        return this._type === WI.CSSGrouping.Type.StyleRule;
+    }
+
     get prefix()
     {
         if (this.isSupports)
@@ -132,6 +137,9 @@ WI.CSSGrouping = class CSSGrouping extends WI.Object
         if (this.isContainer)
             return "@container";
 
+        if (this.isStyle)
+            return null;
+
         console.assert(this.isMedia);
         return "@media";
     }
@@ -146,6 +154,7 @@ WI.CSSGrouping.Type = {
     LayerRule: "layer-rule",
     LayerImportRule: "layer-import-rule",
     ContainerRule: "container-rule",
+    StyleRule: "style-rule",
 };
 
 WI.CSSGrouping.Event = {
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
index 0b0f48a7e13f..6cba0babb939 100644
--- a/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
@@ -536,7 +536,10 @@ WI.CSSStyleDeclaration = class CSSStyleDeclaration extends WI.Object
                 if (options.multiline)
                     styleText += indentString.repeat(groupingsCount - i - 1);
 
-                styleText += groupings[i].prefix;
+                let prefix = groupings[i].prefix;
+                if (prefix)
+                    styleText += prefix;
+
                 if (groupings[i].text)
                     styleText += " " + groupings[i].text;
                 styleText += " {";
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
index eab1f9ca3943..e96b8ddef03a 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
@@ -330,7 +330,10 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
             let grouping = groupings[i];
             let groupingTypeElement = this._groupingsContainerElement.appendChild(document.createElement("div"));
             groupingTypeElement.classList.add("grouping");
-            groupingTypeElement.textContent = grouping.prefix + " ";
+
+            let prefix = grouping.prefix;
+            if (prefix)
+                groupingTypeElement.textContent = prefix + " ";
 
             let groupingTextElement = groupingTypeElement.appendChild(document.createElement("span"));
             groupingTextElement.textContent = grouping.text ?? "";