Attachment 349916 Details for Bug 183627 – Patch

[patch] Patch

bug-183627-20180917122304.patch (text/plain), 34.36 KB, created by Devin Rousso on 2018-09-17 12:23:05 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-09-17 12:23:05 PDT

Size: 34.36 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 37c3181bd1e26cf8392e1d253e5be56d7dadd522..9c824b8519df94d54d6fc072b95e1a8d8b9e1f9a 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,96 @@
>+2018-09-17  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: Styles Redesign: rework Computed panel to use Spreadsheet classes
>+        https://bugs.webkit.org/show_bug.cgi?id=183627
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Views/ComputedStyleDetailsPanel.js:
>+        (WI.ComputedStyleDetailsPanel):
>+        (WI.ComputedStyleDetailsPanel.prototype.refresh):
>+        (WI.ComputedStyleDetailsPanel.prototype.applyFilter):
>+        (WI.ComputedStyleDetailsPanel.prototype.spreadsheetCSSStyleDeclarationEditorShowProperty):
>+        (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
>+        (WI.ComputedStyleDetailsPanel.prototype.filterDidChange):
>+        (WI.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
>+        (WI.ComputedStyleDetailsPanel.prototype._handlePropertiesSectionCollapsedStateChanged):
>+        (WI.ComputedStyleDetailsPanel.prototype._handleVariablesSectionCollapsedStateChanged):
>+        (WI.ComputedStyleDetailsPanel.prototype._handleEditorFilterApplied):
>+        (WI.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty.delegateShowProperty): Deleted.
>+        (WI.ComputedStyleDetailsPanel.prototype.cssStyleDeclarationTextEditorShowProperty): Deleted.
>+        Replace CSSStyleDeclarationTextEditor with SpreadsheetCSSStyleDeclarationEditor.
>+
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
>+        (WI.SpreadsheetCSSStyleDeclarationEditor):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set showsImplicitProperties):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set alwaysShowPropertyNames):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set propertyVisibilityMode):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set hideFilterNonMatchingProperties):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.set sortPropertiesByName): Added.
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get propertiesToRender):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.applyFilter):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyShowProperty):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._updateStyleLock):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.get _propertiesToRender): Deleted.
>+        Create setters for the "special" functionality required by the Computed panel and tie them
>+        into the logic that determines what properties are rendered.
>+
>+        * UserInterface/Views/SpreadsheetStyleProperty.js:
>+        (WI.SpreadsheetStyleProperty.prototype._update):
>+        Create go-to arrow if the property has a shorthand version or a source code location.
>+
>+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
>+        (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
>+        Don't reapply the filter after refreshing, as the current panel will handle applying it.
>+
>+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
>+        (.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)):
>+        (.computed-style-properties .property .go-to-arrow):
>+        (.computed-style-properties .property:hover .go-to-arrow):
>+        (.computed-style-properties.details-section): Deleted.
>+        (.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow): Deleted.
>+        (.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow): Deleted.
>+        (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)): Deleted.
>+        * UserInterface/Views/DetailsSection.css:
>+        (.details-section.computed-style-properties:not(.collapsed) > .header): Deleted.
>+        Consolidate Computed panel styles to it's respective CSS file.
>+
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
>+        (.spreadsheet-style-declaration-editor):
>+        (.spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > *):
>+        (.spreadsheet-style-declaration-editor .property.not-inherited .content > *): Deleted.
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
>+        (.spreadsheet-css-declaration):
>+        * UserInterface/Views/Variables.css:
>+        (:root):
>+        Move `css-declaration` padding variables so they can be used by SpreadsheetCSSStyleDeclarationEditor
>+        without a parent SpreadsheetCSSStyleDeclarationSection.
>+
>+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
>+        (.style-spreadsheet .style-rule): Deleted.
>+        (.style-spreadsheet .selector-line): Deleted.
>+        (.style-spreadsheet .selector): Deleted.
>+        (.style-spreadsheet :matches(.selector .matched, .selector:focus)): Deleted.
>+        (.style-spreadsheet .name): Deleted.
>+        (.style-spreadsheet .value): Deleted.
>+        (.style-spreadsheet :matches(.selector, .name, .value)): Deleted.
>+        (.style-spreadsheet :matches(.selector, .name, .value):focus): Deleted.
>+        (.style-spreadsheet .selector-inline): Deleted.
>+        (.style-spreadsheet .property): Deleted.
>+        (.style-spreadsheet .property-disabled,): Deleted.
>+        (.style-spreadsheet .property-disabled :matches(.name, .value)): Deleted.
>+        (.style-spreadsheet .styles-source): Deleted.
>+        (.style-spreadsheet :matches(a, .node-link)): Deleted.
>+        (.style-spreadsheet :matches(a, .node-link):hover): Deleted.
>+        (.style-spreadsheet .declarations): Deleted.
>+        (.style-spreadsheet input[type="checkbox"]): Deleted.
>+        (.style-spreadsheet input[type="checkbox"]:not(:checked)): Deleted.
>+        (.style-spreadsheet .declarations:hover input[type="checkbox"]): Deleted.
>+        Drive-by fix: remove styles that don't apply to anything.
>+
> 2018-09-15  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: REGRESSION: breakpoint context menu appears twice in DOM tree
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>index f7aec09d5656d39384bd4d297e141545469cf997..d7543b023a92fd326804a66939c2c625b9cc03e0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>@@ -23,11 +23,11 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-.computed-style-properties.details-section {
>+.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content) {
>     background-color: white;
> }
> 
>-.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow {
>+.computed-style-properties .property .go-to-arrow {
>     display: none;
>     position: absolute;
>     width: 12px;
>@@ -35,10 +35,6 @@
>     vertical-align: text-bottom;
> }
> 
>-.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow {
>+.computed-style-properties .property:hover .go-to-arrow {
>     display: initial;
> }
>-
>-.details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
>-    background-color: white;
>-}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
>index b24504d4af06c34272e96c61793ae74e4719f957..38b8cd878624c299ffac9cce9d30115e70b4d5a4 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
>@@ -31,48 +31,11 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
> 
>         this._computedStyleShowAllSetting = new WI.Setting("computed-style-show-all", false);
> 
>-        this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
>+        this._filterText = null;
>     }
> 
>     // Public
> 
>-    cssStyleDeclarationTextEditorShowProperty(property, showSource)
>-    {
>-        function delegateShowProperty() {
>-            if (typeof this._delegate.computedStyleDetailsPanelShowProperty === "function")
>-                this._delegate.computedStyleDetailsPanelShowProperty(property);
>-        }
>-
>-        if (!showSource) {
>-            delegateShowProperty.call(this);
>-            return;
>-        }
>-
>-        let effectiveProperty = this._nodeStyles.effectivePropertyForName(property.name);
>-        if (!effectiveProperty || !effectiveProperty.styleSheetTextRange) {
>-            if (!effectiveProperty.relatedShorthandProperty) {
>-                delegateShowProperty.call(this);
>-                return;
>-            }
>-            effectiveProperty = effectiveProperty.relatedShorthandProperty;
>-        }
>-
>-        let ownerRule = effectiveProperty.ownerStyle.ownerRule;
>-        if (!ownerRule) {
>-            delegateShowProperty.call(this);
>-            return;
>-        }
>-
>-        let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
>-        let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
>-
>-        const options = {
>-            ignoreNetworkTab: true,
>-            ignoreSearchTab: true,
>-        };
>-        WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), options);
>-    }
>-
>     refresh(significantChange)
>     {
>         // We only need to do a rebuild on significant changes. Other changes are handled
>@@ -83,19 +46,36 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
>         }
> 
>         this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
>+        this._propertiesSection.element.classList.toggle("hidden", !this._propertiesTextEditor.propertiesToRender.length);
>+
>         this._variablesTextEditor.style = this.nodeStyles.computedStyle;
>+        this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.propertiesToRender.length);
>+
>         this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
> 
>+        if (this._filterText)
>+            this.applyFilter(this._filterText);
>+
>         super.refresh();
>+    }
>+
>+    applyFilter(filterText)
>+    {
>+        this._filterText = filterText;
> 
>-        this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.shownProperties.length);
>+        if (!this.didInitialLayout)
>+            return;
>+
>+        this._propertiesTextEditor.applyFilter(filterText);
>+        this._variablesTextEditor.applyFilter(filterText);
>     }
> 
>-    filterDidChange(filterBar)
>+    // SpreadsheetCSSStyleDeclarationEditor delegate
>+
>+    spreadsheetCSSStyleDeclarationEditorShowProperty(editor, property)
>     {
>-        let filterText = filterBar.filters.text;
>-        this._propertiesTextEditor.removeNonMatchingProperties(filterText);
>-        this._variablesTextEditor.removeNonMatchingProperties(filterText);
>+        if (this._delegate.computedStyleDetailsPanelShowProperty)
>+            this._delegate.computedStyleDetailsPanelShowProperty(property);
>     }
> 
>     focusFirstSection()
>@@ -142,24 +122,28 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
>         this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
>         computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
> 
>-        this._propertiesTextEditor = new WI.CSSStyleDeclarationTextEditor(this);
>-        this._propertiesTextEditor.propertyVisibilityMode = WI.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideVariables;
>+        this._propertiesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
>+        this._propertiesTextEditor.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
>         this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
>         this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
>-        this._propertiesTextEditor.sortProperties = true;
>+        this._propertiesTextEditor.hideFilterNonMatchingProperties = true;
>+        this._propertiesTextEditor.sortPropertiesByName = true;
>+        this._propertiesTextEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
> 
>         let propertiesRow = new WI.DetailsSectionRow;
>         let propertiesGroup = new WI.DetailsSectionGroup([propertiesRow]);
>-        let propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
>-        propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
>+        this._propertiesSection = new WI.DetailsSection("computed-style-properties", WI.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
>+        this._propertiesSection.addEventListener(WI.DetailsSection.Event.CollapsedStateChanged, this._handlePropertiesSectionCollapsedStateChanged, this);
> 
>         this.addSubview(this._propertiesTextEditor);
> 
>         propertiesRow.element.appendChild(this._propertiesTextEditor.element);
> 
>-        this._variablesTextEditor = new WI.CSSStyleDeclarationTextEditor(this);
>-        this._variablesTextEditor.propertyVisibilityMode = WI.CSSStyleDeclarationTextEditor.PropertyVisibilityMode.HideNonVariables;
>-        this._variablesTextEditor.sortProperties = true;
>+        this._variablesTextEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
>+        this._variablesTextEditor.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables;
>+        this._variablesTextEditor.hideFilterNonMatchingProperties = true;
>+        this._variablesTextEditor.sortPropertiesByName = true;
>+        this._variablesTextEditor.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
> 
>         let variablesRow = new WI.DetailsSectionRow;
>         let variablesGroup = new WI.DetailsSectionGroup([variablesRow]);
>@@ -170,17 +154,24 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
> 
>         variablesRow.element.appendChild(this._variablesTextEditor.element);
> 
>-        this.element.appendChild(propertiesSection.element);
>+        this.element.appendChild(this._propertiesSection.element);
>         this.element.appendChild(this._variablesSection.element);
> 
>         this._boxModelDiagramRow = new WI.BoxModelDetailsSectionRow;
> 
>         let boxModelGroup = new WI.DetailsSectionGroup([this._boxModelDiagramRow]);
>-        let boxModelSection = new WI.DetailsSection("style-box-model", WI.UIString("Box Model"), [boxModelGroup]);
>+        let boxModelSection = new WI.DetailsSection("computed-style-box-model", WI.UIString("Box Model"), [boxModelGroup]);
> 
>         this.element.appendChild(boxModelSection.element);
>     }
> 
>+    filterDidChange(filterBar)
>+    {
>+        super.filterDidChange(filterBar);
>+
>+        this.applyFilter(filterBar.filters.text);
>+    }
>+
>     // Private
> 
>     _computedStyleShowAllCheckboxValueChanged(event)
>@@ -188,19 +179,30 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
>         let checked = this._computedStyleShowAllCheckbox.checked;
>         this._computedStyleShowAllSetting.value = checked;
>         this._propertiesTextEditor.showsImplicitProperties = checked;
>-        this._propertiesTextEditor.updateLayout();
>     }
> 
>     _handlePropertiesSectionCollapsedStateChanged(event)
>     {
>         if (event && event.data && !event.data.collapsed)
>-            this._propertiesTextEditor.refresh();
>+            this._propertiesTextEditor.needsLayout();
>     }
> 
>     _handleVariablesSectionCollapsedStateChanged(event)
>     {
>         if (event && event.data && !event.data.collapsed)
>-            this._variablesTextEditor.refresh();
>+            this._variablesTextEditor.needsLayout();
>+    }
>+
>+    _handleEditorFilterApplied(event)
>+    {
>+        let section = null;
>+        if (event.target === this._propertiesTextEditor)
>+            section = this._propertiesSection;
>+        else if (event.target === this._variablesTextEditor)
>+            section = this._variablesSection;
>+
>+        if (section)
>+            section.element.classList.toggle("hidden", !event.data.matches);
>     }
> };
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>index 435b350809f45db591e7d719822c88882373fada..24bf99abf6ac947f2608bbff6c47ea068bedf351 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>@@ -107,10 +107,6 @@ body[dir=rtl] .details-section > .header > .options {
>     border-bottom: 1px solid hsl(0, 0%, 87%);
> }
> 
>-.details-section.computed-style-properties:not(.collapsed) > .header {
>-    background-color: hsl(0, 0%, 100%);
>-}
>-
> .details-section > .header::before {
>     display: block;
>     width: 21px;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
>index 40987bb87778bbcc97eb9b280025d1bd345b7188..9708ec5b87dd0a41252e6c8b319ae485052d2825 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
>@@ -165,8 +165,6 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten
>             this.contentView.element.appendChild(this._forcedPseudoClassContainer);
>         }
> 
>-        this._panel.addEventListener(WI.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
>-
>         this._showPanel(this._panel);
> 
>         let optionsContainer = this.element.createChild("div", "options-container");
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>index f8f960e2d7a4266adcbf0299ca15e1c885f857c4..6bebb856b4ce3a14b7cab5f780f968140f7e86ed 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -26,6 +26,10 @@
> .spreadsheet-style-declaration-editor {
>     position: relative;
>     clear: both;
>+    font-family: Menlo, monospace;
>+    font-size: 11px;
>+    color: hsl(0, 0%, 70%);
>+    -webkit-user-select: text;
> }
> 
> .spreadsheet-style-declaration-editor .property {
>@@ -116,7 +120,7 @@
>     -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
> }
> 
>-.spreadsheet-style-declaration-editor .property.not-inherited .content > * {
>+.spreadsheet-style-declaration-editor .property:matches(.implicit, .not-inherited) .content > * {
>     opacity: 0.5;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>index bc6dbb5426ce46b8c6f9e4694b9927d4435a7701..070bd6ca69db39778383ea35a762ea15d6b5467c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>@@ -35,8 +35,14 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         this.style = style;
>         this._propertyViews = [];
> 
>-        this._inlineSwatchActive = false;
>         this._focused = false;
>+        this._inlineSwatchActive = false;
>+
>+        this._showsImplicitProperties = false;
>+        this._alwaysShowPropertyNames = new Set;
>+        this._propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.ShowAll;
>+        this._hideFilterNonMatchingProperties = false;
>+        this._sortPropertiesByName = false;
> 
>         this._propertyPendingStartEditing = null;
>         this._pendingAddBlankPropertyIndexOffset = NaN;
>@@ -47,7 +53,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>     initialLayout()
>     {
>-        if (!this.style.editable)
>+        if (!this._style || !this._style.editable)
>             return;
> 
>         this.element.addEventListener("focus", () => { this.focused = true; }, true);
>@@ -71,7 +77,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>         this.element.removeChildren();
> 
>-        let properties = this._propertiesToRender;
>+        let properties = this.propertiesToRender;
>         this.element.classList.toggle("no-properties", !properties.length);
> 
>         // FIXME: Only re-layout properties that have been modified and preserve focus whenever possible.
>@@ -154,6 +160,78 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         this._updateStyleLock();
>     }
> 
>+    set showsImplicitProperties(value)
>+    {
>+        if (value === this._showsImplicitProperties)
>+            return;
>+
>+        this._showsImplicitProperties = value;
>+
>+        this.needsLayout();
>+    }
>+
>+    set alwaysShowPropertyNames(propertyNames)
>+    {
>+        this._alwaysShowPropertyNames = new Set(propertyNames);
>+
>+        this.needsLayout();
>+    }
>+
>+    set propertyVisibilityMode(propertyVisibilityMode)
>+    {
>+        if (this._propertyVisibilityMode === propertyVisibilityMode)
>+            return;
>+
>+        this._propertyVisibilityMode = propertyVisibilityMode;
>+
>+        this.needsLayout();
>+    }
>+
>+    set hideFilterNonMatchingProperties(value)
>+    {
>+        if (value === this._hideFilterNonMatchingProperties)
>+            return;
>+
>+        this._hideFilterNonMatchingProperties = value;
>+
>+        this.needsLayout();
>+    }
>+
>+    set sortPropertiesByName(value)
>+    {
>+        if (value === this._sortPropertiesByName)
>+            return;
>+
>+        this._sortPropertiesByName = value;
>+        this.needsLayout();
>+    }
>+
>+    get propertiesToRender()
>+    {
>+        let properties = [];
>+        if (!this._style)
>+            return properties;
>+
>+        if (this._style._styleSheetTextRange)
>+            properties = this._style.allVisibleProperties;
>+        else
>+            properties = this._style.allProperties;
>+
>+        if (this._sortPropertiesByName)
>+            properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
>+
>+        return properties.filter((property) => {
>+            if (!property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables)
>+                return false;
>+
>+            if (property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables)
>+                return false;
>+
>+            return !property.implicit || this._showsImplicitProperties || this._alwaysShowPropertyNames.has(property.canonicalName);
>+        });
>+    }
>+
>+
>     startEditingFirstProperty()
>     {
>         let firstEditableProperty = this._editablePropertyAfter(-1);
>@@ -201,7 +279,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>             return false;
>         };
> 
>-        for (let cssProperty of this.style.properties) {
>+        for (let cssProperty of this._style.properties) {
>             if (propertiesMatch(cssProperty)) {
>                 let propertyView = cssProperty.__propertyView;
>                 if (propertyView) {
>@@ -230,6 +308,29 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         this.needsLayout();
>     }
> 
>+    applyFilter(filterText)
>+    {
>+        this._filterText = filterText;
>+
>+        if (!this.didInitialLayout)
>+            return;
>+
>+        let matches = false;
>+        for (let propertyView of this._propertyViews) {
>+            if (propertyView.applyFilter(this._filterText)) {
>+                matches = true;
>+
>+                if (this._hideFilterNonMatchingProperties)
>+                    this.element.append(propertyView.element);
>+            } else if (this._hideFilterNonMatchingProperties)
>+                propertyView.element.remove();
>+        }
>+
>+        this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, {matches});
>+    }
>+
>+    // SpreadsheetStyleProperty delegate
>+
>     spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
>     {
>         this._updatePropertiesStatus();
>@@ -277,8 +378,6 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         }
>     }
> 
>-    // SpreadsheetStyleProperty delegate
>-
>     spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
>     {
>         if (isNaN(index))
>@@ -296,6 +395,12 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         this._focused = false;
>     }
> 
>+    spreadsheetStylePropertyShowProperty(propertyView, property)
>+    {
>+        if (this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty)
>+            this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty(this, property);
>+    }
>+
>     stylePropertyInlineSwatchActivated()
>     {
>         this.inlineSwatchActive = true;
>@@ -306,32 +411,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         this.inlineSwatchActive = false;
>     }
> 
>-    applyFilter(filterText)
>-    {
>-        this._filterText = filterText;
>-
>-        if (!this.didInitialLayout)
>-            return;
>-
>-        let matches = false;
>-        for (let propertyView of this._propertyViews) {
>-            if (propertyView.applyFilter(this._filterText))
>-                matches = true;
>-        }
>-
>-        this.dispatchEventToListeners(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, {matches});
>-    }
>-
>     // Private
> 
>-    get _propertiesToRender()
>-    {
>-        if (this._style._styleSheetTextRange)
>-            return this._style.allVisibleProperties;
>-
>-        return this._style.allProperties;
>-    }
>-
>     _editablePropertyAfter(propertyIndex)
>     {
>         for (let index = propertyIndex + 1; index < this._propertyViews.length; index++) {
>@@ -370,7 +451,10 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>     _updateStyleLock()
>     {
>-        this.style.locked = this._focused || this._inlineSwatchActive;
>+        if (!this._style)
>+            return;
>+
>+        this._style.locked = this._focused || this._inlineSwatchActive;
>     }
> };
> 
>@@ -379,3 +463,9 @@ WI.SpreadsheetCSSStyleDeclarationEditor.Event = {
> };
> 
> WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";
>+
>+WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode = {
>+    ShowAll: Symbol("variable-visibility-show-all"),
>+    HideVariables: Symbol("variable-visibility-hide-variables"),
>+    HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
>+};
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>index 777fe8d4372c7da259cb621367cc1e631e529f1e..b1c59c25d7340bab7ddc67946a643879c916f779 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>@@ -27,13 +27,11 @@
>     margin: 0;
>     padding: 0 0 var(--css-declaration-vertical-padding);
>     font-family: Menlo, monospace;
>+    font-size: 11px;
>     color: hsl(0, 0%, 70%);
>     background: white;
>     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
>     -webkit-user-select: text;
>-
>-    --css-declaration-vertical-padding: 4px;
>-    --css-declaration-horizontal-padding: 6px;
> }
> 
> .spreadsheet-css-declaration :matches(.header, .header-media) {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>index 8aa77a6347a6bd24dd1baa726961126977cc7ee3..5d94c28756d48e070352320e66e7c5258fd29b30 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>@@ -23,85 +23,6 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-.style-spreadsheet .style-rule {
>-    font-family: Menlo, monospace;
>-    -webkit-user-select: text;
>-    padding: 4px 6px;
>-    margin: 0;
>-
>-    color: hsl(0, 0%, 70%);
>-    background: white;
>-    border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
>-}
>-
>-.style-spreadsheet .selector-line {
>-    float: left;
>-}
>-
>-.style-spreadsheet .selector {
>-    color: hsl(0, 0%, 50%);
>-    word-wrap: break-word;
>-}
>-
>-.style-spreadsheet :matches(.selector .matched, .selector:focus) {
>-    color: black;
>-}
>-
>-.style-spreadsheet .name {
>-    color: var(--syntax-highlight-boolean-color);
>-}
>-
>-.style-spreadsheet .value {
>-    color: black;
>-}
>-
>-.style-spreadsheet :matches(.selector, .name, .value) {
>-    -webkit-user-modify: read-write-plaintext-only;
>-}
>-
>-.style-spreadsheet :matches(.selector, .name, .value):focus {
>-    outline: 1px solid white;
>-    box-shadow: 0 1px 2px 1px hsla(0, 0%, 0%, 0.6);
>-}
>-
>-.style-spreadsheet .selector-inline {
>-    -webkit-user-modify: read-only;
>-    color: hsl(0, 0%, 50%);
>-    font: 12px sans-serif;
>-}
>-
>-.style-spreadsheet .property {
>-    padding-left: 16px;
>-}
>-
>-.style-spreadsheet .property-disabled,
>-.style-spreadsheet .property-disabled * {
>-    color: hsl(119, 100%, 22%);
>-}
>-
>-.style-spreadsheet .property-disabled :matches(.name, .value) {
>-    -webkit-user-modify: read-only;
>-}
>-
>-.style-spreadsheet .styles-source {
>-    float: right;
>-    font: 11px sans-serif;
>-    max-width: 100%;
>-    text-overflow: ellipsis;
>-    white-space: nowrap;
>-    overflow: hidden;
>-
>-    margin-top: -1px;
>-}
>-
>-.style-spreadsheet :matches(a, .node-link) {
>-    color: hsl(0, 0%, 50%);
>-}
>-
>-.style-spreadsheet :matches(a, .node-link):hover {
>-    color: hsl(0, 0%, 33%);
>-}
>-
> .spreadsheet-style-panel .section-header {
>     margin: 0;
>     padding: 4px 6px;
>@@ -118,26 +39,3 @@
> .spreadsheet-style-panel .section-header .node-link:hover {
>     color: black;
> }
>-
>-.style-spreadsheet .declarations {
>-    clear: left;
>-    position: relative;
>-}
>-
>-.style-spreadsheet input[type="checkbox"] {
>-    visibility: hidden;
>-
>-    position: absolute;
>-    left: 0;
>-
>-    height: 11px;
>-    margin: 0;
>-}
>-
>-.style-spreadsheet input[type="checkbox"]:not(:checked) {
>-    visibility: visible;
>-}
>-
>-.style-spreadsheet .declarations:hover input[type="checkbox"] {
>-    visibility: visible;
>-}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>index 74f15e125b44df4a25df775cfa1116547b55081e..307cbca9f969f08e4f1956c42b06d012963f5356 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>@@ -147,9 +147,12 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>     applyFilter(filterText)
>     {
>         let matchesName = this._nameElement.textContent.includes(filterText);
>+        this._nameElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesName);
>+
>         let matchesValue = this._valueElement.textContent.includes(filterText);
>+        this._valueElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesValue);
>+
>         let matches = matchesName || matchesValue;
>-        this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, matches);
>         this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
>         return matches;
>     }
>@@ -233,6 +236,33 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>         } else
>             this._contentElement.append(" */");
> 
>+        if (!this._property.implicit && this._property.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed) {
>+            let effectiveProperty = this._property.ownerStyle.nodeStyles.effectivePropertyForName(this._property.name);
>+            if (effectiveProperty && !effectiveProperty.styleSheetTextRange)
>+                effectiveProperty = effectiveProperty.relatedShorthandProperty;
>+
>+            let ownerRule = effectiveProperty ? effectiveProperty.ownerStyle.ownerRule : null;
>+
>+            let arrowElement = this._contentElement.appendChild(WI.createGoToArrowButton());
>+            arrowElement.addEventListener("click", (event) => {
>+                if (!effectiveProperty || !ownerRule || !event.altKey) {
>+                    if (this._delegate.spreadsheetStylePropertyShowProperty)
>+                        this._delegate.spreadsheetStylePropertyShowProperty(this, this._property);
>+                    return;
>+                }
>+
>+                let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
>+                let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
>+                WI.showSourceCodeLocation(sourceCode.createSourceCodeLocation(startLine, startColumn), {
>+                    ignoreNetworkTab: true,
>+                    ignoreSearchTab: true,
>+                });
>+            });
>+
>+            if (effectiveProperty && ownerRule)
>+                arrowElement.title = WI.UIString("Option-click to show source");
>+        }
>+
>         this.updateStatus();
>     }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index 288372c97838c3c22942cb0c94af84c6a50cdf2a..2a7621654b4858e0d80f413b530a08cd5d379ec5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -123,6 +123,9 @@
>     --navigation-bar-height: 29px;
> 
>     --slider-height: 11px;
>+
>+    --css-declaration-vertical-padding: 4px;
>+    --css-declaration-horizontal-padding: 6px;
> }
> 
> body.window-inactive {

Actions: View | Formatted Diff | Diff

Attachments on bug 183627: 335796 | 348275 | 349916 | 350282