1788033 - Modify the Media Queries sidebar so it includes layers and container queries too

Status: RESOLVED FIXED

(DevTools :: Style Editor, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

The sidebar provides an easy way to navigate to a specific media query rule, that we could define as "sections".
It would probably be as useful to other kind of "sections" you can have nowadays in CSS: @layer and @container

This would require to rename a few things in the styleeditor, and add more information on each item of the sidebar so we can see the different type of @ rules
We may even introduce a color-scheme with colors for different type of rules that we could also use in the inspector rule view

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1788033 - [devtools] Rename StyleEditor media sidebar to at-rules sidebar. r=jdescottes.

Since we plan to add other rules than @media into the sidebar, it makes sense
to rename it.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1788033 - [devtools] Display container, layer and supports in StyleEditor at-rules sidebar. r=jdescottes.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1788033 - [devtools] Update StyleEditor documentation for at-rules sidebar. r=jdescottes.

We take this as an opportunity to update the existing
screenshots of the page as the previous one were quite
outdated.

Depends on D157084

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a57c69dc1054
[devtools] Rename StyleEditor media sidebar to at-rules sidebar. r=jdescottes,fluent-reviewers,devtools-backward-compat-reviewers.
https://hg.mozilla.org/integration/autoland/rev/4604df70ebde
[devtools] Display container, layer and supports in StyleEditor at-rules sidebar. r=jdescottes.
https://hg.mozilla.org/integration/autoland/rev/8c903c2f3ea4
[devtools] Update StyleEditor documentation for at-rules sidebar. r=jdescottes.

Comment 6

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/a57c69dc1054
https://hg.mozilla.org/mozilla-central/rev/4604df70ebde
https://hg.mozilla.org/mozilla-central/rev/8c903c2f3ea4