Changeset 292181 in webkit

Timestamp:

Mar 31, 2022, 2:50:47 PM (5 years ago)

Author:

Patrick Angle

Message:

Web Inspector: Support Container Queries in the Styles sidebar
​https://bugs.webkit.org/show_bug.cgi?id=238346

Reviewed by Devin Rousso.

Source/JavaScriptCore:

Add new container-rule type for CSS::Grouping::Type.

• inspector/protocol/CSS.json:

Source/WebCore:

Test: inspector/css/getMatchedStylesForNodeContainerGrouping.html

Add basic support to Web Inspector for viewing styles in @container rules.

• css/CSSContainerRule.cpp:

(WebCore::CSSContainerRule::nameFilterText const):

• css/CSSContainerRule.h:
• Provide a way to get the name that is used to filter the rule to specific containers.

• inspector/InspectorStyleSheet.cpp:

(flattenSourceData):

• In order to prevent future rule types from being added without some consideration for how they are inspected,

use an exhaustive switch-case statement here. This will at minimum allow us to make sure we have opened a bug
and put a FIXME here for new values in the future.

(WebCore::asCSSRuleList):
(WebCore::buildArrayForGroupings):

• style/InspectorCSSOMWrappers.cpp:

(WebCore::Style::InspectorCSSOMWrappers::collect):

Source/WebInspectorUI:

• UserInterface/Models/CSSGrouping.js:

(WI.CSSGrouping.prototype.get isContainer):
(WI.CSSGrouping.prototype.get prefix):
(WI.CSSGrouping):

LayoutTests:

• inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt: Added.
• inspector/css/getMatchedStylesForNodeContainerGrouping.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt (added)
• LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping.html (added)
• Source/JavaScriptCore/ChangeLog (modified) (1 diff)
• Source/JavaScriptCore/inspector/protocol/CSS.json (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/CSSContainerRule.cpp (modified) (1 diff)
• Source/WebCore/css/CSSContainerRule.h (modified) (1 diff)
• Source/WebCore/inspector/InspectorStyleSheet.cpp (modified) (4 diffs)
• Source/WebCore/style/InspectorCSSOMWrappers.cpp (modified) (2 diffs)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js (modified) (3 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2022-03-31  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Support Container Queries in the Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=238346
+
+        Reviewed by Devin Rousso.
+
+        * inspector/css/getMatchedStylesForNodeContainerGrouping-expected.txt: Added.
+        * inspector/css/getMatchedStylesForNodeContainerGrouping.html: Added.
+
 2022-03-31  Robert Jenner  <Jenner@apple.com>
 

trunk/Source/JavaScriptCore/ChangeLog

@@ +1 @@
+2022-03-31  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Support Container Queries in the Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=238346
+
+        Reviewed by Devin Rousso.
+
+        Add new `container-rule` type for `CSS::Grouping::Type`.
+
+        * inspector/protocol/CSS.json:
+
 2022-03-30  Chris Dumez  <cdumez@apple.com>
 

trunk/Source/JavaScriptCore/inspector/protocol/CSS.json

@@ -229 +229 @@
             "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"], "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." },
-                { "name": "text", "type": "string", "optional": true, "description": "Query text if specified by a @media or @supports rule. Layer name (or not present for anonymous layers) for @layer rules." },
+                { "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": "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." }
             ]

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-03-31  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Support Container Queries in the Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=238346
+
+        Reviewed by Devin Rousso.
+
+        Test: inspector/css/getMatchedStylesForNodeContainerGrouping.html
+
+        Add basic support to Web Inspector for viewing styles in `@container` rules.
+
+        * css/CSSContainerRule.cpp:
+        (WebCore::CSSContainerRule::nameFilterText const):
+        * css/CSSContainerRule.h:
+        - Provide a way to get the name that is used to filter the rule to specific containers.
+
+        * inspector/InspectorStyleSheet.cpp:
+        (flattenSourceData):
+        - In order to prevent future rule types from being added without some consideration for how they are inspected,
+        use an exhaustive switch-case statement here. This will at minimum allow us to make sure we have opened a bug
+        and put a FIXME here for new values in the future.
+
+        (WebCore::asCSSRuleList):
+        (WebCore::buildArrayForGroupings):
+        
+        * style/InspectorCSSOMWrappers.cpp:
+        (WebCore::Style::InspectorCSSOMWrappers::collect):
+
 2022-03-31  Diego Pino Garcia  <dpino@igalia.com>
 

trunk/Source/WebCore/css/CSSContainerRule.cpp

@@ -77 +77 @@
 }
 
+String CSSContainerRule::nameFilterText() const
+{
+    StringBuilder builder;
+    
+    auto name = styleRuleContainer().filteredQuery().nameFilter;
+    if (!name.isEmpty())
+        serializeIdentifier(name, builder);
+
+    return builder.toString();
+}
+
 } // namespace WebCore
 

trunk/Source/WebCore/css/CSSContainerRule.h

@@ -38 +38 @@
     String cssText() const final;
     String conditionText() const final;
+    String nameFilterText() const;
 
 private:

trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp

@@ -27 +27 @@
 #include "InspectorStyleSheet.h"
 
+#include "CSSContainerRule.h"
 #include "CSSImportRule.h"
 #include "CSSKeyframesRule.h"
@@ -107 +108 @@
 {
     for (auto& data : dataList) {
-        if (data->type == WebCore::StyleRuleType::Style)
+        switch (data->type) {
+        case WebCore::StyleRuleType::Style:
             target.append(data.copyRef());
-        else if (data->type == WebCore::StyleRuleType::Media || data->type == WebCore::StyleRuleType::Supports || data->type == WebCore::StyleRuleType::LayerBlock)
+            break;
+
+        case WebCore::StyleRuleType::Media:
+        case WebCore::StyleRuleType::Supports:
+        case WebCore::StyleRuleType::LayerBlock:
+        case WebCore::StyleRuleType::Container:
             flattenSourceData(data->childRules, target);
+            break;
+
+        case WebCore::StyleRuleType::Unknown:
+        case WebCore::StyleRuleType::Charset:
+        case WebCore::StyleRuleType::Import:
+        case WebCore::StyleRuleType::FontFace:
+        case WebCore::StyleRuleType::Page:
+        case WebCore::StyleRuleType::Keyframes:
+        case WebCore::StyleRuleType::Keyframe:
+        case WebCore::StyleRuleType::Margin:
+        case WebCore::StyleRuleType::Namespace:
+        case WebCore::StyleRuleType::CounterStyle:
+        case WebCore::StyleRuleType::LayerStatement:
+        case WebCore::StyleRuleType::FontPaletteValues:
+            // These rule types do not contain child rules, and therefore have nothing to display in the Styles panel in
+            // the details sidebar of the Elements Tab in Web Inspector.
+            break;
+        }
     }
 }
@@ -431 +456 @@
         return &downcast<CSSLayerBlockRule>(*rule).cssRules();
 
+    if (auto* containerRule = dynamicDowncast<CSSContainerRule>(rule))
+        return &containerRule->cssRules();
+
     return nullptr;
 }
@@ -483 +511 @@
                 layerRulePayload->setText(layerName);
             ruleGroupingPayloads.append(WTFMove(layerRulePayload));
+        } else if (auto* containerRule = dynamicDowncast<CSSContainerRule>(parentRule)) {
+            auto containerRulePayload = Protocol::CSS::Grouping::create()
+                .setType(Protocol::CSS::Grouping::Type::ContainerRule)
+                .release();
+
+            StringBuilder builder;
+            auto nameFilter = containerRule->nameFilterText();
+            if (!nameFilter.isEmpty())
+                builder.append(nameFilter, ' ');
+            builder.append(containerRule->conditionText());
+            containerRulePayload->setText(builder.toString());
+
+            ruleGroupingPayloads.append(WTFMove(containerRulePayload));
         }
 

trunk/Source/WebCore/style/InspectorCSSOMWrappers.cpp

@@ -30 +30 @@
 #include "InspectorCSSOMWrappers.h"
 
+#include "CSSContainerRule.h"
 #include "CSSImportRule.h"
 #include "CSSLayerBlockRule.h"
@@ -64 +65 @@
         
         switch (cssRule->styleRuleType()) {
+        case StyleRuleType::Container:
+            collect(downcast<CSSContainerRule>(cssRule));
+            break;
         case StyleRuleType::Import:
             collect(downcast<CSSImportRule>(*cssRule).styleSheet());

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-03-31  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Support Container Queries in the Styles sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=238346
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Models/CSSGrouping.js:
+        (WI.CSSGrouping.prototype.get isContainer):
+        (WI.CSSGrouping.prototype.get prefix):
+        (WI.CSSGrouping):
+
 2022-03-31  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js

@@ -62 +62 @@
     }
 
+    get isContainer()
+    {
+        return this._type === WI.CSSGrouping.Type.ContainerRule;
+    }
+
     get prefix()
     {
@@ -69 +74 @@
         if (this.isLayer)
             return "@layer";
+
+        if (this.isContainer)
+            return "@container";
 
         console.assert(this.isMedia);
@@ -83 +91 @@
     LayerRule: "layer-rule",
     LayerImportRule: "layer-import-rule",
+    ContainerRule: "container-rule",
 };