Changeset 241980 in webkit

Timestamp:

Feb 22, 2019 8:07:58 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Styles Redesign: clicking CSS property or selector should always select its text
​https://bugs.webkit.org/show_bug.cgi?id=180791
<rdar://problem/36038366>

Reviewed by Brian Burg.

• UserInterface/Views/SpreadsheetSelectorField.js:

(WI.SpreadsheetSelectorField):
(WI.SpreadsheetSelectorField.prototype.startEditing):
(WI.SpreadsheetSelectorField.prototype.stopEditing):
(WI.SpreadsheetSelectorField.prototype._handleMouseDown): Added.
(WI.SpreadsheetSelectorField.prototype._handleMouseUp): Added.
(WI.SpreadsheetSelectorField.prototype._handleFocus): Deleted.

• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:

(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):

• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:

(.spreadsheet-css-declaration .selector.editing:focus, .spreadsheet-css-declaration .selector > .matched): Added.
(.spreadsheet-css-declaration .selector.spreadsheet-selector-field):
(.spreadsheet-css-declaration .selector:focus, .spreadsheet-css-declaration .selector > .matched): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (modified) (2 diffs)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetSelectorField.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-02-22  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Styles Redesign: clicking CSS property or selector should always select its text
+        https://bugs.webkit.org/show_bug.cgi?id=180791
+        <rdar://problem/36038366>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/SpreadsheetSelectorField.js:
+        (WI.SpreadsheetSelectorField):
+        (WI.SpreadsheetSelectorField.prototype.startEditing):
+        (WI.SpreadsheetSelectorField.prototype.stopEditing):
+        (WI.SpreadsheetSelectorField.prototype._handleMouseDown): Added.
+        (WI.SpreadsheetSelectorField.prototype._handleMouseUp): Added.
+        (WI.SpreadsheetSelectorField.prototype._handleFocus): Deleted.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration .selector.editing:focus, .spreadsheet-css-declaration .selector > .matched): Added.
+        (.spreadsheet-css-declaration .selector.spreadsheet-selector-field):
+        (.spreadsheet-css-declaration .selector:focus, .spreadsheet-css-declaration .selector > .matched): Deleted.
+
 2019-02-22  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -104 +104 @@
 }
 
-.spreadsheet-css-declaration .selector:focus,
+.spreadsheet-css-declaration .selector.editing:focus,
 .spreadsheet-css-declaration .selector > .matched {
     color: var(--text-color);
@@ -120 +120 @@
 
 .spreadsheet-css-declaration .selector.spreadsheet-selector-field {
-    outline-offset: -3px;
+    outline: none;
 }
 

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

@@ -82 +82 @@
         if (this._style.selectorEditable) {
             this._selectorTextField = new WI.SpreadsheetSelectorField(this, this._selectorElement);
+            this._selectorTextField.addEventListener(WI.SpreadsheetSelectorField.Event.StartedEditing, (event) => {
+                this._headerElement.classList.add("editing-selector");
+            });
+            this._selectorTextField.addEventListener(WI.SpreadsheetSelectorField.Event.StoppedEditing, (event) => {
+                this._headerElement.classList.remove("editing-selector");
+            });
+
             this._selectorElement.tabIndex = 0;
-            this._selectorElement.addEventListener("focus", () => this._headerElement.classList.add("editing-selector"));
-            this._selectorElement.addEventListener("blur", () => this._headerElement.classList.remove("editing-selector"));
         }
 

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

@@ -24 +24 @@
  */
 
-WI.SpreadsheetSelectorField = class SpreadsheetSelectorField
+WI.SpreadsheetSelectorField = class SpreadsheetSelectorField extends WI.Object
 {
     constructor(delegate, element)
     {
+        super();
+
         this._delegate = delegate;
         this._element = element;
         this._element.classList.add("spreadsheet-selector-field");
 
-        this._element.addEventListener("focus", this._handleFocus.bind(this));
+        this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+        this._element.addEventListener("mouseup", this._handleMouseUp.bind(this));
         this._element.addEventListener("blur", this._handleBlur.bind(this));
         this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
 
         this._editing = false;
+        this._handledMouseDown = false;
     }
 
@@ -60 +64 @@
 
         this._selectText();
+
+        this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StartedEditing);
     }
 
@@ -70 +76 @@
         this._element.classList.remove("editing");
         this._element.contentEditable = false;
+
+        this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StoppedEditing);
     }
 
@@ -79 +87 @@
     }
 
-    _handleFocus(event)
+    _handleMouseDown(event)
     {
+        this._handledMouseDown = true;
+    }
+
+    _handleMouseUp(event)
+    {
+        if (!this._handledMouseDown)
+            return;
+
+        this._handledMouseDown = false;
+
         this.startEditing();
     }
@@ -131 +149 @@
     }
 };
+
+WI.SpreadsheetSelectorField.Event = {
+    StartedEditing: "spreadsheet-selector-field-started-editing",
+    StoppedEditing: "spreadsheet-selector-field-stopped-editing",
+};