Attachment 362649 Details for Bug 180791 – Patch

[patch] Patch

bug-180791-20190221143001.patch (text/plain), 6.65 KB, created by Devin Rousso on 2019-02-21 14:30:01 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-02-21 14:30:01 PST

Size: 6.65 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index fce7a3e86b94317037527189770742a439698881..be9450a6c43c9fc8c263ef4c74e08df3ff191f48 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,26 @@
>+2019-02-21  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 NOBODY (OOPS!).
>+
>+        * 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-21  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: Canvas: recordings with a single frame sometimes missing TreeElement
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>index 380964b2ed61de2a3557992b056c5b55b6482be6..da53758da4745bb22666b320dca39b8a443594fa 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>@@ -103,7 +103,7 @@
>     color: var(--text-color-secondary);
> }
> 
>-.spreadsheet-css-declaration .selector:focus,
>+.spreadsheet-css-declaration .selector.editing:focus,
> .spreadsheet-css-declaration .selector > .matched {
>     color: var(--text-color);
> }
>@@ -119,7 +119,7 @@
> }
> 
> .spreadsheet-css-declaration .selector.spreadsheet-selector-field {
>-    outline-offset: -3px;
>+    outline: none;
> }
> 
> .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>index e05f6b96879a9f2703e4eecee8b1266b9e915452..ed408ce21fdced7b23a58b9999502dc837d32c5c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>@@ -81,9 +81,14 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
> 
>         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"));
>         }
> 
>         this._propertiesEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this, this._style);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
>index 24221bcd7189593ba5f6ce91c42e96112352c04e..f8ddb6140e878856780a8c4b5b218779fe1cb55d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js
>@@ -23,19 +23,23 @@
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
> 
>-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;
>     }
> 
>     // Public
>@@ -59,6 +63,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField
>         element.textContent = element.textContent;
> 
>         this._selectText();
>+
>+        this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StartedEditing);
>     }
> 
>     stopEditing()
>@@ -69,6 +75,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField
>         this._editing = false;
>         this._element.classList.remove("editing");
>         this._element.contentEditable = false;
>+
>+        this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StoppedEditing);
>     }
> 
>     // Private
>@@ -78,8 +86,18 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField
>         window.getSelection().selectAllChildren(this._element);
>     }
> 
>-    _handleFocus(event)
>+    _handleMouseDown(event)
>     {
>+        this._handledMouseDown = true;
>+    }
>+
>+    _handleMouseUp(event)
>+    {
>+        if (!this._handledMouseDown)
>+            return;
>+
>+        this._handledMouseDown = false;
>+
>         this.startEditing();
>     }
> 
>@@ -130,3 +148,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField
>         }
>     }
> };
>+
>+WI.SpreadsheetSelectorField.Event = {
>+    StartedEditing: "spreadsheet-selector-field-started-editing",
>+    StoppedEditing: "spreadsheet-selector-field-stopped-editing",
>+};

Actions: View | Formatted Diff | Diff

Attachments on bug 180791: 329304 | 362649