Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 6ed1f44d538f5e4c44098bd910c7d2e0d38ec00c
https://github.com/WebKit/WebKit/commit/6ed1f44d538f5e4c44098bd910c7d2e0d38ec00c
Author: Devin Rousso <[email protected]>
Date: 2026-10-06 (Tue, 06 Oct 2026)
Changed paths:
A LayoutTests/inspector/css/dom-node-styles-keyframes-expected.txt
A LayoutTests/inspector/css/dom-node-styles-keyframes.html
M LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt
A LayoutTests/inspector/css/getMatchedStylesForNode-keyframes-expected.txt
A LayoutTests/inspector/css/getMatchedStylesForNode-keyframes.html
M LayoutTests/inspector/css/getMatchedStylesForNodeBackdropPseudoId.html
M LayoutTests/inspector/css/getMatchedStylesForNodeMarkerPseudoId.html
M
LayoutTests/inspector/css/getMatchedStylesForNodeViewTransitionPseudoElements.html
A LayoutTests/inspector/css/keyframes-edit-declaration-expected.txt
A LayoutTests/inspector/css/keyframes-edit-declaration.html
A LayoutTests/inspector/css/keyframes-edit-key-expected.txt
A LayoutTests/inspector/css/keyframes-edit-key.html
A LayoutTests/inspector/css/keyframes-edit-name-expected.txt
A LayoutTests/inspector/css/keyframes-edit-name.html
A LayoutTests/inspector/css/keyframes-edit-properties-expected.txt
A LayoutTests/inspector/css/keyframes-edit-properties.html
A LayoutTests/inspector/css/keyframes-tree-scope-expected.txt
A LayoutTests/inspector/css/keyframes-tree-scope.html
M
LayoutTests/inspector/css/pseudo-element-matches-for-pseudo-element-node.html
M LayoutTests/inspector/css/shadow-scoped-style.html
M Source/JavaScriptCore/inspector/protocol/CSS.json
M Source/WebCore/css/CSSKeyframeRule.cpp
M Source/WebCore/css/CSSKeyframeRule.h
M Source/WebCore/css/CSSKeyframesRule.h
M Source/WebCore/css/parser/CSSParser.cpp
M Source/WebCore/inspector/InspectorStyleSheet.cpp
M Source/WebCore/inspector/InspectorStyleSheet.h
M Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
M Source/WebCore/inspector/agents/InspectorCSSAgent.h
M Source/WebCore/inspector/agents/frame/FrameCSSAgent.cpp
M Source/WebCore/inspector/agents/frame/FrameCSSAgent.h
M Source/WebCore/style/InspectorCSSOMWrappers.cpp
M Source/WebCore/style/InspectorCSSOMWrappers.h
M Source/WebCore/style/StyleResolver.cpp
M Source/WebCore/style/StyleResolver.h
M Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js
M Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
M Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
M
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Log Message:
-----------
Web Inspector: CSS Keyframe Animation Editor
https://bugs.webkit.org/show_bug.cgi?id=31074
<rdar://problem/15801500>
Reviewed by BJ Burg.
Leverage existing types and commands for getting `@keyframes` from the
inspected page:
- `CSS.Grouping` for the `CSSKeyframesRule` (i.e. the overall `@keyframes`)
- `CSS.CSSRule` for the `CSSKeyframeRule` (i.e. an individual keyframe)
- `CSS.setRuleSelector` to edit the both `@keyframes <name> { <ident> { ... } }`
- `CSS.getMatchedStylesForNode` to fetch the used `keyframes`
As a result, `@keyframes` appear and behave like any other grouping (e.g.
`@media`, `@supports`, etc.).
* Source/JavaScriptCore/inspector/protocol/CSS.json:
* Source/WebCore/inspector/InspectorStyleSheet.h:
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::flatteningStrategyForStyleRuleType):
(WebCore::atRuleIdentifierForType):
(WebCore::protocolGroupingTypeForStyleRuleType):
(WebCore::flattenSourceData):
(WebCore::InspectorStyleSheet::ruleHeaderText):
(WebCore::InspectorStyleSheet::setRuleHeaderText):
(WebCore::InspectorStyleSheet::buildObjectForSelectorList):
(WebCore::styleForRule): Added.
(WebCore::InspectorStyleSheet::buildObjectForRule):
(WebCore::InspectorStyleSheet::styleForId const):
(WebCore::InspectorStyleSheet::ruleIndexByStyle const):
(WebCore::InspectorStyleSheet::collectFlatRules):
* Source/WebCore/style/InspectorCSSOMWrappers.cpp:
(WebCore::Style::InspectorCSSOMWrappers::collectFromStyleSheetIfNeeded):
(WebCore::Style::InspectorCSSOMWrappers::collect):
(WebCore::Style::InspectorCSSOMWrappers::collectDocumentWrappers):
(WebCore::Style::InspectorCSSOMWrappers::getWrapperForStyleRuleInSheets):
Renamed from `getWrapperForRuleInSheets`.
(WebCore::Style::InspectorCSSOMWrappers::getWrapperForKeyframesRuleInSheets):
Added.
* Source/WebCore/style/InspectorCSSOMWrappers.h:
* Source/WebCore/inspector/agents/InspectorCSSAgent.h:
* Source/WebCore/inspector/agents/InspectorCSSAgent.cpp:
(WebCore::InspectorCSSAgent::getMatchedStylesForNode):
(WebCore::InspectorCSSAgent::setRuleSelector):
(WebCore::InspectorCSSAgent::buildObjectForRule):
(WebCore::InspectorCSSAgent::buildArrayForKeyframes): Added.
* Source/WebCore/inspector/agents/frame/FrameCSSAgent.h:
* Source/WebCore/inspector/agents/frame/FrameCSSAgent.cpp:
(WebCore::FrameCSSAgent::getMatchedStylesForNode):
(WebCore::FrameCSSAgent::getAllStyleSheets):
(WebCore::FrameCSSAgent::setRuleSelector):
(WebCore::FrameCSSAgent::buildObjectForRule):
(WebCore::FrameCSSAgent::buildArrayForKeyframes): Added.
(WebCore::FrameCSSAgent::collectAllStyleSheets):
* Source/WebCore/css/CSSKeyframesRule.h:
(WebCore::CSSKeyframesRule::keyframesRule() const): Added.
* Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles):
(WI.DOMNodeStyles.prototype.get keyframes): Added.
(WI.DOMNodeStyles.prototype.refresh):
(WI.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles):
(WI.DOMNodeStyles.prototype._parseRulePayload):
(WI.DOMNodeStyles.prototype._updateStyleCascade):
(WI.DOMNodeStyles.prototype._processStyleProperties): Added.
(WI.DOMNodeStyles.prototype._processKeyframeProperties): Added.
* Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js:
(WI.CSSGrouping):
(WI.CSSGrouping.prototype.get prefix):
* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.get selectorEditable):
*
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.layout):
* Source/WebCore/css/CSSKeyframeRule.h:
* Source/WebCore/css/CSSKeyframeRule.cpp:
(WebCore::CSSKeyframeRule::setKeyText):
Add a `CSSStyleSheet::RuleMutationScope` so that the page is automatically
updated (if needed).
* Source/WebCore/css/parser/CSSParser.cpp:
(WebCore::CSSParser::consumeKeyframesRule):
(WebCore::CSSParser::consumeKeyframeStyleRule):
Record the selector start before consuming the prelude.
Keep the `@keyframes` parent open while observing its children.
* LayoutTests/inspector/css/dom-node-styles-keyframes.html: Added.
* LayoutTests/inspector/css/dom-node-styles-keyframes-expected.txt: Added.
* LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt:
* LayoutTests/inspector/css/getMatchedStylesForNodeBackdropPseudoId.html:
* LayoutTests/inspector/css/getMatchedStylesForNodeMarkerPseudoId.html:
*
LayoutTests/inspector/css/getMatchedStylesForNodeViewTransitionPseudoElements.html:
* LayoutTests/inspector/css/getMatchedStylesForNode-keyframes.html: Added.
* LayoutTests/inspector/css/getMatchedStylesForNode-keyframes-expected.txt:
Added.
* LayoutTests/inspector/css/keyframes-edit-declaration.html: Added.
* LayoutTests/inspector/css/keyframes-edit-declaration-expected.txt: Added.
* LayoutTests/inspector/css/keyframes-edit-key.html: Added.
* LayoutTests/inspector/css/keyframes-edit-key-expected.txt: Added.
* LayoutTests/inspector/css/keyframes-edit-name.html: Added.
* LayoutTests/inspector/css/keyframes-edit-name-expected.txt: Added.
* LayoutTests/inspector/css/keyframes-edit-properties.html: Added.
* LayoutTests/inspector/css/keyframes-edit-properties-expected.txt: Added.
* LayoutTests/inspector/css/keyframes-tree-scope-expected.txt: Added.
* LayoutTests/inspector/css/keyframes-tree-scope.html: Added.
* LayoutTests/inspector/css/pseudo-element-matches-for-pseudo-element-node.html:
* LayoutTests/inspector/css/shadow-scoped-style.html:
Canonical link: https://commits.webkit.org/322820@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
