Skip to content
Permalink
Browse files
Web Inspector: Elements: Computed: should not show non-preview inline…
… swatches

https://bugs.webkit.org/show_bug.cgi?id=243509

Reviewed by Patrick Angle.

* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._createInlineSwatch):
(WI.SpreadsheetStyleProperty.prototype._addTimingFunctionTokens):
(WI.SpreadsheetStyleProperty.prototype._addBoxShadowTokens):
Hide `box-shadow` and timing function inline swatches since they do not show a preview of the value,
instead always having the same icon (i.e. color swatches actually show the color, while these don't).

* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:
(WI.InlineSwatch):
Allow variable swatches to be interacted with even when `readOnly` since they do not allow for
editing and instead just display the value of the variable.

* Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js:
(WI.ComputedStyleSection.prototype.layout):
Drive-by: Also mark the top-level `WI.SpreadsheetStyleProperty` as being `readOnly`.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:

Canonical link: https://commits.webkit.org/253214@main
  • Loading branch information
dcrousso committed Aug 8, 2022
1 parent 3b90b5b commit 4f1285ca2988c9fca20b60e5d24f1ec147f67f01
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 5 deletions.
@@ -348,6 +348,7 @@ localizedStrings["Click to show blackboxed call frame @ Debugger Call Stack"] =
localizedStrings["Click to show blackboxed call frames @ Debugger Call Stack"] = "Click to show %d blackboxed call frames";
/* Tooltip to show purpose of the CSS documentation button */
localizedStrings["Click to show documentation @ CSS Documentation Button"] = "Click to show documentation";
localizedStrings["Click to view variable value"] = "Click to view variable value";
localizedStrings["Click to view variable value\nShift-click to replace variable with value"] = "Click to view variable value\nShift-click to replace variable with value";
localizedStrings["Clickable"] = "Clickable";
localizedStrings["Clients"] = "Clients";
@@ -201,7 +201,7 @@ WI.ComputedStyleSection = class ComputedStyleSection extends WI.View

for (let i = 0; i < properties.length; i++) {
let property = properties[i];
let propertyView = new WI.SpreadsheetStyleProperty(this, property);
let propertyView = new WI.SpreadsheetStyleProperty(this, property, {readOnly: true});

if (this._filterText) {
let matchesFilter = propertyView.applyFilter(this._filterText);
@@ -56,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._type !== WI.InlineSwatch.Type.Variable)
this._swatchElement.classList.add("read-only");
else {
switch (this._type) {
@@ -89,7 +89,10 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
break;

case WI.InlineSwatch.Type.Variable:
this._swatchElement.title = WI.UIString("Click to view variable value\nShift-click to replace variable with value");
if (readOnly)
this._swatchElement.title = WI.UIString("Click to view variable value");
else
this._swatchElement.title = WI.UIString("Click to view variable value\nShift-click to replace variable with value");
break;

default:
@@ -246,7 +249,7 @@ WI.InlineSwatch = class InlineSwatch extends WI.Object
return;
}

if (this._type === WI.InlineSwatch.Type.Variable) {
if (this._type === WI.InlineSwatch.Type.Variable && !this._readOnly) {
// Force the swatch to replace the displayed text with the variable's value.
this._swatchElement.remove();
this._updateSwatch();
@@ -617,7 +617,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

swatch.addEventListener(WI.InlineSwatch.Event.Activated, function(event) {
this._activeInlineSwatch = swatch;
this._delegate?.stylePropertyInlineSwatchActivated();
this._delegate?.stylePropertyInlineSwatchActivated?.();
}, this);

if (this._delegate && typeof this._delegate.stylePropertyInlineSwatchDeactivated === "function") {
@@ -751,6 +751,9 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

_addTimingFunctionTokens(tokens, tokenType)
{
if (!this._isEditable())
return tokens;

let newTokens = [];
let startIndex = NaN;
let openParenthesis = 0;
@@ -800,6 +803,9 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object

_addBoxShadowTokens(tokens)
{
if (!this._isEditable())
return tokens;

let newTokens = [];
let startIndex = 0;
let openParentheses = 0;

0 comments on commit 4f1285c

Please sign in to comment.