Skip to content

More VS Code Onboarding TPI Fixes #309654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eli-w-king merged 8 commits into from
Apr 14, 2026
+45 −2
Merged

More VS Code Onboarding TPI Fixes #309654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4fe2ba8
onboarding: include theme preview SVGs in build output
eli-w-king Apr 13, 2026
1c425f7
onboarding: trigger chat setup after sign-in to resolve entitlements
eli-w-king Apr 13, 2026
84c57e3
onboarding: add Extension Marketplace keybinding tip to extensions step
eli-w-king Apr 13, 2026
973d605
Merge branch 'main' into eli/exp-ob-revised-2
eli-w-king Apr 13, 2026
c6b7d69
onboarding: screenreader accessibility fixes
eli-w-king Apr 13, 2026
5d89aa1
Merge branch 'main' into eli/exp-ob-revised-2
eli-w-king Apr 13, 2026
31c311d
Merge branch 'main' into eli/exp-ob-revised-2
eli-w-king Apr 14, 2026
4f49dbf
onboarding: add SVG resources to esbuild pipeline
eli-w-king Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build/gulpfile.vscode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const vscodeResourceIncludes = [

// Welcome
'out-build/vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.{svg,png}',
'out-build/vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg',
Comment on lines 98 to +100
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this glob fixes the legacy bundle-vscode/minify-vscode pipeline, but the esbuild pipeline (build/next/index.ts bundle) has its own curated resource lists (desktopResourcePatterns, etc.) and currently does not include vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg. If useEsbuildTranspile is enabled for packaging, these SVGs will still be missing. Please mirror this addition in build/next/index.ts so both build pipelines include the onboarding theme preview SVGs.

Copilot uses AI. Check for mistakes.

// Sessions
'out-build/vs/sessions/contrib/chat/browser/media/*.svg',
Expand Down
1 change: 1 addition & 0 deletions build/gulpfile.vscode.web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const vscodeWebResourceIncludes = [

// Welcome
'out-build/vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.{svg,png}',
'out-build/vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg',
Comment on lines 75 to +77
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This include only affects the legacy optimize.bundleTask path. The vscode-web* gulp tasks in this file run the esbuild bundler (build/next/index.ts bundle), which uses its own webResourcePatterns list and currently does not include vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg, so the SVGs will still be missing from web build outputs when using the esbuild pipeline. Please also add the corresponding resource pattern(s) in build/next/index.ts (web + server-web, and likely desktop as well) so both build pipelines ship these SVGs.

Copilot uses AI. Check for mistakes.

// Extensions
'out-build/vs/workbench/contrib/extensions/browser/media/{theme-icon.png,language-icon.svg}',
Expand Down
3 changes: 3 additions & 0 deletions build/next/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@ const desktopResourcePatterns = [
// Media - images
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.svg',
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.png',
'vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg',
'vs/workbench/contrib/extensions/browser/media/{theme-icon.png,language-icon.svg}',
'vs/workbench/services/extensionManagement/common/media/*.svg',
'vs/workbench/services/extensionManagement/common/media/*.png',
Expand Down Expand Up @@ -337,6 +338,7 @@ const serverWebResourcePatterns = [
// Media - images
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.svg',
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.png',
'vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg',
'vs/workbench/contrib/extensions/browser/media/*.svg',
'vs/workbench/contrib/extensions/browser/media/*.png',
'vs/workbench/services/extensionManagement/common/media/*.svg',
Expand All @@ -363,6 +365,7 @@ const webResourcePatterns = [
// Media - images
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.svg',
'vs/workbench/contrib/welcomeGettingStarted/common/media/**/*.png',
'vs/workbench/contrib/welcomeOnboarding/browser/media/*.svg',
'vs/workbench/contrib/extensions/browser/media/*.svg',
'vs/workbench/contrib/extensions/browser/media/*.png',
'vs/workbench/services/extensionManagement/common/media/*.svg',
Expand Down
42 changes: 40 additions & 2 deletions src/vs/workbench/contrib/welcomeOnboarding/browser/onboardingVariationA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ import { IQuickInputService } from '../../../../platform/quickinput/common/quick
import { IFileService } from '../../../../platform/files/common/files.js';
import { IPathService } from '../../../services/path/common/pathService.js';
import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
import { InstallChatEvent, InstallChatClassification } from '../../chat/browser/chatSetup/chatSetup.js';
import { InstallChatEvent, InstallChatClassification, ChatSetupStrategy } from '../../chat/browser/chatSetup/chatSetup.js';
import { ICommandService } from '../../../../platform/commands/common/commands.js';
import { IAccessibilityService } from '../../../../platform/accessibility/common/accessibility.js';
import {
OnboardingStepId,
ONBOARDING_STEPS,
Expand Down Expand Up @@ -135,6 +137,8 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
@IFileService private readonly fileService: IFileService,
@IPathService private readonly pathService: IPathService,
@ITelemetryService private readonly telemetryService: ITelemetryService,
@ICommandService private readonly commandService: ICommandService,
@IAccessibilityService private readonly accessibilityService: IAccessibilityService,
) {
super();

Expand Down Expand Up @@ -365,6 +369,8 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
this._renderAgentSessionsSubtitle(this.subtitleEl);
} else if (stepId === OnboardingStepId.Personalize) {
this._renderPersonalizeSubtitle(this.subtitleEl);
} else if (stepId === OnboardingStepId.Extensions) {
this._renderExtensionsSubtitle(this.subtitleEl);
} else {
this.subtitleEl.textContent = getOnboardingStepSubtitle(stepId);
}
Expand Down Expand Up @@ -561,6 +567,11 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
if (account) {
this._userSignedIn = true;
this.telemetryService.publicLog2<InstallChatEvent, InstallChatClassification>('commandCenter.chatInstall', { installResult: 'installed', installDuration: watch.elapsed(), signUpErrorCode: undefined, provider });
// Run chat setup in the background (sign-up, extension install, entitlement resolution)
this.commandService.executeCommand('workbench.action.chat.triggerSetup', undefined, {
disableChatViewReveal: true,
setupStrategy: ChatSetupStrategy.DefaultSetup,
});
this._nextStep();
}
} catch (error) {
Expand Down Expand Up @@ -592,6 +603,10 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
if (account) {
this._userSignedIn = true;
this.telemetryService.publicLog2<InstallChatEvent, InstallChatClassification>('commandCenter.chatInstall', { installResult: 'installed', installDuration: watch.elapsed(), signUpErrorCode: undefined, provider });
this.commandService.executeCommand('workbench.action.chat.triggerSetup', undefined, {
disableChatViewReveal: true,
setupStrategy: ChatSetupStrategy.DefaultSetup,
});
this._nextStep();
}
} catch (error) {
Expand Down Expand Up @@ -743,6 +758,7 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
}
pill.classList.add('selected');
pill.setAttribute('aria-checked', 'true');
this.accessibilityService.alert(localize('onboarding.keymap.selected.alert', "{0} keyboard mapping selected", keymap.label));
}));
}
const selectedKeymapIndex = keymapOptions.findIndex(k => k.id === this.selectedKeymapId);
Expand All @@ -765,6 +781,20 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
);
}

private _renderExtensionsSubtitle(container: HTMLElement): void {
clearNode(container);
const modifier = isMacintosh ? 'Cmd' : 'Ctrl';
container.append(
localize('onboarding.extensions.subtitle.prefix', "Install extensions to enhance your workflow. Press "),
this._createKbd(localize({ key: 'onboarding.extensions.subtitle.modifier', comment: ['Keyboard modifier key'] }, "{0}", modifier)),
'+',
this._createKbd(localize('onboarding.extensions.subtitle.shift', "Shift")),
'+',
this._createKbd(localize('onboarding.extensions.subtitle.x', "X")),
localize('onboarding.extensions.subtitle.suffix', " to browse the Extension Marketplace."),
);
}

private _createThemeCard(parent: HTMLElement, theme: IOnboardingThemeOption, allCards: HTMLElement[]): void {
const card = this._registerStepFocusable(append(parent, $('div.onboarding-a-theme-card')));
allCards.push(card);
Expand Down Expand Up @@ -795,6 +825,7 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
}
card.classList.add('selected');
card.setAttribute('aria-checked', 'true');
this.accessibilityService.alert(localize('onboarding.theme.selected.alert', "{0} theme selected", theme.label));
}));

this.stepDisposables.add(addDisposableListener(card, EventType.KEY_DOWN, (e: KeyboardEvent) => {
Expand Down Expand Up @@ -841,6 +872,7 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
const installBtn = this._registerStepFocusable(append(row, $<HTMLButtonElement>('button.onboarding-a-ext-install')));
installBtn.type = 'button';
installBtn.textContent = localize('onboarding.ext.install', "Install");
installBtn.setAttribute('aria-label', localize('onboarding.ext.install.aria', "Install {0}", ext.name));

this.stepDisposables.add(addDisposableListener(installBtn, EventType.CLICK, () => {
this._logAction('installExtension', undefined, ext.id);
Expand All @@ -850,6 +882,8 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
() => {
installBtn.textContent = localize('onboarding.ext.installed', "Installed");
installBtn.classList.add('installed');
installBtn.setAttribute('aria-label', localize('onboarding.ext.installed.aria', "{0} installed", ext.name));
this.accessibilityService.alert(localize('onboarding.ext.installed.alert', "{0} has been installed", ext.name));
},
() => {
installBtn.textContent = localize('onboarding.ext.install', "Install");
Expand Down Expand Up @@ -1068,6 +1102,7 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
c.setAttribute('aria-checked', c.dataset.id === option.id ? 'true' : 'false');
}
this._applyAiPreference(option.id);
this.accessibilityService.alert(localize('onboarding.aiPref.selected.alert', "{0} selected", option.label));
}));
}
const selectedAiIndex = ONBOARDING_AI_PREFERENCE_OPTIONS.findIndex(o => o.id === this.selectedAiMode);
Expand Down Expand Up @@ -1148,7 +1183,10 @@ export class OnboardingVariationA extends Disposable implements IOnboardingServi
}

private _createFeatureCard(parent: HTMLElement, icon: ThemeIcon, title: string, description?: string): HTMLElement {
const card = append(parent, $('div.onboarding-a-feature-card'));
const card = this._registerStepFocusable(append(parent, $('div.onboarding-a-feature-card')));
card.setAttribute('tabindex', '0');
card.setAttribute('role', 'group');
card.setAttribute('aria-label', title);
const iconCol = append(card, $('div.onboarding-a-feature-icon'));
iconCol.appendChild(renderIcon(icon));
const textCol = append(card, $('div.onboarding-a-feature-text'));
Expand Down
Loading