Web Inspector: Styles: start editing property name/value on mouseup instead of mousedown
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Oct 2018 00:29:42 +0000 (00:29 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Oct 2018 00:29:42 +0000 (00:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=190114
<rdar://problem/44891030>

Reviewed by Matt Baker.

This change only affects the experimental multiple properties selection.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)):
Without this code, the focus outline flickers on click (after mousedown but before mouseup event).

* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField):
(WI.SpreadsheetTextField.prototype._handleMouseUp):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

index e4618d5..e0574ad 100644 (file)
@@ -1,3 +1,23 @@
+2018-10-02  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: start editing property name/value on mouseup instead of mousedown
+        https://bugs.webkit.org/show_bug.cgi?id=190114
+        <rdar://problem/44891030>
+
+        Reviewed by Matt Baker.
+
+        This change only affects the experimental multiple properties selection.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.multiple-properties-selection .spreadsheet-style-declaration-editor :matches(.name, .value):not(.editing)):
+        Without this code, the focus outline flickers on click (after mousedown but before mouseup event).
+
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField):
+        (WI.SpreadsheetTextField.prototype._handleMouseUp):
+
 2018-10-02  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: prevent layer events from firing until the layer information is re-requested
index 24c5aaa..33e03a5 100644 (file)
     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;
index 7f4fc61..8b09853 100644 (file)
@@ -31,6 +31,10 @@ 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);
 
         this._delegate = delegate || null;
index fa0acdd..9c9a9f3 100644 (file)
@@ -40,7 +40,11 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
 
         this._element.classList.add("spreadsheet-text-field");
 
-        this._element.addEventListener("focus", this._handleFocus.bind(this));
+        if (WI.settings.experimentalEnableMultiplePropertiesSelection.value)
+            this._element.addEventListener("mouseup", this._handleMouseUp.bind(this));
+        else
+            this._element.addEventListener("focus", this._handleFocus.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));
@@ -197,6 +201,11 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
         }
     }
 
+    _handleMouseUp(event)
+    {
+        this.startEditing();
+    }
+
     _handleFocus(event)
     {
         this.startEditing();