Skip to content

feat: enable editing @supports at-rules in the Styles pane - #133

Merged
Dango-2021 merged 1 commit into
lynx-family:mainfrom
shangguan2024:feat/css-set-supports-text
Jul 14, 2026
Merged

feat: enable editing @supports at-rules in the Styles pane#133
Dango-2021 merged 1 commit into
lynx-family:mainfrom
shangguan2024:feat/css-set-supports-text

Conversation

@shangguan2024

@shangguan2024 shangguan2024 commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Summary

  • 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 the CSS.setSupportsText CDP command across the protocol definitions and the checked-in generated files, and wire it through the SDK and the Styles panel.
  • Builds on the earlier "display @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

  • Protocol (browser_protocol.pdl / browser_protocol.json): add setSupportsText command returning CSSSupports.
  • Generated (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 so invoke_setSupportsText exists at runtime.
  • SDK (CSSModel.ts): add setSupportsText() following setContainerQueryText().
  • Panel (StylesSidebarPane.ts): make _editingMediaCommitted async and dispatch edits by CSSQuery type (CSSContainerQuery / CSSSupports / CSSMedia).

Ported from ChromeDevTools/devtools-frontend@bec8c59.

Test plan

  • Balance check: per file, setContainerQueryText and setSupportsText occurrence counts match.
  • browser_protocol.json parses as valid JSON.
  • tsc type-check passes (exit 0) for both the sdk and elements modules via their generated tsconfigs.
  • Runtime smoke: double-click a @supports condition in the Styles sidebar and confirm the edit is applied (requires a backend engine that supports CSS.setSupportsText).

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
Dango-2021 self-requested a review July 14, 2026 12:17
@Dango-2021
Dango-2021 added this pull request to the merge queue Jul 14, 2026
Merged via the queue into lynx-family:main with commit 03cdb21 Jul 14, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants