@codingame/monaco-vscode-walkthrough-service-override 16.1.0 → 17.0.0

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

@@ -35,7 +35,7 @@ import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platf
 import { IFileService } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { IKeybindingService } from '@codingame/monaco-vscode-api/vscode/vs/platform/keybinding/common/keybinding.service';
-import { Verbosity } from '@codingame/monaco-vscode-7559b0be-bfa5-5fe6-b731-1973fe9fffa1-common/vscode/vs/platform/label/common/label';
+import { Verbosity } from '@codingame/monaco-vscode-2cbab29e-9393-5de6-b701-9a9555360b6b-common/vscode/vs/platform/label/common/label';
 import { ILabelService } from '@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service';
 import { INotificationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/notification/common/notification.service';
 import { Link } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/browser/link';
@@ -50,11 +50,11 @@ import { getTelemetryLevel } from '@codingame/monaco-vscode-api/vscode/vs/platfo
 import { defaultToggleStyles, defaultButtonStyles, defaultKeybindingLabelStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { UNKNOWN_EMPTY_WINDOW_WORKSPACE } from '@codingame/monaco-vscode-api/vscode/vs/platform/workspace/common/workspace';
 import { IWorkspaceContextService } from '@codingame/monaco-vscode-api/vscode/vs/platform/workspace/common/workspace.service';
-import { isRecentFolder, isRecentWorkspace } from '@codingame/monaco-vscode-7559b0be-bfa5-5fe6-b731-1973fe9fffa1-common/vscode/vs/platform/workspaces/common/workspaces';
+import { isRecentFolder, isRecentWorkspace } from '@codingame/monaco-vscode-2cbab29e-9393-5de6-b701-9a9555360b6b-common/vscode/vs/platform/workspaces/common/workspaces';
 import { IWorkspacesService } from '@codingame/monaco-vscode-api/vscode/vs/platform/workspaces/common/workspaces.service';
-import { OpenRecentAction } from '@codingame/monaco-vscode-7559b0be-bfa5-5fe6-b731-1973fe9fffa1-common/vscode/vs/workbench/browser/actions/windowActions';
-import { OpenFolderViaWorkspaceAction, OpenFileFolderAction, OpenFolderAction } from '@codingame/monaco-vscode-68b3311c-eb96-5711-8f72-f5f4b2e31932-common/vscode/vs/workbench/browser/actions/workspaceActions';
-import { EditorPane } from '@codingame/monaco-vscode-12c5f9eb-72d3-57ca-babd-5bef7aa9de3b-common/vscode/vs/workbench/browser/parts/editor/editorPane';
+import { OpenRecentAction } from '@codingame/monaco-vscode-2cbab29e-9393-5de6-b701-9a9555360b6b-common/vscode/vs/workbench/browser/actions/windowActions';
+import { OpenFolderViaWorkspaceAction, OpenFileFolderAction, OpenFolderAction } from '@codingame/monaco-vscode-97284942-b044-5fbb-b53b-3f46d2468746-common/vscode/vs/workbench/browser/actions/workspaceActions';
+import { EditorPane } from '@codingame/monaco-vscode-d0fb86d3-2a47-594e-955b-9a24631a7124-common/vscode/vs/workbench/browser/parts/editor/editorPane';
 import { WorkbenchStateContext } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/contextkeys';
 import { IWebviewService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/webview/browser/webview.service';
 import './gettingStartedColors.js';
@@ -64,12 +64,12 @@ import { GettingStartedInput } from './gettingStartedInput.js';
 import { hiddenEntriesConfigurationKey, parseDescription } from './gettingStartedService.js';
 import { IWalkthroughsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedService.service';
 import { restoreWalkthroughsConfigurationKey } from './startupPage.js';
-import { startEntries } from '../common/gettingStartedContent.js';
+import { startEntries, NEW_WELCOME_EXPERIENCE } from '../common/gettingStartedContent.js';
 import { GroupDirection, GroupsOrder } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorGroupsService';
 import { IEditorGroupsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorGroupsService.service';
 import { IExtensionService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensions.service';
 import { IHostService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/host/browser/host.service';
-import { IWorkbenchThemeService } from '@codingame/monaco-vscode-7ba0af96-90c2-5e11-ad7f-befdbbf246c8-common/vscode/vs/workbench/services/themes/common/workbenchThemeService.service';
+import { IWorkbenchThemeService } from '@codingame/monaco-vscode-7443a901-21f6-577a-9674-42893b997ee0-common/vscode/vs/workbench/services/themes/common/workbenchThemeService.service';
 import { GettingStartedIndexList } from './gettingStartedList.js';
 import { AccessibilityVerbositySettingId } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/accessibility/browser/accessibilityConfiguration';
 import { AccessibleViewAction } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/accessibility/browser/accessibleViewActions';
@@ -131,7 +131,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         this.container = $('.gettingStartedContainer', {
             role: 'document',
             tabindex: 0,
-            'aria-label': ( localize(11396, "Overview of how to get up to speed with your editor."))
+            'aria-label': ( localize(11502, "Overview of how to get up to speed with your editor."))
         });
         this.stepMediaComponent = $('.getting-started-media');
         this.stepMediaComponent.id = generateUuid();
@@ -181,7 +181,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             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);
+            const category = step.category === NEW_WELCOME_EXPERIENCE ? this.gettingStartedService.getWalkthrough(step.category) :
+                this.gettingStartedCategories.find(c => c.id === step.category);
             if (!category) {
                 throw Error('Could not find category with ID: ' + step.category);
             }
@@ -207,14 +208,14 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
                         badgeelement.parentElement?.setAttribute('aria-checked', 'true');
                         badgeelement.classList.remove(...ThemeIcon.asClassNameArray(gettingStartedUncheckedCodicon));
                         badgeelement.classList.add('complete', ...ThemeIcon.asClassNameArray(gettingStartedCheckedCodicon));
-                        badgeelement.setAttribute('aria-label', ( localize(11397, "Checkbox for Step {0}: Completed", step.title)));
+                        badgeelement.setAttribute('aria-label', ( localize(11503, "Checkbox for Step {0}: Completed", step.title)));
                     }
                     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));
-                        badgeelement.setAttribute('aria-label', ( localize(11398, "Checkbox for Step {0}: Not completed", step.title)));
+                        badgeelement.setAttribute('aria-label', ( localize(11504, "Checkbox for Step {0}: Not completed", step.title)));
                     }
                 });
             }
@@ -257,6 +258,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
     async setInput(newInput, options, context, token) {
         this.container.classList.remove('animatable');
         this.editorInput = newInput;
+        this.editorInput.showTelemetryNotice = options?.showTelemetryNotice ?? true;
         await super.setInput(newInput, options, context, token);
         await this.buildCategoriesSlide();
         if (this.shouldAnimate()) {
@@ -415,7 +417,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             label: x.title,
             detail: x.description,
             description: x.source,
-        }))), { canPickMany: false, matchOnDescription: true, matchOnDetail: true, title: ( localize(11399, "Open Walkthrough...")) });
+        }))), { canPickMany: false, matchOnDescription: true, matchOnDetail: true, title: ( localize(11505, "Open Walkthrough...")) });
         if (selection) {
             this.runDispatchCommand('selectCategory', selection.id);
         }
@@ -596,7 +598,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             const themeType = this.themeService.getColorTheme().type;
             const videoPath = media.path[themeType];
             const videoPoster = media.poster ? media.poster[themeType] : undefined;
-            const altText = media.altText ? media.altText : ( localize(11400, "Video for {0}", stepToExpand.title));
+            const altText = media.altText ? media.altText : ( localize(11506, "Video for {0}", stepToExpand.title));
             const rawHTML = await this.detailsRenderer.renderVideo(videoPath, videoPoster, altText);
             this.webview.setHtml(rawHTML);
             let isDisposed = false;
@@ -624,8 +626,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
     provideScreenReaderUpdate() {
         if (this.configurationService.getValue(AccessibilityVerbositySettingId.Walkthrough)) {
             const kbLabel = this.keybindingService.lookupKeybinding(AccessibleViewAction.id)?.getAriaLabel();
-            return kbLabel ? ( localize(11401, "Inspect this in the accessible view ({0}).\n", kbLabel)) : ( localize(
-                11402,
+            return kbLabel ? ( localize(11507, "Inspect this in the accessible view ({0}).\n", kbLabel)) : ( localize(
+                11508,
                 "Inspect this in the accessible view via the command Open Accessible View which is currently not triggerable via keybinding.\n"
             ));
         }
@@ -685,7 +687,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             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', {}, ( localize(11403, "Go Back"))));
+        const prevButton = $('button.prev-button.button-link', { 'x-dispatch': 'scrollPrev' }, $('span.scroll-button.codicon.codicon-chevron-left'), $('span.moreText', {}, ( localize(11509, "Go Back"))));
         this.stepsSlide = $('.gettingStartedSlideDetails.gettingStartedSlide', {}, prevButton);
         this.stepsContent = $('.gettingStartedDetailsContent', {});
         this.detailsPageScrollbar = this._register(( new DomScrollableElement(
@@ -709,11 +711,11 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             icon: Codicon.check,
             actionClassName: 'getting-started-checkbox',
             isChecked: this.configurationService.getValue(configurationKey) === 'welcomePage',
-            title: ( localize(11404, "When checked, this page will be shown on startup.")),
+            title: ( localize(11510, "When checked, this page will be shown on startup.")),
             ...defaultToggleStyles
         }));
         showOnStartupCheckbox.domNode.id = 'showOnStartup';
-        const showOnStartupLabel = $('label.caption', { for: 'showOnStartup' }, ( localize(11405, "Show welcome page on startup")));
+        const showOnStartupLabel = $('label.caption', { for: 'showOnStartup' }, ( localize(11511, "Show welcome page on startup")));
         const onShowOnStartupChanged = () => {
             if (showOnStartupCheckbox.checked) {
                 this.telemetryService.publicLog2('gettingStarted.ActionExecuted', { command: 'showOnStartupChecked', argument: undefined, walkthroughId: this.currentWalkthrough?.id });
@@ -732,7 +734,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             showOnStartupCheckbox.checked = !showOnStartupCheckbox.checked;
             onShowOnStartupChanged();
         }));
-        const header = $('.header', {}, $('h1.product-name.caption', {}, this.productService.nameLong), $('p.subtitle.description', {}, ( localize(11406, "Editing evolved"))));
+        const header = $('.header', {}, $('h1.product-name.caption', {}, this.productService.nameLong), $('p.subtitle.description', {}, ( localize(11512, "Editing evolved"))));
         const leftColumn = $('.categories-column.categories-column-left', {});
         const rightColumn = $('.categories-column.categories-column-right', {});
         const startList = this.buildStartList();
@@ -769,18 +771,29 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         this.updateCategoryProgress();
         this.registerDispatchListeners();
         if (this.editorInput.selectedCategory) {
+            const showNewExperience = this.editorInput.selectedCategory === NEW_WELCOME_EXPERIENCE;
             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);
+                this.currentWalkthrough = showNewExperience ? this.gettingStartedService.getWalkthrough(this.editorInput.selectedCategory) : this.gettingStartedCategories.find(category => category.id === this.editorInput.selectedCategory);
                 if (this.currentWalkthrough) {
-                    this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                    if (showNewExperience) {
+                        this.buildNewCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                    }
+                    else {
+                        this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                    }
                     this.setSlide('details');
                     return;
                 }
             }
             else {
-                this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                if (showNewExperience) {
+                    this.buildNewCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                }
+                else {
+                    this.buildCategorySlide(this.editorInput.selectedCategory, this.editorInput.selectedStep);
+                }
                 this.setSlide('details');
                 return;
             }
@@ -827,7 +840,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             const link = $('button.button-link');
             link.innerText = name;
             link.title = fullPath;
-            link.setAttribute('aria-label', ( localize(11407, "Open folder {0} with path {1}", name, parentPath)));
+            link.setAttribute('aria-label', ( localize(11513, "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], {
@@ -850,18 +863,18 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             this.recentlyOpenedList.dispose();
         }
         const recentlyOpenedList = this.recentlyOpenedList = ( new GettingStartedIndexList({
-            title: ( localize(11408, "Recent")),
+            title: ( localize(11514, "Recent")),
             klass: 'recently-opened',
             limit: 5,
-            empty: $('.empty-recent', {}, ( localize(11409, "You have no recent folders,")), $('button.button-link', { 'x-dispatch': 'openFolder' }, ( localize(11410, "open a folder"))), ( localize(11411, "to start."))),
+            empty: $('.empty-recent', {}, ( localize(11515, "You have no recent folders,")), $('button.button-link', { 'x-dispatch': 'openFolder' }, ( localize(11516, "open a folder"))), ( localize(11517, "to start."))),
             more: $('.more', {}, $('button.button-link', {
                 'x-dispatch': 'showMoreRecents',
                 title: ( localize(
-                    11412,
+                    11518,
                     "Show All Recent Folders {0}",
                     this.getKeybindingLabel(OpenRecentAction.ID)
                 ))
-            }, ( localize(11413, "More...")))),
+            }, ( localize(11519, "More...")))),
             renderElement: renderRecent,
             contextService: this.contextService
         }));
@@ -889,7 +902,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             this.startList.dispose();
         }
         const startList = this.startList = ( new GettingStartedIndexList({
-            title: ( localize(11414, "Start")),
+            title: ( localize(11520, "Start")),
             klass: 'start-container',
             limit: 10,
             renderElement: renderStartEntry,
@@ -905,10 +918,10 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             const renderNewBadge = (category.newItems || category.newEntry) && !category.isFeatured;
             const newBadge = $('.new-badge', {});
             if (category.newEntry) {
-                reset(newBadge, $('.new-category', {}, ( localize(11415, "New"))));
+                reset(newBadge, $('.new-category', {}, ( localize(11521, "New"))));
             }
             else if (category.newItems) {
-                reset(newBadge, $('.new-items', {}, ( localize(11416, "Updated"))));
+                reset(newBadge, $('.new-items', {}, ( localize(11522, "Updated"))));
             }
             const featuredBadge = $('.featured-badge', {});
             const descriptionContent = $('.description-content', {});
@@ -924,9 +937,9 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             }, 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': ( localize(11417, "Hide")),
+                'title': ( localize(11523, "Hide")),
                 'role': 'button',
-                'aria-label': ( localize(11418, "Hide")),
+                'aria-label': ( localize(11524, "Hide")),
             })), descriptionContent, $('.category-progress', { 'x-data-category-id': category.id, }, $('.progress-bar-outer', { 'role': 'progressbar' }, $('.progress-bar-inner'))));
         };
         if (this.gettingStartedList) {
@@ -952,10 +965,10 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             return rank;
         };
         const gettingStartedList = this.gettingStartedList = ( new GettingStartedIndexList({
-            title: ( localize(11419, "Walkthroughs")),
+            title: ( localize(11525, "Walkthroughs")),
             klass: 'getting-started',
             limit: 5,
-            footer: $('span.button-link.see-all-walkthroughs', { 'x-dispatch': 'seeAllWalkthroughs', 'tabindex': 0 }, ( localize(11413, "More..."))),
+            footer: $('span.button-link.see-all-walkthroughs', { 'x-dispatch': 'seeAllWalkthroughs', 'tabindex': 0 }, ( localize(11519, "More..."))),
             renderElement: renderGetttingStaredWalkthrough,
             rankElement: rankWalkthrough,
             contextService: this.contextService,
@@ -988,6 +1001,7 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         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 <= 950);
+        this.container.classList.toggle('new-layout-width-constrained', size.width <= 800);
         this.categoriesPageScrollbar?.scanDomNode();
         this.detailsPageScrollbar?.scanDomNode();
         this.detailsScrollbar?.scanDomNode();
@@ -995,7 +1009,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
     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);
+            const category = categoryID === NEW_WELCOME_EXPERIENCE ? this.gettingStartedService.getWalkthrough(categoryID) :
+                this.gettingStartedCategories.find(c => c.id === categoryID);
             if (!category) {
                 throw Error('Could not find category with ID ' + categoryID);
             }
@@ -1008,10 +1023,10 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             bar.style.width = `${progress}%`;
             element.parentElement.classList.toggle('no-progress', stats.stepsComplete === 0);
             if (stats.stepsTotal === stats.stepsComplete) {
-                bar.title = ( localize(11420, "All {0} steps complete!", stats.stepsComplete));
+                bar.title = ( localize(11526, "All {0} steps complete!", stats.stepsComplete));
             }
             else {
-                bar.title = ( localize(11421, "{0} of {1} steps complete", stats.stepsComplete, stats.stepsTotal));
+                bar.title = ( localize(11527, "{0} of {1} steps complete", stats.stepsComplete, stats.stepsTotal));
             }
         });
     }
@@ -1019,7 +1034,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         if (!( this.gettingStartedCategories.some(c => c.id === categoryID))) {
             this.gettingStartedCategories = this.gettingStartedService.getWalkthroughs();
         }
-        const ourCategory = this.gettingStartedCategories.find(c => c.id === categoryID);
+        const ourCategory = categoryID === NEW_WELCOME_EXPERIENCE ? this.gettingStartedService.getWalkthrough(categoryID) :
+            this.gettingStartedCategories.find(c => c.id === categoryID);
         if (!ourCategory) {
             throw Error('Could not find category with ID: ' + categoryID);
         }
@@ -1133,8 +1149,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
                 }, null, this.detailsPageDisposables);
                 if (isCommand) {
                     const keybinding = this.getKeyBinding(command);
-                    if (keybinding) {
-                        const shortcutMessage = $('span.shortcut-message', {}, ( localize(11422, 'Tip: Use keyboard shortcut ')));
+                    if (keybinding && this.editorInput.selectedCategory !== NEW_WELCOME_EXPERIENCE) {
+                        const shortcutMessage = $('span.shortcut-message', {}, ( localize(11528, 'Tip: Use keyboard shortcut ')));
                         container.appendChild(shortcutMessage);
                         const label = ( new KeybindingLabel(shortcutMessage, OS, { ...defaultKeybindingLabelStyles }));
                         label.set(keybinding);
@@ -1171,7 +1187,349 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         this.stepDisposables.clear();
         super.clearInput();
     }
+    selectStepByIndex(newIndex, steps, direction) {
+        const currentIndex = steps.findIndex(step => step.id === this.editorInput.selectedStep);
+        this.selectSlide(steps[newIndex].id);
+        const footer = this.stepsContent.querySelector('.getting-started-footer');
+        if (footer && newIndex !== 0) {
+            footer.style.display = 'none';
+        }
+        else if (footer) {
+            footer.style.display = 'block';
+        }
+        this.updateNavButtons(newIndex, steps);
+        const dots = this.stepsContent.querySelectorAll('.step-dot');
+        dots.forEach((dot, index) => {
+            if (index === newIndex) {
+                dot.classList.add('active');
+            }
+            else {
+                dot.classList.remove('active');
+            }
+        });
+        if (currentIndex === newIndex) {
+            return;
+        }
+        const slidesContainer = this.stepsContent.querySelector('.step-slides-container');
+        if (slidesContainer) {
+            const slides = slidesContainer.querySelectorAll('.step-slide');
+            slides.forEach((slide, index) => {
+                const slideElement = slide;
+                if (index === currentIndex) {
+                    slideElement.style.display = 'block';
+                    slideElement.style.transform = 'translateX(0)';
+                }
+                else if (index === newIndex) {
+                    slideElement.style.display = 'block';
+                    slideElement.style.transform = `translateX(${direction < 0 ? '-100%' : '100%'})`;
+                }
+                else {
+                    slideElement.style.display = 'none';
+                }
+            });
+            slidesContainer.getBoundingClientRect();
+            setTimeout(() => {
+                slides.forEach((slide, index) => {
+                    const slideElement = slide;
+                    if (index === currentIndex) {
+                        slideElement.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+                        setTimeout(() => {
+                            slideElement.style.display = 'none';
+                        }, SLIDE_TRANSITION_TIME_MS);
+                    }
+                    else if (index === newIndex) {
+                        slideElement.style.transform = 'translateX(0)';
+                    }
+                });
+            }, 20);
+        }
+    }
+    updateNavButtons(newIndex, steps) {
+        const prevButton = this.stepsContent.querySelector('.button-link.navigation.back');
+        if (newIndex === 0) {
+            if (prevButton) {
+                prevButton.classList.add('inactive');
+                prevButton.setAttribute('aria-hidden', 'true');
+                prevButton.setAttribute('tabindex', '-1');
+            }
+        }
+        else {
+            if (prevButton) {
+                prevButton.classList.remove('inactive');
+                prevButton.removeAttribute('aria-hidden');
+                prevButton.removeAttribute('tabindex');
+            }
+        }
+    }
+    buildNewCategorySlide(categoryID, selectedStep) {
+        this.container.classList.add('newSlide');
+        if (this.detailsScrollbar) {
+            this.detailsScrollbar.dispose();
+        }
+        this.detailsPageDisposables.clear();
+        this.mediaDisposables.clear();
+        const category = this.gettingStartedService.getWalkthrough(categoryID);
+        if (!category) {
+            throw Error('could not find category with ID ' + categoryID);
+        }
+        const steps = category.steps.filter(step => this.contextService.contextMatchesRules(step.when));
+        const groupedSteps = ( new Map());
+        steps.forEach(step => {
+            const prefixMatch = step.id.match(/^([^.]+)\./);
+            const prefix = prefixMatch ? prefixMatch[1] : step.id;
+            if (!( groupedSteps.has(prefix))) {
+                groupedSteps.set(prefix, []);
+            }
+            groupedSteps.get(prefix)?.push(step);
+        });
+        const slidesContainer = $('.step-slides-container');
+        const navigationContainer = $('.step-dots-container');
+        const prevButton = $('button.button-link.navigation.back', {
+            'aria-label': ( localize(11529, "Previous Step")),
+            'tabindex': '0'
+        }, $('span.codicon.codicon-arrow-left'), ( localize(11530, "Back")));
+        const dotsContainer = $('.dots-centered');
+        navigationContainer.appendChild(prevButton);
+        navigationContainer.appendChild(dotsContainer);
+        const allSlides = [];
+        groupedSteps.forEach((stepsInGroup, prefix) => {
+            if (stepsInGroup.length === 1) {
+                allSlides.push({ id: stepsInGroup[0].id, steps: [stepsInGroup[0]] });
+            }
+            else {
+                allSlides.push({ id: prefix, steps: stepsInGroup });
+            }
+        });
+        allSlides.forEach((slide, index) => {
+            const slideElement = $('.step-slide', { 'data-step': slide.id });
+            const slideContent = $('.step-slide-content');
+            const textContent = $('.step-text-content');
+            if (slide.steps.length === 1) {
+                const step = slide.steps[0];
+                const titleElement = $('h3.step-title', { 'x-step-title-for': step.id });
+                reset(titleElement, ...renderLabelWithIcons(step.title));
+                textContent.appendChild(titleElement);
+                const descriptionContainer = $('.step-description', { 'x-step-description-for': step.id });
+                this.buildMarkdownDescription(descriptionContainer, step.description);
+                textContent.appendChild(descriptionContainer);
+            }
+            else {
+                const multiStepContainer = $('.multi-step-container');
+                slide.steps.forEach((step, i) => {
+                    const subStep = $('.sub-step', { 'data-sub-step-id': step.id });
+                    this.detailsPageDisposables.add(addDisposableListener(subStep, 'click', () => {
+                        this.selectSubStep(step.id);
+                    }));
+                    this.detailsPageDisposables.add(addDisposableListener(subStep, 'mouseenter', () => {
+                        this.selectSubStep(step.id);
+                    }));
+                    const subStepTitleEl = $('.sub-step-title', {}, ...renderLabelWithIcons(step.title));
+                    subStep.appendChild(subStepTitleEl);
+                    const subStepDesc = $('.sub-step-description');
+                    this.buildMarkdownDescription(subStepDesc, [step.description[0]]);
+                    subStep.appendChild(subStepDesc);
+                    if (i === 0 || step.id === this.editorInput.selectedStep) {
+                        subStep.classList.add('active');
+                    }
+                    else {
+                        subStep.classList.remove('active');
+                    }
+                    multiStepContainer.appendChild(subStep);
+                });
+                const lastStep = slide.steps[slide.steps.length - 1];
+                const linkedText = lastStep.description.length > 1 ? lastStep.description[1] : undefined;
+                if (linkedText) {
+                    const descElement = $('.multi-step-action');
+                    this.buildMarkdownDescription(descElement, [linkedText]);
+                    multiStepContainer.appendChild(descElement);
+                }
+                textContent.appendChild(multiStepContainer);
+            }
+            slideContent.appendChild(textContent);
+            slideElement.appendChild(slideContent);
+            slidesContainer.appendChild(slideElement);
+            const dot = $('button.step-dot', {
+                'data-step-dot-index': `${index}`,
+                'role': 'button'
+            });
+            if (index === 0) {
+                dot.classList.add('active');
+            }
+            dotsContainer.appendChild(dot);
+            this.detailsPageDisposables.add(addDisposableListener(dot, 'click', () => {
+                const currentIndex = this.getCurrentSlideIndex(allSlides);
+                if (currentIndex === index) {
+                    return;
+                }
+                this.selectStepByIndex(index, ( allSlides.map(s => s.steps[0])), index > currentIndex ? 1 : -1);
+            }));
+        });
+        const nextButton = $('button.button-link.navigation.next', {
+            'aria-label': ( localize(11531, "Next")),
+        }, ( localize(11532, "Next")), $('span.codicon.codicon-arrow-right'));
+        navigationContainer.appendChild(nextButton);
+        this.detailsPageDisposables.add(addDisposableListener(prevButton, 'click', () => {
+            const currentIndex = this.getCurrentSlideIndex(allSlides);
+            if (currentIndex > 0) {
+                this.selectStepByIndex(currentIndex - 1, ( allSlides.map(s => s.steps[0])), -1);
+            }
+        }));
+        this.detailsPageDisposables.add(addDisposableListener(nextButton, 'click', () => {
+            const currentIndex = this.getCurrentSlideIndex(allSlides);
+            if (currentIndex < allSlides.length - 1) {
+                this.selectStepByIndex(currentIndex + 1, ( allSlides.map(s => s.steps[0])), 1);
+            }
+            else {
+                this.scrollPrev();
+            }
+        }));
+        this.currentWalkthrough = category;
+        this.editorInput.selectedCategory = categoryID;
+        this.editorInput.selectedStep = this.currentWalkthrough.steps[0].id;
+        const categoryHeader = $('.category-header');
+        const categoryTitle = $('h2.category-title', { 'x-category-title-for': category.id });
+        reset(categoryTitle, ...renderLabelWithIcons(category.title));
+        categoryHeader.appendChild(categoryTitle);
+        const descriptionContainer = $('.category-description.description.max-lines-3', { 'x-category-description-for': category.id });
+        this.buildMarkdownDescription(descriptionContainer, parseDescription(category.description));
+        reset(descriptionContainer, ...renderLabelWithIcons(category.description));
+        categoryHeader.appendChild(descriptionContainer);
+        const categoryFooter = $('.getting-started-footer');
+        if (this.editorInput.showTelemetryNotice && getTelemetryLevel(this.configurationService) !== TelemetryLevel.NONE && this.productService.enableTelemetry) {
+            this.buildTelemetryFooter(categoryFooter);
+        }
+        const stepsContainer = $('.getting-started-steps-container', {}, categoryHeader, slidesContainer, navigationContainer, categoryFooter);
+        this.detailsScrollbar = this._register(( new DomScrollableElement(stepsContainer, { className: 'steps-container' })));
+        const stepListComponent = this.detailsScrollbar.getDomNode();
+        reset(this.stepsContent, stepListComponent);
+        stepListComponent.tabIndex = 0;
+        stepListComponent.focus();
+        this.selectStepByIndex(0, this.currentWalkthrough.steps, 1);
+        this.detailsPageDisposables.add(addDisposableListener(stepListComponent, 'keydown', (e) => {
+            const event = ( new StandardKeyboardEvent(e));
+            if (event.keyCode === KeyCode.RightArrow) {
+                const currentIndex = this.getCurrentSlideIndex(allSlides);
+                if (currentIndex < allSlides.length - 1) {
+                    this.selectStepByIndex(currentIndex + 1, ( allSlides.map(s => s.steps[0])), 1);
+                }
+                else {
+                    this.scrollPrev();
+                }
+            }
+            else if (event.keyCode === KeyCode.LeftArrow) {
+                const currentIndex = this.getCurrentSlideIndex(allSlides);
+                if (currentIndex > 0) {
+                    this.selectStepByIndex(currentIndex - 1, ( allSlides.map(s => s.steps[0])), -1);
+                }
+            }
+            else if (event.keyCode === KeyCode.UpArrow || event.keyCode === KeyCode.DownArrow) {
+                const currentIndex = this.getCurrentSlideIndex(allSlides);
+                if (currentIndex > 0) {
+                    return;
+                }
+                this.navigateWithinMultiStepContainer(event.keyCode);
+            }
+        }));
+        this.registerDispatchListeners();
+        this.detailsScrollbar.scanDomNode();
+        this.detailsPageScrollbar?.scanDomNode();
+    }
+    navigateWithinMultiStepContainer(keyCode) {
+        const currentElement = this.container.querySelector(`.multi-step-container`);
+        if (!currentElement) {
+            return;
+        }
+        const currentSubStep = currentElement.querySelector('.sub-step.active');
+        const allElements = Array.from(this.container.querySelectorAll('.sub-step'));
+        const currentIndex = currentSubStep ? allElements.indexOf(currentSubStep) : -1;
+        let targetElement;
+        if (keyCode === KeyCode.UpArrow && currentIndex > 0) {
+            targetElement = allElements[currentIndex - 1];
+        }
+        else if (keyCode === KeyCode.DownArrow && currentIndex < allElements.length - 1) {
+            targetElement = allElements[currentIndex + 1];
+        }
+        if (targetElement) {
+            const stepId = targetElement.getAttribute('data-sub-step-id');
+            this.selectSubStep(stepId);
+            targetElement.focus();
+        }
+    }
+    selectSubStep(selectedStepId) {
+        if (this.editorInput.selectedStep === selectedStepId) {
+            return;
+        }
+        this.editorInput.selectedStep = selectedStepId;
+        const multiStepContainer = this.container.querySelector('.multi-step-container');
+        if (!multiStepContainer) {
+            return;
+        }
+        const subSteps = multiStepContainer.querySelectorAll('.sub-step');
+        subSteps.forEach(subStepEl => {
+            const stepId = subStepEl.getAttribute('data-sub-step-id');
+            if (stepId === selectedStepId) {
+                subStepEl.classList.add('active');
+            }
+            else {
+                subStepEl.classList.remove('active');
+            }
+        });
+        const prefixMatch = selectedStepId.match(/^([^.]+)\./);
+        const prefix = prefixMatch ? prefixMatch[1] : selectedStepId;
+        this.selectSlideWithPrefix(selectedStepId, prefix);
+        this.gettingStartedService.progressByEvent('stepSelected:' + selectedStepId);
+    }
+    selectSlideWithPrefix(stepId, prefix) {
+        this.editorInput.selectedStep = stepId;
+        const step = this.currentWalkthrough?.steps.find(step => step.id === stepId);
+        if (!step) {
+            return;
+        }
+        const selectedSlide = this.stepsContent.querySelector(`.step-slide[data-step="${prefix}"]`);
+        if (selectedSlide) {
+            const selectedSlideContent = selectedSlide.querySelector('.step-slide-content');
+            this.mediaDisposables.clear();
+            this.stepDisposables.clear();
+            this.buildMediaComponent(this.editorInput.selectedStep);
+            selectedSlideContent?.appendChild(this.stepMediaComponent);
+            setTimeout(() => selectedSlideContent.focus(), 0);
+        }
+        this.gettingStartedService.progressByEvent('stepSelected:' + stepId);
+        this.detailsPageScrollbar?.scanDomNode();
+        this.detailsScrollbar?.scanDomNode();
+    }
+    getCurrentSlideIndex(allSlides) {
+        if (!this.editorInput.selectedStep) {
+            return 0;
+        }
+        const directMatch = allSlides.findIndex(slide => slide.id === this.editorInput.selectedStep);
+        if (directMatch !== -1) {
+            return directMatch;
+        }
+        return allSlides.findIndex(slide => ( slide.steps.some(step => step.id === this.editorInput.selectedStep)));
+    }
+    selectSlide(stepId) {
+        this.editorInput.selectedStep = stepId;
+        const step = this.currentWalkthrough?.steps.find(step => step.id === stepId);
+        if (!step) {
+            return;
+        }
+        const effectiveStepId = stepId.match(/^([^.]+)\./)?.[1] ?? stepId;
+        const selectedSlide = this.stepsContent.querySelector(`.step-slide[data-step="${effectiveStepId}"]`);
+        if (selectedSlide) {
+            const selectedSlideContent = selectedSlide.querySelector('.step-slide-content');
+            this.mediaDisposables.clear();
+            this.stepDisposables.clear();
+            this.buildMediaComponent(this.editorInput.selectedStep);
+            selectedSlideContent?.appendChild(this.stepMediaComponent);
+            setTimeout(() => selectedSlideContent.focus(), 0);
+        }
+        this.gettingStartedService.progressByEvent('stepSelected:' + stepId);
+        this.detailsPageScrollbar?.scanDomNode();
+        this.detailsScrollbar?.scanDomNode();
+    }
     buildCategorySlide(categoryID, selectedStep) {
+        this.container.classList.remove('newSlide');
         if (this.detailsScrollbar) {
             this.detailsScrollbar.dispose();
         }
@@ -1180,7 +1538,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
         });
         this.detailsPageDisposables.clear();
         this.mediaDisposables.clear();
-        const category = this.gettingStartedCategories.find(category => category.id === categoryID);
+        const category = categoryID === NEW_WELCOME_EXPERIENCE ? this.gettingStartedService.getWalkthrough(categoryID) :
+            this.gettingStartedCategories.find(category => category.id === categoryID);
         if (!category) {
             throw Error('could not find category with ID ' + categoryID);
         }
@@ -1222,8 +1581,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
                     'role': 'checkbox',
                     'aria-checked': step.done ? 'true' : 'false',
                     'aria-label': step.done
-                        ? ( localize(11397, "Checkbox for Step {0}: Completed", step.title))
-                        : ( localize(11398, "Checkbox for Step {0}: Not completed", step.title)),
+                        ? ( localize(11503, "Checkbox for Step {0}: Completed", step.title))
+                        : ( localize(11504, "Checkbox for Step {0}: Not completed", step.title)),
                 });
                 const container = $('.step-description-container', { 'x-step-description-for': step.id });
                 this.buildMarkdownDescription(container, step.description);
@@ -1231,10 +1590,10 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
                 reset(stepTitle, ...renderLabelWithIcons(step.title));
                 const stepDescription = $('.step-container', {}, stepTitle, container);
                 if (step.media.type === 'image') {
-                    stepDescription.appendChild($('.image-description', { 'aria-label': ( localize(11423, "Image showing {0}", step.media.altText)) }));
+                    stepDescription.appendChild($('.image-description', { 'aria-label': ( localize(11533, "Image showing {0}", step.media.altText)) }));
                 }
                 else if (step.media.type === 'video') {
-                    stepDescription.appendChild($('.video-description', { 'aria-label': ( localize(11424, "Video showing {0}", step.media.altText)) }));
+                    stepDescription.appendChild($('.video-description', { 'aria-label': ( localize(11534, "Video showing {0}", step.media.altText)) }));
                 }
                 return $('button.getting-started-step', {
                     'x-dispatch': 'selectTask:' + step.id,
@@ -1254,8 +1613,8 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             }
         }));
         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'), ( localize(11425, "Mark Done"))), ...(showNextCategory
-            ? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, ( localize(11426, "Next Section")), $('span.codicon.codicon-arrow-right'))]
+        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'), ( localize(11535, "Mark Done"))), ...(showNextCategory
+            ? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, ( localize(11536, "Next Section")), $('span.codicon.codicon-arrow-right'))]
             : [])));
         this.detailsScrollbar = this._register(( new DomScrollableElement(stepsContainer, { className: 'steps-container' })));
         const stepListComponent = this.detailsScrollbar.getDomNode();
@@ -1272,18 +1631,19 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
     }
     buildTelemetryFooter(parent) {
         const mdRenderer = this.instantiationService.createInstance(MarkdownRenderer, {});
-        const privacyStatementCopy = ( localize(11427, "privacy statement"));
+        const privacyStatementCopy = ( localize(11537, "privacy statement"));
         const privacyStatementButton = `[${privacyStatementCopy}](command:workbench.action.openPrivacyStatementUrl)`;
-        const optOutCopy = ( localize(11428, "opt out"));
+        const optOutCopy = ( localize(11538, "opt out"));
         const optOutButton = `[${optOutCopy}](command:settings.filterByTelemetry)`;
         const text = ( localize(
-            11429,
+            11539,
             "{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);
+        const renderedContents = this.detailsPageDisposables.add(mdRenderer.render({ value: text, isTrusted: true }));
+        parent.append(renderedContents.element);
     }
     getKeybindingLabel(command) {
         command = command.replace(/^command:/, '');
@@ -1347,8 +1707,13 @@ let GettingStartedPage = class GettingStartedPage extends EditorPane {
             slideManager.classList.remove('showCategories');
             const prevButton = this.container.querySelector('.prev-button.button-link');
             prevButton.style.display = this.editorInput.showWelcome || this.prevWalkthrough ? 'block' : 'none';
-            const moreTextElement = prevButton.querySelector('.moreText');
-            moreTextElement.textContent = firstLaunch ? ( localize(11430, "Welcome")) : ( localize(11403, "Go Back"));
+            if (this.editorInput.selectedCategory === NEW_WELCOME_EXPERIENCE) {
+                prevButton.style.display = 'none';
+            }
+            else {
+                const moreTextElement = prevButton.querySelector('.moreText');
+                moreTextElement.textContent = firstLaunch ? ( localize(11540, "Welcome")) : ( localize(11509, "Go Back"));
+            }
             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);