1857006 - Consider fading the unused value from light-dark() colors.

Status: RESOLVED FIXED

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

Description

[Emilio Cobos Álvarez (:emilio)]

When you use the light-dark() color, it's only going to compute to one of the two colors. Maybe DevTools could highlight that by fading the color that isn't computed.

Comment 1

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #0)

When you use the light-dark() color, it's only going to compute to one of the two colors. Maybe DevTools could highlight that by fading the color that isn't computed.

I didn't look into the spec about this, but do we have an easy way to know the value being used?

Comment 2

[Emilio Cobos Álvarez (:emilio)]

We could expose a function trivially to get the used color scheme. It depends on a number of factors so it might not be straight-forward to compute otherwise:

• Preferred user color scheme.
• <meta name=color-scheme> if present.
• color-scheme property value if present.

Comment 3

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

We could expose a function trivially to get the used color scheme. It depends on a number of factors so it might not be straight-forward to compute otherwise:

• Preferred user color scheme.
• <meta name=color-scheme> if present.
• color-scheme property value if present.

I filed Bug 1899103 to add such function

Comment 4

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1857006 - [devtools] Fix JsDoc for OutputParser#mergeOptions. r=#devtools-reviewers.

Depends on D211718

Comment 5

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1857006 - [devtools] Strike through unused light-dark parameter in Rules view. r=#devtools-reviewers.

Comment 6

[Phabricator Automation]

Comment on attachment 9404298 [details]
Bug 1857006 - [devtools] Fix JsDoc for OutputParser#mergeOptions. r=#devtools-reviewers.

Revision D211844 was moved to bug 1899952. Setting attachment 9404298 [details] to obsolete.

Comment 7

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1857006 - [devtools] Rename OutputParser unmatchedVariableClass option into unmatchedClass so it can be used for light-dark(). r=#devtools-reviewers.

Comment 8

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1857006 - [devtools] Parse light-dark() function in output-parser. r=#devtools-reviewers.

This patch adds a new isDarkColorScheme option to the OutputParser.
When passed, this will parse light-dark function to add an "unmatched" CSS
class to the param that isn't used: the first one when isDarkColorsScheme is
false, the second one when isDarkColorScheme is true.
Test cases are added in browser_outputparser.js to cover this.

Comment 9

[Phabricator Automation]

Comment on attachment 9416318 [details]
Bug 1857006 - [devtools] Rename OutputParser unmatchedVariableClass option into unmatchedClass so it can be used for light-dark(). r=#devtools-reviewers.

Revision D217832 was moved to bug 1910569. Setting attachment 9416318 [details] to obsolete.

Comment 10

[Nicolas Chevobbe [:nchevobbe] [PTO - back January 24]]

Attachment: Bug 1857006 - [devtools] Refactor OutputParser for parsing (color) functions. r=#devtools-reviewers.

This patch introduce a new #stack property on the parser, which hold the parenthesis
stack so we can handle nested functions.
We switch the existing colorFunctions array to this new stack as it's doing
something similar, but a bit more generic.

When there's at least an entry in the stack, we want to put the parsed parts,
text or nodes, into the parts stack entry property so it can be used later
when we handle the function being closed.

This parts get put into the "parent" stack entry, or into the main #parsed array
when the stack becomes empty.

We could go further, migrating parseMatchingParens/parseVariable to use the
stack and the onCloseParenthesis method. This might be done as part of Bug 1630950,
where we want to handle nested css variables.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/32b4d9169b24
[devtools] Refactor OutputParser for parsing (color) functions. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/86a6fb48af62
[devtools] Parse light-dark() function in output-parser. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/0f65f19f14c4
[devtools] Strike through unused light-dark parameter in Rules view. r=devtools-reviewers,ochameau.

Comment 12

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/32b4d9169b24
https://hg.mozilla.org/mozilla-central/rev/86a6fb48af62
https://hg.mozilla.org/mozilla-central/rev/0f65f19f14c4