Changeset 291628 in webkit

Timestamp:

Mar 22, 2022 10:35:06 AM (4 months ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: Inline swatch popovers should hide when inline swatches are removed
​https://bugs.webkit.org/show_bug.cgi?id=235047
<rdar://problem/87687975>

Reviewed by Patrick Angle.

• UserInterface/Views/InlineSwatch.js:

(WI.InlineSwatch):
(WI.InlineSwatch.prototype.dismissPopover):
(WI.InlineSwatch.prototype._presentPopover):

• UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.detached):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
(WI.SpreadsheetStyleProperty.prototype._renderValue):
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/InlineSwatch.js (modified) (7 diffs)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2022-03-22  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Inline swatch popovers should hide when inline swatches are removed
+        https://bugs.webkit.org/show_bug.cgi?id=235047
+        <rdar://problem/87687975>
+
+        Reviewed by Patrick Angle.
+
+        * UserInterface/Views/InlineSwatch.js:
+        (WI.InlineSwatch):
+        (WI.InlineSwatch.prototype.dismissPopover):
+        (WI.InlineSwatch.prototype._presentPopover):
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype.detached):
+        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
+        (WI.SpreadsheetStyleProperty.prototype._renderValue):
+        (WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
+
 2022-03-17  Nikita Vasilyev  <nvasilyev@apple.com>
 

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

@@ -106 +106 @@
         this._valueEditor = null;
         this._readOnly = readOnly;
+        this._popover = null;
 
         this._updateSwatch();
@@ -134 +135 @@
         this._shiftClickColorEnabled = !!value;
         this._updateSwatch(true);
+    }
+
+    dismissPopover()
+    {
+        this._popover?.dismiss();
     }
 
@@ -255 +261 @@
             value = this._fallbackValue();
 
-        let popover = new WI.Popover(this);
-
-        popover.windowResizeHandler = () => {
-            this._presentPopover(popover);
+        this._popover = new WI.Popover(this);
+
+        this._popover.windowResizeHandler = () => {
+            this._presentPopover();
         };
 
@@ -283 +289 @@
             this._valueEditor.addEventListener(WI.GradientEditor.Event.ColorPickerToggled, function(event) {
                 this.update();
-            }, popover);
+            }, this._popover);
             break;
 
@@ -320 +326 @@
             });
             this._valueEditor.codeMirror.on("update", () => {
-                popover.update();
+                this._popover.update();
             });
             break;
@@ -328 +334 @@
             return;
 
-        popover.content = this._valueEditor.element;
-        this._presentPopover(popover);
+        this._popover.content = this._valueEditor.element;
+        this._presentPopover(this._popover);
 
         this.dispatchEventToListeners(WI.InlineSwatch.Event.Activated);
@@ -409 +415 @@
     }
 
-    _presentPopover(popover)
+    _presentPopover()
     {
         let bounds = WI.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
-        popover.present(bounds.pad(2), [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MIN_X]);
+        this._popover.present(bounds.pad(2), [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MIN_X]);
     }
 

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

@@ -53 +53 @@
         this._hasInvalidVariableValue = false;
         this._cssDocumentationPopover = null;
+        this._activeInlineSwatch = null;
 
         this.update();
@@ -135 +136 @@
         if (this._valueTextField)
             this._valueTextField.detached();
+
+        this._activeInlineSwatch?.dismissPopover();
+        this._activeInlineSwatch = null;
+
+        this._cssDocumentationPopover?.dismiss();
+        this._cssDocumentationPopover = null;
     }
 
@@ -387 +394 @@
 
         this._cssDocumentationPopover?.dismiss();
+        this._cssDocumentationPopover = null;
 
         if (direction === "forward") {
@@ -483 +491 @@
     {
         this._hasInvalidVariableValue = false;
+        this._activeInlineSwatch = null;
 
         const maxValueLength = 150;
@@ -604 +613 @@
         }
 
-        if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchActivated === "function") {
-            swatch.addEventListener(WI.InlineSwatch.Event.Activated, function(event) {
-                this._delegate.stylePropertyInlineSwatchActivated();
-            }, this);
-        }
+        swatch.addEventListener(WI.InlineSwatch.Event.Activated, function(event) {
+            this._activeInlineSwatch = swatch;
+            this._delegate?.stylePropertyInlineSwatchActivated();
+        }, this);
 
         if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchDeactivated === "function") {