Changeset 238649 in webkit

Timestamp:

Nov 28, 2018 5:11:10 PM (5 years ago)

Author:

Nikita Vasilyev

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/Setting.js (modified) (1 diff)
• UserInterface/Views/SettingsTabContentView.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (modified) (4 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (2 diffs)
• UserInterface/Views/SpreadsheetTextField.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -130 +130 @@
 
     // 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),

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

@@ -245 +245 @@
         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();
@@ -287 +286 @@
         }
 
-        listenForChange(WI.settings.experimentalEnableMultiplePropertiesSelection);
         listenForChange(WI.settings.experimentalEnableComputedStyleCascades);
         listenForChange(WI.settings.experimentalEnableLayersTab);

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

@@ -39 +39 @@
     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;
@@ -54 +51 @@
 }
 
-.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
+.spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
     outline: none;
 }
@@ -63 +60 @@
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;
-}
-
-.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing) {
-    outline: none;
 }
 
@@ -137 +130 @@
 }
 
-.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);
 }

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

@@ -69 +69 @@
         }, true);
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            this.element.addEventListener("keydown", this._handleKeyDown.bind(this));
+        this.element.addEventListener("keydown", this._handleKeyDown.bind(this));
     }
 

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

@@ -33 +33 @@
         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;
@@ -391 +385 @@
         this._wasEditing = this._propertiesEditor.editing || document.activeElement === this._selectorElement;
 
-        if (!WI.settings.experimentalEnableMultiplePropertiesSelection.value)
-            return;
-
         let propertyElement = event.target.closest(".property");
         if (!propertyElement)

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

@@ -56 +56 @@
         property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
 
-        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value && this._isEditable()) {
+        if (this._isEditable()) {
             this._element.tabIndex = -1;
 
@@ -473 +473 @@
 
         // 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;

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

@@ -41 +41 @@
         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));
@@ -214 +210 @@
     }
 
-    _handleFocus(event)
-    {
-        this.startEditing();
-    }
-
     _handleBlur(event)
     {