Changeset 248289 in webkit


Ignore:
Timestamp:
Aug 5, 2019 10:04:15 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Styles: show @supports CSS groupings
​https://bugs.webkit.org/show_bug.cgi?id=200419

Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

  • inspector/protocol/CSS.json:

Rename CSSMedia to Grouping and remove the sourceLine value, as it was never populated
and wasn't used by Web Inspector.

Source/WebCore:

Test: inspector/css/getMatchedStylesForNode.html

  • inspector/InspectorStyleSheet.cpp:

(WebCore::buildArrayForGroupings): Added.
(WebCore::InspectorStyleSheet::buildObjectForRule):
(WebCore::buildMediaObject): Deleted.
(WebCore::fillMediaListChain): Deleted.

  • css/MediaList.h:
  • css/MediaList.cpp:

(WebCore::MediaQuerySet::MediaQuerySet):
Remove the lastLine as it was never set by anyone and wasn't used by Web Inspector.

Source/WebInspectorUI:

  • UserInterface/Models/CSSGrouping.js: Renamed from Source/WebInspectorUI/UserInterface/Models/CSSMedia.js.

(WI.CSSGrouping):
(WI.CSSGrouping.prototype.get type):
(WI.CSSGrouping.prototype.get text):
(WI.CSSGrouping.prototype.get sourceCodeLocation):
(WI.CSSGrouping.prototype.get isMedia): Added.
(WI.CSSGrouping.prototype.get isSupports): Added.
(WI.CSSGrouping.prototype.get prefix): Added.

  • UserInterface/Models/CSSStyleDeclaration.js:

(WI.CSSStyleDeclaration.prototype.get groupings): Added.
(WI.CSSStyleDeclaration.prototype.generateCSSRuleString):
(WI.CSSStyleDeclaration.prototype.get mediaList): Deleted.

  • UserInterface/Models/CSSRule.js:

(WI.CSSRule):
(WI.CSSRule.prototype.get groupings): Added.
(WI.CSSRule.prototype.update):
(WI.CSSRule.prototype._selectorResolved):
(WI.CSSRule.prototype.get mediaList): Deleted.

  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles.prototype._parseRulePayload):
(WI.DOMNodeStyles.prototype.rulesForSelector): Deleted.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleEditorFilterApplied):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._createMediaHeader): Deleted.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:

(.spreadsheet-css-declaration :matches(.header, .header-groupings)): Added.
(.spreadsheet-css-declaration :matches(.header, .header-groupings):first-child): Added.
(.spreadsheet-css-declaration .header-groupings > .grouping): Added.
(.spreadsheet-css-declaration .header-groupings + .header > .selector > .icon): Added.
(.spreadsheet-css-declaration :matches(.header, .header-media)): Deleted.
(.spreadsheet-css-declaration :matches(.header, .header-media):first-child): Deleted.
(.spreadsheet-css-declaration .media-label): Deleted.

  • UserInterface/Controllers/CSSManager.js:

(WI.CSSManager.protocolGroupingTypeToEnum): Added.
(WI.CSSManager.protocolMediaSourceToEnum): Deleted.

  • UserInterface/Main.html:
  • UserInterface/Test.html:

LayoutTests:

  • inspector/css/getMatchedStylesForNode.html:
  • inspector/css/getMatchedStylesForNode-expected.txt:
Location:
trunk
Files:
18 edited
1 moved

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r248287 r248289  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: show @supports CSS groupings
     4        https://bugs.webkit.org/show_bug.cgi?id=200419
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/css/getMatchedStylesForNode.html:
     9        * inspector/css/getMatchedStylesForNode-expected.txt:
     10
    1112019-08-05  Devin Rousso  <drousso@apple.com>
    212

  • trunk/LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt

    r242939 r248289  
    791791            "cssProperties": [
    792792              {
    793                 "name": "z-index",
    794                 "value": "0",
    795                 "text": "z-index: 0;",
    796                 "range": "<filtered>",
    797                 "implicit": false,
    798                 "status": "active"
    799               }
    800             ],
    801             "shorthandEntries": [],
    802             "styleId": "<filtered>",
    803             "width": "",
    804             "height": "",
    805             "range": "<filtered>",
    806             "cssText": " z-index: 0; "
    807           },
    808           "sourceURL": "<filtered>",
    809           "ruleId": "<filtered>"
     793                "name": "color",
     794                "value": "red",
     795                "text": "color: red;",
     796                "range": "<filtered>",
     797                "implicit": false,
     798                "status": "active"
     799              }
     800            ],
     801            "shorthandEntries": [],
     802            "styleId": "<filtered>",
     803            "width": "",
     804            "height": "",
     805            "range": "<filtered>",
     806            "cssText": " color: red; "
     807          },
     808          "sourceURL": "<filtered>",
     809          "ruleId": "<filtered>",
     810          "groupings": [
     811            {
     812              "text": "(min-width: 0px)",
     813              "type": "media-import-rule",
     814              "sourceURL": "<filtered>"
     815            }
     816          ]
     817        },
     818        "matchingSelectors": [
     819          0
     820        ]
     821      },
     822      {
     823        "rule": {
     824          "selectorList": {
     825            "selectors": [
     826              {
     827                "text": "body",
     828                "specificity": [
     829                  0,
     830                  0,
     831                  1
     832                ]
     833              }
     834            ],
     835            "text": "body",
     836            "range": "<filtered>"
     837          },
     838          "sourceLine": "<filtered>",
     839          "origin": "regular",
     840          "style": {
     841            "cssProperties": [
     842              {
     843                "name": "color",
     844                "value": "red",
     845                "text": "color: red;",
     846                "range": "<filtered>",
     847                "implicit": false,
     848                "status": "active"
     849              }
     850            ],
     851            "shorthandEntries": [],
     852            "styleId": "<filtered>",
     853            "width": "",
     854            "height": "",
     855            "range": "<filtered>",
     856            "cssText": " color: red; "
     857          },
     858          "sourceURL": "<filtered>",
     859          "ruleId": "<filtered>"
     860        },
     861        "matchingSelectors": [
     862          0
     863        ]
     864      },
     865      {
     866        "rule": {
     867          "selectorList": {
     868            "selectors": [
     869              {
     870                "text": "body",
     871                "specificity": [
     872                  0,
     873                  0,
     874                  1
     875                ]
     876              }
     877            ],
     878            "text": "body",
     879            "range": "<filtered>"
     880          },
     881          "sourceLine": "<filtered>",
     882          "origin": "regular",
     883          "style": {
     884            "cssProperties": [
     885              {
     886                "name": "color",
     887                "value": "red",
     888                "text": "color: red;",
     889                "range": "<filtered>",
     890                "implicit": false,
     891                "status": "active"
     892              }
     893            ],
     894            "shorthandEntries": [],
     895            "styleId": "<filtered>",
     896            "width": "",
     897            "height": "",
     898            "range": "<filtered>",
     899            "cssText": " color: red; "
     900          },
     901          "sourceURL": "<filtered>",
     902          "ruleId": "<filtered>",
     903          "groupings": [
     904            {
     905              "text": "(min-width: 1px)",
     906              "type": "media-rule",
     907              "sourceURL": "<filtered>"
     908            }
     909          ]
     910        },
     911        "matchingSelectors": [
     912          0
     913        ]
     914      },
     915      {
     916        "rule": {
     917          "selectorList": {
     918            "selectors": [
     919              {
     920                "text": "body",
     921                "specificity": [
     922                  0,
     923                  0,
     924                  1
     925                ]
     926              }
     927            ],
     928            "text": "body",
     929            "range": "<filtered>"
     930          },
     931          "sourceLine": "<filtered>",
     932          "origin": "regular",
     933          "style": {
     934            "cssProperties": [
     935              {
     936                "name": "color",
     937                "value": "red",
     938                "text": "color: red;",
     939                "range": "<filtered>",
     940                "implicit": false,
     941                "status": "active"
     942              }
     943            ],
     944            "shorthandEntries": [],
     945            "styleId": "<filtered>",
     946            "width": "",
     947            "height": "",
     948            "range": "<filtered>",
     949            "cssText": " color: red; "
     950          },
     951          "sourceURL": "<filtered>",
     952          "ruleId": "<filtered>",
     953          "groupings": [
     954            {
     955              "text": "(display: block)",
     956              "type": "supports-rule",
     957              "sourceURL": "<filtered>"
     958            },
     959            {
     960              "text": "(min-width: 2px)",
     961              "type": "media-rule",
     962              "sourceURL": "<filtered>"
     963            }
     964          ]
     965        },
     966        "matchingSelectors": [
     967          0
     968        ]
     969      },
     970      {
     971        "rule": {
     972          "selectorList": {
     973            "selectors": [
     974              {
     975                "text": "body",
     976                "specificity": [
     977                  0,
     978                  0,
     979                  1
     980                ]
     981              }
     982            ],
     983            "text": "body",
     984            "range": "<filtered>"
     985          },
     986          "sourceLine": "<filtered>",
     987          "origin": "regular",
     988          "style": {
     989            "cssProperties": [
     990              {
     991                "name": "color",
     992                "value": "red",
     993                "text": "color: red;",
     994                "range": "<filtered>",
     995                "implicit": false,
     996                "status": "active"
     997              }
     998            ],
     999            "shorthandEntries": [],
     1000            "styleId": "<filtered>",
     1001            "width": "",
     1002            "height": "",
     1003            "range": "<filtered>",
     1004            "cssText": " color: red;"
     1005          },
     1006          "sourceURL": "<filtered>",
     1007          "ruleId": "<filtered>",
     1008          "groupings": [
     1009            {
     1010              "text": "(min-width: 3px)",
     1011              "type": "media-style-node",
     1012              "sourceURL": "<filtered>"
     1013            }
     1014          ]
     1015        },
     1016        "matchingSelectors": [
     1017          0
     1018        ]
     1019      },
     1020      {
     1021        "rule": {
     1022          "selectorList": {
     1023            "selectors": [
     1024              {
     1025                "text": "body",
     1026                "specificity": [
     1027                  0,
     1028                  0,
     1029                  1
     1030                ]
     1031              }
     1032            ],
     1033            "text": "body",
     1034            "range": "<filtered>"
     1035          },
     1036          "sourceLine": "<filtered>",
     1037          "origin": "regular",
     1038          "style": {
     1039            "cssProperties": [
     1040              {
     1041                "name": "color",
     1042                "value": "red",
     1043                "text": "color: red;",
     1044                "range": "<filtered>",
     1045                "implicit": false,
     1046                "status": "active"
     1047              }
     1048            ],
     1049            "shorthandEntries": [],
     1050            "styleId": "<filtered>",
     1051            "width": "",
     1052            "height": "",
     1053            "range": "<filtered>",
     1054            "cssText": " color: red; "
     1055          },
     1056          "sourceURL": "<filtered>",
     1057          "ruleId": "<filtered>",
     1058          "groupings": [
     1059            {
     1060              "text": "(min-width: 4px)",
     1061              "type": "media-link-node",
     1062              "sourceURL": "<filtered>"
     1063            }
     1064          ]
    8101065        },
    8111066        "matchingSelectors": [

  • trunk/LayoutTests/inspector/css/getMatchedStylesForNode.html

    r242939 r248289  
    22<head>
    33<script src="../../http/tests/inspector/resources/protocol-test.js"></script>
     4<style>
     5    @import url(resources/external.css?1) (min-width: 0px);
     6
     7    body { color: red; }
     8    @media (min-width: 1px) { body { color: red; } }
     9    @media (min-width: 2px) { @supports(display: block) { body { color: red; } } }
     10</style>
     11<style media="(min-width: 3px)">
     12    body { color: red;}
     13</style>
     14<link rel="stylesheet" href="resources/external.css?2" media="(min-width: 4px)">
     15<style>
     16    div#x { z-index: 100; }
     17    #x { z-index: 200; }
     18    div { z-index: 300; }
     19
     20    div::first-line { z-index: 1; }
     21    div::first-letter { z-index: 2; }
     22    div::marker { z-index: 3; }
     23    div::before { z-index: 4; }
     24    div::after { z-index: 5; }
     25    div::selection { z-index: 6; }
     26    div::-webkit-scrollbar { z-index: 7; }
     27    div::-webkit-scrollbar-thumb { z-index: 8; }
     28    div::-webkit-scrollbar-button { z-index: 9; }
     29    div::-webkit-scrollbar-track { z-index: 10; }
     30    div::-webkit-scrollbar-track-piece { z-index: 11; }
     31    div::-webkit-scrollbar-corner { z-index: 12; }
     32    div::-webkit-resizer { z-index: 13; }
     33</style>
    434<script>
    535function test()
    … …  
    76106</head>
    77107<body onLoad="runTest()">
    78     <p>Testing CSS.getMatchedStylesForNode.</p>
    79 
    80     <style>
    81     body { z-index: 0; }
    82 
    83     div#x { z-index: 100; }
    84     #x { z-index: 200; }
    85     div { z-index: 300; }
    86 
    87     div::first-line { z-index: 1; }
    88     div::first-letter { z-index: 2; }
    89     div::marker { z-index: 3; }
    90     div::before { z-index: 4; }
    91     div::after { z-index: 5; }
    92     div::selection { z-index: 6; }
    93     div::-webkit-scrollbar { z-index: 7; }
    94     div::-webkit-scrollbar-thumb { z-index: 8; }
    95     div::-webkit-scrollbar-button { z-index: 9; }
    96     div::-webkit-scrollbar-track { z-index: 10; }
    97     div::-webkit-scrollbar-track-piece { z-index: 11; }
    98     div::-webkit-scrollbar-corner { z-index: 12; }
    99     div::-webkit-resizer { z-index: 13; }
    100     </style>
    101     <div id="x"></div>
     108<p>Testing CSS.getMatchedStylesForNode.</p>
     109<div id="x"></div>
    102110</body>
    103111</html>

  • trunk/Source/JavaScriptCore/ChangeLog

    r248287 r248289  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: show @supports CSS groupings
     4        https://bugs.webkit.org/show_bug.cgi?id=200419
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/protocol/CSS.json:
     9        Rename `CSSMedia` to `Grouping` and remove the `sourceLine` value, as it was never populated
     10        and wasn't used by Web Inspector.
     11
    1122019-08-05  Devin Rousso  <drousso@apple.com>
    213

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

    r242939 r248289  
    145145                { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
    146146                { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
    147                 { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
     147                { "name": "groupings", "type": "array", "items": { "$ref": "Grouping" }, "optional": true, "description": "Grouping list array (for rules involving @media/@supports). The array enumerates CSS groupings starting with the innermost one, going outwards." }
    148148            ]
    149149        },
    … …  
    222222        },
    223223        {
    224             "id": "CSSMedia",
    225             "type": "object",
    226             "description": "CSS media query descriptor.",
     224            "id": "Grouping",
     225            "type": "object",
     226            "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.) and @supports descriptor.",
    227227            "properties": [
    228228                { "name": "text", "type": "string", "description": "Media query text." },
    229                 { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
    230                 { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
    231                 { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
     229                { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-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, ." },
     230                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." }
    232231            ]
    233232        }

  • trunk/Source/WebCore/ChangeLog

    r248288 r248289  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: show @supports CSS groupings
     4        https://bugs.webkit.org/show_bug.cgi?id=200419
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Test: inspector/css/getMatchedStylesForNode.html
     9
     10        * inspector/InspectorStyleSheet.cpp:
     11        (WebCore::buildArrayForGroupings): Added.
     12        (WebCore::InspectorStyleSheet::buildObjectForRule):
     13        (WebCore::buildMediaObject): Deleted.
     14        (WebCore::fillMediaListChain): Deleted.
     15
     16        * css/MediaList.h:
     17        * css/MediaList.cpp:
     18        (WebCore::MediaQuerySet::MediaQuerySet):
     19        Remove the `lastLine` as it was never set by anyone and wasn't used by Web Inspector.
     20
    1212019-08-05  Youenn Fablet  <youenn@apple.com>
    222

  • trunk/Source/WebCore/css/MediaList.cpp

    r232044 r248289  
    7474MediaQuerySet::MediaQuerySet(const MediaQuerySet& o)
    7575    : RefCounted()
    76     , m_lastLine(o.m_lastLine)
    7776    , m_queries(o.m_queries)
    7877{

  • trunk/Source/WebCore/css/MediaList.h

    r232044 r248289  
    5757    const Vector<MediaQuery>& queryVector() const { return m_queries; }
    5858
    59     int lastLine() const { return m_lastLine; }
    60     void setLastLine(int lastLine) { m_lastLine = lastLine; }
    61 
    6259    WEBCORE_EXPORT String mediaText() const;
    6360
    … …  
    7168    MediaQuerySet(const MediaQuerySet&);
    7269
    73     int m_lastLine { 0 };
    7470    Vector<MediaQuery> m_queries;
    7571};

  • trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp

    r243273 r248289  
    380380}
    381381
    382 enum MediaListSource {
    383     MediaListSourceLinkedSheet,
    384     MediaListSourceInlineSheet,
    385     MediaListSourceMediaRule,
    386     MediaListSourceImportRule
    387 };
    388 
    389382static RefPtr<Inspector::Protocol::CSS::SourceRange> buildSourceRangeObject(const SourceRange& range, const Vector<size_t>& lineEndings, int* endingLine = nullptr)
    390383{
    … …  
    406399}
    407400
    408 static Ref<Inspector::Protocol::CSS::CSSMedia> buildMediaObject(const MediaList* media, MediaListSource mediaListSource, const String& sourceURL)
    409 {
    410     // Make certain compilers happy by initializing |source| up-front.
    411     Inspector::Protocol::CSS::CSSMedia::Source source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet;
    412     switch (mediaListSource) {
    413     case MediaListSourceMediaRule:
    414         source = Inspector::Protocol::CSS::CSSMedia::Source::MediaRule;
    415         break;
    416     case MediaListSourceImportRule:
    417         source = Inspector::Protocol::CSS::CSSMedia::Source::ImportRule;
    418         break;
    419     case MediaListSourceLinkedSheet:
    420         source = Inspector::Protocol::CSS::CSSMedia::Source::LinkedSheet;
    421         break;
    422     case MediaListSourceInlineSheet:
    423         source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet;
    424         break;
    425     }
    426 
    427     auto mediaObject = Inspector::Protocol::CSS::CSSMedia::create()
    428         .setText(media->mediaText())
    429         .setSource(source)
    430         .release();
    431 
    432     if (!sourceURL.isEmpty()) {
    433         mediaObject->setSourceURL(sourceURL);
    434         mediaObject->setSourceLine(media->queries()->lastLine());
    435     }
    436     return mediaObject;
    437 }
    438 
    439401static RefPtr<CSSRuleList> asCSSRuleList(CSSStyleSheet* styleSheet)
    440402{
    … …  
    466428}
    467429
    468 static void fillMediaListChain(CSSRule* rule, JSON::ArrayOf<Inspector::Protocol::CSS::CSSMedia>& mediaArray)
    469 {
    470     MediaList* mediaList;
    471     CSSRule* parentRule = rule;
    472     String sourceURL;
     430static Ref<JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>> buildArrayForGroupings(CSSRule& rule)
     431{
     432    auto groupingsPayload = JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>::create();
     433
     434    auto* parentRule = &rule;
    473435    while (parentRule) {
    474         CSSStyleSheet* parentStyleSheet = nullptr;
    475         bool isMediaRule = true;
    476         if (is<CSSMediaRule>(*parentRule)) {
    477             CSSMediaRule& mediaRule = downcast<CSSMediaRule>(*parentRule);
    478             mediaList = mediaRule.media();
    479             parentStyleSheet = mediaRule.parentStyleSheet();
    480         } else if (is<CSSImportRule>(*parentRule)) {
    481             CSSImportRule& importRule = downcast<CSSImportRule>(*parentRule);
    482             mediaList = &importRule.media();
    483             parentStyleSheet = importRule.parentStyleSheet();
    484             isMediaRule = false;
    485         } else
    486             mediaList = nullptr;
    487 
    488         if (parentStyleSheet) {
    489             sourceURL = parentStyleSheet->contents().baseURL();
    490             if (sourceURL.isEmpty())
    491                 sourceURL = InspectorDOMAgent::documentURLString(parentStyleSheet->ownerDocument());
    492         } else
    493             sourceURL = emptyString();
    494 
    495         if (mediaList && mediaList->length())
    496             mediaArray.addItem(buildMediaObject(mediaList, isMediaRule ? MediaListSourceMediaRule : MediaListSourceImportRule, sourceURL));
    497 
    498         if (parentRule->parentRule())
     436        RefPtr<Inspector::Protocol::CSS::Grouping> ruleGroupingPayload;
     437
     438        if (is<CSSMediaRule>(parentRule)) {
     439            auto* media = downcast<CSSMediaRule>(parentRule)->media();
     440            if (media && media->length() && media->mediaText() != "all") {
     441                ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
     442                    .setText(media->mediaText())
     443                    .setType(Inspector::Protocol::CSS::Grouping::Type::MediaRule)
     444                    .release();
     445            }
     446        } else if (is<CSSImportRule>(parentRule)) {
     447            auto& media = downcast<CSSImportRule>(parentRule)->media();
     448            if (media.length() && media.mediaText() != "all") {
     449                ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
     450                    .setText(media.mediaText())
     451                    .setType(Inspector::Protocol::CSS::Grouping::Type::MediaImportRule)
     452                    .release();
     453            }
     454        } else if (is<CSSSupportsRule>(parentRule)) {
     455            ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
     456                .setText(downcast<CSSSupportsRule>(parentRule)->conditionText())
     457                .setType(Inspector::Protocol::CSS::Grouping::Type::SupportsRule)
     458                .release();
     459        }
     460
     461        if (ruleGroupingPayload) {
     462            if (auto* parentStyleSheet = parentRule->parentStyleSheet()) {
     463                String sourceURL = parentStyleSheet->contents().baseURL();
     464                if (sourceURL.isEmpty()) {
     465                    if (auto* ownerDocument = parentStyleSheet->ownerDocument())
     466                        sourceURL = InspectorDOMAgent::documentURLString(ownerDocument);
     467                }
     468                if (!sourceURL.isEmpty())
     469                    ruleGroupingPayload->setSourceURL(sourceURL);
     470            }
     471
     472            groupingsPayload->addItem(WTFMove(ruleGroupingPayload));
     473        }
     474
     475        if (parentRule->parentRule()) {
    499476            parentRule = parentRule->parentRule();
    500         else {
    501             CSSStyleSheet* styleSheet = parentRule->parentStyleSheet();
    502             while (styleSheet) {
    503                 mediaList = styleSheet->media();
    504                 if (mediaList && mediaList->length()) {
    505                     Document* doc = styleSheet->ownerDocument();
    506                     if (doc)
    507                         sourceURL = doc->url();
    508                     else if (!styleSheet->contents().baseURL().isEmpty())
    509                         sourceURL = styleSheet->contents().baseURL();
    510                     else
    511                         sourceURL = emptyString();
    512                     mediaArray.addItem(buildMediaObject(mediaList, styleSheet->ownerNode() ? MediaListSourceLinkedSheet : MediaListSourceInlineSheet, sourceURL));
    513                 }
    514                 parentRule = styleSheet->ownerRule();
    515                 if (parentRule)
    516                     break;
    517                 styleSheet = styleSheet->parentStyleSheet();
     477            continue;
     478        }
     479
     480        auto* styleSheet = parentRule->parentStyleSheet();
     481        while (styleSheet) {
     482            auto* media = styleSheet->media();
     483            if (media && media->length() && media->mediaText() != "all") {
     484                auto sheetGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
     485                    .setText(media->mediaText())
     486                    .setType(is<HTMLStyleElement>(styleSheet->ownerNode()) ? Inspector::Protocol::CSS::Grouping::Type::MediaStyleNode: Inspector::Protocol::CSS::Grouping::Type::MediaLinkNode)
     487                    .release();
     488
     489                String sourceURL;
     490                if (auto* ownerDocument = styleSheet->ownerDocument())
     491                    sourceURL = ownerDocument->url();
     492                else if (!styleSheet->contents().baseURL().isEmpty())
     493                    sourceURL = styleSheet->contents().baseURL();
     494                if (!sourceURL.isEmpty())
     495                    sheetGroupingPayload->setSourceURL(sourceURL);
     496
     497                groupingsPayload->addItem(WTFMove(sheetGroupingPayload));
    518498            }
     499
     500            parentRule = styleSheet->ownerRule();
     501            if (parentRule)
     502                break;
     503
     504            styleSheet = styleSheet->parentStyleSheet();
    519505        }
    520506    }
     507
     508    return groupingsPayload;
    521509}
    522510
    … …  
    11741162    }
    11751163
    1176     auto mediaArray = ArrayOf<Inspector::Protocol::CSS::CSSMedia>::create();
    1177 
    1178     fillMediaListChain(rule, mediaArray.get());
    1179     if (mediaArray->length())
    1180         result->setMedia(WTFMove(mediaArray));
     1164    auto groupingsPayload = buildArrayForGroupings(*rule);
     1165    if (groupingsPayload->length())
     1166        result->setGroupings(WTFMove(groupingsPayload));
    11811167
    11821168    return result;

  • trunk/Source/WebInspectorUI/ChangeLog

    r248287 r248289  
     12019-08-05  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Styles: show @supports CSS groupings
     4        https://bugs.webkit.org/show_bug.cgi?id=200419
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Models/CSSGrouping.js: Renamed from Source/WebInspectorUI/UserInterface/Models/CSSMedia.js.
     9        (WI.CSSGrouping):
     10        (WI.CSSGrouping.prototype.get type):
     11        (WI.CSSGrouping.prototype.get text):
     12        (WI.CSSGrouping.prototype.get sourceCodeLocation):
     13        (WI.CSSGrouping.prototype.get isMedia): Added.
     14        (WI.CSSGrouping.prototype.get isSupports): Added.
     15        (WI.CSSGrouping.prototype.get prefix): Added.
     16
     17        * UserInterface/Models/CSSStyleDeclaration.js:
     18        (WI.CSSStyleDeclaration.prototype.get groupings): Added.
     19        (WI.CSSStyleDeclaration.prototype.generateCSSRuleString):
     20        (WI.CSSStyleDeclaration.prototype.get mediaList): Deleted.
     21
     22        * UserInterface/Models/CSSRule.js:
     23        (WI.CSSRule):
     24        (WI.CSSRule.prototype.get groupings): Added.
     25        (WI.CSSRule.prototype.update):
     26        (WI.CSSRule.prototype._selectorResolved):
     27        (WI.CSSRule.prototype.get mediaList): Deleted.
     28
     29        * UserInterface/Models/DOMNodeStyles.js:
     30        (WI.DOMNodeStyles.prototype._parseRulePayload):
     31        (WI.DOMNodeStyles.prototype.rulesForSelector): Deleted.
     32
     33        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     34        (WI.SpreadsheetCSSStyleDeclarationSection):
     35        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
     36        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleEditorFilterApplied):
     37        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._createMediaHeader): Deleted.
     38        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
     39        (.spreadsheet-css-declaration :matches(.header, .header-groupings)): Added.
     40        (.spreadsheet-css-declaration :matches(.header, .header-groupings):first-child): Added.
     41        (.spreadsheet-css-declaration .header-groupings > .grouping): Added.
     42        (.spreadsheet-css-declaration .header-groupings + .header > .selector > .icon): Added.
     43        (.spreadsheet-css-declaration :matches(.header, .header-media)): Deleted.
     44        (.spreadsheet-css-declaration :matches(.header, .header-media):first-child): Deleted.
     45        (.spreadsheet-css-declaration .media-label): Deleted.
     46
     47        * UserInterface/Controllers/CSSManager.js:
     48        (WI.CSSManager.protocolGroupingTypeToEnum): Added.
     49        (WI.CSSManager.protocolMediaSourceToEnum): Deleted.
     50
     51        * UserInterface/Main.html:
     52        * UserInterface/Test.html:
     53
    1542019-08-05  Devin Rousso  <drousso@apple.com>
    255

  • trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js

    r248274 r248289  
    8282    }
    8383
    84     static protocolMediaSourceToEnum(source)
    85     {
    86         switch (source) {
    87         case CSSAgent.CSSMediaSource.MediaRule:
    88             return WI.CSSMedia.Type.MediaRule;
    89         case CSSAgent.CSSMediaSource.ImportRule:
    90             return WI.CSSMedia.Type.ImportRule;
    91         case CSSAgent.CSSMediaSource.LinkedSheet:
    92             return WI.CSSMedia.Type.LinkedStyleSheet;
    93         case CSSAgent.CSSMediaSource.InlineSheet:
    94             return WI.CSSMedia.Type.InlineStyleSheet;
    95         default:
    96             console.assert(false, "Unknown CSS.CSSMediaSource", source);
    97             return WI.CSSMedia.Type.MediaRule;
    98         }
     84    static protocolGroupingTypeToEnum(type)
     85    {
     86        // COMPATIBILITY (iOS 13): CSS.Grouping did not exist yet.
     87        if (!InspectorBackend.domains.CSS.Grouping) {
     88            switch (type) {
     89            case "mediaRule":
     90                return WI.CSSGrouping.Type.MediaRule;
     91            case "importRule":
     92                return WI.CSSGrouping.Type.MediaImportRule;
     93            case "linkedSheet":
     94                return WI.CSSGrouping.Type.MediaLinkNode;
     95            case "inlineSheet":
     96                return WI.CSSGrouping.Type.MediaStyleNode;
     97            }
     98        }
     99        return type;
    99100    }
    100101

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r248202 r248289  
    362362    <script src="Models/CPUTimelineRecord.js"></script>
    363363    <script src="Models/CSSCompletions.js"></script>
     364    <script src="Models/CSSGrouping.js"></script>
    364365    <script src="Models/CSSKeywordCompletions.js"></script>
    365     <script src="Models/CSSMedia.js"></script>
    366366    <script src="Models/CSSProperty.js"></script>
    367367    <script src="Models/CSSRule.js"></script>

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

    r248288 r248289  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2019 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WI.CSSMedia = class CSSMedia
     26WI.CSSGrouping = class CSSGrouping
    2727{
    2828    constructor(type, text, sourceCodeLocation)
    2929    {
     30        console.assert(Object.values(CSSGrouping.Type).includes(type));
     31        console.assert(typeof text === "string" && text.length);
    3032        console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WI.SourceCodeLocation);
    3133
    32         this._type = type || null;
    33         this._text = text || "";
     34        this._type = type;
     35        this._text = text;
    3436        this._sourceCodeLocation = sourceCodeLocation || null;
    3537    }
    … …  
    4042    get text() { return this._text; }
    4143    get sourceCodeLocation() { return this._sourceCodeLocation; }
     44
     45    get isMedia()
     46    {
     47        return this._type === WI.CSSGrouping.Type.MediaRule
     48            || this._type === WI.CSSGrouping.Type.MediaImportRule
     49            || this._type === WI.CSSGrouping.Type.MediaLinkNode
     50            || this._type === WI.CSSGrouping.Type.MediaStyleNode;
     51    }
     52
     53    get isSupports()
     54    {
     55        return this._type === WI.CSSGrouping.Type.SupportsRule;
     56    }
     57
     58    get prefix()
     59    {
     60        if (this.isSupports)
     61            return "@supports";
     62
     63        console.assert(this.isMedia);
     64        return "@media";
     65    }
    4266};
    4367
    44 WI.CSSMedia.Type = {
    45     MediaRule: "css-media-type-media-rule",
    46     ImportRule: "css-media-type-import-rule",
    47     LinkedStyleSheet: "css-media-type-linked-stylesheet",
    48     InlineStyleSheet: "css-media-type-inline-stylesheet"
     68WI.CSSGrouping.Type = {
     69    MediaRule: "media-rule",
     70    MediaImportRule: "media-import-rule",
     71    MediaLinkNode: "media-link-node",
     72    MediaStyleNode: "media-style-node",
     73    SupportsRule: "supports-rule",
    4974};

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js

    r243264 r248289  
    2626WI.CSSRule = class CSSRule extends WI.Object
    2727{
    28     constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
     28    constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)
    2929    {
    3030        super();
    … …  
    3838        this._initialState = null;
    3939
    40         this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true);
     40        this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings, true);
    4141    }
    4242
    4343    // Public
    4444
     45    get ownerStyleSheet() { return this._ownerStyleSheet; }
    4546    get id() { return this._id; }
     47    get type() { return this._type; }
    4648    get initialState() { return this._initialState; }
    47 
    48     get ownerStyleSheet()
    49     {
    50         return this._ownerStyleSheet;
    51     }
     49    get sourceCodeLocation() { return this._sourceCodeLocation; }
     50    get selectors() { return this._selectors; }
     51    get matchedSelectorIndices() { return this._matchedSelectorIndices; }
     52    get style() { return this._style; }
     53    get groupings() { return this._groupings; }
    5254
    5355    get editable()
    5456    {
    5557        return !!this._id && (this._type === WI.CSSStyleSheet.Type.Author || this._type === WI.CSSStyleSheet.Type.Inspector);
    56     }
    57 
    58     update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
    59     {
    60         sourceCodeLocation = sourceCodeLocation || null;
    61         selectorText = selectorText || "";
    62         selectors = selectors || [];
    63         matchedSelectorIndices = matchedSelectorIndices || [];
    64         style = style || null;
    65         mediaList = mediaList || [];
    66 
    67         if (this._style)
    68             this._style.ownerRule = null;
    69 
    70         this._sourceCodeLocation = sourceCodeLocation;
    71         this._selectorText = selectorText;
    72         this._selectors = selectors;
    73         this._matchedSelectorIndices = matchedSelectorIndices;
    74         this._style = style;
    75         this._mediaList = mediaList;
    76 
    77         if (this._style)
    78             this._style.ownerRule = this;
    79     }
    80 
    81     get type()
    82     {
    83         return this._type;
    84     }
    85 
    86     get sourceCodeLocation()
    87     {
    88         return this._sourceCodeLocation;
    8958    }
    9059
    … …  
    10877    }
    10978
    110     get selectors()
     79    update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)
    11180    {
    112         return this._selectors;
    113     }
     81        sourceCodeLocation = sourceCodeLocation || null;
     82        selectorText = selectorText || "";
     83        selectors = selectors || [];
     84        matchedSelectorIndices = matchedSelectorIndices || [];
     85        style = style || null;
     86        groupings = groupings || [];
    11487
    115     get matchedSelectorIndices()
    116     {
    117         return this._matchedSelectorIndices;
    118     }
     88        if (this._style)
     89            this._style.ownerRule = null;
    11990
    120     get style()
    121     {
    122         return this._style;
    123     }
     91        this._sourceCodeLocation = sourceCodeLocation;
     92        this._selectorText = selectorText;
     93        this._selectors = selectors;
     94        this._matchedSelectorIndices = matchedSelectorIndices;
     95        this._style = style;
     96        this._groupings = groupings;
    12497
    125     get mediaList()
    126     {
    127         return this._mediaList;
     98        if (this._style)
     99            this._style.ownerRule = this;
    128100    }
    129101
    … …  
    174146                }
    175147
    176                 this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._mediaList);
     148                this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._groupings);
    177149            }
    178150        }

  • trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js

    r248279 r248289  
    288288    }
    289289
    290     get mediaList()
     290    get groupings()
    291291    {
    292292        if (this._ownerRule)
    293             return this._ownerRule.mediaList;
     293            return this._ownerRule.groupings;
    294294        return [];
    295295    }
    … …  
    512512        let indentString = WI.indentString();
    513513        let styleText = "";
    514         let mediaList = this.mediaList.filter((media) => media.text !== "all");
    515         let mediaQueriesCount = mediaList.length;
    516         for (let i = mediaQueriesCount - 1; i >= 0; --i)
    517             styleText += indentString.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
    518 
    519         styleText += indentString.repeat(mediaQueriesCount) + this.selectorText + " {\n";
     514        let groupings = this.groupings.filter((grouping) => grouping.text !== "all");
     515        let groupingsCount = groupings.length;
     516        for (let i = groupingsCount - 1; i >= 0; --i)
     517            styleText += indentString.repeat(groupingsCount - i - 1) + groupings[i].prefix + " " + groupings[i].text + " {\n";
     518
     519        styleText += indentString.repeat(groupingsCount) + this.selectorText + " {\n";
    520520
    521521        for (let property of (this._styleSheetTextRange ? this.visibleProperties : this._properties))
    522             styleText += indentString.repeat(mediaQueriesCount + 1) + property.formattedText + "\n";
    523 
    524         for (let i = mediaQueriesCount; i > 0; --i)
     522            styleText += indentString.repeat(groupingsCount + 1) + property.formattedText + "\n";
     523
     524        for (let i = groupingsCount; i > 0; --i)
    525525            styleText += indentString.repeat(i) + "}\n";
    526526

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

    r246223 r248289  
    124124    // Public
    125125
    126     get node()
    127     {
    128         return this._node;
    129     }
     126    get node() { return this._node; }
     127    get matchedRules() { return this._matchedRules; }
     128    get inheritedRules() { return this._inheritedRules; }
     129    get inlineStyle() { return this._inlineStyle; }
     130    get attributesStyle() { return this._attributesStyle; }
     131    get pseudoElements() { return this._pseudoElements; }
     132    get computedStyle() { return this._computedStyle; }
     133    get orderedStyles() { return this._orderedStyles; }
    130134
    131135    get needsRefresh()
    132136    {
    133137        return this._pendingRefreshTask || this._needsRefresh;
     138    }
     139
     140    get uniqueOrderedStyles()
     141    {
     142        return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles);
    134143    }
    135144
    … …  
    374383        else
    375384            WI.cssManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
    376     }
    377 
    378     rulesForSelector(selector)
    379     {
    380         selector = selector || this._node.appropriateSelectorFor(true);
    381 
    382         function ruleHasSelector(rule) {
    383             return !rule.mediaList.length && rule.selectorText === selector;
    384         }
    385 
    386         let rules = this._matchedRules.filter(ruleHasSelector);
    387 
    388         for (let pseudoElementInfo of this._pseudoElements.values())
    389             rules = rules.concat(pseudoElementInfo.matchedRules.filter(ruleHasSelector));
    390 
    391         return rules;
    392     }
    393 
    394     get matchedRules()
    395     {
    396         return this._matchedRules;
    397     }
    398 
    399     get inheritedRules()
    400     {
    401         return this._inheritedRules;
    402     }
    403 
    404     get inlineStyle()
    405     {
    406         return this._inlineStyle;
    407     }
    408 
    409     get attributesStyle()
    410     {
    411         return this._attributesStyle;
    412     }
    413 
    414     get pseudoElements()
    415     {
    416         return this._pseudoElements;
    417     }
    418 
    419     get computedStyle()
    420     {
    421         return this._computedStyle;
    422     }
    423 
    424     get orderedStyles()
    425     {
    426         return this._orderedStyles;
    427     }
    428 
    429     get uniqueOrderedStyles()
    430     {
    431         return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles);
    432385    }
    433386
    … …  
    732685        }
    733686
    734         var mediaList = [];
    735         for (var i = 0; payload.media && i < payload.media.length; ++i) {
    736             var mediaItem = payload.media[i];
    737             var mediaType = WI.CSSManager.protocolMediaSourceToEnum(mediaItem.source);
    738             var mediaText = mediaItem.text;
    739             let mediaSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(mediaItem.sourceURL, {line: mediaItem.sourceLine});
     687        // COMPATIBILITY (iOS 13): CSS.CSSRule.groupings did not exist yet.
     688        let groupings = (payload.groupings || payload.media || []).map((grouping) => {
     689            let groupingType = WI.CSSManager.protocolGroupingTypeToEnum(grouping.type || grouping.source);
     690            let groupingSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(grouping.sourceURL);
    740691            if (styleSheet)
    741                 mediaSourceCodeLocation = styleSheet.offsetSourceCodeLocation(mediaSourceCodeLocation);
    742 
    743             mediaList.push(new WI.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation));
    744         }
     692                groupingSourceCodeLocation = styleSheet.offsetSourceCodeLocation(groupingSourceCodeLocation);
     693            return new WI.CSSGrouping(groupingType, grouping.text, groupingSourceCodeLocation);
     694        });
    745695
    746696        if (rule) {
    747             rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
     697            rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);
    748698            return rule;
    749699        }
    … …  
    752702            styleSheet.addEventListener(WI.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
    753703
    754         rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
     704        rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);
    755705
    756706        if (mapKey)

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r248179 r248289  
    125125    <script src="Models/CPUTimelineRecord.js"></script>
    126126    <script src="Models/CSSCompletions.js"></script>
     127    <script src="Models/CSSGrouping.js"></script>
    127128    <script src="Models/CSSKeywordCompletions.js"></script>
    128     <script src="Models/CSSMedia.js"></script>
    129129    <script src="Models/CSSProperty.js"></script>
    130130    <script src="Models/CSSRule.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css

    r248202 r248289  
    4040}
    4141
    42 .spreadsheet-css-declaration :matches(.header, .header-media) {
     42.spreadsheet-css-declaration :matches(.header, .header-groupings) {
    4343    padding: 0 var(--css-declaration-horizontal-padding);
    4444}
    4545
    46 .spreadsheet-css-declaration :matches(.header, .header-media):first-child {
     46.spreadsheet-css-declaration :matches(.header, .header-groupings):first-child {
    4747    padding-top: var(--css-declaration-vertical-padding);
    4848}
    … …  
    5757}
    5858
    59 .spreadsheet-css-declaration .media-label {
     59.spreadsheet-css-declaration .header-groupings > .grouping {
    6060    color: var(--text-color);
    6161}
    … …  
    111111    vertical-align: -3.5px;
    112112    -webkit-user-select: none;
     113}
     114
     115.spreadsheet-css-declaration .header-groupings + .header > .selector > .icon {
     116    margin-top: 0;
    113117}
    114118

  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js

    r248274 r248289  
    3939        this._propertiesEditor = null;
    4040        this._selectorElements = [];
    41         this._mediaElements = [];
     41        this._groupingElements = [];
    4242        this._filterText = null;
    4343        this._shouldFocusSelectorElement = false;
    … …  
    100100        }
    101101
    102         this._headerElement = document.createElement("div");
     102        let groupings = this._style.groupings.filter((grouping) => grouping.text !== "all");
     103        if (groupings.length) {
     104            let groupingsElement = this.element.appendChild(document.createElement("div"));
     105            groupingsElement.classList.add("header-groupings");
     106
     107            let currentGroupingType = null;
     108            let groupingTypeElement = null;
     109            this._groupingElements = groupings.map((grouping) => {
     110                if (grouping.type !== currentGroupingType) {
     111                    groupingTypeElement = groupingsElement.appendChild(document.createElement("div"));
     112                    groupingTypeElement.classList.add("grouping");
     113                    groupingTypeElement.textContent = grouping.prefix + " ";
     114                    currentGroupingType = grouping.type;
     115                } else
     116                    groupingTypeElement.append(", ");
     117
     118                let span = groupingTypeElement.appendChild(document.createElement("span"));
     119                span.textContent = grouping.text;
     120                return span;
     121            });
     122        }
     123
     124        this._headerElement = this._element.appendChild(document.createElement("div"));
    103125        this._headerElement.classList.add("header");
    104126
    … …  
    137159        this._closeBrace.textContent = "}";
    138160
    139         this._element.append(this._createMediaHeader(), this._headerElement);
     161
    140162        this.addSubview(this._propertiesEditor);
    141163        this._propertiesEditor.needsLayout();
    … …  
    383405    }
    384406
    385     _createMediaHeader()
    386     {
    387         let mediaList = this._style.mediaList;
    388         if (!mediaList.length || (mediaList.length === 1 && (mediaList[0].text === "all" || mediaList[0].text === "screen")))
    389             return "";
    390 
    391         let mediaElement = document.createElement("div");
    392         mediaElement.classList.add("header-media");
    393 
    394         let mediaLabel = mediaElement.appendChild(document.createElement("div"));
    395         mediaLabel.className = "media-label";
    396         mediaLabel.append("@media ");
    397 
    398         this._mediaElements = mediaList.map((media, i) => {
    399             if (i)
    400                 mediaLabel.append(", ");
    401 
    402             let span = mediaLabel.appendChild(document.createElement("span"));
    403             span.textContent = media.text;
    404             return span;
    405         });
    406 
    407         return mediaElement;
    408     }
    409 
    410407    _save(event)
    411408    {
    … …  
    669666    _handleEditorFilterApplied(event)
    670667    {
    671         let matchesMedia = false;
    672         for (let mediaElement of this._mediaElements) {
    673             mediaElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
    674 
    675             if (mediaElement.textContent.includes(this._filterText)) {
    676                 mediaElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
    677                 matchesMedia = true;
     668        let matchesGrouping = false;
     669        for (let groupingElement of this._groupingElements) {
     670            groupingElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     671
     672            if (groupingElement.textContent.includes(this._filterText)) {
     673                groupingElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
     674                matchesGrouping = true;
    678675            }
    679676        }
    … …  
    689686        }
    690687
    691         let matches = event.data.matches || matchesMedia || matchesSelector;
     688        let matches = event.data.matches || matchesGrouping || matchesSelector;
    692689        if (!matches)
    693690            this._element.classList.add(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
Note: See TracChangeset for help on using the changeset viewer.