Modified: trunk/Source/WebInspectorUI/ChangeLog (291627 => 291628)
--- trunk/Source/WebInspectorUI/ChangeLog 2022-03-22 17:30:16 UTC (rev 291627)
+++ trunk/Source/WebInspectorUI/ChangeLog 2022-03-22 17:35:06 UTC (rev 291628)
@@ -1,3 +1,22 @@
+2022-03-22 Nikita Vasilyev <nvasil...@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 <nvasil...@apple.com>
Web Inspector: REGRESSION(r287753): Settings: checkboxes are smaller and no longer vertically align with related text
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (291627 => 291628)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2022-03-22 17:30:16 UTC (rev 291627)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2022-03-22 17:35:06 UTC (rev 291628)
@@ -105,6 +105,7 @@
this._value = value || this._fallbackValue();
this._valueEditor = null;
this._readOnly = readOnly;
+ this._popover = null;
this._updateSwatch();
}
@@ -135,6 +136,11 @@
this._updateSwatch(true);
}
+ dismissPopover()
+ {
+ this._popover?.dismiss();
+ }
+
// Popover delegate
didDismissPopover(popover)
@@ -254,10 +260,10 @@
if (!value)
value = this._fallbackValue();
- let popover = new WI.Popover(this);
+ this._popover = new WI.Popover(this);
- popover.windowResizeHandler = () => {
- this._presentPopover(popover);
+ this._popover.windowResizeHandler = () => {
+ this._presentPopover();
};
this._valueEditor = null;
@@ -282,7 +288,7 @@
this._valueEditor.addEventListener(WI.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
this._valueEditor.addEventListener(WI.GradientEditor.Event.ColorPickerToggled, function(event) {
this.update();
- }, popover);
+ }, this._popover);
break;
case WI.InlineSwatch.Type.Image:
@@ -319,7 +325,7 @@
readOnly: true,
});
this._valueEditor.codeMirror.on("update", () => {
- popover.update();
+ this._popover.update();
});
break;
}
@@ -327,8 +333,8 @@
if (!this._valueEditor)
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);
@@ -408,10 +414,10 @@
this._updateSwatch();
}
- _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]);
}
_handleContextMenuEvent(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (291627 => 291628)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2022-03-22 17:30:16 UTC (rev 291627)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2022-03-22 17:35:06 UTC (rev 291628)
@@ -52,6 +52,7 @@
this._selected = false;
this._hasInvalidVariableValue = false;
this._cssDocumentationPopover = null;
+ this._activeInlineSwatch = null;
this.update();
property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
@@ -134,6 +135,12 @@
if (this._valueTextField)
this._valueTextField.detached();
+
+ this._activeInlineSwatch?.dismissPopover();
+ this._activeInlineSwatch = null;
+
+ this._cssDocumentationPopover?.dismiss();
+ this._cssDocumentationPopover = null;
}
remove(replacement = null)
@@ -386,6 +393,7 @@
this._renderValue(this._property.rawValue);
this._cssDocumentationPopover?.dismiss();
+ this._cssDocumentationPopover = null;
if (direction === "forward") {
if (isEditingName && !willRemoveProperty) {
@@ -482,6 +490,7 @@
_renderValue(value)
{
this._hasInvalidVariableValue = false;
+ this._activeInlineSwatch = null;
const maxValueLength = 150;
let tokens = WI.tokenizeCSSValue(value);
@@ -603,11 +612,10 @@
};
}
- 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") {
swatch.addEventListener(WI.InlineSwatch.Event.Deactivated, function(event) {
