1499653 - Show condition text for @supports CSS rules in the Rules panel

Status: RESOLVED FIXED

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

Description

[Razvan Caliman [:rcaliman]]

Attachment: Missing context about @supports parent rule for matching rule

The Rules panel doesn't surface the information that a rule has a @supports parent rule. All regular CSS Rules are treated as first-level children of the stylesheet.

Similarly to @media rules, we should show the condition text of the @supports rule. 

To differentiate between @media and @supports conditional text, the rule type name ("@media" and "@supports") should be prepended to the condition text.

Steps:
- Run this in the address bar of a new tab:
data:text/html,<style>div {color: red } @supports(display: grid){ div {color: green}}</style><div>Green if supports CSS GRID

- Open the DevTools Inspector
- Select the div element
- In the Rules panel, observe the rule with the `color: green` CSS declaration

Expected:
- Information about the @supports parent rule shows above the matched rule.

Actual:
- The matching rule doesn't have contextual information about of the @supports parent rule. It looks as if it's at the same nesting level with the other rule matching the div.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1499653 - [devtools] Display @supports condition on top of rules. r=jdescottes.

Since we already had a test case for nested at-rules in
browser_rules_container-queries.js, I'm moving it to a
new test where we can test all the different at-rules that
can be nested (including @supports).

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6f443f6ab2c4
[devtools] Display @supports condition on top of rules. r=jdescottes.

Comment 3

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/6f443f6ab2c4