Web Inspector: Color swatches for layout container overlays allow for…

…mat changes via context menu

https://bugs.webkit.org/show_bug.cgi?id=241055
rdar://94063968

Reviewed by Devin Rousso.

NodeOverlayListSection already signaled that the color swatches it creates should not allow changing formats (although
it expressed this as preventing Shift+Clicking to change the format). This only makes sense if we prevent the context
menu from being shown as well, which current allows changing the color format for these swatches. Because currently we
only support sRGB color for overlays anyways, this is unnecessary and confusing.

* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch):
- Add an option to prevent changing color formats and convert read-only to an option as well.
- Don't add the context menu click handler for color swatches when changing formats is disabled.

(WI.InlineSwatch.prototype._allowChangingColorFormats):
(WI.InlineSwatch.prototype.set shiftClickColorEnabled): Deleted.
(WI.InlineSwatch.prototype._swatchElementClicked):
* Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js:
(WI.AnimationDetailsSidebarPanel.prototype._refreshEffectSection.optionsForType):
(WI.AnimationDetailsSidebarPanel.prototype._refreshEffectSection):
* Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js:
(WI.NodeOverlayListSection.prototype.layout):
* Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js:
(WI.RecordingActionTreeElement._createSwatchForColorParameters):
* Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.js:
(WI.RecordingStateDetailsSidebarPanel.prototype._generateDetailsCanvas2D):
(WI.RecordingStateDetailsSidebarPanel):
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
- Adopt new WI.InlineSwatch constructor.

Canonical link: https://commits.webkit.org/251194@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295099 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/UserInterface/Views/AnimationDetailsSidebarPanel.js

@@ -191,7 +191,6 @@ WI.AnimationDetailsSidebarPanel = class AnimationDetailsSidebarPanel extends WI.
         this._codeMirrorSectionMap.clear();
 
         const precision = 0;
-        const readOnly = true;
 
         this._iterationCountRow.value = !isNaN(this._animation.iterationCount) ? this._animation.iterationCount.toLocaleString() : null;
         this._iterationStartRow.value = !isNaN(this._animation.iterationStart) ? this._animation.iterationStart.toLocaleString() : null;
@@ -232,7 +231,7 @@ WI.AnimationDetailsSidebarPanel = class AnimationDetailsSidebarPanel extends WI.
                     return {
                         allowedTokens: /\btag\b/,
                         callback(marker, valueObject, valueString) {
-                            let swatch = new WI.InlineSwatch(type, valueObject, readOnly);
+                            let swatch = new WI.InlineSwatch(type, valueObject, {readOnly: true});
                             codeMirror.setUniqueBookmark(marker.range.startPosition().toCodeMirror(), swatch.element);
                         }
                     };

Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js

@@ -26,12 +26,15 @@
 
 WI.InlineSwatch = class InlineSwatch extends WI.Object
 {
-    constructor(type, value, readOnly)
+    constructor(type, value, {readOnly, preventChangingColorFormats} = {})
     {
         super();
 
         this._type = type;
 
+        console.assert(!preventChangingColorFormats || type === WI.InlineSwatch.Type.Color);
+        this._preventChangingColorFormats = !!preventChangingColorFormats;
+
         switch (this._type) {
         case WI.InlineSwatch.Type.Bezier:
         case WI.InlineSwatch.Type.Spring:
@@ -53,7 +56,7 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
 
         this._swatchElement.classList.add("inline-swatch", this._type.replace("inline-swatch-type-", ""));
 
-        if (readOnly)
+        if (!!readOnly)
             this._swatchElement.classList.add("read-only");
         else {
             switch (this._type) {
@@ -66,7 +69,6 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
                 break;
 
             case WI.InlineSwatch.Type.Color:
-                this._shiftClickColorEnabled = true;
                 // Handled later by _updateSwatch.
                 break;
 
@@ -96,17 +98,18 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
             }
 
             this._swatchElement.addEventListener("click", this._swatchElementClicked.bind(this));
-            if (this._type === WI.InlineSwatch.Type.Color)
-                this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
         }
 
         this._swatchInnerElement = this._swatchElement.createChild("span");
 
         this._value = value || this._fallbackValue();
         this._valueEditor = null;
-        this._readOnly = readOnly;
+        this._readOnly = !!readOnly;
         this._popover = null;
 
+        if (this._allowChangingColorFormats())
+            this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+
         this._updateSwatch();
     }
 
@@ -130,12 +133,6 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
         this._updateSwatch(true);
     }
 
-    set shiftClickColorEnabled(value)
-    {
-        this._shiftClickColorEnabled = !!value;
-        this._updateSwatch(true);
-    }
-
     dismissPopover()
     {
         this._popover?.dismiss();
@@ -221,7 +218,7 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
 
     _allowChangingColorFormats()
     {
-        return this._shiftClickColorEnabled && !this._readOnly && !this.value.isOutsideSRGB();
+        return this._type === WI.InlineSwatch.Type.Color && !this._preventChangingColorFormats && !this._readOnly && !this.value.isOutsideSRGB();
     }
 
     _swatchElementClicked(event)
@@ -369,7 +366,7 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
                 return {
                     allowedTokens: /\btag\b/,
                     callback(marker, valueObject, valueString) {
-                        let swatch = new WI.InlineSwatch(type, valueObject, true);
+                        let swatch = new WI.InlineSwatch(type, valueObject, {readOnly: true, preventChangingColorFormats: this._preventChangingColorFormats});
                         codeMirror.setUniqueBookmark({line: 0, ch: 0}, swatch.element);
                     }
                 };

Source/WebInspectorUI/UserInterface/Views/NodeOverlayListSection.js

@@ -121,8 +121,7 @@ WI.NodeOverlayListSection = class NodeOverlayListSection extends WI.View
                     domNode.hideLayoutOverlay();
             });
 
-            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, domNode.layoutOverlayColor);
-            swatch.shiftClickColorEnabled = false;
+            let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, domNode.layoutOverlayColor, {preventChangingColorFormats: true});
             itemContainerElement.append(swatch.element);
 
             swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {

Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js

@@ -229,8 +229,7 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
                 return null;
         }
 
-        const readOnly = true;
-        return new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, readOnly);
+        return new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, {readOnly: true});
     }
 
     static _getClassNames(recordingAction)

Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.js

@@ -156,8 +156,7 @@ WI.RecordingStateDetailsSidebarPanel = class RecordingStateDetailsSidebarPanel e
                     }
                 } else if (name === "fillStyle" || name === "strokeStyle" || name === "shadowColor") {
                     let color = WI.Color.fromString(value);
-                    const readOnly = true;
-                    let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, readOnly);
+                    let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, {readOnly: true});
                     value = document.createElement("span");
                     value.append(swatch.element, color.toString());
                 }

Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -598,8 +598,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
                 innerElement.append(item);
         }
 
-        let readOnly = !this._isEditable();
-        let swatch = new WI.InlineSwatch(type, valueObject, readOnly);
+        let swatch = new WI.InlineSwatch(type, valueObject, {readOnly: !this._isEditable()});
 
         swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, function(event) {
             let value = event.data.value && event.data.value.toString();