Bug 267154 – No swatch to trigger the picker inside gradient functions unless using CSS variable stops

• Status: NEW
• Component: Web Inspector

[Ana Tudor]

Created attachment 469302 [details]
the swatch situation

(1) Set anything that takes an `<image>` data type to any kind of CSS gradient with:

a) a stop position specified as `<angle-percentage>` (for conic) or `<length-percentage>` (for linear/ radial)

```
border-image: conic-gradient(hotpink 75deg, steelblue) fill 0;
```

b) same as a), but using a CSS variable instead of the first `<color>` value:

```
background: linear-gradient(var(--c, hotpink) 35%, steelblue);
```

c) same as a), but using a CSS variable for the stop position

```
mask: radial-gradient(hotpink var(--p, 5em), steelblue);
```

(2) For comparison, also set anything that takes a `<color>` data type to a `color-mix()` value with:

a) the two `<color>` values and the percentage specified as such

```
background-color: color-mix(in hsl, hotpink 35%, steelblue);
```

b) same as a), with the first `<color>` specified as a CSS variable:

```
color: color-mix(in hsl, var(--c, hotpink) 35%, steelblue);
```

c) same as a), with the percentage as a CSS variable:

```
accent-color: color-mix(in hsl, hotpink var(--p, 35%), steelblue);
```

I would expect to see a swatch/ button to trigger the picker before every `<color>` value. This is what happens in Firefox.

However, this only consistently happens inside `color-mix()` functions, but not inside CSS gradient functions. The only instance when this happens inside gradients is when the `<color>` value is set as a CSS variable.

Live test https://codepen.io/thebabydino/pen/gOErbbr

I've only tested with Epiphany as I'm on Ubuntu, but this is replicated in Safari too - see replies https://twitter.com/anatudor/status/1743340704703606946

[Razvan Caliman]

Thanks for filing this! 

There are at least two bugs visible in the attached screenshot:
- missing color swatches
- missing gradient editor swatches for `conic-gradient` and `radial-gradient`

Having at least one set of swatches would be fine. Missing both isn't.

The issue is likely somewhere in the logic at: 
https://github.com/WebKit/WebKit/blob/main/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js#L657-L723

[Radar WebKit Bug Importer]

<rdar://problem/120643697>