Skip to content
Permalink
Browse files
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
  • Loading branch information
patrickangle committed Jun 1, 2022
1 parent 39f1319 commit a4aa238c9b9e264e5ac335d7fbbb63129d94b2b6
Showing 6 changed files with 16 additions and 24 deletions.
@@ -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);
}
};
@@ -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);
}
};
@@ -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) => {
@@ -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)
@@ -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());
}
@@ -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();

0 comments on commit a4aa238

Please sign in to comment.