2047874 - Wrong color displayed in color swatch for relative color using sibling-index()

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: color in page doesn't match color swatch in rule view

Steps to reproduce

1. Navigate to https://bug2047871.bmoattachments.org/attachment.cgi?id=9597802
2. Inspect the fourth <li>

Actual results

The color swatch for the color declaration is different from the color used in the page (see screenshot)

---

This might have the same cause as Bug 2047871

Comment 1

[Sajid Anwar [:sajidanwar]]

Really good catch, thanks for finding this! Root cause appears to be that the color swatch is setting the background color of the swatch exactly to the authored value, so the swatch itself is now using oklch(from gold 0.6 c calc(h * sibling-index() * 0.5)). And since the swatch is the first child in its own tree in the inspector, the sibling-index() calculates to 1 and gets the color as a result.

Tested this in Chrome 149 which actually has the exact same bug, it shows a reddish color in its swatch. On WebKit on GNOME Web 48, I don't see an outer swatch for the color function so I can't replicate (not sure if just doesn't show swatches for color functions?).

As for fixing, hmm ... my first thought was that instead of setting the specified value of the property as the swatch color, it could instead just use the computed/resolved value. I think this would work because the swatch is only shown for the active declaration, so the getComputedStyle() for that property would get the right value. But this only works for showing a swatch on the outermost color. In a relative color function, you could put the sibling-index() on the origin color, like oklch(from rgb(150 calc(sibling-index() * 10) 150) l c h). You wouldn't be able to do the getComputedStyle() approach to build the swatch for the origin color.

So then I think I can envision two options:

• Don't show the swatch if the specified color can't be resolved to an absolute color at parse time.
• Use something like InspectorUtils.colorToRGBA, but upgrade it with additional options like the ability to pass in the source element or something. So that when it calls Servo_ComputeColor through to glue::compute_color through to specified::Color::parse_and_compute, it can actually use that source element to build the computed::Context so that the resulting computed color is correct.

Unfortunately I don't think I have enough experience to say which one is better here, I'd defer to you or someone on the style side.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the investigation Sajid :)
What I was thinking was to actually pass the sibling-index() and sibling-count() to the OutputParser so we can substitute them.
We're already passing extra information, e.g. if the page is in dark mode so we can handle light-dark(), so it makes sense to do something similar.
I'll provide a patch soon

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2047874 - [devtools] Substitute sibling-(index/count) in OutputParser. r=#devtools.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2047874 - [devtools] Compute sibling-(index/count) result for rules. r=#devtools.

This can then be passed to the OutputParser where those function will be substituted
so we can show the correct information (e.g. the actual color being used on the
page if it uses one of those functions)

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0a3c79a0b2ab
https://hg.mozilla.org/integration/autoland/rev/57dc22609673
[devtools] Substitute sibling-(index/count) in OutputParser. r=devtools-reviewers,bomsy.
https://github.com/mozilla-firefox/firefox/commit/3181cfc087ed
https://hg.mozilla.org/integration/autoland/rev/ffc641da40ab
[devtools] Compute sibling-(index/count) result for rules. r=devtools-reviewers,devtools-backward-compat-reviewers,bomsy.

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/57dc22609673
https://hg.mozilla.org/mozilla-central/rev/ffc641da40ab