Changeset 251038 in webkit


Ignore:
Timestamp:
Oct 11, 2019 8:40:42 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Elements: Computed: show shorthand properties in addition to longhand ones
​https://bugs.webkit.org/show_bug.cgi?id=200554

Reviewed by Matt Baker.

Source/WebCore:

Test: inspector/css/getComputedStyleForNode.html

Include additional CSS.CSSComputedStyleProperty items for shorthand CSS properties when
calling CSS.getComputedStyleForNode.

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

(WebCore::InspectorStyle::buildArrayForComputedStyle const):
(WebCore::InspectorStyle::collectProperties const): Added.
(WebCore::InspectorStyle::styleWithProperties const):
(WebCore::InspectorStyle::populateAllProperties const): Deleted.

Source/WebInspectorUI:

Replace the "Show All [ ]" checkbox header option in the "Properties" section with a filter
icon that controls both "Show All" and "Prefer Shorthands", the latter of which will cause
any longhand properties to be hidden and their respective shorthands to be shown.

  • UserInterface/Models/CSSProperty.js:

(WI.CSSProperty):
(WI.CSSProperty.prototype.update):
(WI.CSSProperty.prototype.get isVariable): Added.
(WI.CSSProperty.prototype.get isShorthand): Added.
(WI.CSSProperty.prototype.get shorthandPropertyNames): Added.
(WI.CSSProperty.prototype.get variable): Deleted.

  • UserInterface/Views/ComputedStyleDetailsPanel.js:

(WI.ComputedStyleDetailsPanel):
(WI.ComputedStyleDetailsPanel.prototype.applyFilter):
(WI.ComputedStyleDetailsPanel.prototype.initialLayout):
(WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged): Deleted.

  • UserInterface/Views/ComputedStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content > .computed > .details-section): Added.
(.sidebar > .panel.details.css-style > .content > .computed > .details-section > .content): Added.
(.sidebar > .panel.details.css-style > .content > .computed .spreadsheet-style-declaration-editor): Added.
(.sidebar > .panel.details.css-style > .content > .computed .property): Added.
(.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables)): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content): Deleted.

  • UserInterface/Views/ComputedStyleSection.js:

(WI.ComputedStyleSection):
(WI.ComputedStyleSection.prototype.set showsShorthandsInsteadOfLonghands): Added.
(WI.ComputedStyleSection.prototype.get propertiesToRender):
(WI.ComputedStyleSection.prototype.set propertyVisibilityMode): Deleted.

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.update):
(WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):

  • Localizations/en.lproj/localizedStrings.js:

LayoutTests:

  • inspector/css/getComputedStyleForNode.html: Added.
  • inspector/css/getComputedStyleForNode-expected.txt: Added.
Location:
trunk
Files:
2 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r251035 r251038  
     12019-10-11  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Elements: Computed: show shorthand properties in addition to longhand ones
     4        https://bugs.webkit.org/show_bug.cgi?id=200554
     5
     6        Reviewed by Matt Baker.
     7
     8        * inspector/css/getComputedStyleForNode.html: Added.
     9        * inspector/css/getComputedStyleForNode-expected.txt: Added.
     10
    1112019-10-11  Andy Estes  <aestes@apple.com>
    212

  • trunk/Source/WebCore/ChangeLog

    r251036 r251038  
     12019-10-11  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Elements: Computed: show shorthand properties in addition to longhand ones
     4        https://bugs.webkit.org/show_bug.cgi?id=200554
     5
     6        Reviewed by Matt Baker.
     7
     8        Test: inspector/css/getComputedStyleForNode.html
     9
     10        Include additional `CSS.CSSComputedStyleProperty` items for shorthand CSS properties when
     11        calling `CSS.getComputedStyleForNode`.
     12
     13        * inspector/InspectorStyleSheet.h:
     14        * inspector/InspectorStyleSheet.cpp:
     15        (WebCore::InspectorStyle::buildArrayForComputedStyle const):
     16        (WebCore::InspectorStyle::collectProperties const): Added.
     17        (WebCore::InspectorStyle::styleWithProperties const):
     18        (WebCore::InspectorStyle::populateAllProperties const): Deleted.
     19
    1202019-10-08  Ryosuke Niwa  <rniwa@webkit.org>
    221

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

    r248846 r251038  
    542542{
    543543    auto result = JSON::ArrayOf<Inspector::Protocol::CSS::CSSComputedStyleProperty>::create();
    544     Vector<InspectorStyleProperty> properties;
    545     populateAllProperties(&properties);
    546 
    547     for (auto& property : properties) {
     544    for (auto& property : collectProperties(true)) {
    548545        const CSSPropertySourceData& propertyEntry = property.sourceData;
    549546        auto entry = Inspector::Protocol::CSS::CSSComputedStyleProperty::create()
    … …  
    553550        result->addItem(WTFMove(entry));
    554551    }
    555 
    556552    return result;
    557553}
    … …  
    580576}
    581577
    582 void InspectorStyle::populateAllProperties(Vector<InspectorStyleProperty>* result) const
    583 {
     578Vector<InspectorStyleProperty> InspectorStyle::collectProperties(bool includeAll) const
     579{
     580    Vector<InspectorStyleProperty> result;
    584581    HashSet<String> sourcePropertyNames;
    585582
    … …  
    593590            InspectorStyleProperty p(sourceData, true, sourceData.disabled);
    594591            p.setRawTextFromStyleDeclaration(styleDeclaration);
    595             result->append(p);
     592            result.append(p);
    596593            sourcePropertyNames.add(lowercasePropertyName(sourceData.name));
    597594        }
    … …  
    601598        String name = m_style->item(i);
    602599        if (sourcePropertyNames.add(lowercasePropertyName(name)))
    603             result->append(InspectorStyleProperty(CSSPropertySourceData(name, m_style->getPropertyValue(name), !m_style->getPropertyPriority(name).isEmpty(), false, true, SourceRange()), false, false));
    604     }
     600            result.append(InspectorStyleProperty(CSSPropertySourceData(name, m_style->getPropertyValue(name), !m_style->getPropertyPriority(name).isEmpty(), false, true, SourceRange()), false, false));
     601    }
     602
     603    if (includeAll) {
     604        for (auto i = firstCSSProperty; i < lastCSSProperty; ++i) {
     605            auto id = convertToCSSPropertyID(i);
     606            if (isInternalCSSProperty(id) || !isEnabledCSSProperty(id))
     607                continue;
     608
     609            auto name = getPropertyNameString(id);
     610            if (!sourcePropertyNames.add(lowercasePropertyName(name)))
     611                continue;
     612
     613            auto value = m_style->getPropertyValue(name);
     614            if (value.isEmpty())
     615                continue;
     616
     617            result.append(InspectorStyleProperty(CSSPropertySourceData(name, value, !m_style->getPropertyPriority(name).isEmpty(), false, true, SourceRange()), false, false));
     618        }
     619    }
     620
     621    return result;
    605622}
    606623
    607624Ref<Inspector::Protocol::CSS::CSSStyle> InspectorStyle::styleWithProperties() const
    608625{
    609     Vector<InspectorStyleProperty> properties;
    610     populateAllProperties(&properties);
     626    auto properties = collectProperties(false);
    611627
    612628    auto propertiesObject = JSON::ArrayOf<Inspector::Protocol::CSS::CSSProperty>::create();

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

    r233122 r251038  
    136136    InspectorStyle(const InspectorCSSId& styleId, Ref<CSSStyleDeclaration>&&, InspectorStyleSheet* parentStyleSheet);
    137137
    138     void populateAllProperties(Vector<InspectorStyleProperty>* result) const;
     138    Vector<InspectorStyleProperty> collectProperties(bool includeAll) const;
    139139    Ref<Inspector::Protocol::CSS::CSSStyle> styleWithProperties() const;
    140140    RefPtr<CSSRuleSourceData> extractSourceData() const;

  • trunk/Source/WebInspectorUI/ChangeLog

    r251024 r251038  
     12019-10-11  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Elements: Computed: show shorthand properties in addition to longhand ones
     4        https://bugs.webkit.org/show_bug.cgi?id=200554
     5
     6        Reviewed by Matt Baker.
     7
     8        Replace the "Show All [ ]" checkbox header option in the "Properties" section with a filter
     9        icon that controls both "Show All" and "Prefer Shorthands", the latter of which will cause
     10        any longhand properties to be hidden and their respective shorthands to be shown.
     11
     12        * UserInterface/Models/CSSProperty.js:
     13        (WI.CSSProperty):
     14        (WI.CSSProperty.prototype.update):
     15        (WI.CSSProperty.prototype.get isVariable): Added.
     16        (WI.CSSProperty.prototype.get isShorthand): Added.
     17        (WI.CSSProperty.prototype.get shorthandPropertyNames): Added.
     18        (WI.CSSProperty.prototype.get variable): Deleted.
     19
     20        * UserInterface/Views/ComputedStyleDetailsPanel.js:
     21        (WI.ComputedStyleDetailsPanel):
     22        (WI.ComputedStyleDetailsPanel.prototype.applyFilter):
     23        (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
     24        (WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged): Deleted.
     25        * UserInterface/Views/ComputedStyleDetailsPanel.css:
     26        (.sidebar > .panel.details.css-style > .content > .computed > .details-section): Added.
     27        (.sidebar > .panel.details.css-style > .content > .computed > .details-section > .content): Added.
     28        (.sidebar > .panel.details.css-style > .content > .computed .spreadsheet-style-declaration-editor): Added.
     29        (.sidebar > .panel.details.css-style > .content > .computed .property): Added.
     30        (.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow): Added.
     31        (.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow): Added.
     32        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables)): Deleted.
     33        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property): Deleted.
     34        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow): Deleted.
     35        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow): Deleted.
     36        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content): Deleted.
     37
     38        * UserInterface/Views/ComputedStyleSection.js:
     39        (WI.ComputedStyleSection):
     40        (WI.ComputedStyleSection.prototype.set showsShorthandsInsteadOfLonghands): Added.
     41        (WI.ComputedStyleSection.prototype.get propertiesToRender):
     42        (WI.ComputedStyleSection.prototype.set propertyVisibilityMode): Deleted.
     43
     44        * UserInterface/Views/SpreadsheetStyleProperty.js:
     45        (WI.SpreadsheetStyleProperty.prototype.update):
     46        (WI.SpreadsheetStyleProperty.prototype._replaceSpecialTokens):
     47
     48        * Localizations/en.lproj/localizedStrings.js:
     49
    1502019-10-10  Joseph Pecoraro  <pecoraro@apple.com>
    251

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r251024 r251038  
    823823localizedStrings["Power Efficient Playback Started"] = "Power Efficient Playback Started";
    824824localizedStrings["Power Efficient Playback Stopped"] = "Power Efficient Playback Stopped";
     825localizedStrings["Prefer Shorthands"] = "Prefer Shorthands";
    825826localizedStrings["Prefer indent using:"] = "Prefer indent using:";
    826827localizedStrings["Preserve Log"] = "Preserve Log";

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

    r249089 r251038  
    116116        this._inherited = WI.CSSProperty.isInheritedPropertyName(name);
    117117        this._valid = valid;
    118         this._variable = name.startsWith("--");
     118        this._isVariable = name.startsWith("--");
    119119        this._styleSheetTextRange = styleSheetTextRange || null;
     120
     121        this._isShorthand = undefined;
     122        this._shorthandPropertyNames = undefined;
    120123
    121124        this._relatedShorthandProperty = null;
    … …  
    325328    get inherited() { return this._inherited; }
    326329    get valid() { return this._valid; }
    327     get variable() { return this._variable; }
     330    get isVariable() { return this._isVariable; }
    328331    get styleSheetTextRange() { return this._styleSheetTextRange; }
    329332
    … …  
    382385    {
    383386        this._relatedLonghandProperties = [];
     387    }
     388
     389    get isShorthand()
     390    {
     391        if (this._isShorthand === undefined) {
     392            this._isShorthand = WI.CSSCompletions.cssNameCompletions.isShorthandPropertyName(this._name);
     393            if (this._isShorthand) {
     394                let longhands = WI.CSSKeywordCompletions.LonghandNamesForShorthandProperty.get(this._name);
     395                if (longhands && longhands.length === 1)
     396                    this._isShorthand = false;
     397            }
     398        }
     399        return this._isShorthand;
     400    }
     401
     402    get shorthandPropertyNames()
     403    {
     404        if (!this._shorthandPropertyNames) {
     405            this._shorthandPropertyNames = WI.CSSCompletions.cssNameCompletions.shorthandsForLonghand(this._name);
     406            this._shorthandPropertyNames.remove("all");
     407        }
     408        return this._shorthandPropertyNames;
    384409    }
    385410

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

    r248893 r251038  
    2525 */
    2626
     27.sidebar > .panel.details.css-style > .content > .computed > .details-section {
     28    --disclosure-button-size: 15px;
     29}
     30
    2731.sidebar > .panel.details.css-style > .content > .computed > .details-section:not(.collapsed) > :matches(.header, .content) {
    2832    background-color: var(--background-color);
    2933}
    3034
    31 .sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) {
    32     --disclosure-button-size: 15px;
     35.sidebar > .panel.details.css-style > .content > .computed > .details-section > .content {
     36    font: 12px -webkit-system-font, sans-serif;
    3337}
    3438
    35 .sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property {
     39.sidebar > .panel.details.css-style > .content > .computed > .details-section.computed-style-properties > .header > .options.filter {
     40    width: 13px;
     41    height: 13px;
     42}
     43
     44.sidebar > .panel.details.css-style > .content > .computed .spreadsheet-style-declaration-editor {
     45    padding-bottom: 3px;
     46}
     47
     48.sidebar > .panel.details.css-style > .content > .computed .property {
    3649    position: relative;
    3750}
    3851
    39 .sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow {
     52.sidebar > .panel.details.css-style > .content > .computed .property .go-to-arrow {
    4053    position: absolute;
    4154    bottom: 0;
    … …  
    4457}
    4558
    46 .sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow {
     59.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow {
    4760    display: none;
    4861}
    49 
    50 .sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) > .content {
    51     font: 12px -webkit-system-font, sans-serif;
    52 }

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

    r248683 r251038  
    3131
    3232        this._computedStyleShowAllSetting = new WI.Setting("computed-style-show-all", false);
     33        this._computedStylePreferShorthandsSetting = new WI.Setting("computed-style-use-shorthands", false);
    3334
    3435        this._filterText = null;
    … …  
    9091        this.element.appendChild(boxModelSection.element);
    9192
    92         let computedStyleShowAllLabel = document.createElement("label");
    93         computedStyleShowAllLabel.textContent = WI.UIString("Show All");
    94 
    95         this._computedStyleShowAllCheckbox = document.createElement("input");
    96         this._computedStyleShowAllCheckbox.type = "checkbox";
    97         this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
    98         this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
    99         computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
     93        let propertyFiltersElement = WI.ImageUtilities.useSVGSymbol("Images/FilterFieldGlyph.svg", "filter");
     94        WI.addMouseDownContextMenuHandlers(propertyFiltersElement, (contextMenu) => {
     95            contextMenu.appendCheckboxItem(WI.UIString("Show All"), () => {
     96                this._computedStyleShowAllSetting.value = !this._computedStyleShowAllSetting.value;
     97            }, this._computedStyleShowAllSetting.value);
     98
     99            contextMenu.appendCheckboxItem(WI.UIString("Prefer Shorthands"), () => {
     100                this._computedStylePreferShorthandsSetting.value = !this._computedStylePreferShorthandsSetting.value;
     101            }, this._computedStylePreferShorthandsSetting.value);
     102        });
    100103
    101104        this._computedStyleSection = new WI.ComputedStyleSection(this);
    102         this._computedStyleSection.propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables;
    103105        this._computedStyleSection.addEventListener(WI.ComputedStyleSection.Event.FilterApplied, this._handleEditorFilterApplied, this);
    104106        this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
     107        this._computedStyleSection.showsShorthandsInsteadOfLonghands = this._computedStylePreferShorthandsSetting.value;
    105108        this._computedStyleSection.alwaysShowPropertyNames = ["display", "width", "height"];
    106109        this._computedStyleSection.hideFilterNonMatchingProperties = true;
    … …  
    108111        let propertiesRow = new WI.DetailsSectionRow;
    109112        let propertiesGroup = new WI.DetailsSectionGroup([propertiesRow]);
    110         this._propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
     113        this._propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], propertyFiltersElement);
    111114        this._propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
    112115
    … …  
    133136        this.element.appendChild(this._propertiesSection.element);
    134137        this.element.appendChild(this._variablesSection.element);
     138
     139        this._computedStyleShowAllSetting.addEventListener(WI.Setting.Event.Changed, this._handleShowAllSettingChanged, this);
     140        this._computedStylePreferShorthandsSetting.addEventListener(WI.Setting.Event.Changed, this._handleUseShorthandsSettingChanged, this);
    135141    }
    136142
    … …  
    161167    }
    162168
    163     _computedStyleShowAllCheckboxValueChanged(event)
    164     {
    165         let checked = this._computedStyleShowAllCheckbox.checked;
    166         this._computedStyleShowAllSetting.value = checked;
    167         this._computedStyleSection.showsImplicitProperties = checked;
    168     }
    169 
    170169    _handlePropertiesSectionCollapsedStateChanged(event)
    171170    {
    … …  
    191190            section.element.classList.toggle("hidden", !event.data.matches);
    192191    }
     192
     193    _handleShowAllSettingChanged(event)
     194    {
     195        this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
     196    }
     197
     198    _handleUseShorthandsSettingChanged(event)
     199    {
     200        this._computedStyleSection.showsShorthandsInsteadOfLonghands = this._computedStylePreferShorthandsSetting.value;
     201    }
    193202};
    194203

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

    r240314 r251038  
    3939
    4040        this._showsImplicitProperties = false;
     41        this._showsShorthandsInsteadOfLonghands = false;
    4142        this._alwaysShowPropertyNames = new Set;
    42         this._propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.ShowAll;
    4343        this._hideFilterNonMatchingProperties = false;
    4444        this._filterText = null;
    … …  
    9292    }
    9393
     94    set showsShorthandsInsteadOfLonghands(value)
     95    {
     96        if (value === this._showsShorthandsInsteadOfLonghands)
     97            return;
     98
     99        this._showsShorthandsInsteadOfLonghands = value;
     100
     101        this.needsLayout();
     102    }
     103
    94104    set alwaysShowPropertyNames(propertyNames)
    95105    {
    96106        this._alwaysShowPropertyNames = new Set(propertyNames);
    97 
    98         this.needsLayout();
    99     }
    100 
    101     set propertyVisibilityMode(propertyVisibilityMode)
    102     {
    103         if (this._propertyVisibilityMode === propertyVisibilityMode)
    104             return;
    105 
    106         this._propertyVisibilityMode = propertyVisibilityMode;
    107107
    108108        this.needsLayout();
    … …  
    133133
    134134        return properties.filter((property) => {
    135             if (!property.variable && this._propertyVisibilityMode === WI.ComputedStyleSection.PropertyVisibilityMode.HideNonVariables)
     135            if (this._alwaysShowPropertyNames.has(property.canonicalName))
     136                return true;
     137
     138            if (property.implicit && !this._showsImplicitProperties)
    136139                return false;
    137140
    138             if (property.variable && this._propertyVisibilityMode === WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables)
     141            if (this._showsShorthandsInsteadOfLonghands) {
     142                if (property.shorthandPropertyNames.length)
     143                    return false;
     144            } else if (property.isShorthand)
    139145                return false;
    140146
    141             return !property.implicit || this._showsImplicitProperties || this._alwaysShowPropertyNames.has(property.canonicalName);
     147            return true;
    142148        });
    143149    }
    … …  
    266272
    267273WI.ComputedStyleSection.StyleClassName = "computed-style-section";
    268 
    269 WI.ComputedStyleSection.PropertyVisibilityMode = {
    270     ShowAll: Symbol("variable-visibility-show-all"),
    271     HideVariables: Symbol("variable-visibility-hide-variables"),
    272     HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
    273 };

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

    r249301 r251038  
    213213            this._contentElement.append(" */");
    214214
    215         if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed) {
     215        if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed && !this._property.isShorthand) {
    216216            let effectiveProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(this._property.name);
    217217            if (effectiveProperty && !effectiveProperty.styleSheetTextRange)
    … …  
    541541        tokens = this._addVariableTokens(tokens);
    542542
    543         if (this._property.variable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
     543        if (this._property.isVariable || WI.CSSKeywordCompletions.isColorAwareProperty(this._property.name)) {
    544544            tokens = this._addGradientTokens(tokens);
    545545            tokens = this._addColorTokens(tokens);
    546546        }
    547547
    548         if (this._property.variable || WI.CSSKeywordCompletions.isTimingFunctionAwareProperty(this._property.name)) {
     548        if (this._property.isVariable || WI.CSSKeywordCompletions.isTimingFunctionAwareProperty(this._property.name)) {
    549549            tokens = this._addTimingFunctionTokens(tokens, "cubic-bezier");
    550550            tokens = this._addTimingFunctionTokens(tokens, "spring");
Note: See TracChangeset for help on using the changeset viewer.