⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 242622 in webkit


Ignore:
Timestamp:
Mar 7, 2019, 4:40:02 PM (7 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Styles: overridden CSS property should have go-to button to jump to effective property
​https://bugs.webkit.org/show_bug.cgi?id=185930
<rdar://problem/40506252>

Reviewed by Matt Baker.

Introduce a new experimental jump to effective property button. The button is a small arrow button
next to an overridden CSS property. Clicking the button scrolls to the effective CSS property and
selects it.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Setting.js:
  • UserInterface/Models/CSSProperty.js:

(WI.CSSProperty):
(WI.CSSProperty.prototype.update):
(WI.CSSProperty.prototype.get overridingProperty):
(WI.CSSProperty.prototype.set overridingProperty):

  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles.prototype._markOverriddenProperties):

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:

(.spreadsheet-style-declaration-editor .property.overridden .select-effective-property):
(.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property,):
(.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,):
(@media (prefers-color-scheme: dark)):

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertySelectByProperty):

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorSelectProperty):

  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionSelectProperty):

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.updateStatus):

Location:
trunk/Source/WebInspectorUI
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r242606 r242622  
     12019-03-07  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Styles: overridden CSS property should have go-to button to jump to effective property
     4        https://bugs.webkit.org/show_bug.cgi?id=185930
     5        <rdar://problem/40506252>
     6
     7        Reviewed by Matt Baker.
     8
     9        Introduce a new experimental jump to effective property button. The button is a small arrow button
     10        next to an overridden CSS property. Clicking the button scrolls to the effective CSS property and
     11        selects it.
     12
     13        * Localizations/en.lproj/localizedStrings.js:
     14        * UserInterface/Base/Setting.js:
     15        * UserInterface/Models/CSSProperty.js:
     16        (WI.CSSProperty):
     17        (WI.CSSProperty.prototype.update):
     18        (WI.CSSProperty.prototype.get overridingProperty):
     19        (WI.CSSProperty.prototype.set overridingProperty):
     20        * UserInterface/Models/DOMNodeStyles.js:
     21        (WI.DOMNodeStyles.prototype._markOverriddenProperties):
     22        * UserInterface/Views/SettingsTabContentView.js:
     23        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     24        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
     25        (.spreadsheet-style-declaration-editor .property.overridden .select-effective-property):
     26        (.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property,):
     27        (.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,):
     28        (@media (prefers-color-scheme: dark)):
     29        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
     30        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertySelectByProperty):
     31        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     32        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.spreadsheetCSSStyleDeclarationEditorSelectProperty):
     33        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     34        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationSectionSelectProperty):
     35        * UserInterface/Views/SpreadsheetStyleProperty.js:
     36        (WI.SpreadsheetStyleProperty.prototype.updateStatus):
     37
    1382019-03-07  Devin Rousso  <drousso@apple.com>
    239

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

    r242602 r242622  
    914914localizedStrings["Show Elements"] = "Show Elements";
    915915localizedStrings["Show Grid"] = "Show Grid";
     916localizedStrings["Show Jump to Effective Property Button"] = "Show Jump to Effective Property Button";
    916917localizedStrings["Show Path"] = "Show Path";
    917918localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
    … …  
    991992localizedStrings["Styles \u2014 Computed"] = "Styles \u2014 Computed";
    992993localizedStrings["Styles \u2014 Rules"] = "Styles \u2014 Rules";
     994localizedStrings["Styles:"] = "Styles:";
    993995localizedStrings["Stylesheet"] = "Stylesheet";
    994996localizedStrings["Stylesheets"] = "Stylesheets";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r242556 r242622  
    163163    experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),
    164164    experimentalEnableSourcesTab: new WI.Setting("experimental-enable-sources-tab", false),
     165    experimentalEnableStylesJumpToEffective: new WI.Setting("experimental-styles-jump-to-effective", false),
    165166
    166167    // DebugUI

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

    r242063 r242622  
    3232        this._ownerStyle = null;
    3333        this._index = index;
     34        this._overridingProperty = null;
    3435        this._initialState = null;
    3536
    … …  
    100101        else
    101102            this._overridden = overridden;
     103
     104        if (!overridden)
     105            this._overridingProperty = null;
    102106
    103107        this._text = text;
    … …  
    262266            return;
    263267
     268        if (!overridden)
     269            this._overridingProperty = null;
     270
    264271        var previousOverridden = this._overridden;
    265272
    … …  
    280287
    281288        this._overriddenStatusChangedTimeout = setTimeout(delayed.bind(this), 0);
     289    }
     290
     291    get overridingProperty()
     292    {
     293        console.assert(this._overridden);
     294        return this._overridingProperty;
     295    }
     296
     297    set overridingProperty(effectiveProperty)
     298    {
     299        if (!WI.settings.experimentalEnableStylesJumpToEffective.value)
     300            return;
     301
     302        this._overridingProperty = effectiveProperty || null;
    282303    }
    283304

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

    r241623 r242622  
    919919                        if (effectiveProperty.important && !property.important) {
    920920                            property.overridden = true;
     921                            property.overridingProperty = effectiveProperty;
    921922                            continue;
    922923                        }
    923924                    } else if (effectiveProperty.important || !property.important || effectiveProperty.ownerStyle.node !== property.ownerStyle.node) {
    924925                        property.overridden = true;
     926                        property.overridingProperty = effectiveProperty;
    925927                        continue;
    926928                    }
    927929
    928                     if (!property.anonymous)
     930                    if (!property.anonymous) {
    929931                        effectiveProperty.overridden = true;
     932                        effectiveProperty.overridingProperty = property;
     933                    }
    930934                }
    931935

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

    r242556 r242622  
    276276        experimentalSettingsView.addSeparator();
    277277
     278        experimentalSettingsView.addSetting(WI.UIString("Styles:"), WI.settings.experimentalEnableStylesJumpToEffective, WI.UIString("Show Jump to Effective Property Button"));
     279        experimentalSettingsView.addSeparator();
     280
    278281        let reloadInspectorButton = document.createElement("button");
    279282        reloadInspectorButton.textContent = WI.UIString("Reload Web Inspector");
    … …  
    304307        listenForChange(WI.settings.experimentalEnableNewTabBar);
    305308        listenForChange(WI.settings.experimentalEnableCPUUsageEnhancements);
     309        listenForChange(WI.settings.experimentalEnableStylesJumpToEffective);
    306310
    307311        this.addSettingsView(experimentalSettingsView);

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

    r242118 r242622  
    167167}
    168168
     169.spreadsheet-style-declaration-editor .property.overridden .select-effective-property {
     170    display: none;
     171    height: 10px;
     172    line-height: 10px;
     173    vertical-align: middle;
     174    color: var(--text-color-secondary);
     175    cursor: pointer;
     176}
     177
     178.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property,
     179.spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property {
     180    display: inline-block;
     181}
     182
     183.spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,
     184.spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property::after {
     185    content: attr(data-value);
     186    display: inline-block;
     187    position: relative;
     188    left: 16px;
     189    white-space: nowrap;
     190}
     191
    169192.meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
    170193    color: var(--syntax-highlight-link-color) !important;
    … …  
    197220        background-color: hsl(106, 13%, 25%);
    198221    }
    199 }
     222
     223    .spreadsheet-style-declaration-editor .property.overridden:hover .select-effective-property::after,
     224    .spreadsheet-style-declaration-editor .property.overridden:focus-within .select-effective-property::after {
     225        /* .select-effective-property has inverted colors. Invert the pseudo-element again to restore the original text color. */
     226        filter: invert();
     227    }
     228}

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

    r242063 r242622  
    456456    }
    457457
     458    spreadsheetStylePropertySelectByProperty(property)
     459    {
     460        if (this._delegate && this._delegate.spreadsheetCSSStyleDeclarationEditorSelectProperty)
     461            this._delegate.spreadsheetCSSStyleDeclarationEditorSelectProperty(property);
     462    }
     463
    458464    spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
    459465    {

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

    r241980 r242622  
    230230    }
    231231
     232    spreadsheetCSSStyleDeclarationEditorSelectProperty(property)
     233    {
     234        if (this._delegate && this._delegate.spreadsheetCSSStyleDeclarationSectionSelectProperty)
     235            this._delegate.spreadsheetCSSStyleDeclarationSectionSelectProperty(property);
     236    }
     237
    232238    applyFilter(filterText)
    233239    {

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

    r240314 r242622  
    158158    // SpreadsheetCSSStyleDeclarationSection delegate
    159159
     160    spreadsheetCSSStyleDeclarationSectionSelectProperty(property)
     161    {
     162        this.scrollToSectionAndHighlightProperty(property);
     163    }
     164
    160165    spreadsheetCSSStyleDeclarationSectionStartEditingAdjacentRule(currentSection, delta)
    161166    {

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

    r242602 r242622  
    4040        this._nameElement = null;
    4141        this._valueElement = null;
     42        this._jumpToEffectivePropertyButton = null;
    4243
    4344        this._nameTextField = null;
    … …  
    262263
    263264        if (this._property.overridden) {
     265            if (!this._jumpToEffectivePropertyButton && this._delegate && this._delegate.spreadsheetStylePropertySelectByProperty) {
     266                console.assert(this._property.overridingProperty, `Overridden property is missing overridingProperty: ${this._property.formattedText}`);
     267                if (this._property.overridingProperty) {
     268                    this._jumpToEffectivePropertyButton = WI.createGoToArrowButton();
     269                    this._jumpToEffectivePropertyButton.classList.add("select-effective-property");
     270                    this._jumpToEffectivePropertyButton.dataset.value = this._property.overridingProperty.rawValue;
     271                    this._element.append(this._jumpToEffectivePropertyButton);
     272
     273                    this._jumpToEffectivePropertyButton.addEventListener("click", (event) => {
     274                        console.assert(this._property.overridingProperty);
     275                        event.stop();
     276                        this._delegate.spreadsheetStylePropertySelectByProperty(this._property.overridingProperty);
     277                    });
     278                }
     279            }
     280
    264281            classNames.push("overridden");
    265282            if (duplicatePropertyExistsBelow(this._property)) {
Note: See TracChangeset for help on using the changeset viewer.