1836873 - [META] Support CSS Nesting within Rules panel

Status: NEW

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

Description

[Sebastian Zartner [:sebo]]

The Rules panel should support nested CSS rules. I.e. give some hints to authors regarding nested selectors.

Sebastian

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

We should also make sure that the "selector highlighter" button works as expected with nested rules

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Emilio, do you have an ETA for when nesting is going to ride the train? It would be helpful for us to know so we can plan DevTools work

Comment 3

[Emilio Cobos Álvarez [:emilio]]

I hope to finish the implementation within the next month or two... I'm happy to help out as needed with DevTools of course :)

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

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

I hope to finish the implementation within the next month or two... I'm happy to help out as needed with DevTools of course :)

okay great, so I guess that's giving us some time to properly think of how we want to do things in the inspector and fix the various issues nesting is going to bring

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: nested rules seen as properties

at the moment, nested rules are viewed as regular properties, we may have a simple bug to already filter those out, to start with

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Safari and Chrome rules view with nested (at) rules

Here's a screenshot showing what other browser vendors are doing

Chrome is only showing the rule actual selector, and hovering the & character will display the selector tree in a tooltip, but on a single line, as if all selectors are separated with a space.

Safari is showing the entire "selector tree", including nested at rules. You can also edit each selector individually, and this will update the right selector rule

From an authoring standpoint, I feel like Safari's approach is nicer as you can see everything at once, and it also fits what we do with nested rules at the moment.
We might want to add some styling to emphasise the nesting a bit, but that's not what we do at the moment with at-rules, so we can do that in a separate bug.

Comment 7

[Sebastian Zartner [:sebo]]

Because this is the actual release in which nesting is supported by default, DevTools support for it should be mentioned in https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/117.

Sebastian