Closed Bug 1894603 Opened 3 months ago Closed 3 months ago

@keyframes nested in other at-rules are not displayed in the Rules view

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(firefox127 fixed)

Status:
RESOLVED FIXED
Milestone:
127 Branch
Tracking Flags:
Tracking Status
firefox127 --- fixed

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Bug 1894603 - [devtools] Display nested keyframes rules in the Rules view. r=#devtools-reviewers.
48 bytes, text/x-phabricator-request
Details | Review

Steps to reproduce

  1. With layout.css.starting-style-at-rules.enabled set to true, navigate to https://ffx-devtools-starting-style.glitch.me/
  2. 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:

https://searchfox.org/mozilla-central/rev/f1532761de0b60337e42c6c3f525288a523dabef/devtools/server/actors/inspector/css-logic.js#257-258,265-268

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

Severity: -- → S3
Priority: -- → P2
Blocks: 1894873

Note that is is not specific to @starting-style: @keyframes rules in @layer, @media, @container, … are not displayed, but should

No longer blocks: 1892191
Summary: @keyframes nested in @starting-style rules are not displayed in the Rules view → @keyframes nested in other at-rules are not displayed in the Rules view

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.

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c65d9e647ed7
[devtools] Display nested keyframes rules in the Rules view. r=devtools-reviewers,bomsy.

https://hg.mozilla.org/mozilla-central/rev/c65d9e647ed7

Status: ASSIGNED → RESOLVED
Closed: 3 months ago
status-firefox127: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 127 Branch

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
You need to log in before you can comment on or make changes to this bug.