@keyframes nested in other at-rules are not displayed in the Rules view
Categories
(DevTools :: Inspector, defect, P2)
Tracking
(firefox127 fixed)
| Tracking | Status | |
|---|---|---|
| firefox127 | --- | fixed |
People
(Reporter: nchevobbe, Assigned: nchevobbe)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
Steps to reproduce
- With
layout.css.starting-style-at-rules.enabledset to true, navigate to https://ffx-devtools-starting-style.glitch.me/ - Open the inspector, select the
<body>node if it's not already
Expected results
I can see a Keyframe rainbow section in the Rules view, as the body rule has the following animation: 3s rainbow […]
Actual results
There is no keyframe section
In the starting-style spec:
Global, name-defining at-rules such as @keyframes, […] are allowed inside @starting-style, and when present behave as if they were outside of @starting-style.
At the moment, the code responsible for collecting keyframes rules only loops through "top-level" rules:
for (const aDomRule of cssSheet.getCssRules()) {
const ruleClassName = ChromeUtils.getClassName(aDomRule);
...
} else if (ruleClassName === "CSSKeyframesRule") {
this._keyframesRules.push(aDomRule);
}
}
We should recursively traverse the rules instead
|
||
Updated•1 year ago
|
|
Assignee | |
Comment 1•1 year ago
|
||
Note that is is not specific to @starting-style: @keyframes rules in @layer, @media, @container, … are not displayed, but should
|
|
Assignee | |
Comment 2•1 year ago
|
||
Recursively traverse css rules so we can collect
keyframes rules nested in other rules, which should
behave as regular rules.
We also don't collect ancestor rules for keyframe rules,
as they can only be direct child of @keyframes rules, and
we'd rather display the @keyframes ancestor data at some
point.
|
||
Updated•1 year ago
|
|
||
Comment 4•1 year ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 5•1 year ago
|
||
Perfherder has detected a devtools performance change from push c65d9e647ed72f2dd80db78c9f78b0ac62ec203b.
Regressions:
| Ratio | Test | Platform | Options | Absolute values (old vs new) |
|---|---|---|---|---|
| 3% | damp complicated.inspector.open.DAMP | windows10-64-shippable-qr | e10s fission stylo webrender-sw | 335.23 -> 346.47 |
| 3% | damp complicated.inspector.open.DAMP | windows10-64-shippable-qr | e10s fission stylo webrender | 338.91 -> 348.68 |
| 3% | damp complicated.inspector.open.DAMP | windows10-64-shippable-qr | e10s fission stylo webrender | 340.08 -> 349.50 |
Description
•