Adopt Component Explorer for webview fixtures by hediet · Pull Request #9048 · microsoft/vscode-pull-request-github

Henning Dieterichs (hediet) · 2026-10-09T16:39:46Z

Stack

Depends on #9047. This PR targets hediet/webview-preparation, not main, so its review diff contains Component Explorer adoption and the small responsive-width seam required by its same-document fixtures. Merge the preparation first, then retarget this PR to main.

Summary

Add Component Explorer for the existing React webviews using the Webpack plugin and pinned prerelease Explorer packages.

Keep tooling and dependencies at the repository root, with npm commands and VS Code launch/task/MCP integration.
Add 149 fixtures covering full views and individual components, including independently editable theme variants, mocked host responses, deterministic timestamps, and local assets.
Render in the same document rather than creating an iframe per fixture. Scope production styles with CSS @scope, use fixture-width container queries, and contain fixed overlays within each preview.
Add scrollable overview previews to exercise fixture-local sticky headers.
Capture and validate screenshots in CI, preserve artifacts, and publish eligible upstream runs to the screenshot service using GitHub OIDC.

Validation and known blockers

npm run lint and npm run hygiene passed before committing.
The exact Explorer-only index snapshot rendered all 149 fixtures; every PNG matched its manifest SHA-256 hash.
12 fixtures in that snapshot report diagnostics from deliberately excluded product fixes: avatar keys, quote-reply listener cleanup, controlled textarea change handling, and pending stack actions after unmount. The screenshot CI gate is intentionally strict and will fail until those separate fixes land. They are not bundled into this PR.
The full local checkout, including those separate fixes, rendered all 149 fixtures without diagnostics and passed 77 runtime tests. Those results are not presented as validation of this PR in isolation.
Browser checks covered dropdown keyboard selection/focus, independent theme variants, fixture-local sticky scrolling, and complete cleanup. Repeated same-document fixture switches measured about 49-50 ms versus 168-187 ms with per-fixture iframes, with no new resource loads.
After merging updated preparation and adapting fixtures to the upstream sidebar/mergeability APIs, npm run explorer:check passes in a fresh owning worktree. The old local Octokit mismatch is resolved by dependency restoration.
package-lock.json is intentionally unchanged. Use npm install --no-save; npm ci will require a separate lockfile update to accommodate the added development dependencies.
Live OIDC screenshot publication has not yet been verified.

CI repair update

Main conflicts are resolved and the updated preparation dependency is incorporated. The exact updated Explorer branch still captures all 149 fixtures with valid hashes and 12 diagnostics from fixes now owned by #9049. Merge #9050, then #9047, then #9049 before landing this adoption. The Azure npm-ci failure still needs a separate lockfile update; no CI gate was weakened.

Responsive viewport ownership

This PR owns useMaxViewportWidth, its overview/sidebar call sites, and the viewport regression tests. Production uses the real window width; fixtures provide their individual preview widths. These changes were moved out of #9047 to keep host/context preparation focused. The transfer preserves the entire Explorer source tree byte-for-byte; explorer:check, lint, and hygiene pass.

Add root Webpack tooling, deterministic themed fixtures, scoped same-document rendering, local scroll viewports, and screenshot validation and publication. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot · 2026-10-09T16:44:12Z

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Install dependencies

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

Copilot

🟡 Changes recommended

The new root dependencies are absent from the lockfile, causing the standard npm ci validation path to fail.

1 open finding

Dependency additions missing from lockfile break npm ci · New

What changed in this PR

Adopts Component Explorer for deterministic webview fixtures, local development, and screenshot validation.

Changes:

Adds 149 themed component and full-view fixtures.
Adds Explorer build, serving, MCP, and editor integration.
Adds screenshot capture, artifact retention, and OIDC publication workflow.

File	Description
`webviews/fixtures/theme.css`	Styles fixture roots.
`webviews/fixtures/styles.d.ts`	Types inline CSS imports.
`webviews/fixtures/fixtureUtils.tsx`	Implements fixture rendering and mocks.
`webviews/fixtures/data.ts`	Provides deterministic fixture data.
`webviews/editorWebview/overview.fixture.tsx`	Adds overview fixtures.
`webviews/createPullRequestViewNew/app.fixture.tsx`	Adds create-PR fixtures.
`webviews/components/timeline.fixture.tsx`	Adds timeline fixtures.
`webviews/components/sidebar.fixture.tsx`	Adds sidebar fixtures.
`webviews/components/pullRequestStack.fixture.tsx`	Adds stack fixtures.
`webviews/components/merge.fixture.tsx`	Adds merge fixtures.
`webviews/components/header.fixture.tsx`	Adds header fixtures.
`webviews/components/dropdown.fixture.tsx`	Adds dropdown fixtures.
`webviews/components/commitVerification.fixture.tsx`	Adds signature fixtures.
`webviews/components/comment.fixture.tsx`	Adds comment fixtures.
`webviews/common/label.fixture.tsx`	Adds label fixtures.
`webviews/activityBarView/overview.fixture.tsx`	Adds Activity Bar fixtures.
`webpack.config.js`	Makes webview configuration reusable.
`webpack.config.explorer.mjs`	Configures Explorer bundling.
`tsconfig.explorer.json`	Configures fixture type-checking.
`tsconfig.base.json`	Excludes fixtures from production builds.
`scripts/component-explorer-serve.mjs`	Starts the Explorer server.
`scripts/component-explorer-build.mjs`	Builds Explorer assets.
`README.md`	Documents Explorer workflows.
`package.json`	Adds scripts and dependencies.
`eslint.config.mjs`	Configures fixture linting.
`component-explorer.json`	Configures Explorer sessions and server.
`build/filters.js`	Updates hygiene exclusions.
`.vscodeignore`	Excludes Explorer artifacts.
`.vscode/tasks.json`	Adds the Explorer server task.
`.vscode/mcp.json`	Adds Explorer MCP integration.
`.vscode/launch.json`	Adds browser launch configuration.
`.gitignore`	Ignores generated artifacts.
`.github/workflows/webview-screenshots.yml`	Adds screenshot CI and publication.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+		"@vscode/component-explorer": "0.2.1-161",
+		"@vscode/component-explorer-cli": "0.2.1-163",
+		"@vscode/component-explorer-webpack-plugin": "0.3.1-153",


Adapt sidebar preview fixtures and mocked mergeability replies to current main APIs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot · 2026-10-09T17:07:52Z

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Install dependencies

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

Copilot

🟡 Changes recommended

Root dependencies break the standard npm ci pipeline, and the new screenshot workflow is currently guaranteed to fail its diagnostics gate.

4 open findings

🧠 Review effort: Balanced

+          const manifest = JSON.parse(readFileSync(join(directory, 'manifest.json')));
+          assert(manifest.fixtures.length > 0, 'No fixtures were captured');
+          for (const fixture of manifest.fixtures) {
+            assert(!fixture.hasError, `${fixture.fixtureId}: ${JSON.stringify(fixture.events)}`);


+    env:
+      SCREENSHOT_SERVICE_URL: https://hediet-screenshots.azurewebsites.net
+    steps:
+      - uses: actions/download-artifact@v4


+			const themeController = applyTheme(root, theme);
+			applyExtensionColors(root, theme);


Copilot · 2026-10-09T17:13:36Z

One or more custom setup steps configured for this repository failed during this Copilot code review run:

Install dependencies

Setup steps run before each review. If the review above is missing context, or no review was posted at all, the failing step above may be the cause. See the workflow run for failure details, fix your setup steps configuration, and re-request a review.

Note

You can configure setup steps for Copilot code review separately from Copilot cloud agent with a copilot-code-review.yml file. Read the docs for details.

Copilot

🟡 Changes recommended

Root dependencies currently break npm-ci validation, and the privileged publication workflow uses a mutable action reference.

5 open findings

🧠 Review effort: Balanced

+		root.style.setProperty(`--vscode-${color.id.replace('.', '-')}`,
+			value.startsWith('#') ? value : `var(--vscode-${value.replace('.', '-')})`);


Merge the preparation scope reduction while retaining the exact viewport hook, consumers, and tests here. The Explorer tree is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Adopt Component Explorer for webview fixtures

31ea5db

Add root Webpack tooling, deterministic themed fixtures, scoped same-document rendering, local scroll viewports, and screenshot validation and publication. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI balanced review requested due to automatic review settings October 9, 2026 16:39

Henning Dieterichs (hediet) mentioned this pull request Oct 9, 2026

Refactor webview contexts for explicit host ownership #9047

Open

Copilot started reviewing on behalf of Henning Dieterichs (hediet) October 9, 2026 16:40 View session

Copilot AI reviewed Oct 9, 2026

View reviewed changes

Comment thread package.json

Comment on lines +4353 to +4355

"@vscode/component-explorer": "0.2.1-161",

"@vscode/component-explorer-cli": "0.2.1-163",

"@vscode/component-explorer-webpack-plugin": "0.3.1-153",

Henning Dieterichs (hediet) mentioned this pull request Oct 9, 2026

Fix webview comment and stack action lifecycle #9049

Open

Merge updated preparation into Component Explorer

9816482

Adapt sidebar preview fixtures and mocked mergeability replies to current main APIs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI balanced review requested due to automatic review settings October 9, 2026 17:01

Copilot started reviewing on behalf of Henning Dieterichs (hediet) October 9, 2026 17:02 View session

Update Explorer stack after extracting reply cleanup

a12cc13

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI reviewed Oct 9, 2026

View reviewed changes

Copilot AI balanced review requested due to automatic review settings October 9, 2026 17:08

Copilot started reviewing on behalf of Henning Dieterichs (hediet) October 9, 2026 17:08 View session

Copilot AI reviewed Oct 9, 2026

View reviewed changes

Comment thread webviews/fixtures/fixtureUtils.tsx

Comment on lines +51 to +52

root.style.setProperty(`--vscode-${color.id.replace('.', '-')}`,

value.startsWith('#') ? value : `var(--vscode-${value.replace('.', '-')})`);

Own responsive viewport adaptation in Explorer adoption

de974dd

Merge the preparation scope reduction while retaining the exact viewport hook, consumers, and tests here. The Explorer tree is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Navigation Menu

Repository navigation

Adopt Component Explorer for webview fixtures - #9048

Adopt Component Explorer for webview fixtures#9048
Henning Dieterichs (hediet) wants to merge 4 commits into
hediet/webview-preparationfrom
hediet/component-explorer-webviews

Henning Dieterichs (hediet) commented Oct 9, 2026 •

edited

Loading

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const themeController = applyTheme(root, theme);
		applyExtensionColors(root, theme);

		root.style.setProperty(`--vscode-${color.id.replace('.', '-')}`,
		value.startsWith('#') ? value : `var(--vscode-${value.replace('.', '-')})`);

Conversation

Henning Dieterichs (hediet) commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stack

Summary

Validation and known blockers

CI repair update

Responsive viewport ownership

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI commented Oct 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Henning Dieterichs (hediet) commented Oct 9, 2026 •

edited

Loading