Changeset 238589 in webkit


Ignore:
Timestamp:
Nov 27, 2018 4:28:06 PM (5 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Computed panel: allow to expand properties to show list of overridden values
​https://bugs.webkit.org/show_bug.cgi?id=191984

Reviewed by Devin Rousso.

Introduce the new experimental Computed Style Cascades.

Each property now can expand to show a list of overridden values, their corresponding
selectors, and source locations.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Setting.js:
  • UserInterface/Main.html:
  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles.prototype.get uniqueOrderedStyles):
Move uniqueOrderedStyles function unmodified from SpreadsheetRulesStyleDetailsPanel so it can be used by ComputedStyleDetailsPanel, too.

  • UserInterface/Views/ComputedStyleDetailsPanel.css:

(.computed-with-traces .computed-style-properties):
(.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):
(.computed-with-traces .details-section.computed-style-properties > .content):
(.computed-with-traces .computed-style-properties .property .go-to-arrow):

  • UserInterface/Views/ComputedStyleDetailsPanel.js:

(WI.ComputedStyleDetailsPanel.prototype.refresh):
(WI.ComputedStyleDetailsPanel.prototype.applyFilter):
(WI.ComputedStyleDetailsPanel.prototype.focusFirstSection):
(WI.ComputedStyleDetailsPanel.prototype.initialLayout):
(WI.ComputedStyleDetailsPanel.prototype._computePropertyTraces):
(WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
(WI.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
(WI.ComputedStyleDetailsPanel.prototype._handleEditorFilterApplied):
(WI.ComputedStyleDetailsPanel):
Use the new Computed section (WI.ComputedStyleSection) only when it's enabled in the experimental settings.
Otherwise, use the current Computed section.

  • UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:

(WI.ComputedStyleDetailsSidebarPanel):

  • UserInterface/Views/ComputedStyleSection.css: Added.

(.computed-style-section):
(.computed-style-section .computed-property-item):
(.computed-style-section .computed-property-item.expanded):
(.computed-style-section .computed-property-item.expanded + .computed-property-item):
(.computed-style-section .computed-property-item .disclosure-button):
(.computed-style-section .computed-property-item .property-traces):
(.computed-style-section .computed-property-item.expanded .property-traces):
(.computed-style-section .computed-property-item.expanded .disclosure-button):
(.computed-style-section .computed-property-item .property-trace-item):
(.computed-style-section .computed-property-item .property-trace-item .property.overridden .value):
(.computed-style-section .property-trace-item-left,):
(.computed-style-section .property-trace-item-right):
(.computed-style-section .computed-property-item .property-trace-item .value):
(.computed-style-section .property .value):
(.computed-style-section .computed-property-item .property):
(.computed-style-section .computed-property-item .property .name):
(.computed-style-section .computed-property-item .property-trace-item .selector):
(.computed-style-section .computed-property-item .origin):
(.computed-style-section .computed-property-item .go-to-link):
(.computed-style-section .property-trace-item .property .name,):
(.computed-style-section .property-trace-item .property .value + span):
(.computed-style-properties.details-section > .content,):

  • UserInterface/Views/ComputedStyleSection.js: Added.

(WI.ComputedStyleSection):
(WI.ComputedStyleSection.prototype.get style):
(WI.ComputedStyleSection.prototype.set style):
(WI.ComputedStyleSection.prototype.get styleTraces):
(WI.ComputedStyleSection.prototype.set styleTraces):
(WI.ComputedStyleSection.prototype.set showsImplicitProperties):
(WI.ComputedStyleSection.prototype.set alwaysShowPropertyNames):
(WI.ComputedStyleSection.prototype.set propertyVisibilityMode):
(WI.ComputedStyleSection.prototype.set hideFilterNonMatchingProperties):
(WI.ComputedStyleSection.prototype.get propertiesToRender):
(WI.ComputedStyleSection.prototype.layout):
(WI.ComputedStyleSection.prototype.detached):
(WI.ComputedStyleSection.prototype.hidden):
(WI.ComputedStyleSection.prototype.applyFilter):
(WI.ComputedStyleSection.prototype.spreadsheetStylePropertyShowProperty):
(WI.ComputedStyleSection.prototype._createTrace):
(WI.ComputedStyleSection.prototype._handlePropertiesChanged):

  • UserInterface/Views/ExpandableView.js: Added.

(WI.ExpandableView):
(WI.ExpandableView.prototype.get element):
(WI.ExpandableView.prototype._onDisclosureButtonClick):
(WI.ExpandableView.prototype._update):

  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
Replace _renderOrigin with WI.StyleOriginView so it could be used by WI.ComputedStyleSection.

  • UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:

(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.update):
(WI.SpreadsheetStyleProperty.prototype._isEditable):
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
Introduce readOnly option so WI.SpreadsheetStyleProperty could be used by WI.ComputedStyleSection.

  • UserInterface/Views/StyleOriginView.js: Added.

(WI.StyleOriginView):

Location:
trunk/Source/WebInspectorUI
Files:
3 added
12 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r238570 r238589  
     12018-11-27  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Computed panel: allow to expand properties to show list of overridden values
     4        https://bugs.webkit.org/show_bug.cgi?id=191984
     5
     6        Reviewed by Devin Rousso.
     7
     8        Introduce the new experimental Computed Style Cascades.
     9
     10        Each property now can expand to show a list of overridden values, their corresponding
     11        selectors, and source locations.
     12
     13        * Localizations/en.lproj/localizedStrings.js:
     14        * UserInterface/Base/Setting.js:
     15        * UserInterface/Main.html:
     16        * UserInterface/Models/DOMNodeStyles.js:
     17        (WI.DOMNodeStyles.prototype.get uniqueOrderedStyles):
     18        Move `uniqueOrderedStyles` function unmodified from SpreadsheetRulesStyleDetailsPanel so it can be used by ComputedStyleDetailsPanel, too.
     19
     20        * UserInterface/Views/ComputedStyleDetailsPanel.css:
     21        (.computed-with-traces .computed-style-properties):
     22        (.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):
     23        (.computed-with-traces .details-section.computed-style-properties > .content):
     24        (.computed-with-traces .computed-style-properties .property .go-to-arrow):
     25
     26        * UserInterface/Views/ComputedStyleDetailsPanel.js:
     27        (WI.ComputedStyleDetailsPanel.prototype.refresh):
     28        (WI.ComputedStyleDetailsPanel.prototype.applyFilter):
     29        (WI.ComputedStyleDetailsPanel.prototype.focusFirstSection):
     30        (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
     31        (WI.ComputedStyleDetailsPanel.prototype._computePropertyTraces):
     32        (WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
     33        (WI.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
     34        (WI.ComputedStyleDetailsPanel.prototype._handleEditorFilterApplied):
     35        (WI.ComputedStyleDetailsPanel):
     36        Use the new Computed section (WI.ComputedStyleSection) only when it's enabled in the experimental settings.
     37        Otherwise, use the current Computed section.
     38
     39        * UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:
     40        (WI.ComputedStyleDetailsSidebarPanel):
     41
     42        * UserInterface/Views/ComputedStyleSection.css: Added.
     43        (.computed-style-section):
     44        (.computed-style-section .computed-property-item):
     45        (.computed-style-section .computed-property-item.expanded):
     46        (.computed-style-section .computed-property-item.expanded + .computed-property-item):
     47        (.computed-style-section .computed-property-item .disclosure-button):
     48        (.computed-style-section .computed-property-item .property-traces):
     49        (.computed-style-section .computed-property-item.expanded .property-traces):
     50        (.computed-style-section .computed-property-item.expanded .disclosure-button):
     51        (.computed-style-section .computed-property-item .property-trace-item):
     52        (.computed-style-section .computed-property-item .property-trace-item .property.overridden .value):
     53        (.computed-style-section .property-trace-item-left,):
     54        (.computed-style-section .property-trace-item-right):
     55        (.computed-style-section .computed-property-item .property-trace-item .value):
     56        (.computed-style-section .property .value):
     57        (.computed-style-section .computed-property-item .property):
     58        (.computed-style-section .computed-property-item .property .name):
     59        (.computed-style-section .computed-property-item .property-trace-item .selector):
     60        (.computed-style-section .computed-property-item .origin):
     61        (.computed-style-section .computed-property-item .go-to-link):
     62        (.computed-style-section .property-trace-item .property .name,):
     63        (.computed-style-section .property-trace-item .property .value + span):
     64        (.computed-style-properties.details-section > .content,):
     65
     66        * UserInterface/Views/ComputedStyleSection.js: Added.
     67        (WI.ComputedStyleSection):
     68        (WI.ComputedStyleSection.prototype.get style):
     69        (WI.ComputedStyleSection.prototype.set style):
     70        (WI.ComputedStyleSection.prototype.get styleTraces):
     71        (WI.ComputedStyleSection.prototype.set styleTraces):
     72        (WI.ComputedStyleSection.prototype.set showsImplicitProperties):
     73        (WI.ComputedStyleSection.prototype.set alwaysShowPropertyNames):
     74        (WI.ComputedStyleSection.prototype.set propertyVisibilityMode):
     75        (WI.ComputedStyleSection.prototype.set hideFilterNonMatchingProperties):
     76        (WI.ComputedStyleSection.prototype.get propertiesToRender):
     77        (WI.ComputedStyleSection.prototype.layout):
     78        (WI.ComputedStyleSection.prototype.detached):
     79        (WI.ComputedStyleSection.prototype.hidden):
     80        (WI.ComputedStyleSection.prototype.applyFilter):
     81        (WI.ComputedStyleSection.prototype.spreadsheetStylePropertyShowProperty):
     82        (WI.ComputedStyleSection.prototype._createTrace):
     83        (WI.ComputedStyleSection.prototype._handlePropertiesChanged):
     84
     85        * UserInterface/Views/ExpandableView.js: Added.
     86        (WI.ExpandableView):
     87        (WI.ExpandableView.prototype.get element):
     88        (WI.ExpandableView.prototype._onDisclosureButtonClick):
     89        (WI.ExpandableView.prototype._update):
     90
     91        * UserInterface/Views/SettingsTabContentView.js:
     92        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     93
     94        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
     95        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
     96        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.layout):
     97        Replace `_renderOrigin` with WI.StyleOriginView so it could be used by WI.ComputedStyleSection.
     98
     99        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
     100        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
     101
     102        * UserInterface/Views/SpreadsheetStyleProperty.js:
     103        (WI.SpreadsheetStyleProperty.prototype.update):
     104        (WI.SpreadsheetStyleProperty.prototype._isEditable):
     105        (WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
     106        Introduce `readOnly` option so WI.SpreadsheetStyleProperty could be used by WI.ComputedStyleSection.
     107
     108        * UserInterface/Views/StyleOriginView.js: Added.
     109        (WI.StyleOriginView):
     110
    11112018-11-27  Timothy Hatcher  <timothy@apple.com>
    2112

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

    r238570 r238589  
    352352localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
    353353localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";
     354localizedStrings["Enable Computed Style Cascades"] = "Enable Computed Style Cascades";
    354355localizedStrings["Enable Event Listener"] = "Enable Event Listener";
    355356localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";

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

    r238192 r238589  
    131131    // Experimental
    132132    experimentalEnableMultiplePropertiesSelection: new WI.Setting("experimental-enable-multiple-properties-selection", false),
     133    experimentalEnableComputedStyleCascades: new WI.Setting("experimental-enable-computed-style-cascades", false),
    133134    experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
    134135    experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),

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

    r238563 r238589  
    6363    <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
    6464    <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
     65    <link rel="stylesheet" href="Views/ComputedStyleSection.css">
    6566    <link rel="stylesheet" href="Views/ConsoleDrawer.css">
    6667    <link rel="stylesheet" href="Views/ConsoleMessageView.css">
    … …  
    600601    <script src="Views/CompletionSuggestionsView.js"></script>
    601602    <script src="Views/ComputedStyleDetailsPanel.js"></script>
     603    <script src="Views/ComputedStyleSection.js"></script>
    602604    <script src="Views/ConsoleDrawer.js"></script>
    603605    <script src="Views/ConsoleGroup.js"></script>
    … …  
    640642    <script src="Views/EventBreakpointTreeElement.js"></script>
    641643    <script src="Views/EventListenerSectionGroup.js"></script>
     644    <script src="Views/ExpandableView.js"></script>
    642645    <script src="Views/FilterBar.js"></script>
    643646    <script src="Views/FilterBarButton.js"></script>
    … …  
    781784    <script src="Views/SpreadsheetStyleProperty.js"></script>
    782785    <script src="Views/SpreadsheetTextField.js"></script>
     786    <script src="Views/StyleOriginView.js"></script>
    783787
    784788    <script src="Views/SpringEditor.js"></script>

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

    r236766 r238589  
    369369    }
    370370
     371    get uniqueOrderedStyles()
     372    {
     373        let uniqueStyles = [];
     374
     375        for (let style of this._orderedStyles) {
     376            let rule = style.ownerRule;
     377            if (!rule) {
     378                uniqueStyles.push(style);
     379                continue;
     380            }
     381
     382            let found = false;
     383            for (let existingStyle of uniqueStyles) {
     384                if (rule.isEqualTo(existingStyle.ownerRule)) {
     385                    found = true;
     386                    break;
     387                }
     388            }
     389            if (!found)
     390                uniqueStyles.push(style);
     391        }
     392
     393        return uniqueStyles;
     394    }
     395
    371396    effectivePropertyForName(name)
    372397    {

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

    r236705 r238589  
    3939    display: initial;
    4040}
     41
     42.computed-with-traces .computed-style-properties {
     43    --disclosure-button-size: 15px;
     44}
     45
     46.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
     47    background-color: hsl(0, 0%, 97%);
     48}
     49
     50.computed-with-traces .details-section.computed-style-properties > .content {
     51    font: 12px -webkit-system-font, sans-serif;
     52}
     53
     54.computed-with-traces .computed-style-properties .property .go-to-arrow {
     55    width: var(--disclosure-button-size);
     56    height: var(--disclosure-button-size);
     57}

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

    r236336 r238589  
    4646        }
    4747
    48         this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
    49         this._propertiesSection.element.classList.toggle("hidden", !this._propertiesTextEditor.propertiesToRender.length);
     48        if (WI.settings.experimentalEnableComputedStyleCascades.value)
     49            this._computedStyleSection.styleTraces = this._computePropertyTraces(this.nodeStyles.uniqueOrderedStyles);
     50
     51        this._computedStyleSection.style = this.nodeStyles.computedStyle;
    5052
    5153        this._variablesTextEditor.style = this.nodeStyles.computedStyle;
    … …  
    6769            return;
    6870
    69         this._propertiesTextEditor.applyFilter(filterText);
     71        this._computedStyleSection.applyFilter(filterText);
    7072        this._variablesTextEditor.applyFilter(filterText);
    7173    }
    … …  
    8183    focusFirstSection()
    8284    {
    83         this._propertiesTextEditor.focus();
     85        this._computedStyleSection.focus();
    8486    }
    8587
    … …  
    102104        computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
    103105
    104         this._propertiesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
    105         this._propertiesTextEditor.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
    106         this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
    107         this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
    108         this._propertiesTextEditor.hideFilterNonMatchingProperties = true;
    109         this._propertiesTextEditor.sortPropertiesByName = true;
    110         this._propertiesTextEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
     106        if (WI.settings.experimentalEnableComputedStyleCascades.value) {
     107            this._computedStyleSection = new WI.ComputedStyleSection(this);
     108            this._computedStyleSection.propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables;
     109            this._computedStyleSection.addEventListener(WI.ComputedStyleSection.Event.FilterApplied, this._handleEditorFilterApplied, this);
     110        } else {
     111            this._computedStyleSection = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
     112            this._computedStyleSection.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
     113            this._computedStyleSection.sortPropertiesByName = true;
     114            this._computedStyleSection.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
     115        }
     116
     117        this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
     118        this._computedStyleSection.alwaysShowPropertyNames = ["display", "width", "height"];
     119        this._computedStyleSection.hideFilterNonMatchingProperties = true;
    111120
    112121        let propertiesRow = new WI.DetailsSectionRow;
    … …  
    115124        this._propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
    116125
    117         this.addSubview(this._propertiesTextEditor);
    118 
    119         propertiesRow.element.appendChild(this._propertiesTextEditor.element);
     126        this.addSubview(this._computedStyleSection);
     127
     128        propertiesRow.element.appendChild(this._computedStyleSection.element);
    120129
    121130        this._variablesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
    … …  
    154163    // Private
    155164
     165    _computePropertyTraces(orderedDeclarations)
     166    {
     167        let result = new Map();
     168        for (let rule of orderedDeclarations) {
     169            for (let property of rule.allProperties) {
     170                let properties = result.get(property.name);
     171                if (!properties) {
     172                    properties = [];
     173                    result.set(property.name, properties);
     174                }
     175                properties.push(property);
     176            }
     177        }
     178
     179        return result;
     180    }
     181
    156182    _computedStyleShowAllCheckboxValueChanged(event)
    157183    {
    158184        let checked = this._computedStyleShowAllCheckbox.checked;
    159185        this._computedStyleShowAllSetting.value = checked;
    160         this._propertiesTextEditor.showsImplicitProperties = checked;
     186        this._computedStyleSection.showsImplicitProperties = checked;
    161187    }
    162188
    … …  
    164190    {
    165191        if (event && event.data && !event.data.collapsed)
    166             this._propertiesTextEditor.needsLayout();
     192            this._computedStyleSection.needsLayout();
    167193    }
    168194
    … …  
    176202    {
    177203        let section = null;
    178         if (event.target === this._propertiesTextEditor)
     204        if (event.target === this._computedStyleSection)
    179205            section = this._propertiesSection;
    180206        else if (event.target === this._variablesTextEditor)

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

    r227078 r238589  
    2929    {
    3030        super("style-computed", WI.UIString("Computed"), WI.ComputedStyleDetailsPanel);
     31
     32        if (WI.settings.experimentalEnableComputedStyleCascades.value)
     33            this.element.classList.add("computed-with-traces");
    3134    }
    3235};

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

    r238588 r238589  
    11/*
    2  * Copyright (C) 2017 Apple Inc. All rights reserved.
     2 * Copyright (C) 2018 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WI.ComputedStyleDetailsSidebarPanel = class ComputedStyleDetailsSidebarPanel extends WI.GeneralStyleDetailsSidebarPanel
     26WI.ExpandableView = class ExpandableView
    2727{
    28     constructor()
     28    constructor(key, titleElement, childElement)
    2929    {
    30         super("style-computed", WI.UIString("Computed"), WI.ComputedStyleDetailsPanel);
     30        this._element = document.createElement("div");
     31
     32        if (childElement) {
     33            let disclosureButton = document.createElement("button");
     34            disclosureButton.classList.add("disclosure-button");
     35            disclosureButton.addEventListener("click", this._onDisclosureButtonClick.bind(this));
     36            this._element.append(disclosureButton);
     37        }
     38
     39        this._element.append(titleElement);
     40        this._expandedSetting = new WI.Setting("expanded-" + key, false);
     41
     42        if (childElement) {
     43            this._element.append(childElement);
     44            this._element.classList.toggle("expanded", this._expandedSetting.value);
     45        }
     46    }
     47
     48    // Public
     49
     50    get element()
     51    {
     52        return this._element;
     53    }
     54
     55    // Private
     56
     57    _onDisclosureButtonClick(event)
     58    {
     59        let shouldExpand = !this._expandedSetting.value;
     60        this._update(shouldExpand);
     61    }
     62
     63    _update(shouldExpand)
     64    {
     65        this._element.classList.toggle("expanded", shouldExpand);
     66        this._expandedSetting.value = shouldExpand;
    3167    }
    3268};

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

    r238500 r238589  
    244244
    245245        if (window.CSSAgent) {
    246             experimentalSettingsView.addSetting(WI.UIString("Styles Sidebar:"), WI.settings.experimentalEnableMultiplePropertiesSelection, WI.UIString("Enable Selection of Multiple Properties"));
     246            let group = experimentalSettingsView.addGroup(WI.UIString("Styles Sidebar:"));
     247            group.addSetting(WI.settings.experimentalEnableMultiplePropertiesSelection, WI.UIString("Enable Selection of Multiple Properties"));
     248            group.addSetting(WI.settings.experimentalEnableComputedStyleCascades, WI.UIString("Enable Computed Style Cascades"));
    247249            experimentalSettingsView.addSeparator();
    248250        }
    … …  
    286288
    287289        listenForChange(WI.settings.experimentalEnableMultiplePropertiesSelection);
     290        listenForChange(WI.settings.experimentalEnableComputedStyleCascades);
    288291        listenForChange(WI.settings.experimentalEnableLayersTab);
    289292        listenForChange(WI.settings.experimentalEnableAuditTab);

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

    r238201 r238589  
    7070        this._headerElement.classList.add("header");
    7171
    72         this._originElement = document.createElement("span");
    73         this._originElement.classList.add("origin");
    74         this._headerElement.append(this._originElement);
     72        this._styleOriginView = new WI.StyleOriginView();
     73        this._headerElement.append(this._styleOriginView.element);
    7574
    7675        this._selectorElement = document.createElement("span");
    … …  
    123122        super.layout();
    124123
    125         this._renderOrigin();
     124        this._styleOriginView.update(this._style);
    126125        this._renderSelector();
    127126
    … …  
    327326    }
    328327
    329     _renderOrigin()
    330     {
    331         this._originElement.removeChildren();
    332 
    333         switch (this._style.type) {
    334         case WI.CSSStyleDeclaration.Type.Rule:
    335             console.assert(this._style.ownerRule);
    336 
    337             if (this._style.ownerRule.sourceCodeLocation) {
    338                 let options = {
    339                     dontFloat: true,
    340                     ignoreNetworkTab: true,
    341                     ignoreSearchTab: true,
    342                 };
    343 
    344                 if (this._style.ownerStyleSheet.isInspectorStyleSheet()) {
    345                     options.nameStyle = WI.SourceCodeLocation.NameStyle.None;
    346                     options.prefix = WI.UIString("Inspector Style Sheet") + ":";
    347                 }
    348 
    349                 let sourceCodeLink = WI.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, options);
    350                 this._originElement.appendChild(sourceCodeLink);
    351             } else {
    352                 let originString = "";
    353 
    354                 switch (this._style.ownerRule.type) {
    355                 case WI.CSSStyleSheet.Type.Author:
    356                     originString = WI.UIString("Author Stylesheet");
    357                     break;
    358 
    359                 case WI.CSSStyleSheet.Type.User:
    360                     originString = WI.UIString("User Stylesheet");
    361                     break;
    362 
    363                 case WI.CSSStyleSheet.Type.UserAgent:
    364                     originString = WI.UIString("User Agent Stylesheet");
    365                     break;
    366 
    367                 case WI.CSSStyleSheet.Type.Inspector:
    368                     originString = WI.UIString("Web Inspector");
    369                     break;
    370                 }
    371 
    372                 console.assert(originString);
    373                 if (originString)
    374                     this._originElement.append(originString);
    375 
    376                 if (!this._style.editable) {
    377                     let styleTitle = "";
    378                     if (this._style.ownerRule && this._style.ownerRule.type === WI.CSSStyleSheet.Type.UserAgent)
    379                         styleTitle = WI.UIString("User Agent Stylesheet");
    380                     else
    381                         styleTitle = WI.UIString("Style rule");
    382 
    383                     this._originElement.title = WI.UIString("%s cannot be modified").format(styleTitle);
    384                 }
    385             }
    386             break;
    387 
    388         case WI.CSSStyleDeclaration.Type.Attribute:
    389             this._originElement.append(WI.UIString("HTML Attributes"));
    390             break;
    391         }
    392     }
    393 
    394328    _createMediaHeader()
    395329    {

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

    r236766 r238589  
    216216        this._sections = [];
    217217
    218         let uniqueOrderedStyles = (orderedStyles) => {
    219             let uniqueStyles = [];
    220 
    221             for (let style of orderedStyles) {
    222                 let rule = style.ownerRule;
    223                 if (!rule) {
    224                     uniqueStyles.push(style);
    225                     continue;
    226                 }
    227 
    228                 let found = false;
    229                 for (let existingStyle of uniqueStyles) {
    230                     if (rule.isEqualTo(existingStyle.ownerRule)) {
    231                         found = true;
    232                         break;
    233                     }
    234                 }
    235                 if (!found)
    236                     uniqueStyles.push(style);
    237             }
    238 
    239             return uniqueStyles;
    240         };
    241 
    242218        let createHeader = (text, node) => {
    243219            let header = this.element.appendChild(document.createElement("h2"));
    … …  
    271247        };
    272248
    273         for (let style of uniqueOrderedStyles(this.nodeStyles.orderedStyles)) {
     249        for (let style of this.nodeStyles.uniqueOrderedStyles) {
    274250            if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
    275251                createHeader(WI.UIString("Inherited From"), style.node);
    … …  
    284260                createHeader(WI.UIString("Pseudo Element"), pseudoNodeStyle.node);
    285261
    286                 for (let style of uniqueOrderedStyles(pseudoNodeStyle.orderedStyles))
     262                for (let style of pseudoNodeStyle.uniqueOrderedStyles)
    287263                    createSection(style);
    288264            }

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

    r238201 r238589  
    2626WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
    2727{
    28     constructor(delegate, property)
     28    constructor(delegate, property, options = {})
    2929    {
    3030        super();
    … …  
    3434        this._delegate = delegate || null;
    3535        this._property = property;
     36        this._readOnly = options.readOnly || false;
    3637        this._element = document.createElement("div");
    3738
    … …  
    4344        this._valueTextField = null;
    4445
    45         this._property.__propertyView = this;
     46        if (!this._readOnly) {
     47            // This is only needed to navigate from Computed to the corresponding property in the Styles panel.
     48            this._property.__propertyView = this;
     49        }
    4650
    4751        this._selected = false;
    … …  
    5256        property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
    5357
    54         if (WI.settings.experimentalEnableMultiplePropertiesSelection.value && this._property.editable) {
     58        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value && this._isEditable()) {
    5559            this._element.tabIndex = -1;
    5660
    … …  
    137141        this.element.removeChildren();
    138142
    139         if (this._property.editable) {
     143        if (this._isEditable()) {
    140144            this._checkboxElement = this.element.appendChild(document.createElement("input"));
    141145            this._checkboxElement.classList.add("property-toggle");
    … …  
    168172        this._renderValue(this._property.rawValue);
    169173
    170         if (this._property.editable && this._property.enabled) {
     174        if (this._isEditable() && this._property.enabled) {
    171175            this._nameElement.tabIndex = 0;
    172176            this._nameElement.addEventListener("beforeinput", this._handleNameBeforeInput.bind(this));
    … …  
    181185        }
    182186
    183         if (this._property.editable) {
     187        if (this._isEditable()) {
    184188            this._setupJumpToSymbol(this._nameElement);
    185189            this._setupJumpToSymbol(this._valueElement);
    … …  
    380384    // Private
    381385
     386    _isEditable()
     387    {
     388        return !this._readOnly && this._property.editable;
     389    }
     390
    382391    _renderValue(value)
    383392    {
    … …  
    435444        innerElement.textContent = text;
    436445
    437         let readOnly = !this._property.editable;
     446        let readOnly = !this._isEditable();
    438447        let swatch = new WI.InlineSwatch(type, valueObject, readOnly);
    439448
Note: See TracChangeset for help on using the changeset viewer.