Changeset 251883 in webkit

Timestamp:

Oct 31, 2019 3:00:22 PM (4 years ago)

Author:

Devin Rousso

Message:

Web Inspector: REGRESSION(r251038): Elements: Computed: variables are shown in the Properties section instead of in the Variables section
​https://bugs.webkit.org/show_bug.cgi?id=203668

Reviewed by Matt Baker.

• UserInterface/Views/ComputedStyleDetailsPanel.js:

(WI.ComputedStyleDetailsPanel.prototype.initialLayout):

• UserInterface/Views/ComputedStyleSection.js:

(WI.ComputedStyleSection):
(WI.ComputedStyleSection.prototype.set propertyVisibilityMode): Added.
(WI.ComputedStyleSection.prototype.get propertiesToRender):
Reintroduce the propertyVisibilityMode concept to WI.ComputedStyleSection so that the
Computed details panel can prevent CSS variables from being shown in the Properites section.

• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.get propertiesToRender):
Replace variable getter with isVariable to match r251038.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/ComputedStyleDetailsPanel.js (modified) (1 diff)
• UserInterface/Views/ComputedStyleSection.js (modified) (5 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-10-31  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: REGRESSION(r251038): Elements: Computed: variables are shown in the Properties section instead of in the Variables section
+        https://bugs.webkit.org/show_bug.cgi?id=203668
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.js:
+        (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
+        * UserInterface/Views/ComputedStyleSection.js:
+        (WI.ComputedStyleSection):
+        (WI.ComputedStyleSection.prototype.set propertyVisibilityMode): Added.
+        (WI.ComputedStyleSection.prototype.get propertiesToRender):
+        Reintroduce the `propertyVisibilityMode` concept to `WI.ComputedStyleSection` so that the
+        Computed details panel can prevent CSS variables from being shown in the Properites section.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.get propertiesToRender):
+        Replace `variable` getter with `isVariable` to match r251038.
+
 2019-10-31  Devin Rousso  <drousso@apple.com>
 

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

@@ -105 +105 @@
         this._computedStyleSection.addEventListener(WI.ComputedStyleSection.Event.FilterApplied, this._handleEditorFilterApplied, this);
         this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+        this._computedStyleSection.propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables;
         this._computedStyleSection.showsShorthandsInsteadOfLonghands = this._computedStylePreferShorthandsSetting.value;
         this._computedStyleSection.alwaysShowPropertyNames = ["display", "width", "height"];

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

@@ -41 +41 @@
         this._showsShorthandsInsteadOfLonghands = false;
         this._alwaysShowPropertyNames = new Set;
+        this._propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.ShowAll;
         this._hideFilterNonMatchingProperties = false;
         this._filterText = null;
@@ -105 +106 @@
     {
         this._alwaysShowPropertyNames = new Set(propertyNames);
+
+        this.needsLayout();
+    }
+
+    set propertyVisibilityMode(propertyVisibilityMode)
+    {
+        if (this._propertyVisibilityMode === propertyVisibilityMode)
+            return;
+
+        this._propertyVisibilityMode = propertyVisibilityMode;
 
         this.needsLayout();
@@ -132 +143 @@
         properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
 
+        let hideVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideVariables;
+        let hideNonVariables = this._propertyVisibilityMode === ComputedStyleSection.PropertyVisibilityMode.HideNonVariables;
+
         return properties.filter((property) => {
             if (this._alwaysShowPropertyNames.has(property.canonicalName))
@@ -143 +157 @@
                     return false;
             } else if (property.isShorthand)
+                return false;
+
+            if (property.isVariable && hideVariables)
+                return false;
+
+            if (!property.isVariable && hideNonVariables)
                 return false;
 
@@ -272 +292 @@
 
 WI.ComputedStyleSection.StyleClassName = "computed-style-section";
+
+WI.ComputedStyleSection.PropertyVisibilityMode = {
+    ShowAll: Symbol("variable-visibility-show-all"),
+    HideVariables: Symbol("variable-visibility-hide-variables"),
+    HideNonVariables: Symbol("variable-visibility-hide-non-variables"),
+};

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

@@ -234 +234 @@
             properties.sort((a, b) => a.name.extendedLocaleCompare(b.name));
 
+        let hideVariables = this._propertyVisibilityMode === SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
+        let hideNonVariables = this._propertyVisibilityMode === SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables;
+
         return properties.filter((property) => {
-            if (!property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideNonVariables)
+            if (!property.isVariable && hideNonVariables)
                 return false;
 
-            if (property.variable && this._propertyVisibilityMode === WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables)
+            if (property.isVariable && hideVariables)
                 return false;