Web Inspector: Styles: enable selection of multiple properties by default
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Nov 2018 01:11:10 +0000 (01:11 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Nov 2018 01:11:10 +0000 (01:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=192109
<rdar://problem/46323565>

Reviewed by Devin Rousso.

* UserInterface/Base/Setting.js:
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
Remove the checkbox.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property):
(.spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)):
(.spreadsheet-style-declaration-editor .property.selected):
(.spreadsheet-style-declaration-editor .property.selected:focus):
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property): Deleted.
(.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)): Deleted.
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected): Deleted.
(.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected:focus): Deleted.
Remove `.multiple-properties-selection` class.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleMouseDown):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField):
(WI.SpreadsheetTextField.prototype._handleFocus): Deleted.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

index 184df91..1fd7afa 100644 (file)
@@ -1,3 +1,38 @@
+2018-11-28  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: enable selection of multiple properties by default
+        https://bugs.webkit.org/show_bug.cgi?id=192109
+        <rdar://problem/46323565>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+        Remove the checkbox.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property):
+        (.spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)):
+        (.spreadsheet-style-declaration-editor .property.selected):
+        (.spreadsheet-style-declaration-editor .property.selected:focus):
+        (.multiple-properties-selection .spreadsheet-style-declaration-editor .property): Deleted.
+        (.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)): Deleted.
+        (.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected): Deleted.
+        (.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected:focus): Deleted.
+        Remove `.multiple-properties-selection` class.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection):
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._handleMouseDown):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField):
+        (WI.SpreadsheetTextField.prototype._handleFocus): Deleted.
+
 2018-11-28  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Audit: empty results folder is shown after clearing filters
index 96bcea1..86814ee 100644 (file)
@@ -129,7 +129,6 @@ WI.settings = {
     zoomFactor: new WI.Setting("zoom-factor", 1),
 
     // Experimental
-    experimentalEnableMultiplePropertiesSelection: new WI.Setting("experimental-enable-multiple-properties-selection", false),
     experimentalEnableComputedStyleCascades: new WI.Setting("experimental-enable-computed-style-cascades", false),
     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
     experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),
index b9c8e9e..40a36e8 100644 (file)
@@ -244,7 +244,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
 
         if (window.CSSAgent) {
             let group = experimentalSettingsView.addGroup(WI.UIString("Styles Sidebar:"));
-            group.addSetting(WI.settings.experimentalEnableMultiplePropertiesSelection, WI.UIString("Enable Selection of Multiple Properties"));
             group.addSetting(WI.settings.experimentalEnableComputedStyleCascades, WI.UIString("Enable Computed Style Cascades"));
             experimentalSettingsView.addSeparator();
         }
@@ -286,7 +285,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
             });
         }
 
-        listenForChange(WI.settings.experimentalEnableMultiplePropertiesSelection);
         listenForChange(WI.settings.experimentalEnableComputedStyleCascades);
         listenForChange(WI.settings.experimentalEnableLayersTab);
         listenForChange(WI.settings.experimentalEnableAuditTab);
index c02cfc9..2f21573 100644 (file)
@@ -38,9 +38,6 @@
 .spreadsheet-style-declaration-editor .property {
     padding-right: var(--css-declaration-horizontal-padding);
     padding-left: calc(var(--css-declaration-horizontal-padding) + 17px);
-}
-
-.multiple-properties-selection .spreadsheet-style-declaration-editor .property {
     border-left: 1px solid transparent;
     outline: none;
 }
@@ -53,7 +50,7 @@
     color: var(--text-color);
 }
 
-.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
+.spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
     outline: none;
 }
 
     padding-bottom: 0 !important;
 }
 
-.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
-    outline: none;
-}
-
 .spreadsheet-style-declaration-editor .value.editing {
     display: inline-block;
     position: relative;
     -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
 }
 
-.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected {
+.spreadsheet-style-declaration-editor .property.selected {
     background-color: var(--background-color-selected);
 }
 
-.multiple-properties-selection .spreadsheet-style-declaration-editor .property.selected:focus {
+.spreadsheet-style-declaration-editor .property.selected:focus {
     border-left-color: var(--border-color-selected);
 }
 
index 98b3d19..f3be41d 100644 (file)
@@ -68,8 +68,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             this.focused = false;
         }, true);
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            this.element.addEventListener("keydown", this._handleKeyDown.bind(this));
+        this.element.addEventListener("keydown", this._handleKeyDown.bind(this));
     }
 
     layout()
index c4b35f5..18c3111 100644 (file)
@@ -32,14 +32,8 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         let element = document.createElement("section");
         element.classList.add("spreadsheet-css-declaration");
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            element.classList.add("multiple-properties-selection");
-
         super(element);
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            element.classList.add("multiple-properties-selection");
-
         this._delegate = delegate || null;
         this._style = style;
         this._propertiesEditor = null;
@@ -390,9 +384,6 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
     {
         this._wasEditing = this._propertiesEditor.editing || document.activeElement === this._selectorElement;
 
-        if (!WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            return;
-
         let propertyElement = event.target.closest(".property");
         if (!propertyElement)
             return;
index c086f32..351e86e 100644 (file)
@@ -55,7 +55,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
         property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value && this._isEditable()) {
+        if (this._isEditable()) {
             this._element.tabIndex = -1;
 
             this._element.addEventListener("blur", (event) => {
@@ -472,13 +472,10 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         tokenElement.append(swatch.element, innerElement);
 
         // Prevent the value from editing when clicking on the swatch.
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value) {
-            swatch.element.addEventListener("click", (event) => {
-                if (this._swatchActive)
-                    event.stop();
-            });
-        } else
-            swatch.element.addEventListener("mousedown", (event) => { event.stop(); });
+        swatch.element.addEventListener("click", (event) => {
+            if (this._swatchActive)
+                event.stop();
+        });
 
         return tokenElement;
     }
index ea432cd..02b74bd 100644 (file)
@@ -40,12 +40,8 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
 
         this._element.classList.add("spreadsheet-text-field");
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value) {
-            this._element.addEventListener("mousedown", this._handleMouseDown.bind(this), true);
-            this._element.addEventListener("click", this._handleClick.bind(this));
-        } else
-            this._element.addEventListener("focus", this._handleFocus.bind(this));
-
+        this._element.addEventListener("mousedown", this._handleMouseDown.bind(this), true);
+        this._element.addEventListener("click", this._handleClick.bind(this));
         this._element.addEventListener("blur", this._handleBlur.bind(this));
         this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
         this._element.addEventListener("input", this._handleInput.bind(this));
@@ -213,11 +209,6 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
             event.stopPropagation();
     }
 
-    _handleFocus(event)
-    {
-        this.startEditing();
-    }
-
     _handleBlur(event)
     {
         if (!this._editing)