Title: [236780] trunk/Source/WebInspectorUI
Revision
236780
Author
nvasil...@apple.com
Date
2018-10-02 17:29:42 -0700 (Tue, 02 Oct 2018)

Log Message

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):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (236779 => 236780)


--- trunk/Source/WebInspectorUI/ChangeLog	2018-10-03 00:28:21 UTC (rev 236779)
+++ trunk/Source/WebInspectorUI/ChangeLog	2018-10-03 00:29:42 UTC (rev 236780)
@@ -1,3 +1,23 @@
+2018-10-02  Nikita Vasilyev  <nvasil...@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  <drou...@apple.com>
 
         Web Inspector: prevent layer events from firing until the layer information is re-requested

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (236779 => 236780)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2018-10-03 00:28:21 UTC (rev 236779)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css	2018-10-03 00:29:42 UTC (rev 236780)
@@ -52,6 +52,10 @@
     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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (236779 => 236780)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js	2018-10-03 00:28:21 UTC (rev 236779)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js	2018-10-03 00:29:42 UTC (rev 236780)
@@ -31,6 +31,10 @@
 
         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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js (236779 => 236780)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js	2018-10-03 00:28:21 UTC (rev 236779)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js	2018-10-03 00:29:42 UTC (rev 236780)
@@ -40,7 +40,11 @@
 
         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 @@
         }
     }
 
+    _handleMouseUp(event)
+    {
+        this.startEditing();
+    }
+
     _handleFocus(event)
     {
         this.startEditing();
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to