1731612 - Display layer name before rule location in the rule view

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

CSS Layers are being implemented (behind a pref at the moment), and it would be nice if we could show some information in the inspector for rules which are inside a @layer block

If you open the inspector on https://ffx-devtools-layers.glitch.me/ and inspect the h1 element, the rule view does show the applied rule (the one in the layer block) properly, but we don't surface that information.

We should probably append something before the location, like we do for rules in media query (so we would show @layer override style.css)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

In a similar fashion that what we have for media queries in devtools/server/actors/style-rule.js#327, we could get the CSSLayerBlockRule.name property (see https://www.w3.org/TR/css-cascade-5/#the-csslayerblockrule-interface)
Note that the name property can be an empty string if the layer is anonymous.

At the moment, the rule.type property for a layer rule is 0 (which I'm not sure is wanted?), and unlike for the other rule types, we don't have a constant on the CSSRule to expose it (see https://searchfox.org/mozilla-central/rev/7d17fd1fe9f0005a2fb19e5d53da4741b06a98ba/dom/webidl/CSSRule.webidl#18-23,27,36-37,42,47,53,58)
I'll open a dedicated bug for this.

type is deprecated (see Bug 1746876), we can use ChromeUtils.getClassName instead to identify @layer blocks

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1731612 - [devtools] Display layer name in the rule view. r=jdescottes.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8455cecbd0d9
[devtools] Display layer name in the rule view. r=jdescottes.

Comment 4

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/8455cecbd0d9