@codingame/monaco-vscode-api 4.0.0 → 4.1.0

package/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.js

@@ -0,0 +1,1526 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import { $, addDisposableListener, clearNode, reset, append } from '../../../../base/browser/dom.js';
+import { renderFormattedText } from '../../../../base/browser/formattedTextRenderer.js';
+import { StandardKeyboardEvent } from '../../../../base/browser/keyboardEvent.js';
+import { Button } from '../../../../base/browser/ui/button/button.js';
+import { renderLabelWithIcons } from '../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
+import { Toggle } from '../../../../base/browser/ui/toggle/toggle.js';
+import { coalesce, equals, flatten } from '../../../../base/common/arrays.js';
+import { Throttler, Delayer } from '../../../../base/common/async.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+import { onUnexpectedError } from '../../../../base/common/errors.js';
+import { splitRecentLabel } from '../../../../base/common/labels.js';
+import { DisposableStore, toDisposable } from '../../../../base/common/lifecycle.js';
+import { parse } from '../../../../base/common/marshalling.js';
+import { matchesScheme, Schemas } from '../../../../base/common/network.js';
+import { isMacintosh } from '../../../../base/common/platform.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import { assertIsDefined } from '../../../../base/common/types.js';
+import { URI } from '../../../../base/common/uri.js';
+import { generateUuid } from '../../../../base/common/uuid.js';
+import './media/gettingStarted.css.js';
+import { ILanguageService } from '../../../../editor/common/languages/language.js';
+import { MarkdownRenderer } from '../../../../editor/browser/widget/markdownRenderer/browser/markdownRenderer.js';
+import { localizeWithPath } from '../../../../nls.js';
+import { IAccessibilityService } from '../../../../platform/accessibility/common/accessibility.js';
+import { ICommandService } from '../../../../platform/commands/common/commands.js';
+import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
+import { ContextKeyExpr, RawContextKey, IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
+import { IFileService } from '../../../../platform/files/common/files.js';
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
+import { ILabelService } from '../../../../platform/label/common/label.js';
+import { INotificationService } from '../../../../platform/notification/common/notification.js';
+import { Link } from '../../../../platform/opener/browser/link.js';
+import { IOpenerService } from '../../../../platform/opener/common/opener.js';
+import { IProductService } from '../../../../platform/product/common/productService.js';
+import { IQuickInputService } from '../../../../platform/quickinput/common/quickInput.js';
+import { WillSaveStateReason, IStorageService } from '../../../../platform/storage/common/storage.js';
+import { firstSessionDateStorageKey, ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
+import { getTelemetryLevel } from '../../../../platform/telemetry/common/telemetryUtils.js';
+import { defaultToggleStyles, defaultButtonStyles } from '../../../../platform/theme/browser/defaultStyles.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { UNKNOWN_EMPTY_WINDOW_WORKSPACE, IWorkspaceContextService } from '../../../../platform/workspace/common/workspace.js';
+import { isRecentFolder, isRecentWorkspace, IWorkspacesService } from '../../../../platform/workspaces/common/workspaces.js';
+import { OpenRecentAction } from '../../../browser/actions/windowActions.js';
+import { OpenFolderViaWorkspaceAction, OpenFileFolderAction, OpenFolderAction } from '../../../browser/actions/workspaceActions.js';
+import { EditorPane } from '../../../browser/parts/editor/editorPane.js';
+import { WorkbenchStateContext } from '../../../common/contextkeys.js';
+import { IWebviewService } from '../../webview/browser/webview.js';
+import './gettingStartedColors.js';
+import { GettingStartedDetailsRenderer } from './gettingStartedDetailsRenderer.js';
+import { gettingStartedUncheckedCodicon, gettingStartedCheckedCodicon } from './gettingStartedIcons.js';
+import { GettingStartedInput } from './gettingStartedInput.js';
+import { hiddenEntriesConfigurationKey, parseDescription, IWalkthroughsService } from './gettingStartedService.js';
+import { restoreWalkthroughsConfigurationKey } from './startupPage.js';
+import { startEntries } from '../common/gettingStartedContent.js';
+import { IEditorGroupsService } from '../../../services/editor/common/editorGroupsService.js';
+import { IExtensionService } from '../../../services/extensions/common/extensions.js';
+import { IHostService } from '../../../services/host/browser/host.js';
+import { ThemeSettings } from '../../../services/themes/common/workbenchThemeService.js';
+import { GettingStartedIndexList } from './gettingStartedList.js';
+import { IWorkbenchAssignmentService } from '../../../services/assignment/common/assignmentService.js';
+var GettingStartedPage_1;
+const SLIDE_TRANSITION_TIME_MS = 250;
+const configurationKey = 'workbench.startupEditor';
+const allWalkthroughsHiddenContext = ( new RawContextKey('allWalkthroughsHidden', false));
+const inWelcomeContext = ( new RawContextKey('inWelcome', false));
+const parsedStartEntries = ( startEntries.map((e, i) => ({
+    command: e.content.command,
+    description: e.description,
+    icon: { type: 'icon', icon: e.icon },
+    id: e.id,
+    order: i,
+    title: e.title,
+    when: ContextKeyExpr.deserialize(e.when) ?? ContextKeyExpr.true()
+})));
+const REDUCED_MOTION_KEY = 'workbench.welcomePage.preferReducedMotion';
+let GettingStartedPage = class GettingStartedPage extends EditorPane {
+    static { GettingStartedPage_1 = this; }
+    static { this.ID = 'gettingStartedPage'; }
+    constructor(group, commandService, productService, keybindingService, gettingStartedService, configurationService, telemetryService, languageService, fileService, openerService, themeService, storageService, extensionService, instantiationService, notificationService, groupsService, contextService, quickInputService, workspacesService, labelService, hostService, webviewService, workspaceContextService, accessibilityService, tasExperimentService) {
+        super(GettingStartedPage_1.ID, group, telemetryService, themeService, storageService);
+        this.commandService = commandService;
+        this.productService = productService;
+        this.keybindingService = keybindingService;
+        this.gettingStartedService = gettingStartedService;
+        this.configurationService = configurationService;
+        this.languageService = languageService;
+        this.fileService = fileService;
+        this.openerService = openerService;
+        this.storageService = storageService;
+        this.extensionService = extensionService;
+        this.instantiationService = instantiationService;
+        this.notificationService = notificationService;
+        this.groupsService = groupsService;
+        this.quickInputService = quickInputService;
+        this.workspacesService = workspacesService;
+        this.labelService = labelService;
+        this.hostService = hostService;
+        this.webviewService = webviewService;
+        this.workspaceContextService = workspaceContextService;
+        this.accessibilityService = accessibilityService;
+        this.tasExperimentService = tasExperimentService;
+        this.inProgressScroll = Promise.resolve();
+        this.dispatchListeners = ( new DisposableStore());
+        this.stepDisposables = ( new DisposableStore());
+        this.detailsPageDisposables = ( new DisposableStore());
+        this.mediaDisposables = ( new DisposableStore());
+        this.buildSlideThrottle = ( new Throttler());
+        this.hasScrolledToFirstCategory = false;
+        this.showFeaturedWalkthrough = true;
+        this.currentMediaComponent = undefined;
+        this.currentMediaType = undefined;
+        this.container = $('.gettingStartedContainer', {
+            role: 'document',
+            tabindex: 0,
+            'aria-label': ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'welcomeAriaLabel',
+                "Overview of how to get up to speed with your editor."
+            ))
+        });
+        this.stepMediaComponent = $('.getting-started-media');
+        this.stepMediaComponent.id = generateUuid();
+        this.categoriesSlideDisposables = this._register(( new DisposableStore()));
+        this.detailsRenderer = ( new GettingStartedDetailsRenderer(
+            this.fileService,
+            this.notificationService,
+            this.extensionService,
+            this.languageService
+        ));
+        this.contextService = this._register(contextService.createScoped(this.container));
+        inWelcomeContext.bindTo(this.contextService).set(true);
+        this.gettingStartedCategories = this.gettingStartedService.getWalkthroughs();
+        this._register(this.dispatchListeners);
+        this.buildSlideThrottle = ( new Throttler());
+        const rerender = () => {
+            this.gettingStartedCategories = this.gettingStartedService.getWalkthroughs();
+            if (this.currentWalkthrough) {
+                const existingSteps = ( this.currentWalkthrough.steps.map(step => step.id));
+                const newCategory = this.gettingStartedCategories.find(category => this.currentWalkthrough?.id === category.id);
+                if (newCategory) {
+                    const newSteps = ( newCategory.steps.map(step => step.id));
+                    if (!equals(newSteps, existingSteps)) {
+                        this.buildSlideThrottle.queue(() => this.buildCategoriesSlide());
+                    }
+                }
+            }
+            else {
+                this.buildSlideThrottle.queue(() => this.buildCategoriesSlide());
+            }
+        };
+        this._register(this.gettingStartedService.onDidAddWalkthrough(rerender));
+        this._register(this.gettingStartedService.onDidRemoveWalkthrough(rerender));
+        this.recentlyOpened = this.workspacesService.getRecentlyOpened();
+        this._register(workspacesService.onDidChangeRecentlyOpened(() => {
+            this.recentlyOpened = workspacesService.getRecentlyOpened();
+            rerender();
+        }));
+        this._register(this.gettingStartedService.onDidChangeWalkthrough(category => {
+            const ourCategory = this.gettingStartedCategories.find(c => c.id === category.id);
+            if (!ourCategory) {
+                return;
+            }
+            ourCategory.title = category.title;
+            ourCategory.description = category.description;
+            this.container.querySelectorAll(`[x-category-title-for="${category.id}"]`).forEach(step => step.innerText = ourCategory.title);
+            this.container.querySelectorAll(`[x-category-description-for="${category.id}"]`).forEach(step => step.innerText = ourCategory.description);
+        }));
+        this._register(this.gettingStartedService.onDidProgressStep(step => {
+            const category = this.gettingStartedCategories.find(category => category.id === step.category);
+            if (!category) {
+                throw Error('Could not find category with ID: ' + step.category);
+            }
+            const ourStep = category.steps.find(_step => _step.id === step.id);
+            if (!ourStep) {
+                throw Error('Could not find step with ID: ' + step.id);
+            }
+            const stats = this.getWalkthroughCompletionStats(category);
+            if (!ourStep.done && stats.stepsComplete === stats.stepsTotal - 1) {
+                this.hideCategory(category.id);
+            }
+            this._register(this.configurationService.onDidChangeConfiguration(e => {
+                if (e.affectsConfiguration(REDUCED_MOTION_KEY)) {
+                    this.container.classList.toggle('animatable', this.shouldAnimate());
+                }
+            }));
+            ourStep.done = step.done;
+            if (category.id === this.currentWalkthrough?.id) {
+                const badgeelements = assertIsDefined(this.window.document.querySelectorAll(`[data-done-step-id="${step.id}"]`));
+                badgeelements.forEach(badgeelement => {
+                    if (step.done) {
+                        badgeelement.setAttribute('aria-checked', 'true');
+                        badgeelement.parentElement?.setAttribute('aria-checked', 'true');
+                        badgeelement.classList.remove(...ThemeIcon.asClassNameArray(gettingStartedUncheckedCodicon));
+                        badgeelement.classList.add('complete', ...ThemeIcon.asClassNameArray(gettingStartedCheckedCodicon));
+                    }
+                    else {
+                        badgeelement.setAttribute('aria-checked', 'false');
+                        badgeelement.parentElement?.setAttribute('aria-checked', 'false');
+                        badgeelement.classList.remove('complete', ...ThemeIcon.asClassNameArray(gettingStartedCheckedCodicon));
+                        badgeelement.classList.add(...ThemeIcon.asClassNameArray(gettingStartedUncheckedCodicon));
+                    }
+                });
+            }
+            this.updateCategoryProgress();
+        }));
+        this._register(this.storageService.onWillSaveState((e) => {
+            if (e.reason !== WillSaveStateReason.SHUTDOWN) {
+                return;
+            }
+            if (this.workspaceContextService.getWorkspace().folders.length !== 0) {
+                return;
+            }
+            if (!this.editorInput || !this.currentWalkthrough || !this.editorInput.selectedCategory || !this.editorInput.selectedStep) {
+                return;
+            }
+            const restoreData = { folder: UNKNOWN_EMPTY_WINDOW_WORKSPACE.id, category: this.editorInput.selectedCategory, step: this.editorInput.selectedStep };
+            this.storageService.store(restoreWalkthroughsConfigurationKey, JSON.stringify(restoreData), 0 , 1 );
+        }));
+    }
+    shouldAnimate() {
+        if (this.configurationService.getValue(REDUCED_MOTION_KEY)) {
+            return false;
+        }
+        if (this.accessibilityService.isMotionReduced()) {
+            return false;
+        }
+        return true;
+    }
+    getWalkthroughCompletionStats(walkthrough) {
+        const activeSteps = walkthrough.steps.filter(s => this.contextService.contextMatchesRules(s.when));
+        return {
+            stepsComplete: activeSteps.filter(s => s.done).length,
+            stepsTotal: activeSteps.length,
+        };
+    }
+    async setInput(newInput, options, context, token) {
+        this.container.classList.remove('animatable');
+        this.editorInput = newInput;
+        await super.setInput(newInput, options, context, token);
+        await this.buildCategoriesSlide();
+        if (this.shouldAnimate()) {
+            setTimeout(() => this.container.classList.add('animatable'), 0);
+        }
+    }
+    async makeCategoryVisibleWhenAvailable(categoryID, stepId) {
+        this.scrollToCategory(categoryID, stepId);
+    }
+    registerDispatchListeners() {
+        this.dispatchListeners.clear();
+        this.container.querySelectorAll('[x-dispatch]').forEach(element => {
+            const dispatch = element.getAttribute('x-dispatch') ?? '';
+            let command, argument;
+            if (dispatch.startsWith('openLink:https')) {
+                [command, argument] = ['openLink', dispatch.replace('openLink:', '')];
+            }
+            else {
+                [command, argument] = dispatch.split(':');
+            }
+            if (command) {
+                this.dispatchListeners.add(addDisposableListener(element, 'click', (e) => {
+                    e.stopPropagation();
+                    this.runDispatchCommand(command, argument);
+                }));
+                this.dispatchListeners.add(addDisposableListener(element, 'keyup', (e) => {
+                    const keyboardEvent = ( new StandardKeyboardEvent(e));
+                    e.stopPropagation();
+                    switch (keyboardEvent.keyCode) {
+                        case 3 :
+                        case 10 :
+                            this.runDispatchCommand(command, argument);
+                            return;
+                    }
+                }));
+            }
+        });
+    }
+    async runDispatchCommand(command, argument) {
+        this.commandService.executeCommand('workbench.action.keepEditor');
+        this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command, argument, walkthroughId: this.currentWalkthrough?.id });
+        switch (command) {
+            case 'scrollPrev': {
+                this.scrollPrev();
+                break;
+            }
+            case 'skip': {
+                this.runSkip();
+                break;
+            }
+            case 'showMoreRecents': {
+                this.commandService.executeCommand(OpenRecentAction.ID);
+                break;
+            }
+            case 'seeAllWalkthroughs': {
+                await this.openWalkthroughSelector();
+                break;
+            }
+            case 'openFolder': {
+                if (this.contextService.contextMatchesRules(( ContextKeyExpr.and(( WorkbenchStateContext.isEqualTo('workspace')))))) {
+                    this.commandService.executeCommand(OpenFolderViaWorkspaceAction.ID);
+                }
+                else {
+                    this.commandService.executeCommand(isMacintosh ? 'workbench.action.files.openFileFolder' : 'workbench.action.files.openFolder');
+                }
+                break;
+            }
+            case 'selectCategory': {
+                this.scrollToCategory(argument);
+                this.gettingStartedService.markWalkthroughOpened(argument);
+                break;
+            }
+            case 'selectStartEntry': {
+                const selected = startEntries.find(e => e.id === argument);
+                if (selected) {
+                    this.runStepCommand(selected.content.command);
+                }
+                else {
+                    throw Error('could not find start entry with id: ' + argument);
+                }
+                break;
+            }
+            case 'hideCategory': {
+                this.hideCategory(argument);
+                break;
+            }
+            case 'selectTask': {
+                this.selectStep(argument);
+                break;
+            }
+            case 'toggleStepCompletion': {
+                this.toggleStepCompletion(argument);
+                break;
+            }
+            case 'allDone': {
+                this.markAllStepsComplete();
+                break;
+            }
+            case 'nextSection': {
+                const next = this.currentWalkthrough?.next;
+                if (next) {
+                    this.scrollToCategory(next);
+                }
+                else {
+                    console.error('Error scrolling to next section of', this.currentWalkthrough);
+                }
+                break;
+            }
+            case 'hideVideos': {
+                this.hideVideos();
+                break;
+            }
+            case 'openLink': {
+                this.openerService.open(argument);
+                break;
+            }
+            default: {
+                console.error('Dispatch to', command, argument, 'not defined');
+                break;
+            }
+        }
+    }
+    hideCategory(categoryId) {
+        const selectedCategory = this.gettingStartedCategories.find(category => category.id === categoryId);
+        if (!selectedCategory) {
+            throw Error('Could not find category with ID ' + categoryId);
+        }
+        this.setHiddenCategories([...this.getHiddenCategories().add(categoryId)]);
+        this.gettingStartedList?.rerender();
+    }
+    hideVideos() {
+        this.setHiddenCategories([...this.getHiddenCategories().add('getting-started-videos')]);
+        this.videoList?.setEntries(undefined);
+    }
+    markAllStepsComplete() {
+        if (this.currentWalkthrough) {
+            this.currentWalkthrough?.steps.forEach(step => {
+                if (!step.done) {
+                    this.gettingStartedService.progressStep(step.id);
+                }
+            });
+            this.hideCategory(this.currentWalkthrough?.id);
+            this.scrollPrev();
+        }
+        else {
+            throw Error('No walkthrough opened');
+        }
+    }
+    toggleStepCompletion(argument) {
+        const stepToggle = assertIsDefined(this.currentWalkthrough?.steps.find(step => step.id === argument));
+        if (stepToggle.done) {
+            this.gettingStartedService.deprogressStep(argument);
+        }
+        else {
+            this.gettingStartedService.progressStep(argument);
+        }
+    }
+    async openWalkthroughSelector() {
+        const selection = await this.quickInputService.pick(( this.gettingStartedCategories
+            .filter(c => this.contextService.contextMatchesRules(c.when))
+            .map(x => ({
+            id: x.id,
+            label: x.title,
+            detail: x.description,
+            description: x.source,
+        }))), { canPickMany: false, matchOnDescription: true, matchOnDetail: true, title: ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'pickWalkthroughs',
+            "Open Walkthrough..."
+        )) });
+        if (selection) {
+            this.runDispatchCommand('selectCategory', selection.id);
+        }
+    }
+    getHiddenCategories() {
+        return ( new Set(
+            JSON.parse(this.storageService.get(hiddenEntriesConfigurationKey, 0 , '[]'))
+        ));
+    }
+    setHiddenCategories(hidden) {
+        this.storageService.store(hiddenEntriesConfigurationKey, JSON.stringify(hidden), 0 , 0 );
+    }
+    async buildMediaComponent(stepId, forceRebuild = false) {
+        if (!this.currentWalkthrough) {
+            throw Error('no walkthrough selected');
+        }
+        const stepToExpand = assertIsDefined(this.currentWalkthrough.steps.find(step => step.id === stepId));
+        if (!forceRebuild && this.currentMediaComponent === stepId) {
+            return;
+        }
+        this.currentMediaComponent = stepId;
+        this.stepDisposables.clear();
+        this.stepDisposables.add({
+            dispose: () => {
+                this.currentMediaComponent = undefined;
+            }
+        });
+        if (this.currentMediaType !== stepToExpand.media.type) {
+            this.currentMediaType = stepToExpand.media.type;
+            this.mediaDisposables.add(toDisposable(() => {
+                this.currentMediaType = undefined;
+            }));
+            clearNode(this.stepMediaComponent);
+            if (stepToExpand.media.type === 'svg') {
+                this.webview = this.mediaDisposables.add(this.webviewService.createWebviewElement({ title: undefined, options: { disableServiceWorker: true }, contentOptions: {}, extension: undefined }));
+                this.webview.mountTo(this.stepMediaComponent, this.window);
+            }
+            else if (stepToExpand.media.type === 'markdown') {
+                this.webview = this.mediaDisposables.add(this.webviewService.createWebviewElement({ options: {}, contentOptions: { localResourceRoots: [stepToExpand.media.root], allowScripts: true }, title: '', extension: undefined }));
+                this.webview.mountTo(this.stepMediaComponent, this.window);
+            }
+        }
+        if (stepToExpand.media.type === 'image') {
+            this.stepsContent.classList.add('image');
+            this.stepsContent.classList.remove('markdown');
+            const media = stepToExpand.media;
+            const mediaElement = $('img');
+            clearNode(this.stepMediaComponent);
+            this.stepMediaComponent.appendChild(mediaElement);
+            mediaElement.setAttribute('alt', media.altText);
+            this.updateMediaSourceForColorMode(mediaElement, media.path);
+            this.stepDisposables.add(addDisposableListener(this.stepMediaComponent, 'click', () => {
+                const hrefs = flatten(( stepToExpand.description.map(lt => ( lt.nodes.filter((node) => typeof node !== 'string').map(node => node.href)))));
+                if (hrefs.length === 1) {
+                    const href = hrefs[0];
+                    if (href.startsWith('http')) {
+                        this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'runStepAction', argument: href, walkthroughId: this.currentWalkthrough?.id });
+                        this.openerService.open(href);
+                    }
+                }
+            }));
+            this.stepDisposables.add(this.themeService.onDidColorThemeChange(() => this.updateMediaSourceForColorMode(mediaElement, media.path)));
+        }
+        else if (stepToExpand.media.type === 'svg') {
+            this.stepsContent.classList.add('image');
+            this.stepsContent.classList.remove('markdown');
+            const media = stepToExpand.media;
+            this.webview.setHtml(await this.detailsRenderer.renderSVG(media.path));
+            let isDisposed = false;
+            this.stepDisposables.add(toDisposable(() => { isDisposed = true; }));
+            this.stepDisposables.add(this.themeService.onDidColorThemeChange(async () => {
+                const body = await this.detailsRenderer.renderSVG(media.path);
+                if (!isDisposed) {
+                    this.webview.setHtml(body);
+                }
+            }));
+            this.stepDisposables.add(addDisposableListener(this.stepMediaComponent, 'click', () => {
+                const hrefs = flatten(( stepToExpand.description.map(lt => ( lt.nodes.filter((node) => typeof node !== 'string').map(node => node.href)))));
+                if (hrefs.length === 1) {
+                    const href = hrefs[0];
+                    if (href.startsWith('http')) {
+                        this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'runStepAction', argument: href, walkthroughId: this.currentWalkthrough?.id });
+                        this.openerService.open(href);
+                    }
+                }
+            }));
+            this.stepDisposables.add(this.webview.onDidClickLink(link => {
+                if (matchesScheme(link, Schemas.https) || matchesScheme(link, Schemas.http) || (matchesScheme(link, Schemas.command))) {
+                    this.openerService.open(link, { allowCommands: true });
+                }
+            }));
+        }
+        else if (stepToExpand.media.type === 'markdown') {
+            this.stepsContent.classList.remove('image');
+            this.stepsContent.classList.add('markdown');
+            const media = stepToExpand.media;
+            const rawHTML = await this.detailsRenderer.renderMarkdown(media.path, media.base);
+            this.webview.setHtml(rawHTML);
+            const serializedContextKeyExprs = rawHTML.match(/checked-on=\"([^'][^"]*)\"/g)?.map(attr => attr.slice('checked-on="'.length, -1)
+                .replace(/'/g, '\'')
+                .replace(/&/g, '&'));
+            const postTrueKeysMessage = () => {
+                const enabledContextKeys = serializedContextKeyExprs?.filter(expr => this.contextService.contextMatchesRules(ContextKeyExpr.deserialize(expr)));
+                if (enabledContextKeys) {
+                    this.webview.postMessage({
+                        enabledContextKeys
+                    });
+                }
+            };
+            if (serializedContextKeyExprs) {
+                const contextKeyExprs = coalesce(( serializedContextKeyExprs.map(expr => ContextKeyExpr.deserialize(expr))));
+                const watchingKeys = ( new Set(flatten(( contextKeyExprs.map(expr => ( expr.keys()))))));
+                this.stepDisposables.add(this.contextService.onDidChangeContext(e => {
+                    if (e.affectsSome(watchingKeys)) {
+                        postTrueKeysMessage();
+                    }
+                }));
+            }
+            let isDisposed = false;
+            this.stepDisposables.add(toDisposable(() => { isDisposed = true; }));
+            this.stepDisposables.add(this.webview.onDidClickLink(link => {
+                if (matchesScheme(link, Schemas.https) || matchesScheme(link, Schemas.http) || (matchesScheme(link, Schemas.command))) {
+                    const toSide = link.startsWith('command:toSide:');
+                    if (toSide) {
+                        link = link.replace('command:toSide:', 'command:');
+                        this.focusSideEditorGroup();
+                    }
+                    this.openerService.open(link, { allowCommands: true, openToSide: toSide });
+                }
+            }));
+            if (rawHTML.indexOf('<code>') >= 0) {
+                this.stepDisposables.add(this.themeService.onDidColorThemeChange(async () => {
+                    const body = await this.detailsRenderer.renderMarkdown(media.path, media.base);
+                    if (!isDisposed) {
+                        this.webview.setHtml(body);
+                        postTrueKeysMessage();
+                    }
+                }));
+            }
+            const layoutDelayer = ( new Delayer(50));
+            this.layoutMarkdown = () => {
+                layoutDelayer.trigger(() => {
+                    this.webview.postMessage({ layoutMeNow: true });
+                });
+            };
+            this.stepDisposables.add(layoutDelayer);
+            this.stepDisposables.add({ dispose: () => this.layoutMarkdown = undefined });
+            postTrueKeysMessage();
+            this.stepDisposables.add(this.webview.onMessage(e => {
+                const message = e.message;
+                if (message.startsWith('command:')) {
+                    this.openerService.open(message, { allowCommands: true });
+                }
+                else if (message.startsWith('setTheme:')) {
+                    this.configurationService.updateValue(ThemeSettings.COLOR_THEME, message.slice('setTheme:'.length), 2 );
+                }
+                else {
+                    console.error('Unexpected message', message);
+                }
+            }));
+        }
+    }
+    async selectStepLoose(id) {
+        if (id.startsWith(`${this.editorInput.selectedCategory}#`)) {
+            this.selectStep(id);
+        }
+        else {
+            const toSelect = this.editorInput.selectedCategory + '#' + id;
+            this.selectStep(toSelect);
+        }
+    }
+    async selectStep(id, delayFocus = true) {
+        if (id) {
+            let stepElement = this.container.querySelector(`[data-step-id="${id}"]`);
+            if (!stepElement) {
+                stepElement = this.container.querySelector(`[data-step-id]`);
+                if (!stepElement) {
+                    return;
+                }
+                id = assertIsDefined(stepElement.getAttribute('data-step-id'));
+            }
+            stepElement.parentElement?.querySelectorAll('.expanded').forEach(node => {
+                if (node.getAttribute('data-step-id') !== id) {
+                    node.classList.remove('expanded');
+                    node.setAttribute('aria-expanded', 'false');
+                }
+            });
+            setTimeout(() => stepElement.focus(), delayFocus && this.shouldAnimate() ? SLIDE_TRANSITION_TIME_MS : 0);
+            this.editorInput.selectedStep = id;
+            stepElement.classList.add('expanded');
+            stepElement.setAttribute('aria-expanded', 'true');
+            this.buildMediaComponent(id, true);
+            this.gettingStartedService.progressByEvent('stepSelected:' + id);
+        }
+        else {
+            this.editorInput.selectedStep = undefined;
+        }
+        this.detailsPageScrollbar?.scanDomNode();
+        this.detailsScrollbar?.scanDomNode();
+    }
+    updateMediaSourceForColorMode(element, sources) {
+        const themeType = this.themeService.getColorTheme().type;
+        const src = ( sources[themeType].toString(true)).replace(/ /g, '%20');
+        element.srcset = src.toLowerCase().endsWith('.svg') ? src : (src + ' 1.5x');
+    }
+    createEditor(parent) {
+        if (this.detailsPageScrollbar) {
+            this.detailsPageScrollbar.dispose();
+        }
+        if (this.categoriesPageScrollbar) {
+            this.categoriesPageScrollbar.dispose();
+        }
+        this.categoriesSlide = $('.gettingStartedSlideCategories.gettingStartedSlide');
+        const prevButton = $('button.prev-button.button-link', { 'x-dispatch': 'scrollPrev' }, $('span.scroll-button.codicon.codicon-chevron-left'), $('span.moreText', {}, ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'welcome',
+            "Welcome"
+        ))));
+        this.stepsSlide = $('.gettingStartedSlideDetails.gettingStartedSlide', {}, prevButton);
+        this.stepsContent = $('.gettingStartedDetailsContent', {});
+        this.detailsPageScrollbar = this._register(( new DomScrollableElement(this.stepsContent, { className: 'full-height-scrollable' })));
+        this.categoriesPageScrollbar = this._register(( new DomScrollableElement(
+            this.categoriesSlide,
+            { className: 'full-height-scrollable categoriesScrollbar' }
+        )));
+        this.stepsSlide.appendChild(this.detailsPageScrollbar.getDomNode());
+        const gettingStartedPage = $('.gettingStarted', {}, this.categoriesPageScrollbar.getDomNode(), this.stepsSlide);
+        this.container.appendChild(gettingStartedPage);
+        this.categoriesPageScrollbar.scanDomNode();
+        this.detailsPageScrollbar.scanDomNode();
+        parent.appendChild(this.container);
+    }
+    async buildCategoriesSlide() {
+        this.categoriesSlideDisposables.clear();
+        const showOnStartupCheckbox = ( new Toggle({
+            icon: Codicon.check,
+            actionClassName: 'getting-started-checkbox',
+            isChecked: this.configurationService.getValue(configurationKey) === 'welcomePage',
+            title: ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'checkboxTitle',
+                "When checked, this page will be shown on startup."
+            )),
+            ...defaultToggleStyles
+        }));
+        showOnStartupCheckbox.domNode.id = 'showOnStartup';
+        const showOnStartupLabel = $('label.caption', { for: 'showOnStartup' }, ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'welcomePage.showOnStartup',
+            "Show welcome page on startup"
+        )));
+        const onShowOnStartupChanged = () => {
+            if (showOnStartupCheckbox.checked) {
+                this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'showOnStartupChecked', argument: undefined, walkthroughId: this.currentWalkthrough?.id });
+                this.configurationService.updateValue(configurationKey, 'welcomePage');
+            }
+            else {
+                this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'showOnStartupUnchecked', argument: undefined, walkthroughId: this.currentWalkthrough?.id });
+                this.configurationService.updateValue(configurationKey, 'none');
+            }
+        };
+        this.categoriesSlideDisposables.add(showOnStartupCheckbox);
+        this.categoriesSlideDisposables.add(showOnStartupCheckbox.onChange(() => {
+            onShowOnStartupChanged();
+        }));
+        this.categoriesSlideDisposables.add(addDisposableListener(showOnStartupLabel, 'click', () => {
+            showOnStartupCheckbox.checked = !showOnStartupCheckbox.checked;
+            onShowOnStartupChanged();
+        }));
+        const header = $('.header', {}, $('h1.product-name.caption', {}, this.productService.nameLong), $('p.subtitle.description', {}, ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            { key: 'gettingStarted.editingEvolved', comment: ['Shown as subtitle on the Welcome page.'] },
+            "Editing evolved"
+        ))));
+        const leftColumn = $('.categories-column.categories-column-left', {});
+        const rightColumn = $('.categories-column.categories-column-right', {});
+        const startList = this.buildStartList();
+        const recentList = this.buildRecentlyOpenedList();
+        const showVideoTutorials = await Promise.race([
+            this.tasExperimentService?.getTreatment('gettingStarted.showVideoTutorials'),
+            ( new Promise(resolve => setTimeout(() => resolve(false), 200)))
+        ]);
+        let videoList;
+        if (showVideoTutorials === true) {
+            this.showFeaturedWalkthrough = false;
+            videoList = this.buildVideosList();
+            const layoutVideos = () => {
+                if (videoList?.itemCount > 0) {
+                    reset(rightColumn, videoList?.getDomElement(), gettingStartedList.getDomElement());
+                }
+                else {
+                    reset(rightColumn, gettingStartedList.getDomElement());
+                }
+                setTimeout(() => this.categoriesPageScrollbar?.scanDomNode(), 50);
+                layoutRecentList();
+            };
+            videoList.onDidChange(layoutVideos);
+        }
+        const gettingStartedList = this.buildGettingStartedWalkthroughsList();
+        const footer = $('.footer', {}, $('p.showOnStartup', {}, showOnStartupCheckbox.domNode, showOnStartupLabel));
+        const layoutLists = () => {
+            if (gettingStartedList.itemCount) {
+                this.container.classList.remove('noWalkthroughs');
+                if (videoList?.itemCount > 0) {
+                    this.container.classList.remove('noVideos');
+                    reset(rightColumn, videoList?.getDomElement(), gettingStartedList.getDomElement());
+                }
+                else {
+                    this.container.classList.add('noVideos');
+                    reset(rightColumn, gettingStartedList.getDomElement());
+                }
+            }
+            else {
+                this.container.classList.add('noWalkthroughs');
+                if (videoList?.itemCount > 0) {
+                    this.container.classList.remove('noVideos');
+                    reset(rightColumn, videoList?.getDomElement());
+                }
+                else {
+                    this.container.classList.add('noVideos');
+                    reset(rightColumn);
+                }
+            }
+            setTimeout(() => this.categoriesPageScrollbar?.scanDomNode(), 50);
+            layoutRecentList();
+        };
+        const layoutRecentList = () => {
+            if (this.container.classList.contains('noWalkthroughs') && this.container.classList.contains('noVideos')) {
+                recentList.setLimit(10);
+                reset(leftColumn, startList.getDomElement());
+                reset(rightColumn, recentList.getDomElement());
+            }
+            else {
+                recentList.setLimit(5);
+                reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
+            }
+        };
+        gettingStartedList.onDidChange(layoutLists);
+        layoutLists();
+        reset(this.categoriesSlide, $('.gettingStartedCategoriesContainer', {}, header, leftColumn, rightColumn, footer));
+        this.categoriesPageScrollbar?.scanDomNode();
+        this.updateCategoryProgress();
+        this.registerDispatchListeners();
+        if (this.editorInput.selectedCategory) {
+            this.currentWalkthrough = this.gettingStartedCategories.find(category => category.id === this.editorInput.selectedCategory);
+            if (!this.currentWalkthrough) {
+                this.gettingStartedCategories = this.gettingStartedService.getWalkthroughs();
+                this.currentWalkthrough = this.gettingStartedCategories.find(category => category.id === this.editorInput.selectedCategory);
+                if (this.currentWalkthrough) {
+                    this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                    this.setSlide('details');
+                    return;
+                }
+            }
+            else {
+                this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                this.setSlide('details');
+                return;
+            }
+        }
+        const someStepsComplete = ( this.gettingStartedCategories.some(category => category.steps.find(s => s.done)));
+        if (this.editorInput.showTelemetryNotice && this.productService.openToWelcomeMainPage) {
+            const telemetryNotice = $('p.telemetry-notice');
+            this.buildTelemetryFooter(telemetryNotice);
+            footer.appendChild(telemetryNotice);
+        }
+        else if (!this.productService.openToWelcomeMainPage && !someStepsComplete && !this.hasScrolledToFirstCategory && this.showFeaturedWalkthrough) {
+            const firstSessionDateString = this.storageService.get(firstSessionDateStorageKey, -1 ) || ( new Date()).toUTCString();
+            const daysSinceFirstSession = ((+( new Date())) - (+( new Date(firstSessionDateString)))) / 1000 / 60 / 60 / 24;
+            const fistContentBehaviour = daysSinceFirstSession < 1 ? 'openToFirstCategory' : 'index';
+            if (fistContentBehaviour === 'openToFirstCategory') {
+                const first = this.gettingStartedCategories.filter(c => !c.when || this.contextService.contextMatchesRules(c.when))[0];
+                if (first) {
+                    this.hasScrolledToFirstCategory = true;
+                    this.currentWalkthrough = first;
+                    this.editorInput.selectedCategory = this.currentWalkthrough?.id;
+                    this.buildCategorySlide(this.editorInput.selectedCategory, undefined);
+                    this.setSlide('details');
+                    return;
+                }
+            }
+        }
+        this.setSlide('categories');
+    }
+    buildRecentlyOpenedList() {
+        const renderRecent = (recent) => {
+            let fullPath;
+            let windowOpenable;
+            if (isRecentFolder(recent)) {
+                windowOpenable = { folderUri: recent.folderUri };
+                fullPath = recent.label || this.labelService.getWorkspaceLabel(recent.folderUri, { verbose: 2  });
+            }
+            else {
+                fullPath = recent.label || this.labelService.getWorkspaceLabel(recent.workspace, { verbose: 2  });
+                windowOpenable = { workspaceUri: recent.workspace.configPath };
+            }
+            const { name, parentPath } = splitRecentLabel(fullPath);
+            const li = $('li');
+            const link = $('button.button-link');
+            link.innerText = name;
+            link.title = fullPath;
+            link.setAttribute('aria-label', ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'welcomePage.openFolderWithPath',
+                "Open folder {0} with path {1}",
+                name,
+                parentPath
+            )));
+            link.addEventListener('click', e => {
+                this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'openRecent', argument: undefined, walkthroughId: this.currentWalkthrough?.id });
+                this.hostService.openWindow([windowOpenable], {
+                    forceNewWindow: e.ctrlKey || e.metaKey,
+                    remoteAuthority: recent.remoteAuthority || null
+                });
+                e.preventDefault();
+                e.stopPropagation();
+            });
+            li.appendChild(link);
+            const span = $('span');
+            span.classList.add('path');
+            span.classList.add('detail');
+            span.innerText = parentPath;
+            span.title = fullPath;
+            li.appendChild(span);
+            return li;
+        };
+        if (this.recentlyOpenedList) {
+            this.recentlyOpenedList.dispose();
+        }
+        const recentlyOpenedList = this.recentlyOpenedList = ( new GettingStartedIndexList({
+            title: ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'recent',
+                "Recent"
+            )),
+            klass: 'recently-opened',
+            limit: 5,
+            empty: $('.empty-recent', {}, ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'noRecents',
+                "You have no recent folders,"
+            )), $('button.button-link', { 'x-dispatch': 'openFolder' }, ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'openFolder',
+                "open a folder"
+            ))), ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'toStart',
+                "to start."
+            ))),
+            more: $('.more', {}, $('button.button-link', {
+                'x-dispatch': 'showMoreRecents',
+                title: ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'show more recents',
+                    "Show All Recent Folders {0}",
+                    this.getKeybindingLabel(OpenRecentAction.ID)
+                ))
+            }, ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'showAll',
+                "More..."
+            )))),
+            renderElement: renderRecent,
+            contextService: this.contextService
+        }));
+        recentlyOpenedList.onDidChange(() => this.registerDispatchListeners());
+        this.recentlyOpened.then(({ workspaces }) => {
+            const workspacesWithID = ( workspaces
+                .filter(recent => !this.workspaceContextService.isCurrentWorkspace(isRecentWorkspace(recent) ? recent.workspace : recent.folderUri))
+                .map(
+                recent => ({ ...recent, id: isRecentWorkspace(recent) ? recent.workspace.id : ( recent.folderUri.toString()) })
+            ));
+            const updateEntries = () => {
+                recentlyOpenedList.setEntries(workspacesWithID);
+            };
+            updateEntries();
+            recentlyOpenedList.register(this.labelService.onDidChangeFormatters(() => updateEntries()));
+        }).catch(onUnexpectedError);
+        return recentlyOpenedList;
+    }
+    buildStartList() {
+        const renderStartEntry = (entry) => $('li', {}, $('button.button-link', {
+            'x-dispatch': 'selectStartEntry:' + entry.id,
+            title: entry.description + ' ' + this.getKeybindingLabel(entry.command),
+        }, this.iconWidgetFor(entry), $('span', {}, entry.title)));
+        if (this.startList) {
+            this.startList.dispose();
+        }
+        const startList = this.startList = ( new GettingStartedIndexList({
+            title: ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'start',
+                "Start"
+            )),
+            klass: 'start-container',
+            limit: 10,
+            renderElement: renderStartEntry,
+            rankElement: e => -e.order,
+            contextService: this.contextService
+        }));
+        startList.setEntries(parsedStartEntries);
+        startList.onDidChange(() => this.registerDispatchListeners());
+        return startList;
+    }
+    buildGettingStartedWalkthroughsList() {
+        const renderGetttingStaredWalkthrough = (category) => {
+            const renderNewBadge = (category.newItems || category.newEntry) && !category.isFeatured;
+            const newBadge = $('.new-badge', {});
+            if (category.newEntry) {
+                reset(newBadge, $('.new-category', {}, ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'new',
+                    "New"
+                ))));
+            }
+            else if (category.newItems) {
+                reset(newBadge, $('.new-items', {}, ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    { key: 'newItems', comment: ['Shown when a list of items has changed based on an update from a remote source'] },
+                    "Updated"
+                ))));
+            }
+            const featuredBadge = $('.featured-badge', {});
+            const descriptionContent = $('.description-content', {});
+            if (category.isFeatured && this.showFeaturedWalkthrough) {
+                reset(featuredBadge, $('.featured', {}, $('span.featured-icon.codicon.codicon-star-full')));
+                reset(descriptionContent, ...renderLabelWithIcons(category.description));
+            }
+            const titleContent = $('h3.category-title.max-lines-3', { 'x-category-title-for': category.id });
+            reset(titleContent, ...renderLabelWithIcons(category.title));
+            return $('button.getting-started-category' + (category.isFeatured && this.showFeaturedWalkthrough ? '.featured' : ''), {
+                'x-dispatch': 'selectCategory:' + category.id,
+                'title': category.description
+            }, featuredBadge, $('.main-content', {}, this.iconWidgetFor(category), titleContent, renderNewBadge ? newBadge : $('.no-badge'), $('a.codicon.codicon-close.hide-category-button', {
+                'tabindex': 0,
+                'x-dispatch': 'hideCategory:' + category.id,
+                'title': ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'close',
+                    "Hide"
+                )),
+                'role': 'button',
+                'aria-label': ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'closeAriaLabel',
+                    "Hide"
+                )),
+            })), descriptionContent, $('.category-progress', { 'x-data-category-id': category.id, }, $('.progress-bar-outer', { 'role': 'progressbar' }, $('.progress-bar-inner'))));
+        };
+        if (this.gettingStartedList) {
+            this.gettingStartedList.dispose();
+        }
+        const rankWalkthrough = (e) => {
+            let rank = e.order;
+            if (e.isFeatured) {
+                rank += 7;
+            }
+            if (e.newEntry) {
+                rank += 3;
+            }
+            if (e.newItems) {
+                rank += 2;
+            }
+            if (e.recencyBonus) {
+                rank += 4 * e.recencyBonus;
+            }
+            if (( this.getHiddenCategories().has(e.id))) {
+                rank = null;
+            }
+            return rank;
+        };
+        const gettingStartedList = this.gettingStartedList = ( new GettingStartedIndexList({
+            title: ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'walkthroughs',
+                "Walkthroughs"
+            )),
+            klass: 'getting-started',
+            limit: 5,
+            footer: $('span.button-link.see-all-walkthroughs', { 'x-dispatch': 'seeAllWalkthroughs', 'tabindex': 0 }, ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'showAll',
+                "More..."
+            ))),
+            renderElement: renderGetttingStaredWalkthrough,
+            rankElement: rankWalkthrough,
+            contextService: this.contextService,
+        }));
+        gettingStartedList.onDidChange(() => {
+            const hidden = this.getHiddenCategories();
+            const someWalkthroughsHidden = hidden.size || gettingStartedList.itemCount < this.gettingStartedCategories.filter(c => this.contextService.contextMatchesRules(c.when)).length;
+            this.container.classList.toggle('someWalkthroughsHidden', !!someWalkthroughsHidden);
+            this.registerDispatchListeners();
+            allWalkthroughsHiddenContext.bindTo(this.contextService).set(gettingStartedList.itemCount === 0);
+            this.updateCategoryProgress();
+        });
+        gettingStartedList.setEntries(this.gettingStartedCategories);
+        allWalkthroughsHiddenContext.bindTo(this.contextService).set(gettingStartedList.itemCount === 0);
+        return gettingStartedList;
+    }
+    buildVideosList() {
+        const renderFeaturedExtensions = (entry) => {
+            const featuredBadge = $('.featured-badge', {});
+            const descriptionContent = $('.description-content', {});
+            reset(featuredBadge, $('.featured', {}, $('span.featured-icon.codicon.codicon-star-full')));
+            reset(descriptionContent, ...renderLabelWithIcons(entry.description));
+            const titleContent = $('h3.category-title.max-lines-3', { 'x-category-title-for': entry.id });
+            reset(titleContent, ...renderLabelWithIcons(entry.title));
+            return $('button.getting-started-category' + '.featured', {
+                'x-dispatch': 'openLink:' + entry.command,
+                'title': entry.title
+            }, featuredBadge, $('.main-content', {}, this.iconWidgetFor(entry), titleContent, $('a.codicon.codicon-close.hide-category-button', {
+                'tabindex': 0,
+                'x-dispatch': 'hideVideos',
+                'title': ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'close',
+                    "Hide"
+                )),
+                'role': 'button',
+                'aria-label': ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'closeAriaLabel',
+                    "Hide"
+                )),
+            })), descriptionContent);
+        };
+        if (this.videoList) {
+            this.videoList.dispose();
+        }
+        const videoList = this.videoList = ( new GettingStartedIndexList({
+            title: ( localizeWithPath(
+                'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                'videos',
+                "Videos"
+            )),
+            klass: 'getting-started-videos',
+            limit: 1,
+            renderElement: renderFeaturedExtensions,
+            contextService: this.contextService,
+        }));
+        if (( this.getHiddenCategories().has('getting-started-videos'))) {
+            return videoList;
+        }
+        videoList.setEntries([{
+                id: 'getting-started-videos',
+                title: ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'videos-title',
+                    'Watch Getting Started Tutorials'
+                )),
+                description: ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'videos-description',
+                    'Learn VS Code\'s must-have features in short and practical videos'
+                )),
+                command: 'https://aka.ms/vscode-getting-started-tutorials',
+                order: 0,
+                icon: { type: 'icon', icon: Codicon.deviceCameraVideo },
+                when: ContextKeyExpr.true(),
+            }]);
+        videoList.onDidChange(() => this.registerDispatchListeners());
+        return videoList;
+    }
+    layout(size) {
+        this.detailsScrollbar?.scanDomNode();
+        this.categoriesPageScrollbar?.scanDomNode();
+        this.detailsPageScrollbar?.scanDomNode();
+        this.startList?.layout(size);
+        this.gettingStartedList?.layout(size);
+        this.recentlyOpenedList?.layout(size);
+        this.videoList?.layout(size);
+        if (this.editorInput?.selectedStep && this.currentMediaType) {
+            this.mediaDisposables.clear();
+            this.stepDisposables.clear();
+            this.buildMediaComponent(this.editorInput.selectedStep);
+        }
+        this.layoutMarkdown?.();
+        this.container.classList.toggle('height-constrained', size.height <= 600);
+        this.container.classList.toggle('width-constrained', size.width <= 400);
+        this.container.classList.toggle('width-semi-constrained', size.width <= 800);
+        this.categoriesPageScrollbar?.scanDomNode();
+        this.detailsPageScrollbar?.scanDomNode();
+        this.detailsScrollbar?.scanDomNode();
+    }
+    updateCategoryProgress() {
+        this.window.document.querySelectorAll('.category-progress').forEach(element => {
+            const categoryID = element.getAttribute('x-data-category-id');
+            const category = this.gettingStartedCategories.find(category => category.id === categoryID);
+            if (!category) {
+                throw Error('Could not find category with ID ' + categoryID);
+            }
+            const stats = this.getWalkthroughCompletionStats(category);
+            const bar = assertIsDefined(element.querySelector('.progress-bar-inner'));
+            bar.setAttribute('aria-valuemin', '0');
+            bar.setAttribute('aria-valuenow', '' + stats.stepsComplete);
+            bar.setAttribute('aria-valuemax', '' + stats.stepsTotal);
+            const progress = (stats.stepsComplete / stats.stepsTotal) * 100;
+            bar.style.width = `${progress}%`;
+            element.parentElement.classList.toggle('no-progress', stats.stepsComplete === 0);
+            if (stats.stepsTotal === stats.stepsComplete) {
+                bar.title = ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'gettingStarted.allStepsComplete',
+                    "All {0} steps complete!",
+                    stats.stepsComplete
+                ));
+            }
+            else {
+                bar.title = ( localizeWithPath(
+                    'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                    'gettingStarted.someStepsComplete',
+                    "{0} of {1} steps complete",
+                    stats.stepsComplete,
+                    stats.stepsTotal
+                ));
+            }
+        });
+    }
+    async scrollToCategory(categoryID, stepId) {
+        if (!( this.gettingStartedCategories.some(c => c.id === categoryID))) {
+            this.gettingStartedCategories = this.gettingStartedService.getWalkthroughs();
+        }
+        const ourCategory = this.gettingStartedCategories.find(c => c.id === categoryID);
+        if (!ourCategory) {
+            throw Error('Could not find category with ID: ' + categoryID);
+        }
+        this.inProgressScroll = this.inProgressScroll.then(async () => {
+            reset(this.stepsContent);
+            this.editorInput.selectedCategory = categoryID;
+            this.editorInput.selectedStep = stepId;
+            this.currentWalkthrough = ourCategory;
+            this.buildCategorySlide(categoryID, stepId);
+            this.setSlide('details');
+        });
+    }
+    iconWidgetFor(category) {
+        const widget = category.icon.type === 'icon' ? $(ThemeIcon.asCSSSelector(category.icon.icon)) : $('img.category-icon', { src: category.icon.path });
+        widget.classList.add('icon-widget');
+        return widget;
+    }
+    focusSideEditorGroup() {
+        const fullSize = this.groupsService.getPart(this.group).contentDimension;
+        if (!fullSize || fullSize.width <= 700) {
+            return;
+        }
+        if (this.groupsService.count === 1) {
+            const sideGroup = this.groupsService.addGroup(this.groupsService.groups[0], 3 );
+            this.groupsService.activateGroup(sideGroup);
+            const gettingStartedSize = Math.floor(fullSize.width / 2);
+            const gettingStartedGroup = this.groupsService.getGroups(1 ).find(group => (group.activeEditor instanceof GettingStartedInput));
+            this.groupsService.setSize(assertIsDefined(gettingStartedGroup), { width: gettingStartedSize, height: fullSize.height });
+        }
+        const nonGettingStartedGroup = this.groupsService.getGroups(1 ).find(group => !(group.activeEditor instanceof GettingStartedInput));
+        if (nonGettingStartedGroup) {
+            this.groupsService.activateGroup(nonGettingStartedGroup);
+            nonGettingStartedGroup.focus();
+        }
+    }
+    runStepCommand(href) {
+        const isCommand = href.startsWith('command:');
+        const toSide = href.startsWith('command:toSide:');
+        const command = href.replace(/command:(toSide:)?/, 'command:');
+        this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'runStepAction', argument: href, walkthroughId: this.currentWalkthrough?.id });
+        if (toSide) {
+            this.focusSideEditorGroup();
+        }
+        if (isCommand) {
+            const commandURI = ( URI.parse(command));
+            let args = [];
+            try {
+                args = parse(decodeURIComponent(commandURI.query));
+            }
+            catch {
+                try {
+                    args = parse(commandURI.query);
+                }
+                catch {
+                }
+            }
+            if (!Array.isArray(args)) {
+                args = [args];
+            }
+            if ((commandURI.path === ( OpenFileFolderAction.ID.toString()) ||
+                commandURI.path === ( OpenFolderAction.ID.toString())) &&
+                this.workspaceContextService.getWorkspace().folders.length === 0) {
+                const selectedStepIndex = this.currentWalkthrough?.steps.findIndex(step => step.id === this.editorInput.selectedStep);
+                if (selectedStepIndex !== undefined &&
+                    selectedStepIndex > -1 &&
+                    this.currentWalkthrough?.steps.slice(selectedStepIndex + 1).some(step => !step.done)) {
+                    const restoreData = { folder: UNKNOWN_EMPTY_WINDOW_WORKSPACE.id, category: this.editorInput.selectedCategory, step: this.editorInput.selectedStep };
+                    this.storageService.store(restoreWalkthroughsConfigurationKey, JSON.stringify(restoreData), 0 , 1 );
+                }
+            }
+            this.commandService.executeCommand(commandURI.path, ...args).then(result => {
+                const toOpen = result?.openFolder;
+                if (toOpen) {
+                    if (!URI.isUri(toOpen)) {
+                        console.warn('Warn: Running walkthrough command', href, 'yielded non-URI `openFolder` result', toOpen, '. It will be disregarded.');
+                        return;
+                    }
+                    const restoreData = { folder: ( toOpen.toString()), category: this.editorInput.selectedCategory, step: this.editorInput.selectedStep };
+                    this.storageService.store(restoreWalkthroughsConfigurationKey, JSON.stringify(restoreData), 0 , 1 );
+                    this.hostService.openWindow([{ folderUri: toOpen }]);
+                }
+            });
+        }
+        else {
+            this.openerService.open(command, { allowCommands: true });
+        }
+        if (!isCommand && (href.startsWith('https://') || href.startsWith('http://'))) {
+            this.gettingStartedService.progressByEvent('onLink:' + href);
+        }
+    }
+    buildMarkdownDescription(container, text) {
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+        for (const linkedText of text) {
+            if (linkedText.nodes.length === 1 && typeof linkedText.nodes[0] !== 'string') {
+                const node = linkedText.nodes[0];
+                const buttonContainer = append(container, $('.button-container'));
+                const button = ( new Button(
+                    buttonContainer,
+                    { title: node.title, supportIcons: true, ...defaultButtonStyles }
+                ));
+                const isCommand = node.href.startsWith('command:');
+                const command = node.href.replace(/command:(toSide:)?/, 'command:');
+                button.label = node.label;
+                button.onDidClick(e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.runStepCommand(node.href);
+                }, null, this.detailsPageDisposables);
+                if (isCommand) {
+                    const keybindingLabel = this.getKeybindingLabel(command);
+                    if (keybindingLabel) {
+                        container.appendChild($('span.shortcut-message', {}, ( localizeWithPath(
+                            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                            'gettingStarted.keyboardTip',
+                            'Tip: Use keyboard shortcut '
+                        )), $('span.keybinding', {}, keybindingLabel)));
+                    }
+                }
+                this.detailsPageDisposables.add(button);
+            }
+            else {
+                const p = append(container, $('p'));
+                for (const node of linkedText.nodes) {
+                    if (typeof node === 'string') {
+                        const labelWithIcon = renderLabelWithIcons(node);
+                        for (const element of labelWithIcon) {
+                            if (typeof element === 'string') {
+                                p.appendChild(renderFormattedText(element, { inline: true, renderCodeSegments: true }));
+                            }
+                            else {
+                                p.appendChild(element);
+                            }
+                        }
+                    }
+                    else {
+                        const link = this.instantiationService.createInstance(Link, p, node, { opener: (href) => this.runStepCommand(href) });
+                        this.detailsPageDisposables.add(link);
+                    }
+                }
+            }
+        }
+        return container;
+    }
+    clearInput() {
+        this.stepDisposables.clear();
+        super.clearInput();
+    }
+    buildCategorySlide(categoryID, selectedStep) {
+        if (this.detailsScrollbar) {
+            this.detailsScrollbar.dispose();
+        }
+        this.extensionService.whenInstalledExtensionsRegistered().then(() => {
+            this.extensionService.activateByEvent(`onWalkthrough:${categoryID.replace(/[^#]+#/, '')}`);
+        });
+        this.detailsPageDisposables.clear();
+        this.mediaDisposables.clear();
+        const category = this.gettingStartedCategories.find(category => category.id === categoryID);
+        if (!category) {
+            throw Error('could not find category with ID ' + categoryID);
+        }
+        const descriptionContainer = $('.category-description.description.max-lines-3', { 'x-category-description-for': category.id });
+        this.buildMarkdownDescription(descriptionContainer, parseDescription(category.description));
+        const categoryDescriptorComponent = $('.getting-started-category', {}, $('.category-description-container', {}, $('h2.category-title.max-lines-3', { 'x-category-title-for': category.id }, ...renderLabelWithIcons(category.title)), descriptionContainer));
+        const stepListContainer = $('.step-list-container');
+        this.detailsPageDisposables.add(addDisposableListener(stepListContainer, 'keydown', (e) => {
+            const event = ( new StandardKeyboardEvent(e));
+            const currentStepIndex = () => category.steps.findIndex(e => e.id === this.editorInput.selectedStep);
+            if (event.keyCode === 16 ) {
+                const toExpand = category.steps.filter((step, index) => index < currentStepIndex() && this.contextService.contextMatchesRules(step.when));
+                if (toExpand.length) {
+                    this.selectStep(toExpand[toExpand.length - 1].id, false);
+                }
+            }
+            if (event.keyCode === 18 ) {
+                const toExpand = category.steps.find((step, index) => index > currentStepIndex() && this.contextService.contextMatchesRules(step.when));
+                if (toExpand) {
+                    this.selectStep(toExpand.id, false);
+                }
+            }
+        }));
+        let renderedSteps = undefined;
+        const contextKeysToWatch = ( new Set(category.steps.flatMap(step => ( step.when.keys()))));
+        const buildStepList = () => {
+            category.steps.sort((a, b) => a.order - b.order);
+            const toRender = category.steps
+                .filter(step => this.contextService.contextMatchesRules(step.when));
+            if (equals(renderedSteps, toRender, (a, b) => a.id === b.id)) {
+                return;
+            }
+            renderedSteps = toRender;
+            reset(stepListContainer, ...( renderedSteps
+                .map(step => {
+                const codicon = $('.codicon' + (step.done ? '.complete' + ThemeIcon.asCSSSelector(gettingStartedCheckedCodicon) : ThemeIcon.asCSSSelector(gettingStartedUncheckedCodicon)), {
+                    'data-done-step-id': step.id,
+                    'x-dispatch': 'toggleStepCompletion:' + step.id,
+                    'role': 'checkbox',
+                    'tabindex': '0',
+                    'aria-checked': step.done ? 'true' : 'false'
+                });
+                const container = $('.step-description-container', { 'x-step-description-for': step.id });
+                this.buildMarkdownDescription(container, step.description);
+                const stepTitle = $('h3.step-title.max-lines-3', { 'x-step-title-for': step.id });
+                reset(stepTitle, ...renderLabelWithIcons(step.title));
+                const stepDescription = $('.step-container', {}, stepTitle, container);
+                if (step.media.type === 'image') {
+                    stepDescription.appendChild($('.image-description', { 'aria-label': ( localizeWithPath(
+                        'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+                        'imageShowing',
+                        "Image showing {0}",
+                        step.media.altText
+                    )) }));
+                }
+                return $('button.getting-started-step', {
+                    'x-dispatch': 'selectTask:' + step.id,
+                    'data-step-id': step.id,
+                    'aria-expanded': 'false',
+                    'aria-checked': step.done ? 'true' : 'false',
+                    'role': 'button',
+                }, codicon, stepDescription);
+            })));
+        };
+        buildStepList();
+        this.detailsPageDisposables.add(this.contextService.onDidChangeContext(e => {
+            if (e.affectsSome(contextKeysToWatch)) {
+                buildStepList();
+                this.registerDispatchListeners();
+                this.selectStep(this.editorInput.selectedStep, false);
+            }
+        }));
+        const showNextCategory = this.gettingStartedCategories.find(_category => _category.id === category.next);
+        const stepsContainer = $('.getting-started-detail-container', { 'role': 'list' }, stepListContainer, $('.done-next-container', {}, $('button.button-link.all-done', { 'x-dispatch': 'allDone' }, $('span.codicon.codicon-check-all'), ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'allDone',
+            "Mark Done"
+        ))), ...(showNextCategory
+            ? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'nextOne',
+            "Next Section"
+        )), $('span.codicon.codicon-arrow-right'))]
+            : [])));
+        this.detailsScrollbar = this._register(( new DomScrollableElement(stepsContainer, { className: 'steps-container' })));
+        const stepListComponent = this.detailsScrollbar.getDomNode();
+        const categoryFooter = $('.getting-started-footer');
+        if (this.editorInput.showTelemetryNotice && getTelemetryLevel(this.configurationService) !== 0  && this.productService.enableTelemetry) {
+            this.buildTelemetryFooter(categoryFooter);
+        }
+        reset(this.stepsContent, categoryDescriptorComponent, stepListComponent, this.stepMediaComponent, categoryFooter);
+        const toExpand = category.steps.find(step => this.contextService.contextMatchesRules(step.when) && !step.done) ?? category.steps[0];
+        this.selectStep(selectedStep ?? toExpand.id, !selectedStep);
+        this.detailsScrollbar.scanDomNode();
+        this.detailsPageScrollbar?.scanDomNode();
+        this.registerDispatchListeners();
+    }
+    buildTelemetryFooter(parent) {
+        const mdRenderer = this.instantiationService.createInstance(MarkdownRenderer, {});
+        const privacyStatementCopy = ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'privacy statement',
+            "privacy statement"
+        ));
+        const privacyStatementButton = `[${privacyStatementCopy}](command:workbench.action.openPrivacyStatementUrl)`;
+        const optOutCopy = ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            'optOut',
+            "opt out"
+        ));
+        const optOutButton = `[${optOutCopy}](command:settings.filterByTelemetry)`;
+        const text = ( localizeWithPath(
+            'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted',
+            { key: 'footer', comment: ['fist substitution is "vs code", second is "privacy statement", third is "opt out".'] },
+            "{0} collects usage data. Read our {1} and learn how to {2}.",
+            this.productService.nameShort,
+            privacyStatementButton,
+            optOutButton
+        ));
+        parent.append(mdRenderer.render({ value: text, isTrusted: true }).element);
+        mdRenderer.dispose();
+    }
+    getKeybindingLabel(command) {
+        command = command.replace(/^command:/, '');
+        const label = this.keybindingService.lookupKeybinding(command)?.getLabel();
+        if (!label) {
+            return '';
+        }
+        else {
+            return `(${label})`;
+        }
+    }
+    async scrollPrev() {
+        this.inProgressScroll = this.inProgressScroll.then(async () => {
+            this.currentWalkthrough = undefined;
+            this.editorInput.selectedCategory = undefined;
+            this.editorInput.selectedStep = undefined;
+            this.editorInput.showTelemetryNotice = false;
+            if (this.gettingStartedCategories.length !== this.gettingStartedList?.itemCount) {
+                this.buildCategoriesSlide();
+            }
+            this.selectStep(undefined);
+            this.setSlide('categories');
+            this.container.focus();
+        });
+    }
+    runSkip() {
+        this.commandService.executeCommand('workbench.action.closeActiveEditor');
+    }
+    escape() {
+        if (this.editorInput.selectedCategory) {
+            this.scrollPrev();
+        }
+        else {
+            this.runSkip();
+        }
+    }
+    setSlide(toEnable) {
+        const slideManager = assertIsDefined(this.container.querySelector('.gettingStarted'));
+        if (toEnable === 'categories') {
+            slideManager.classList.remove('showDetails');
+            slideManager.classList.add('showCategories');
+            this.container.querySelector('.prev-button.button-link').style.display = 'none';
+            this.container.querySelector('.gettingStartedSlideDetails').querySelectorAll('button').forEach(button => button.disabled = true);
+            this.container.querySelector('.gettingStartedSlideCategories').querySelectorAll('button').forEach(button => button.disabled = false);
+            this.container.querySelector('.gettingStartedSlideCategories').querySelectorAll('input').forEach(button => button.disabled = false);
+        }
+        else {
+            slideManager.classList.add('showDetails');
+            slideManager.classList.remove('showCategories');
+            this.container.querySelector('.prev-button.button-link').style.display = 'block';
+            this.container.querySelector('.gettingStartedSlideDetails').querySelectorAll('button').forEach(button => button.disabled = false);
+            this.container.querySelector('.gettingStartedSlideCategories').querySelectorAll('button').forEach(button => button.disabled = true);
+            this.container.querySelector('.gettingStartedSlideCategories').querySelectorAll('input').forEach(button => button.disabled = true);
+        }
+    }
+    focus() {
+        super.focus();
+        const active = this.container.ownerDocument.activeElement;
+        let parent = this.container.parentElement;
+        while (parent && parent !== active) {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            this.container.focus();
+        }
+    }
+};
+GettingStartedPage = GettingStartedPage_1 = ( __decorate([
+    ( __param(1, ICommandService)),
+    ( __param(2, IProductService)),
+    ( __param(3, IKeybindingService)),
+    ( __param(4, IWalkthroughsService)),
+    ( __param(5, IConfigurationService)),
+    ( __param(6, ITelemetryService)),
+    ( __param(7, ILanguageService)),
+    ( __param(8, IFileService)),
+    ( __param(9, IOpenerService)),
+    ( __param(10, IThemeService)),
+    ( __param(11, IStorageService)),
+    ( __param(12, IExtensionService)),
+    ( __param(13, IInstantiationService)),
+    ( __param(14, INotificationService)),
+    ( __param(15, IEditorGroupsService)),
+    ( __param(16, IContextKeyService)),
+    ( __param(17, IQuickInputService)),
+    ( __param(18, IWorkspacesService)),
+    ( __param(19, ILabelService)),
+    ( __param(20, IHostService)),
+    ( __param(21, IWebviewService)),
+    ( __param(22, IWorkspaceContextService)),
+    ( __param(23, IAccessibilityService)),
+    ( __param(24, IWorkbenchAssignmentService))
+], GettingStartedPage));
+class GettingStartedInputSerializer {
+    canSerialize(editorInput) {
+        return true;
+    }
+    serialize(editorInput) {
+        return JSON.stringify({ selectedCategory: editorInput.selectedCategory, selectedStep: editorInput.selectedStep });
+    }
+    deserialize(instantiationService, serializedEditorInput) {
+        try {
+            const { selectedCategory, selectedStep } = JSON.parse(serializedEditorInput);
+            return ( new GettingStartedInput({ selectedCategory, selectedStep }));
+        }
+        catch { }
+        return ( new GettingStartedInput({}));
+    }
+}
+export { GettingStartedInputSerializer, GettingStartedPage, allWalkthroughsHiddenContext, inWelcomeContext };