Bug 176484
| Summary: | Web Inspector: Styles Redesign: Show CSS animations (@keyframes) | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> |
| Component: | Web Inspector | Assignee: | Nikita Vasilyev <nvasilyev> |
| Status: | REOPENED | ||
| Severity: | Normal | CC: | hi, inspector-bugzilla-changes, rcaliman, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=176289 | ||
Nikita Vasilyev
Currently, we don't show @keyframes rules in the styles sidebar at all.
Steps:
1. Open http://nv.github.io/webkit-inspector-bugs/styles-redesign/tests/css-animations.html
2. Inspect <p>foo</p>
Expected:
At the bottom of the Styles panel, we should see:
@keyframes slidein {
from {
transform: translateX(-20px);
}
to {
transform: translateX(20px);
}
}
Actual:
@keyframes aren't shown.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/34295517>
Devin Rousso
Would all @keyframes be visible for all nodes, or are you going to try to only show @keyframes that are actively used by some rule for the selected node? Would it be worth creating a separate panel just for editing animations?
Nikita Vasilyev
(In reply to Devin Rousso from comment #2)
> Would all @keyframes be visible for all nodes, or are you going to try to
> only show @keyframes that are actively used by some rule for the selected
> node?
The latter.
> Would it be worth creating a separate panel just for editing
> animations?
Something like Chrome and Firefox have?
https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations
It would be nice to have, but I'm not planning on working on it any time soon.
Devin Rousso
*** This bug has been marked as a duplicate of bug 31074 ***
Razvan Caliman
Reopening. It is still not possible to view styles for CSS @keyframes rules.
<rdar://125244567>