Skip to content

Web Inspector: Elements: add support for @starting-style #46694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Web Inspector: Elements: add support for @starting-style #46694

wants to merge 1 commit into from

Conversation

dcrousso
Copy link
Member

@dcrousso dcrousso commented Jun 13, 2025 •
edited by webkit-early-warning-system
Loading

d4e31f4

Web Inspector: Elements: add support for `@starting-style`
https://bugs.webkit.org/show_bug.cgi?id=294425

Reviewed by NOBODY (OOPS!).

* Source/JavaScriptCore/inspector/protocol/CSS.json:
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::flatteningStrategyForStyleRuleType):
(WebCore::atRuleIdentifierForType):
(WebCore::protocolGroupingTypeForStyleRuleType):
Add a new enum value for `@starting-style`.

* Source/WebCore/style/InspectorCSSOMWrappers.cpp:
(WebCore::Style::InspectorCSSOMWrappers::collect):
Iterate over all rules within `@starting-style` when gathering information for Web Inspector.

* Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js:
(WI.CSSGrouping.prototype.get editable):
(WI.CSSGrouping.prototype.get isStartingStyle): Added.
(WI.CSSGrouping.prototype.get prefix):
(WI.CSSGrouping.prototype.get isSupports): Deleted.
(WI.CSSGrouping.prototype.get isLayer): Deleted.
(WI.CSSGrouping.prototype.get isContainer): Deleted.
(WI.CSSGrouping.prototype.get isStyle): Deleted.
Remove unused methods and simplify the remainder.

* Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles.prototype._markOverriddenProperties):
* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.get isStartingStyle): Added.
Properties in `@starting-style` will always be overridden by anything else that matches, regardless of the cascade order/`!important`.

* Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderGroupings):
Don't try to make the grouping text editable if there isn't any (e.g. `@starting-style` vs `@media foo`).

* LayoutTests/inspector/css/getMatchedStylesForNode.html:
* LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt:
* LayoutTests/inspector/css/getMatchedStylesForNodeStartingStyleGrouping.html: Added.
* LayoutTests/inspector/css/getMatchedStylesForNodeStartingStyleGrouping-expected.txt: Added.

d4e31f4

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 ⏳ 🧪 win-tests
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe
✅ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🛠 🧪 jsc ✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 🧪 jsc-arm64 ✅ 🛠 vision ✅ 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🧪 vision-wk2 ✅ 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp ✅ 🛠 jsc-armv7
✅ 🛠 tv-sim ❌ 🧪 jsc-armv7-tests
✅ 🛠 watch
✅ 🛠 watch-sim

@dcrousso
Web Inspector: Elements: add support for @starting-style
d4e31f4 
https://bugs.webkit.org/show_bug.cgi?id=294425

Reviewed by NOBODY (OOPS!).

* Source/JavaScriptCore/inspector/protocol/CSS.json:
* Source/WebCore/inspector/InspectorStyleSheet.cpp:
(WebCore::flatteningStrategyForStyleRuleType):
(WebCore::atRuleIdentifierForType):
(WebCore::protocolGroupingTypeForStyleRuleType):
Add a new enum value for `@starting-style`.

* Source/WebCore/style/InspectorCSSOMWrappers.cpp:
(WebCore::Style::InspectorCSSOMWrappers::collect):
Iterate over all rules within `@starting-style` when gathering information for Web Inspector.

* Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js:
(WI.CSSGrouping.prototype.get editable):
(WI.CSSGrouping.prototype.get isStartingStyle): Added.
(WI.CSSGrouping.prototype.get prefix):
(WI.CSSGrouping.prototype.get isSupports): Deleted.
(WI.CSSGrouping.prototype.get isLayer): Deleted.
(WI.CSSGrouping.prototype.get isContainer): Deleted.
(WI.CSSGrouping.prototype.get isStyle): Deleted.
Remove unused methods and simplify the remainder.

* Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js:
(WI.DOMNodeStyles.prototype._markOverriddenProperties):
* Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.get isStartingStyle): Added.
Properties in `@starting-style` will always be overridden by anything else that matches, regardless of the cascade order/`!important`.

* Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._renderGroupings):
Don't try to make the grouping text editable if there isn't any (e.g. `@starting-style` vs `@media foo`).

* LayoutTests/inspector/css/getMatchedStylesForNode.html:
* LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt:
* LayoutTests/inspector/css/getMatchedStylesForNodeStartingStyleGrouping.html: Added.
* LayoutTests/inspector/css/getMatchedStylesForNodeStartingStyleGrouping-expected.txt: Added.
@dcrousso dcrousso requested a review from patrickangle as a code owner June 13, 2025 02:51
@dcrousso dcrousso self-assigned this Jun 13, 2025
@dcrousso dcrousso added the Web Inspector Bugs related to the WebKit Web Inspector. label Jun 13, 2025
@webkit-early-warning-system
Copy link
Collaborator

webkit-early-warning-system commented Jun 13, 2025 •
edited
Loading

EWS run on current version of this PR (hash d4e31f4)

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ✅ 🧪 wpe-wk2 ⏳ 🧪 win-tests
✅ 🧪 webkitperl ✅ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe
✅ 🧪 ios-wk2-wpt ✅ 🧪 mac-wk1 ✅ 🛠 wpe-cairo
✅ 🛠 🧪 jsc ✅ 🧪 api-ios ✅ 🧪 mac-wk2 ✅ 🛠 gtk
✅ 🛠 🧪 jsc-arm64 ✅ 🛠 vision ✅ 🧪 mac-AS-debug-wk2 ✅ 🧪 gtk-wk2
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🧪 api-gtk
✅ 🧪 vision-wk2 ✅ 🧪 mac-intel-wk2 ✅ 🛠 playstation
✅ 🛠 tv ✅ 🛠 mac-safer-cpp ✅ 🛠 jsc-armv7
✅ 🛠 tv-sim ❌ 🧪 jsc-armv7-tests
✅ 🛠 watch
✅ 🛠 watch-sim

@dcrousso dcrousso requested a review from burg June 13, 2025 02:55
AnujPanta1
AnujPanta1 reviewed Jun 30, 2025
View reviewed changes
LayoutTests/inspector/css/getMatchedStylesForNodeStartingStyleGrouping-expected.txt
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious how do you go about generating these expected files ? Are they manually written or is there a script to generate the expected output ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use Tools/Scripts/run-webkit-tests --reset-results path/to/test.html to (re)generate these expected result files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AnujPanta1 AnujPanta1 AnujPanta1 left review comments

@patrickangle patrickangle Awaiting requested review from patrickangle patrickangle is a code owner

@burg burg Awaiting requested review from burg

Assignees

@dcrousso dcrousso

Labels
Web Inspector Bugs related to the WebKit Web Inspector.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dcrousso @webkit-early-warning-system @AnujPanta1