Changeset 286558 in webkit


Ignore:
Timestamp:
Dec 6, 2021 11:45:45 AM (8 months ago)
Author:
Patrick Angle
Message:

Web Inspector: Support Cascade Layers in the Styles sidebar
​https://bugs.webkit.org/show_bug.cgi?id=233208

Reviewed by Devin Rousso.

Source/JavaScriptCore:

Add new values to CSS.Grouping's type enum for cascade layers and make the text optional since an
anonymous layer will not have a name or other text.

  • inspector/protocol/CSS.json:

Source/WebCore:

Test: inspector/css/getMatchedStylesForNodeLayerGrouping.html

Add support for parsing and grouping CSS @layer rules in InspectorStyleSheet to the existing paths for
handling other groupings so that the frontend is made aware of rules wrapped inside a layer or multiple layers.

  • Headers.cmake:
  • WebCore.xcodeproj/project.pbxproj:
  • CompiledSelector.h needs to be exported as a private header to include in WebKitLegacy's build, since it is

imported by StyleRule.h, which is now imported by CSSImportRule.h, which is imported in WebKitLegacy.

  • css/CSSImportRule.cpp:

(WebCore::CSSImportRule::cascadeLayerName const):

  • css/CSSImportRule.h:
  • css/CSSLayerRule.cpp:

(WebCore::CSSLayerRule::cssText const):
(WebCore::CSSLayerRule::layerName const):
(WebCore::CSSLayerRule::stringFromCascadeLayerName):

  • css/CSSLayerRule.h:
  • inspector/InspectorStyleSheet.cpp:

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

  • style/InspectorCSSOMWrappers.cpp:

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

Source/WebInspectorUI:

  • UserInterface/Models/CSSGrouping.js:

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

  • Update CSSGrouping to support @layer rules, and make text optional for a grouping, since anonymous layers

will not have a name.

  • UserInterface/Models/CSSStyleDeclaration.js:

(WI.CSSStyleDeclaration.prototype.generateFormattedText):

  • Ensure that spacing remains correct and "null" isn't shown for groupings without text.
  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):

  • When merging layer groups, ensure that a "." is used as a separator, and that each group has a name (to

prevent having a hanging period or the "null" text appearing).

LayoutTests:

Add new test cases for CSS.getMatchesStyleForNode to make sure that layer groupings are correctly determined,
and that rules nested in @layer rules and @import layer()s are correctly represented and sorted by the order
they are applied to an element.

  • inspector/css/getMatchedStylesForNode-expected.txt:
  • Re-baseline to account for change in order of CSSGrouping properties in the protocol due to text now being

optional.

  • inspector/css/getMatchedStylesForNodeLayerGrouping-expected.txt: Added.
  • inspector/css/getMatchedStylesForNodeLayerGrouping.html: Added.
  • inspector/css/resources/external-layers.css: Added.
Location:
trunk
Files:
3 added
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r286555 r286558  
     12021-12-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Support Cascade Layers in the Styles sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=233208
     5
     6        Reviewed by Devin Rousso.
     7
     8        Add new test cases for `CSS.getMatchesStyleForNode` to make sure that layer groupings are correctly determined,
     9        and that rules nested in `@layer` rules and `@import layer()`s are correctly represented and sorted by the order
     10        they are applied to an element.
     11
     12        * inspector/css/getMatchedStylesForNode-expected.txt:
     13        - Re-baseline to account for change in order of CSSGrouping properties in the protocol due to `text` now being
     14        optional.
     15        * inspector/css/getMatchedStylesForNodeLayerGrouping-expected.txt: Added.
     16        * inspector/css/getMatchedStylesForNodeLayerGrouping.html: Added.
     17        * inspector/css/resources/external-layers.css: Added.
     18
    1192021-12-06  Antoine Quint  <graouts@webkit.org>
    220

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

    r273821 r286558  
    905905          "groupings": [
    906906            {
     907              "type": "media-import-rule",
    907908              "text": "(min-width: 0px)",
    908               "type": "media-import-rule",
    909909              "sourceURL": "<filtered>"
    910910            }
    … …  
    998998          "groupings": [
    999999            {
     1000              "type": "media-rule",
    10001001              "text": "(min-width: 1px)",
    1001               "type": "media-rule",
    10021002              "sourceURL": "<filtered>"
    10031003            }
    … …  
    10481048          "groupings": [
    10491049            {
     1050              "type": "supports-rule",
    10501051              "text": "(display: block)",
    1051               "type": "supports-rule",
    10521052              "sourceURL": "<filtered>"
    10531053            },
    10541054            {
     1055              "type": "media-rule",
    10551056              "text": "(min-width: 2px)",
    1056               "type": "media-rule",
    10571057              "sourceURL": "<filtered>"
    10581058            }
    … …  
    11031103          "groupings": [
    11041104            {
     1105              "type": "media-style-node",
    11051106              "text": "(min-width: 3px)",
    1106               "type": "media-style-node",
    11071107              "sourceURL": "<filtered>"
    11081108            }
    … …  
    11531153          "groupings": [
    11541154            {
     1155              "type": "media-link-node",
    11551156              "text": "(min-width: 4px)",
    1156               "type": "media-link-node",
    11571157              "sourceURL": "<filtered>"
    11581158            }

  • trunk/Source/JavaScriptCore/ChangeLog

    r286502 r286558  
     12021-12-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Support Cascade Layers in the Styles sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=233208
     5
     6        Reviewed by Devin Rousso.
     7
     8        Add new values to `CSS.Grouping`'s `type` enum for cascade layers and make the `text` optional since an
     9        anonymous layer will not have a name or other text.
     10
     11        * inspector/protocol/CSS.json:
     12
    1132021-12-03  Keith Miller  <keith_miller@apple.com>
    214

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

    r281229 r286558  
    227227            "id": "Grouping",
    228228            "type": "object",
    229             "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.) and @supports descriptor.",
    230             "properties": [
    231                 { "name": "text", "type": "string", "description": "Media query text." },
    232                 { "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, ." },
     229            "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.), @supports, and @layer descriptor.",
     230            "properties": [
     231                { "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." },
     232                { "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." },
    233233                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." }
    234234            ]

  • trunk/Source/WebCore/ChangeLog

    r286556 r286558  
     12021-12-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Support Cascade Layers in the Styles sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=233208
     5
     6        Reviewed by Devin Rousso.
     7
     8        Test: inspector/css/getMatchedStylesForNodeLayerGrouping.html
     9
     10        Add support for parsing and grouping CSS `@layer` rules in `InspectorStyleSheet` to the existing paths for
     11        handling other groupings so that the frontend is made aware of rules wrapped inside a layer or multiple layers.
     12
     13        * Headers.cmake:
     14        * WebCore.xcodeproj/project.pbxproj:
     15        - CompiledSelector.h needs to be exported as a private header to include in WebKitLegacy's build, since it is
     16        imported by StyleRule.h, which is now imported by CSSImportRule.h, which is imported in WebKitLegacy.
     17
     18        * css/CSSImportRule.cpp:
     19        (WebCore::CSSImportRule::cascadeLayerName const):
     20        * css/CSSImportRule.h:
     21        * css/CSSLayerRule.cpp:
     22        (WebCore::CSSLayerRule::cssText const):
     23        (WebCore::CSSLayerRule::layerName const):
     24        (WebCore::CSSLayerRule::stringFromCascadeLayerName):
     25        * css/CSSLayerRule.h:
     26        * inspector/InspectorStyleSheet.cpp:
     27        (flattenSourceData):
     28        (WebCore::asCSSRuleList):
     29        (WebCore::buildArrayForGroupings):
     30        * style/InspectorCSSOMWrappers.cpp:
     31        (WebCore::Style::InspectorCSSOMWrappers::collect):
     32
    1332021-12-06  Wenson Hsieh  <wenson_hsieh@apple.com>
    234

  • trunk/Source/WebCore/Headers.cmake

    r286555 r286558  
    526526    css/CSSRule.h
    527527    css/CSSRuleList.h
     528    css/CSSSelector.h
     529    css/CSSSelectorList.h
    528530    css/CSSStyleDeclaration.h
    529531    css/CSSStyleRule.h
    … …  
    552554    css/StyleColor.h
    553555    css/StyleProperties.h
     556    css/StyleRule.h
    554557    css/StyleRuleType.h
    555558    css/StyleSheet.h
    … …  
    564567    css/parser/CSSParserToken.h
    565568    css/parser/CSSParserTokenRange.h
     569
     570    cssjit/CompiledSelector.h
    566571
    567572    display/DisplayTree.h

  • trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj

    r286555 r286558  
    893893                2E0888D51148848A00AF4265 /* JSDOMFormData.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E0888D31148848A00AF4265 /* JSDOMFormData.h */; };
    894894                2E2D99CE10E2BBDA00496337 /* JSBlob.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E2D99CC10E2BBDA00496337 /* JSBlob.h */; settings = {ATTRIBUTES = (Private, ); }; };
     895                2E301BE82745947200C0564F /* CompiledSelector.h in Headers */ = {isa = PBXBuildFile; fileRef = E4451077202C7E0100657D33 /* CompiledSelector.h */; settings = {ATTRIBUTES = (Private, ); }; };
    895896                2E37DFDB12DBAFB800A6B233 /* DOMURL.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E37DFD812DBAFB800A6B233 /* DOMURL.h */; };
    896897                2E37E00612DBC5A400A6B233 /* JSDOMURL.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E37E00412DBC5A400A6B233 /* JSDOMURL.h */; };
    … …  
    3352833529                                0F60F32B1DFBB10700416D6C /* CommonVM.h in Headers */,
    3352933530                                7C93F34A1AA6BA5E00A98BAB /* CompiledContentExtension.h in Headers */,
     33531                                2E301BE82745947200C0564F /* CompiledSelector.h in Headers */,
    3353033532                                C2F4E78C1E45C3EF006D7105 /* ComplexTextController.h in Headers */,
    3353133533                                E4BA50901BCFBD9500E34EF7 /* ComposedTreeAncestorIterator.h in Headers */,

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

    r277967 r286558  
    5757}
    5858
     59const std::optional<CascadeLayerName>& CSSImportRule::cascadeLayerName() const
     60{
     61    return m_importRule.get().cascadeLayerName();
     62}
     63
    5964String CSSImportRule::cssText() const
    6065{

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

    r204717 r286558  
    2323
    2424#include "CSSRule.h"
     25#include "StyleRule.h"
    2526
    2627namespace WebCore {
    … …  
    3839    WEBCORE_EXPORT MediaList& media() const;
    3940    WEBCORE_EXPORT CSSStyleSheet* styleSheet() const;
     41    WEBCORE_EXPORT const std::optional<CascadeLayerName>& cascadeLayerName() const;
    4042
    4143private:

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

    r283170 r286558  
    5353    StringBuilder result;
    5454
    55     auto appendLayerName = [&](auto& name) {
    56         for (auto& segment : name) {
    57             result.append(segment);
    58             if (&segment != &name.last())
    59                 result.append('.');
    60         }
    61     };
    62 
    6355    if (layer.isStatement()) {
    6456        result.append("@layer ");
    6557        for (auto& name : layer.nameList()) {
    66             appendLayerName(name);
     58            result.append(stringFromCascadeLayerName(name));
    6759            if (&name != &layer.nameList().last())
    6860                result.append(", ");
    … …  
    7365
    7466    result.append("@layer ");
    75     if (!layer.name().isEmpty()) {
    76         appendLayerName(layer.name());
    77         result.append(' ');
    78     }
     67    if (auto name = layerName())
     68        result.append(*name, " ");
    7969    result.append("{\n");
    8070    appendCSSTextForItems(result);
    … …  
    8373}
    8474
     75std::optional<String> CSSLayerRule::layerName() const
     76{
     77    auto& layer = downcast<StyleRuleLayer>(groupRule());
     78
     79    if (!layer.isStatement() && !layer.name().isEmpty())
     80        return stringFromCascadeLayerName(layer.name());
     81   
     82    return std::nullopt;
     83}
     84
     85String CSSLayerRule::stringFromCascadeLayerName(const CascadeLayerName& name)
     86{
     87    StringBuilder result;
     88    for (auto& segment : name) {
     89        result.append(segment);
     90        if (&segment != &name.last())
     91            result.append('.');
     92    }
     93    return result.toString();
     94}
     95
    8596} // namespace WebCore
    8697

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

    r283170 r286558  
    3131
    3232#include "CSSGroupingRule.h"
     33#include "StyleRule.h"
    3334
    3435namespace WebCore {
    … …  
    4142
    4243    String cssText() const final;
     44    std::optional<String> layerName() const;
     45
     46    static String stringFromCascadeLayerName(const CascadeLayerName&);
    4347
    4448private:

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

    r283851 r286558  
    11/*
    22 * Copyright (C) 2010, Google Inc. All rights reserved.
     3 * Copyright (C) 2021, Apple Inc. All rights reserved.
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    2829#include "CSSImportRule.h"
    2930#include "CSSKeyframesRule.h"
     31#include "CSSLayerRule.h"
    3032#include "CSSMediaRule.h"
    3133#include "CSSParser.h"
    … …  
    106108        if (data->type == WebCore::StyleRuleType::Style)
    107109            target.append(data.copyRef());
    108         else if (data->type == WebCore::StyleRuleType::Media)
    109             flattenSourceData(data->childRules, target);
    110         else if (data->type == WebCore::StyleRuleType::Supports)
     110        else if (data->type == WebCore::StyleRuleType::Media || data->type == WebCore::StyleRuleType::Supports || data->type == WebCore::StyleRuleType::Layer)
    111111            flattenSourceData(data->childRules, target);
    112112    }
    … …  
    427427        return &downcast<CSSSupportsRule>(*rule).cssRules();
    428428
     429    if (is<CSSLayerRule>(*rule))
     430        return &downcast<CSSLayerRule>(*rule).cssRules();
     431
    429432    return nullptr;
    430433}
    … …  
    436439    auto* parentRule = &rule;
    437440    while (parentRule) {
    438         RefPtr<Protocol::CSS::Grouping> ruleGroupingPayload;
     441        Vector<Ref<Protocol::CSS::Grouping>> ruleGroupingPayloads;
    439442
    440443        if (is<CSSMediaRule>(parentRule)) {
    441444            auto* media = downcast<CSSMediaRule>(parentRule)->media();
    442445            if (media && media->length() && media->mediaText() != "all") {
    443                 ruleGroupingPayload = Protocol::CSS::Grouping::create()
    444                     .setText(media->mediaText())
     446                auto mediaRulePayload = Protocol::CSS::Grouping::create()
    445447                    .setType(Protocol::CSS::Grouping::Type::MediaRule)
    446448                    .release();
     449                mediaRulePayload->setText(media->mediaText());
     450                ruleGroupingPayloads.append(WTFMove(mediaRulePayload));
    447451            }
    448452        } else if (is<CSSImportRule>(parentRule)) {
     453            if (auto& layerName = downcast<CSSImportRule>(parentRule)->cascadeLayerName()) {
     454                auto layerRulePayload = Protocol::CSS::Grouping::create()
     455                    .setType(Protocol::CSS::Grouping::Type::LayerImportRule)
     456                    .release();
     457                layerRulePayload->setText(CSSLayerRule::stringFromCascadeLayerName(*layerName));
     458                ruleGroupingPayloads.append(WTFMove(layerRulePayload));
     459            }
     460
    449461            auto& media = downcast<CSSImportRule>(parentRule)->media();
    450462            if (media.length() && media.mediaText() != "all") {
    451                 ruleGroupingPayload = Protocol::CSS::Grouping::create()
    452                     .setText(media.mediaText())
     463                auto mediaRulePayload = Protocol::CSS::Grouping::create()
    453464                    .setType(Protocol::CSS::Grouping::Type::MediaImportRule)
    454465                    .release();
     466                mediaRulePayload->setText(media.mediaText());
     467                ruleGroupingPayloads.append(WTFMove(mediaRulePayload));
    455468            }
    456469        } else if (is<CSSSupportsRule>(parentRule)) {
    457             ruleGroupingPayload = Protocol::CSS::Grouping::create()
    458                 .setText(downcast<CSSSupportsRule>(parentRule)->conditionText())
     470            auto supportsRulePayload = Protocol::CSS::Grouping::create()
    459471                .setType(Protocol::CSS::Grouping::Type::SupportsRule)
    460472                .release();
     473            supportsRulePayload->setText(downcast<CSSSupportsRule>(parentRule)->conditionText());
     474            ruleGroupingPayloads.append(WTFMove(supportsRulePayload));
     475        } else if (is<CSSLayerRule>(parentRule)) {
     476            auto layerRulePayload = Protocol::CSS::Grouping::create()
     477                .setType(Protocol::CSS::Grouping::Type::LayerRule)
     478                .release();
     479            if (auto layerName = downcast<CSSLayerRule>(parentRule)->layerName())
     480                layerRulePayload->setText(*layerName);
     481            ruleGroupingPayloads.append(WTFMove(layerRulePayload));
    461482        }
    462483
    463         if (ruleGroupingPayload) {
     484        for (auto&& ruleGroupingPayload : WTFMove(ruleGroupingPayloads)) {
    464485            if (auto* parentStyleSheet = parentRule->parentStyleSheet()) {
    465486                String sourceURL = parentStyleSheet->contents().baseURL().string();
    … …  
    472493            }
    473494
    474             groupingsPayload->addItem(ruleGroupingPayload.releaseNonNull());
     495            groupingsPayload->addItem(WTFMove(ruleGroupingPayload));
    475496        }
    476497
    … …  
    485506            if (media && media->length() && media->mediaText() != "all") {
    486507                auto sheetGroupingPayload = Protocol::CSS::Grouping::create()
    487                     .setText(media->mediaText())
    488508                    .setType(is<HTMLStyleElement>(styleSheet->ownerNode()) ? Protocol::CSS::Grouping::Type::MediaStyleNode: Protocol::CSS::Grouping::Type::MediaLinkNode)
    489509                    .release();
     510                sheetGroupingPayload->setText(media->mediaText());
    490511
    491512                String sourceURL;

  • trunk/Source/WebCore/style/InspectorCSSOMWrappers.cpp

    r284176 r286558  
    3131
    3232#include "CSSImportRule.h"
     33#include "CSSLayerRule.h"
    3334#include "CSSMediaRule.h"
    3435#include "CSSRule.h"
    … …  
    6162        case CSSRule::IMPORT_RULE:
    6263            collect(downcast<CSSImportRule>(*cssRule).styleSheet());
     64            break;
     65        case CSSRule::LAYER_RULE:
     66            collect(downcast<CSSLayerRule>(cssRule));
    6367            break;
    6468        case CSSRule::MEDIA_RULE:

  • trunk/Source/WebInspectorUI/ChangeLog

    r286458 r286558  
     12021-12-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Support Cascade Layers in the Styles sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=233208
     5
     6        Reviewed by Devin Rousso.
     7
     8        * UserInterface/Models/CSSGrouping.js:
     9        (WI.CSSGrouping):
     10        (WI.CSSGrouping.prototype.get isLayer):
     11        (WI.CSSGrouping.prototype.get prefix):
     12        - Update `CSSGrouping` to support `@layer` rules, and make `text` optional for a grouping, since anonymous layers
     13        will not have a name.
     14
     15        * UserInterface/Models/CSSStyleDeclaration.js:
     16        (WI.CSSStyleDeclaration.prototype.generateFormattedText):
     17        - Ensure that spacing remains correct and "null" isn't shown for groupings without text.
     18
     19        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     20        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
     21        - When merging layer groups, ensure that a "." is used as a separator, and that each group has a name (to
     22        prevent having a hanging period or the "null" text appearing).
     23
    1242021-12-02  Devin Rousso  <drousso@apple.com>
    225

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

    r248602 r286558  
    11/*
    2  * Copyright (C) 2019 Apple Inc. All rights reserved.
     2 * Copyright (C) 2019, 2021 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2929    {
    3030        console.assert(Object.values(CSSGrouping.Type).includes(type));
    31         console.assert(typeof text === "string" && text.length);
     31        console.assert(!text || (typeof text === "string" && text.length));
    3232        console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WI.SourceCodeLocation);
    3333
    3434        this._type = type;
    35         this._text = text;
     35        this._text = text || null;
    3636        this._sourceCodeLocation = sourceCodeLocation || null;
    3737    }
    … …  
    5656    }
    5757
     58    get isLayer()
     59    {
     60        return this._type === WI.CSSGrouping.Type.LayerRule
     61            || this._type === WI.CSSGrouping.Type.LayerImportRule;
     62    }
     63
    5864    get prefix()
    5965    {
    6066        if (this.isSupports)
    6167            return "@supports";
     68
     69        if (this.isLayer)
     70            return "@layer";
    6271
    6372        console.assert(this.isMedia);
    … …  
    7281    MediaStyleNode: "media-style-node",
    7382    SupportsRule: "supports-rule",
     83    LayerRule: "layer-rule",
     84    LayerImportRule: "layer-import-rule",
    7485};

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

    r285896 r286558  
    471471        let indentString = WI.indentString();
    472472        let styleText = "";
    473         let groupings = this.groupings.filter((grouping) => grouping.text !== "all");
     473        let groupings = this.groupings.filter((grouping) => !grouping.isMedia || grouping.text !== "all");
    474474        let groupingsCount = groupings.length;
    475475
    … …  
    479479                    styleText += indentString.repeat(groupingsCount - i - 1);
    480480
    481                 styleText += groupings[i].prefix + " " + groupings[i].text + " {";
     481                styleText += groupings[i].prefix;
     482                if (groupings[i].text)
     483                    styleText += " " + groupings[i].text;
     484                styleText += " {";
    482485
    483486                if (options.multiline)

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

    r283723 r286558  
    103103        this._element.classList.add("has-icon", iconClassName);
    104104
    105         let groupings = this._style.groupings.filter((grouping) => grouping.text !== "all");
     105        let groupings = this._style.groupings.filter((grouping) => !grouping.isMedia || grouping.text !== "all").reverse();
    106106        if (groupings.length) {
    107107            let groupingsElement = this.element.appendChild(document.createElement("div"));
    … …  
    109109
    110110            let currentGroupingType = null;
     111            let currentGroupingHadText = false;
    111112            let groupingTypeElement = null;
    112113            this._groupingElements = groupings.map((grouping) => {
    113                 if (grouping.type !== currentGroupingType) {
     114                if (grouping.type !== currentGroupingType || !grouping.text || !currentGroupingHadText) {
    114115                    groupingTypeElement = groupingsElement.appendChild(document.createElement("div"));
    115116                    groupingTypeElement.classList.add("grouping");
    … …  
    117118                    currentGroupingType = grouping.type;
    118119                } else
    119                     groupingTypeElement.append(", ");
    120 
     120                    groupingTypeElement.append(grouping.isLayer && grouping.text ? "." : ", ");
     121
     122                currentGroupingHadText = !!grouping.text;
    121123                let span = groupingTypeElement.appendChild(document.createElement("span"));
    122                 span.textContent = grouping.text;
     124                span.textContent = grouping.text ?? "";
    123125                return span;
    124126            });
Note: See TracChangeset for help on using the changeset viewer.