Web Inspector: Styles Redesign: rework Computed panel to use Spreadsheet classes
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Sep 2018 02:02:14 +0000 (02:02 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Sep 2018 02:02:14 +0000 (02:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=183627

Reviewed by Joseph Pecoraro.

* 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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236297 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
Source/WebInspectorUI/UserInterface/Views/Variables.css

index bc867be..bc5c8a7 100644 (file)
@@ -1,3 +1,96 @@
+2018-09-20  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 Joseph Pecoraro.
+
+        * 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-19  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: move DarkMode.css rules into appropriate CSS files
 2018-09-19  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: move DarkMode.css rules into appropriate CSS files
index 50edf06..43797e8 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
  * 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;
 }
 
     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;
     display: none;
     position: absolute;
     width: 12px;
     vertical-align: text-bottom;
 }
 
     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;
 }
 
     display: initial;
 }
 
-.details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
-    background-color: white;
-}
-
 @media (prefers-dark-interface) {
     .computed-style-properties.details-section {
         background-color: var(--background-color);
 @media (prefers-dark-interface) {
     .computed-style-properties.details-section {
         background-color: var(--background-color);
index b24504d..38b8cd8 100644 (file)
@@ -31,48 +31,11 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
 
         this._computedStyleShowAllSetting = new WI.Setting("computed-style-show-all", false);
 
 
         this._computedStyleShowAllSetting = new WI.Setting("computed-style-show-all", false);
 
-        this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
+        this._filterText = null;
     }
 
     // Public
 
     }
 
     // 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
     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._propertiesTextEditor.style = this.nodeStyles.computedStyle;
+        this._propertiesSection.element.classList.toggle("hidden", !this._propertiesTextEditor.propertiesToRender.length);
+
         this._variablesTextEditor.style = this.nodeStyles.computedStyle;
         this._variablesTextEditor.style = this.nodeStyles.computedStyle;
+        this._variablesSection.element.classList.toggle("hidden", !this._variablesTextEditor.propertiesToRender.length);
+
         this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
 
         this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
 
+        if (this._filterText)
+            this.applyFilter(this._filterText);
+
         super.refresh();
         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()
     }
 
     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._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.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 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.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]);
 
         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);
 
 
         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]);
         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);
     }
 
 
         this.element.appendChild(boxModelSection.element);
     }
 
+    filterDidChange(filterBar)
+    {
+        super.filterDidChange(filterBar);
+
+        this.applyFilter(filterBar.filters.text);
+    }
+
     // Private
 
     _computedStyleShowAllCheckboxValueChanged(event)
     // 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;
         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)
     }
 
     _handlePropertiesSectionCollapsedStateChanged(event)
     {
         if (event && event.data && !event.data.collapsed)
-            this._propertiesTextEditor.refresh();
+            this._propertiesTextEditor.needsLayout();
     }
 
     _handleVariablesSectionCollapsedStateChanged(event)
     {
         if (event && event.data && !event.data.collapsed)
     }
 
     _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);
     }
 };
 
     }
 };
 
index 3c9883e..c62ddc4 100644 (file)
@@ -107,10 +107,6 @@ body[dir=rtl] .details-section > .header > .options {
     border-bottom: 1px solid hsl(0, 0%, 87%);
 }
 
     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;
 .details-section > .header::before {
     display: block;
     width: 21px;
index 40987bb..9708ec5 100644 (file)
@@ -165,8 +165,6 @@ WI.GeneralStyleDetailsSidebarPanel = class GeneralStyleDetailsSidebarPanel exten
             this.contentView.element.appendChild(this._forcedPseudoClassContainer);
         }
 
             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");
         this._showPanel(this._panel);
 
         let optionsContainer = this.element.createChild("div", "options-container");
index 4b7f7a0..2a42f24 100644 (file)
 .spreadsheet-style-declaration-editor {
     position: relative;
     clear: both;
 .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 {
 }
 
 .spreadsheet-style-declaration-editor .property {
     -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
 }
 
     -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;
 }
 
     opacity: 0.5;
 }
 
index bc6dbb5..e8227dc 100644 (file)
@@ -35,8 +35,14 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this.style = style;
         this._propertyViews = [];
 
         this.style = style;
         this._propertyViews = [];
 
-        this._inlineSwatchActive = false;
         this._focused = 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;
 
         this._propertyPendingStartEditing = null;
         this._pendingAddBlankPropertyIndexOffset = NaN;
@@ -47,7 +53,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
     initialLayout()
     {
 
     initialLayout()
     {
-        if (!this.style.editable)
+        if (!this._style || !this._style.editable)
             return;
 
         this.element.addEventListener("focus", () => { this.focused = true; }, true);
             return;
 
         this.element.addEventListener("focus", () => { this.focused = true; }, true);
@@ -71,7 +77,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
         this.element.removeChildren();
 
 
         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.
         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,77 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this._updateStyleLock();
     }
 
         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);
     startEditingFirstProperty()
     {
         let firstEditableProperty = this._editablePropertyAfter(-1);
@@ -201,7 +278,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             return false;
         };
 
             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) {
             if (propertiesMatch(cssProperty)) {
                 let propertyView = cssProperty.__propertyView;
                 if (propertyView) {
@@ -230,6 +307,29 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this.needsLayout();
     }
 
         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();
     spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
     {
         this._updatePropertiesStatus();
@@ -277,8 +377,6 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         }
     }
 
         }
     }
 
-    // SpreadsheetStyleProperty delegate
-
     spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
     {
         if (isNaN(index))
     spreadsheetStylePropertyAddBlankPropertySoon(propertyView, {index})
     {
         if (isNaN(index))
@@ -296,6 +394,12 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this._focused = false;
     }
 
         this._focused = false;
     }
 
+    spreadsheetStylePropertyShowProperty(propertyView, property)
+    {
+        if (this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty)
+            this._delegate.spreadsheetCSSStyleDeclarationEditorShowProperty(this, property);
+    }
+
     stylePropertyInlineSwatchActivated()
     {
         this.inlineSwatchActive = true;
     stylePropertyInlineSwatchActivated()
     {
         this.inlineSwatchActive = true;
@@ -306,32 +410,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         this.inlineSwatchActive = false;
     }
 
         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
 
     // 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++) {
     _editablePropertyAfter(propertyIndex)
     {
         for (let index = propertyIndex + 1; index < this._propertyViews.length; index++) {
@@ -370,7 +450,10 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
     _updateStyleLock()
     {
 
     _updateStyleLock()
     {
-        this.style.locked = this._focused || this._inlineSwatchActive;
+        if (!this._style)
+            return;
+
+        this._style.locked = this._focused || this._inlineSwatchActive;
     }
 };
 
     }
 };
 
@@ -379,3 +462,9 @@ WI.SpreadsheetCSSStyleDeclarationEditor.Event = {
 };
 
 WI.SpreadsheetCSSStyleDeclarationEditor.StyleClassName = "spreadsheet-style-declaration-editor";
 };
 
 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"),
+};
index ab21e9a..d54e71a 100644 (file)
     margin: 0;
     padding: 0 0 var(--css-declaration-vertical-padding);
     font-family: Menlo, monospace;
     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;
     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) {
 }
 
 .spreadsheet-css-declaration :matches(.header, .header-media) {
index 010738a..f686db4 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
  * 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;
 .spreadsheet-style-panel .section-header {
     margin: 0;
     padding: 4px 6px;
     color: black;
 }
 
     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;
-}
-
 @media (prefers-dark-interface) {
     .spreadsheet-style-panel .section-header {
         color: var(--text-color-secondary);
 @media (prefers-dark-interface) {
     .spreadsheet-style-panel .section-header {
         color: var(--text-color-secondary);
index 74f15e1..307cbca 100644 (file)
@@ -147,9 +147,12 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     applyFilter(filterText)
     {
         let matchesName = this._nameElement.textContent.includes(filterText);
     applyFilter(filterText)
     {
         let matchesName = this._nameElement.textContent.includes(filterText);
+        this._nameElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesName);
+
         let matchesValue = this._valueElement.textContent.includes(filterText);
         let matchesValue = this._valueElement.textContent.includes(filterText);
+        this._valueElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, !!matchesValue);
+
         let matches = matchesName || matchesValue;
         let matches = matchesName || matchesValue;
-        this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName, matches);
         this._contentElement.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName, !matches);
         return 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(" */");
 
         } 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();
     }
 
         this.updateStatus();
     }
 
index f865270..a774ac6 100644 (file)
     --navigation-bar-height: 29px;
 
     --slider-height: 11px;
     --navigation-bar-height: 29px;
 
     --slider-height: 11px;
+
+    --css-declaration-vertical-padding: 4px;
+    --css-declaration-horizontal-padding: 6px;
 }
 
 body.window-inactive {
 }
 
 body.window-inactive {