1838163 - Selector highlighter doesn't work for nested rules

Status: RESOLVED FIXED

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

Description

[Nicolas Chevobbe [:nchevobbe][PTO - back on Monday May 13th]]

If you have the following

body {
  & main {
    …
  }
}

clicking on the highlighter icon next to main won't highlight the <main> element.

---

It looks like this is because we're using the rule selector directly (& main), but & can't be used to query an element, we need to substitute it with the parent selector (and if the parent selector also has &, we need to substitute it with its parent selector as well, and so on)

From the spec (https://www.w3.org/TR/css-nesting-1/#nest-selector) :

The nesting selector can be desugared by replacing it with the parent style rule’s selector, wrapped in an :is() selector.

So for our case, & main should be turned into :is(body) main

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back on Monday May 13th]]

Attachment: Bug 1838163 - [devtools] Use desugared selector for selector highlighter. r=#devtools-reviewers

Depends on D181606

Comment 2

[Nicolas Chevobbe [:nchevobbe][PTO - back on Monday May 13th]]

Attachment: Bug 1838163 - [devtools] Expose desugared selectors on style rule actor. r=#devtools-reviewers.

Depends on D181109

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/64a5444bc816
[devtools] Expose desugared selectors on style rule actor. r=ochameau.
https://hg.mozilla.org/integration/autoland/rev/a6f44dc492b0
[devtools] Use desugared selector for selector highlighter. r=ochameau

Comment 4

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/64a5444bc816
https://hg.mozilla.org/mozilla-central/rev/a6f44dc492b0