Web Inspector: Styles: enable computed style cascades by default

https://bugs.webkit.org/show_bug.cgi?id=193983
<rdar://problem/47645821>

Reviewed by Matt Baker.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:
* UserInterface/Views/ComputedStyleDetailsPanel.css:
(.computed-style-properties):
(.computed-style-properties .property .go-to-arrow):
(.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):
(.details-section.computed-style-properties > .content):
(@media (prefers-color-scheme: dark)):
(.computed-with-traces .computed-style-properties): Deleted.
(.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)): Deleted.
(.computed-with-traces .details-section.computed-style-properties > .content): Deleted.
(.computed-with-traces .computed-style-properties .property .go-to-arrow): Deleted.
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WI.ComputedStyleDetailsPanel.prototype.refresh):
(WI.ComputedStyleDetailsPanel.prototype.initialLayout):
* UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:
(WI.ComputedStyleDetailsSidebarPanel):
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

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

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 1acf60b..df5bb59 100644 (file)
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,31 @@
+2019-01-29  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: enable computed style cascades by default
+        https://bugs.webkit.org/show_bug.cgi?id=193983
+        <rdar://problem/47645821>
+
+        Reviewed by Matt Baker.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (.computed-style-properties):
+        (.computed-style-properties .property .go-to-arrow):
+        (.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)):
+        (.details-section.computed-style-properties > .content):
+        (@media (prefers-color-scheme: dark)):
+        (.computed-with-traces .computed-style-properties): Deleted.
+        (.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content)): Deleted.
+        (.computed-with-traces .details-section.computed-style-properties > .content): Deleted.
+        (.computed-with-traces .computed-style-properties .property .go-to-arrow): Deleted.
+        * UserInterface/Views/ComputedStyleDetailsPanel.js:
+        (WI.ComputedStyleDetailsPanel.prototype.refresh):
+        (WI.ComputedStyleDetailsPanel.prototype.initialLayout):
+        * UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:
+        (WI.ComputedStyleDetailsSidebarPanel):
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+
 2019-01-28  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Remove unnecessary promise rejection handlers now that we use the global onunhandledrejection handler

diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index a84690d..f3c8baf 100644 (file)
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -372,7 +372,6 @@ localizedStrings["Elements"] = "Elements";
 localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
 localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";
 localizedStrings["Enable Changes Panel"] = "Enable Changes Panel";
-localizedStrings["Enable Computed Style Cascades"] = "Enable Computed Style Cascades";
 localizedStrings["Enable Event Listener"] = "Enable Event Listener";
 localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";
 localizedStrings["Enable New Tab Bar"] = "Enable New Tab Bar";

diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
index 1173fc8..a85b169 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Base/Setting.js
+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
@@ -152,7 +152,6 @@ WI.settings = {
     zoomFactor: new WI.Setting("zoom-factor", 1),
 
     // Experimental
-    experimentalEnableComputedStyleCascades: new WI.Setting("experimental-enable-computed-style-cascades", false),
     experimentalEnableChangesPanel: new WI.Setting("experimental-enable-changes-panel", false),
     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
     experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),

diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
index 48b7e4a..8deec21 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
@@ -27,11 +27,15 @@
     background-color: var(--background-color);
 }
 
+.computed-style-properties {
+    --disclosure-button-size: 15px;
+}
+
 .computed-style-properties .property .go-to-arrow {
     display: none;
     position: absolute;
-    width: 12px;
-    height: 12px;
+    width: var(--disclosure-button-size);
+    height: var(--disclosure-button-size);
     vertical-align: text-bottom;
 }
 
@@ -39,25 +43,16 @@
     display: initial;
 }
 
-.computed-with-traces .computed-style-properties {
-    --disclosure-button-size: 15px;
-}
-
-.computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
+.details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
     background-color: hsl(0, 0%, 97%);
 }
 
-.computed-with-traces .details-section.computed-style-properties > .content {
+.details-section.computed-style-properties > .content {
     font: 12px -webkit-system-font, sans-serif;
 }
 
-.computed-with-traces .computed-style-properties .property .go-to-arrow {
-    width: var(--disclosure-button-size);
-    height: var(--disclosure-button-size);
-}
-
 @media (prefers-color-scheme: dark) {
-    .computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
+    .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
         background-color: var(--background-color);
     }
 }

diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
index fe0c520..1f31165 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
@@ -45,9 +45,7 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
             return;
         }
 
-        if (WI.settings.experimentalEnableComputedStyleCascades.value)
-            this._computedStyleSection.styleTraces = this._computePropertyTraces(this.nodeStyles.uniqueOrderedStyles);
-
+        this._computedStyleSection.styleTraces = this._computePropertyTraces(this.nodeStyles.uniqueOrderedStyles);
         this._computedStyleSection.style = this.nodeStyles.computedStyle;
 
         this._variablesTextEditor.style = this.nodeStyles.computedStyle;
@@ -103,17 +101,9 @@ WI.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WI.StyleD
         this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
         computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
 
-        if (WI.settings.experimentalEnableComputedStyleCascades.value) {
-            this._computedStyleSection = new WI.ComputedStyleSection(this);
-            this._computedStyleSection.propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables;
-            this._computedStyleSection.addEventListener(WI.ComputedStyleSection.Event.FilterApplied, this._handleEditorFilterApplied, this);
-        } else {
-            this._computedStyleSection = new WI.SpreadsheetCSSStyleDeclarationEditor(this);
-            this._computedStyleSection.propertyVisibilityMode = WI.SpreadsheetCSSStyleDeclarationEditor.PropertyVisibilityMode.HideVariables;
-            this._computedStyleSection.sortPropertiesByName = true;
-            this._computedStyleSection.addEventListener(WI.SpreadsheetCSSStyleDeclarationEditor.Event.FilterApplied, this._handleEditorFilterApplied, this);
-        }
-
+        this._computedStyleSection = new WI.ComputedStyleSection(this);
+        this._computedStyleSection.propertyVisibilityMode = WI.ComputedStyleSection.PropertyVisibilityMode.HideVariables;
+        this._computedStyleSection.addEventListener(WI.ComputedStyleSection.Event.FilterApplied, this._handleEditorFilterApplied, this);
         this._computedStyleSection.showsImplicitProperties = this._computedStyleShowAllSetting.value;
         this._computedStyleSection.alwaysShowPropertyNames = ["display", "width", "height"];
         this._computedStyleSection.hideFilterNonMatchingProperties = true;

diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js
index 9010ceb..f53a169 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js
@@ -28,8 +28,5 @@ WI.ComputedStyleDetailsSidebarPanel = class ComputedStyleDetailsSidebarPanel ext
     constructor()
     {
         super("style-computed", WI.UIString("Computed"), WI.ComputedStyleDetailsPanel);
-
-        if (WI.settings.experimentalEnableComputedStyleCascades.value)
-            this.element.classList.add("computed-with-traces");
     }
 };

diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
index cd23b4e..b440d77 100644 (file)
--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
@@ -255,7 +255,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
 
         if (window.CSSAgent) {
             let group = experimentalSettingsView.addGroup(WI.UIString("Styles Sidebar:"));
-            group.addSetting(WI.settings.experimentalEnableComputedStyleCascades, WI.UIString("Enable Computed Style Cascades"));
             group.addSetting(WI.settings.experimentalEnableChangesPanel, WI.UIString("Enable Changes Panel"));
             experimentalSettingsView.addSeparator();
         }
@@ -290,7 +289,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
             });
         }
 
-        listenForChange(WI.settings.experimentalEnableComputedStyleCascades);
         listenForChange(WI.settings.experimentalEnableChangesPanel);
         listenForChange(WI.settings.experimentalEnableLayersTab);
         listenForChange(WI.settings.experimentalEnableNewTabBar);