feat: enable editing @supports at-rules in the Styles pane - #133
Merged
Dango-2021 merged 1 commit intoJul 14, 2026
Merged
Conversation
Allow double-clicking a rendered @supports condition in the Elements Styles sidebar to edit it, mirroring the existing @media and @container query editing flow. - Add CSS.setSupportsText command to the CDP protocol definitions (.pdl / .json) and the checked-in generated files (protocol.d.ts, protocol-proxy-api.d.ts, protocol-mapping.d.ts and, crucially, InspectorBackendCommands.js so the invoke_ method is registered at runtime) - Add CSSModel.setSupportsText() following setContainerQueryText - Dispatch @supports edits in _editingMediaCommitted by CSSQuery type (CSSContainerQuery / CSSSupports / CSSMedia) Ported from ChromeDevTools/devtools-frontend@bec8c59.
Dango-2021
self-requested a review
July 14, 2026 12:17
Dango-2021
approved these changes
Jul 14, 2026
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
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
@supportscondition in the Elements Styles sidebar to edit it, mirroring the existing@mediaand@containerquery editing flow.CSS.setSupportsTextCDP command across the protocol definitions and the checked-in generated files, and wire it through the SDK and the Styles panel.@supports" change (feat: add @supports at-rule support in the Styles pane #131); this is the second step that makes those at-rules editable.Changes
browser_protocol.pdl/browser_protocol.json): addsetSupportsTextcommand returningCSSSupports.protocol.d.ts,protocol-proxy-api.d.ts,protocol-mapping.d.ts,InspectorBackendCommands.js): add the request/response types,invoke_setSupportsText, the command mapping, and — importantly — the runtime command registration soinvoke_setSupportsTextexists at runtime.CSSModel.ts): addsetSupportsText()followingsetContainerQueryText().StylesSidebarPane.ts): make_editingMediaCommittedasync and dispatch edits byCSSQuerytype (CSSContainerQuery/CSSSupports/CSSMedia).Ported from ChromeDevTools/devtools-frontend@bec8c59.
Test plan
setContainerQueryTextandsetSupportsTextoccurrence counts match.browser_protocol.jsonparses as valid JSON.tsctype-check passes (exit 0) for both thesdkandelementsmodules via their generated tsconfigs.@supportscondition in the Styles sidebar and confirm the edit is applied (requires a backend engine that supportsCSS.setSupportsText).