From 334bac71fe4a57e56edffc36b9b459c89452464a Mon Sep 17 00:00:00 2001 From: Roomote Date: Sat, 22 Aug 2026 13:00:44 +0000 Subject: [PATCH 1/3] fix(webview): preserve contrast in themed content --- .../chat/CommandPatternSelector.tsx | 17 ++++--- .../src/components/chat/ContextMenu.tsx | 12 ++--- .../ThemeSensitiveStatus.visual.fixture.tsx | 43 ++++++++++++++++ .../__tests__/ThemeSensitiveStatus.visual.tsx | 41 +++++++++++++++ .../chat/checkpoints/CheckpointSaved.tsx | 13 ++--- .../src/components/common/CodeBlock.tsx | 12 +++-- ...RenderedContentContrast.visual.fixture.tsx | 50 +++++++++++++++++++ .../RenderedContentContrast.visual.tsx | 30 +++++++++++ .../history/__tests__/HistoryView.visual.tsx | 27 ++++++++++ .../components/MarketplaceInstallModal.tsx | 11 ++-- .../components/MarketplaceItemCard.tsx | 2 +- webview-ui/src/components/mcp/McpToolRow.tsx | 17 ++----- .../mcp/__tests__/McpToolRow.spec.tsx | 20 +++----- .../src/components/welcome/WelcomeLanding.tsx | 45 +++++++++++++++++ .../welcome/WelcomeViewProvider.tsx | 32 ++---------- .../__tests__/WelcomeViewProvider.visual.tsx | 31 ++++++++++++ 16 files changed, 323 insertions(+), 80 deletions(-) create mode 100644 webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx create mode 100644 webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx create mode 100644 webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx create mode 100644 webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx create mode 100644 webview-ui/src/components/history/__tests__/HistoryView.visual.tsx create mode 100644 webview-ui/src/components/welcome/WelcomeLanding.tsx create mode 100644 webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx diff --git a/webview-ui/src/components/chat/CommandPatternSelector.tsx b/webview-ui/src/components/chat/CommandPatternSelector.tsx index dc9e517dc7..ca19c6edd0 100644 --- a/webview-ui/src/components/chat/CommandPatternSelector.tsx +++ b/webview-ui/src/components/chat/CommandPatternSelector.tsx @@ -71,7 +71,7 @@ export const CommandPatternSelector: React.FC = ({ {t("chat:commandExecution.manageCommands")} @@ -79,7 +79,7 @@ export const CommandPatternSelector: React.FC = ({ @@ -135,12 +135,14 @@ export const CommandPatternSelector: React.FC = ({ )}> + + +
+ +
+ + + ) +} diff --git a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx index 26033739d5..5a77a6c111 100644 --- a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx +++ b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx @@ -13,7 +13,7 @@ import { Button } from "@src/components/ui" import ApiOptions from "../settings/ApiOptions" import { Tab, TabContent } from "../common/Tab" -import RooHero from "./RooHero" +import { WelcomeLanding } from "./WelcomeLanding" const DEFAULT_WELCOME_API_CONFIGURATION: ProviderSettings = { apiProvider: "openrouter", @@ -94,32 +94,10 @@ const WelcomeViewProvider = () => { if (!showProviderSetup) { return ( - - - -

{t("welcome:landing.greeting")}

- -
-

- -

-
- -
- -
- -
- -
- - + vscode.postMessage({ type: "importSettings" })} + /> ) } diff --git a/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx new file mode 100644 index 0000000000..93305a6f0f --- /dev/null +++ b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx @@ -0,0 +1,31 @@ +import React from "react" + +import { expect, test } from "../../../../playwright/coverage-fixture" +import { AppProviders } from "../../../../playwright/AppProviders" +import { expectContrast } from "../../../../playwright/contrast" +import { applyVisualTheme, visualThemes } from "../../../../playwright/themes" +import { WelcomeLanding } from "../WelcomeLanding" + +for (const theme of visualThemes) { + test(`renders the full welcome screen in the VS Code ${theme.name} theme`, async ({ mount, page }) => { + await applyVisualTheme(page, theme) + const component = await mount( + +
+ undefined} onImportSettings={() => undefined} /> +
+ , + ) + + const screen = component.locator(".bg-vscode-editor-background").first() + const heading = component.getByRole("heading", { level: 2 }) + await expect(heading).toBeVisible() + await expectContrast(heading, { background: screen, label: `${theme.name} welcome heading` }) + await expectContrast(component.getByRole("button", { name: /provider/i }).first(), { + background: component.getByRole("button", { name: /provider/i }).first(), + label: `${theme.name} welcome action`, + }) + + await expect(component).toHaveScreenshot(`welcome-screen-${theme.name}.png`) + }) +} From 8e52cc2b8fd69bca9ba2b14d26f06d8df155a378 Mon Sep 17 00:00:00 2001 From: Roomote Date: Sat, 22 Aug 2026 13:08:24 +0000 Subject: [PATCH 2/3] test(webview): add rendered theme baselines --- webview-ui/playwright/vscode-theme-base.css | 14 ++++++++++++++ .../@vscode/webview-ui-toolkit/react.tsx | 12 +++++++++--- .../ThemeSensitiveStatus.visual.fixture.tsx | 2 +- .../__screenshots__/rendered-content-dark.png | Bin 0 -> 18787 bytes .../rendered-content-high-contrast-light.png | Bin 0 -> 17728 bytes .../rendered-content-high-contrast.png | Bin 0 -> 16717 bytes .../__screenshots__/rendered-content-light.png | Bin 0 -> 18417 bytes .../__screenshots__/welcome-screen-dark.png | Bin 0 -> 18546 bytes .../welcome-screen-high-contrast-light.png | Bin 0 -> 17862 bytes .../welcome-screen-high-contrast.png | Bin 0 -> 16601 bytes .../__screenshots__/welcome-screen-light.png | Bin 0 -> 18254 bytes 11 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png create mode 100644 webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png create mode 100644 webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png create mode 100644 webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png create mode 100644 webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png create mode 100644 webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png create mode 100644 webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png create mode 100644 webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png diff --git a/webview-ui/playwright/vscode-theme-base.css b/webview-ui/playwright/vscode-theme-base.css index 5226acb1cf..9e949edd0a 100644 --- a/webview-ui/playwright/vscode-theme-base.css +++ b/webview-ui/playwright/vscode-theme-base.css @@ -17,6 +17,20 @@ body { padding: 16px; } +.vscode-text-field-mock { + box-sizing: border-box; + background: var(--vscode-input-background); + border: 1px solid var(--vscode-input-border, transparent); + color: var(--vscode-input-foreground); + font: inherit; + padding: 4px 6px; +} + +.vscode-text-field-mock::placeholder { + color: var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground)); + opacity: 1; +} + /* @vscode/webview-ui-toolkit/react renders VSCodeButton as a bare