feat: add CSS cascade layers support to Styles pane - #134
Draft
shangguan2024 wants to merge 1 commit into
Draft
Conversation
Display matched CSS rules grouped by cascade layer and provide a CSS Layers tree view with navigation from layer separators. Backport notes: - Protocol definitions and generated bindings are based on ChromeDevTools/devtools-frontend@1ab363b4 (CSSLayer, CSSLayerData, CSSRule.layers and CSS.getLayersForNode). - SDK, Styles pane grouping, LayersWidget, assets and e2e coverage are based on ChromeDevTools/devtools-frontend@52f5be82. - Anonymous and implicit layer naming follows ChromeDevTools/devtools-frontend@e573a564. - The feature is enabled by default, matching the launch change in ChromeDevTools/devtools-frontend@58e3685c. This is a manual backport rather than a cherry-pick: adapt ToolbarToggle and TreeOutline calls to the older APIs in this fork, retain the existing @supports extensions and Lynx customizations, and update the checked-in protocol bindings without unrelated generator churn.
Contributor
Author
|
@Dango-2021 PTAL. |
shangguan2024
marked this pull request as draft
August 28, 2026 08:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
CSSRule.layers,CSSLayerData, andCSS.getLayersForNodeBackport notes
This is a manual backport adapted to the older APIs and existing Lynx customizations in this repository:
The backport retains the existing
@supportsextensions and Lynx-specific code.ToolbarToggleandTreeOutlinecalls are adapted to this fork's older APIs. Anonymous layer grouping uses stylesheet ranges or stable object IDs so distinct sibling anonymous layers are not merged.Backend dependency
The inspected backend must populate
CSSRule.layersand implementCSS.getLayersForNode. Without those protocol capabilities, the frontend cannot display the complete layer grouping and tree.Verification