Closed Bug 1499653 Opened 4 years ago Closed 1 month ago

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

Categories

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

enhancement

Tracking

(firefox106 fixed)

RESOLVED FIXED
106 Branch
Tracking Status
firefox106 --- fixed

People

(Reporter: rcaliman, Assigned: nchevobbe)

Details

Attachments

(2 files)

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.
Assignee: rcaliman → nobody
Status: ASSIGNED → NEW
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED

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).

Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6f443f6ab2c4
[devtools] Display @supports condition on top of rules. r=jdescottes.
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 106 Branch
You need to log in before you can comment on or make changes to this bug.