1862895 - [META] Add DevTools support for custom state pseudo classes (:state())

Status: NEW

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

Description

[Nicolas Chevobbe [:nchevobbe]]

https://wicg.github.io/custom-state-pseudo-class/ allows custom elements to register pseudo elements that can be used in CSS to style theme.

We should make sure that rules using those pseudo element show up in the rule view (and probably in the "Pseudo-elements" section).

The syntax for those is pretty unusual:

question-box::part(checkbox):--checked { 
  color: green; 
}

so we should make sure this doesn't break any of our helper (for example, the selector parser, or any of the places where we assume that something starting with -- is a custom variable)

Comment 1

[Keith Cirkel [:keithamus]]

Just to clarify a few points; customstateset sets pseudo classes not elements. Additionally the dashed ident production is no longer the features syntax, it instead uses a :state() pseudo function which takes an ident as an argument. So syntax is more like question-box::part(checkbox):state(checked) or question-box::part(checkbox):state(--checked)

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

(In reply to keithamus from comment #1)

Just to clarify a few points; customstateset sets pseudo classes not elements. Additionally the dashed ident production is no longer the features syntax, it instead uses a :state() pseudo function which takes an ident as an argument. So syntax is more like question-box::part(checkbox):state(checked) or question-box::part(checkbox):state(--checked)

Ah, thanks for clarifying.
So I guess here we want to check that those rules are showing up fine, and that the selector highlighter work on them.
Also should we have a way to simulate a given state? We can trigger pseudo class (in the .hov button, in the rules view), maybe we could let the user add custom :state(xxx) items there?

Comment 3

[Keith Cirkel [:keithamus]]

So I guess here we want to check that those rules are showing up fine

In my (limited) testing they seem to show up. Do we have the capability to write automated tests for this? I haven't looked into the devtools code, I'm happy to take guidance on what to do here.

Also should we have a way to simulate a given state?

That sounds amazing! I'm sure that'd be super helpful. Again, if you have any pointers I'll gladly take a look.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Sorry, this fell through the crack and I only remembered it today when checking something else

(In reply to Keith Cirkel [:keithamus] from comment #3)

So I guess here we want to check that those rules are showing up fine

In my (limited) testing they seem to show up. Do we have the capability to write automated tests for this? I haven't looked into the devtools code, I'm happy to take guidance on what to do here.

I filed Bug 1997354 for this

Also should we have a way to simulate a given state?

That sounds amazing! I'm sure that'd be super helpful. Again, if you have any pointers I'll gladly take a look.

and Bug 1997355 for this one