Skip to content

feat(recorder): inspector-driven dark mode for codegen overlay#40865

Open
yury-s wants to merge 2 commits into
microsoft:mainfrom
yury-s:feat-recorder-dark-mode
Open

feat(recorder): inspector-driven dark mode for codegen overlay#40865
yury-s wants to merge 2 commits into
microsoft:mainfrom
yury-s:feat-recorder-dark-mode

Conversation

@yury-s
Copy link
Copy Markdown
Member

@yury-s yury-s commented May 15, 2026

Summary

  • Make the injected codegen overlay (toolbar, tooltip, action dialog, assert-text editor) follow the inspector's Theme setting (Auto / Dark mode / Light mode).
  • "Auto" is resolved by the inspector (prefers-color-scheme) and pushed as concrete dark-mode / light-mode to the page; the overlay just toggles :host(.dark-mode) on the glass pane.

@yury-s yury-s force-pushed the feat-recorder-dark-mode branch from f35093a to 2f69907 Compare May 15, 2026 21:13
@pavelfeldman
Copy link
Copy Markdown
Member

Is there an issue? (this one is closed)

Comment thread packages/playwright-core/src/server/recorder.ts Outdated
Comment thread packages/recorder/src/recorderTypes.d.ts Outdated
Comment thread packages/web/src/theme.ts Outdated
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

yury-s added 2 commits May 18, 2026 10:10
The injected codegen overlay (toolbar, tooltip, action dialog,
assert-text editor) now follows the inspector's Theme setting
(Auto / Dark mode / Light mode).

Plumbing: inspector setting -> `useDocumentTheme()` -> `backend.setOverlayTheme`
-> server `Recorder._overlayTheme` -> `UIState.overlayTheme` (polled)
-> injected `Highlight.setOverlayTheme`, which toggles `:host(.dark-mode)`
on the glass pane. "Auto" is resolved in the inspector against its own
`prefers-color-scheme`; the wire protocol only carries concrete
`dark-mode` / `light-mode`.

Builds on microsoft#40863.
- Fold `theme` into `OverlayState`; drop the separate `_overlayTheme`
  field and `UIState.overlayTheme`. The page->server overlay-state
  binding now sends only the page-owned `offsetX` and the server
  merges it into the full state, so the theme isn't clobbered.
- Combine `useDocumentTheme` into `useThemeSetting` so callers get
  `[theme, documentTheme, setTheme]` from a single hook.
@yury-s yury-s force-pushed the feat-recorder-dark-mode branch from 2f69907 to d5e71bd Compare May 18, 2026 19:53
@yury-s yury-s requested a review from pavelfeldman May 18, 2026 19:54
@github-actions
Copy link
Copy Markdown
Contributor

Test results for "MCP"

1 failed
❌ [webkit] › mcp/annotate.spec.ts:173 › user-initiated annotate downloads zip with feedback.md @mcp-macos-latest-webkit

6556 passed, 1027 skipped


Merge workflow run.

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "tests 1"

4 flaky ⚠️ [chromium-library] › library/video.spec.ts:647 › screencast › should capture full viewport `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/popup.spec.ts:261 › should not throw when click closes popup `@chromium-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/inspector/cli-codegen-3.spec.ts:224 › cli codegen › should generate frame locators (4) `@firefox-ubuntu-22.04-node20`
⚠️ [playwright-test] › ui-mode-trace.spec.ts:812 › should update state on subsequent run `@windows-latest-node20`

42001 passed, 850 skipped


Merge workflow run.

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