Close #122702

Author: Jackson Kearl

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css

@@ -164,6 +164,8 @@
 	margin: 4px 0 4px;
 	font-size: 14px;
 	font-weight: 500;
+	text-align: left;
+	flex-grow: 1;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .category-progress {
@@ -174,7 +176,7 @@
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category.no-progress {
-	padding: 3px 12px;
+	padding: 3px 6px;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .getting-started-category.no-progress .category-progress {
@@ -232,10 +234,9 @@
 	box-sizing: border-box;
 	line-height: normal;
 	margin: 8px 8px 12px;
-	padding: 3px 12px 6px;
+	padding: 3px 6px 6px;
 	left: 1px;
 	text-align: left;
-	display: flex;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category {
@@ -248,12 +249,56 @@
 	font-size: 20px;
 }
 
-.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .codicon.hide-category-button {
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .main-content {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 100%;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .description-content {
+	text-align: left;
+	margin-left: 28px;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge {
+	justify-self: flex-end;
+	border-radius: 4px;
+	padding: 0 2px;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured-badge {
+	position: relative;
+	top: -4px;
+	left: -8px;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured {
+	border-top: 30px solid red;
+	width: 30px;
+	box-sizing: border-box;
+	height: 20px;
+	border-right: 40px solid transparent;
 	position: absolute;
-	top: 8px;
-	right: 8px;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon {
+	top: -30px;
+	left: 4px;
+	font-size: 12pt;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .codicon.hide-category-button {
+	position: relative;
+	top: 0px;
+	align-self: start;
+	left: 8px;
 	font-size: 16px;
-	padding-right: 0;
+}
+
+.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category.featured .icon-widget {
+	visibility: hidden;
 }
 
 .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category img.category-icon {

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts

@@ -15,7 +15,7 @@ import { IProductService } from 'vs/platform/product/common/productService';
 import { hiddenEntriesConfigurationKey, IGettingStartedCategory, IGettingStartedCategoryWithProgress, IGettingStartedService } from 'vs/workbench/contrib/welcome/gettingStarted/browser/gettingStartedService';
 import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { welcomePageBackground, welcomePageProgressBackground, welcomePageProgressForeground, welcomePageTileBackground, welcomePageTileHoverBackground, welcomePageTileShadow } from 'vs/workbench/contrib/welcome/page/browser/welcomePageColors';
-import { activeContrastBorder, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, descriptionForeground, focusBorder, foreground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { activeContrastBorder, badgeBackground, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, descriptionForeground, focusBorder, foreground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { firstSessionDateStorageKey, ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
@@ -61,6 +61,7 @@ import { Schemas } from 'vs/base/common/network';
 import { IEditorOptions } from 'vs/platform/editor/common/editor';
 import { coalesce, flatten } from 'vs/base/common/arrays';
 import { ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { ACTIVITY_BAR_BADGE_FOREGROUND } from 'vs/workbench/common/theme';
 
 const SLIDE_TRANSITION_TIME_MS = 250;
 const configurationKey = 'workbench.startupEditor';
@@ -107,7 +108,7 @@ export class GettingStartedPage extends EditorPane {
 	private hasScrolledToFirstCategory = false;
 	private recentlyOpenedList?: GettingStartedIndexList<IRecentFolder | IRecentWorkspace>;
 	private startList?: GettingStartedIndexList<IGettingStartedCategory>;
-	private gettingStartedList?: GettingStartedIndexList<IGettingStartedCategory>;
+	private gettingStartedList?: GettingStartedIndexList<IGettingStartedCategoryWithProgress>;
 
 	private stepsSlide!: HTMLElement;
 	private categoriesSlide!: HTMLElement;
@@ -906,39 +907,58 @@ export class GettingStartedPage extends EditorPane {
 		return startList;
 	}
 
-	private buildGettingStartedWalkthroughsList(): GettingStartedIndexList<IGettingStartedCategory> {
+	private buildGettingStartedWalkthroughsList(): GettingStartedIndexList<IGettingStartedCategoryWithProgress> {
 
-		const renderGetttingStaredWalkthrough = (category: IGettingStartedCategory) => {
+		const renderGetttingStaredWalkthrough = (category: IGettingStartedCategoryWithProgress) => {
 			const hiddenCategories = this.getHiddenCategories();
 
 			if (category.content.type !== 'steps' || hiddenCategories.has(category.id)) {
 				return undefined;
 			}
 
-			return $('button.getting-started-category',
+			const newBadge = $('.new-badge', {});
+			if (category.content.accolades === 'newCategory') {
+				reset(newBadge, $('.new-category', {}, localize('new', "New")));
+			} else if (category.content.accolades === 'newContent') {
+				reset(newBadge, $('.new-items', {}, localize('newItems', "New Items")));
+			}
+
+			const featuredBadge = $('.featured-badge', {});
+			const descriptionContent = $('.description-content', {},);
+
+			if (category.content.accolades === 'featured') {
+				reset(featuredBadge, $('.featured', {}, $('span.featured-icon.codicon.codicon-star-empty')));
+				reset(descriptionContent, category.description);
+			}
+
+			return $('button.getting-started-category' + (category.content.accolades === 'featured' ? '.featured' : ''),
 				{
 					'x-dispatch': 'selectCategory:' + category.id,
 					'role': 'listitem',
 					'title': category.description
 				},
-				this.iconWidgetFor(category),
-				$('a.codicon.codicon-close.hide-category-button', {
-					'x-dispatch': 'hideCategory:' + category.id,
-					'title': localize('close', "Hide"),
-				}),
-				$('h3.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title),
+				featuredBadge,
+				$('.main-content', {},
+					this.iconWidgetFor(category),
+					$('h3.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title,),
+					newBadge,
+					$('a.codicon.codicon-close.hide-category-button', {
+						'x-dispatch': 'hideCategory:' + category.id,
+						'title': localize('close', "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 limit = Math.min(this.gettingStartedCategories.filter(c => c.priority > 0).length, 5);
 		const gettingStartedList = this.gettingStartedList = new GettingStartedIndexList(
 			localize('gettingStarted', "Getting Started"),
 			'getting-started',
-			limit,
+			5,
 			undefined,
 			undefined,
 			$('button.button-link.see-all-walkthroughs', { 'tabindex': '0', 'x-dispatch': 'seeAllWalkthroughs' }, localize('seeMore', "See More")),
@@ -1018,7 +1038,9 @@ export class GettingStartedPage extends EditorPane {
 	}
 
 	private iconWidgetFor(category: IGettingStartedCategory) {
-		return category.icon.type === 'icon' ? $(ThemeIcon.asCSSSelector(category.icon.icon)) : $('img.category-icon', { src: category.icon.path });
+		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;
 	}
 
 	private buildStepMarkdownDescription(container: HTMLElement, text: LinkedText[]) {
@@ -1474,4 +1496,16 @@ registerThemingParticipant((theme, collector) => {
 	if (progressForeground) {
 		collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner { background-color: ${progressForeground}; }`);
 	}
+
+	const newBadgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND);
+	if (newBadgeForeground) {
+		collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { color: ${newBadgeForeground}; }`);
+		collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon { color: ${newBadgeForeground}; }`);
+	}
+
+	const newBadgeBackground = theme.getColor(badgeBackground);
+	if (newBadgeBackground) {
+		collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { background-color: ${newBadgeBackground}; }`);
+		collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured { border-top-color: ${newBadgeBackground}; }`);
+	}
 });

src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStartedService.ts

@@ -38,8 +38,12 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 export const WorkspacePlatform = new RawContextKey<'mac' | 'linux' | 'windows' | undefined>('workspacePlatform', undefined, localize('workspacePlatform', "The platform of the current workspace, which in remote contexts may be different from the platform of the UI"));
 
 export const IGettingStartedService = createDecorator<IGettingStartedService>('gettingStartedService');
+
 export const hiddenEntriesConfigurationKey = 'workbench.welcomePage.hiddenCategories';
 
+export const walkthroughMetadataConfigurationKey = 'workbench.welcomePage.walkthroughMetadata';
+export type WalkthroughMetaDataType = Map<string, { firstSeen: number; stepIDs: string[]; }>;
+
 export const enum GettingStartedCategory {
 	Beginner = 'Beginner',
 	Intermediate = 'Intermediate',
@@ -69,6 +73,7 @@ export interface IGettingStartedWalkthroughDescriptor {
 	id: GettingStartedCategory | string
 	title: string
 	description: string
+	isFeatured: boolean
 	order: number
 	next?: string
 	icon:
@@ -115,6 +120,7 @@ export interface IGettingStartedCategory {
 	id: GettingStartedCategory | string
 	title: string
 	description: string
+	isFeatured: boolean
 	order: number
 	next?: string
 	icon:
@@ -135,6 +141,7 @@ export interface IGettingStartedCategoryWithProgress extends Omit<IGettingStarte
 	| {
 		type: 'steps',
 		steps: IGettingStartedStepWithProgress[],
+		accolades: 'newCategory' | 'newContent' | 'featured' | undefined
 		done: boolean;
 		stepsComplete: number
 		stepsTotal: number
@@ -166,6 +173,9 @@ export interface IGettingStartedService {
 	installedExtensionsRegistered: Promise<void>;
 }
 
+// Show walkthrough as "new" for 7 days after first install
+const NEW_WALKTHROUGH_TIME = 7 * 24 * 60 * 60 * 1000;
+
 export class GettingStartedService extends Disposable implements IGettingStartedService {
 	declare readonly _serviceBrand: undefined;
 
@@ -208,6 +218,8 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 	private triggerInstalledExtensionsRegistered!: () => void;
 	installedExtensionsRegistered: Promise<void>;
 
+	private metadata: WalkthroughMetaDataType;
+
 	constructor(
 		@IStorageService private readonly storageService: IStorageService,
 		@ICommandService private readonly commandService: ICommandService,
@@ -227,6 +239,9 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 
 		this.tasExperimentService = tasExperimentService;
 
+		this.metadata = new Map(
+			JSON.parse(
+				this.storageService.get(walkthroughMetadataConfigurationKey, StorageScope.GLOBAL, '[]')));
 
 		const builtinNewMenuItems = [
 			{
@@ -528,6 +543,11 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 		await Promise.all(extension.contributes?.walkthroughs?.map(async (walkthrough, index) => {
 			const categoryID = extension.identifier.value + '#' + walkthrough.id;
 
+			const isNewlyInstalled = !this.metadata.get(categoryID);
+			if (isNewlyInstalled) {
+				this.metadata.set(categoryID, { firstSeen: +new Date(), stepIDs: walkthrough.steps.map(s => s.id) });
+			}
+
 			const override = await Promise.race([
 				this.tasExperimentService?.getTreatment<string>(`gettingStarted.overrideCategory.${categoryID}.when`),
 				new Promise<string | undefined>(resolve => setTimeout(() => resolve(walkthrough.when), 5000))
@@ -538,17 +558,18 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 				&& this.contextService.contextMatchesRules(ContextKeyExpr.deserialize(override ?? walkthrough.when) ?? ContextKeyExpr.true())
 			) {
 				this.sessionInstalledExtensions.delete(extension.identifier.value.toLowerCase());
-				if (index < sectionToOpenIndex) {
+				if (index < sectionToOpenIndex && isNewlyInstalled) {
 					sectionToOpen = categoryID;
 					sectionToOpenIndex = index;
 				}
 			}
 
-			const walkthoughDescriptior = {
+			const walkthoughDescriptior: IGettingStartedWalkthroughDescriptor = {
 				content: { type: 'steps' },
 				description: walkthrough.description,
 				title: walkthrough.title,
 				id: categoryID,
+				isFeatured: false,
 				order: Math.min(),
 				icon: {
 					type: 'image',
@@ -619,6 +640,8 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 			this.registerWalkthrough(walkthoughDescriptior, steps);
 		}));
 
+		this.storageService.store(walkthroughMetadataConfigurationKey, JSON.stringify([...this.metadata.entries()]), StorageScope.GLOBAL, StorageTarget.USER);
+
 		this.triggerInstalledExtensionsRegistered();
 
 		if (sectionToOpen && this.configurationService.getValue<string>('workbench.welcomePage.walkthroughs.openOnInstall')) {
@@ -753,7 +776,7 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 			})
 			.filter(category => category.content.type !== 'steps' || category.content.steps.length)
 			.map(category => this.getCategoryProgress(category))
-			.sort((a, b) => a.priority - b.priority);
+			.sort((a, b) => b.priority - a.priority);
 		return categoriesWithCompletion;
 	}
 
@@ -764,12 +787,35 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 		const stepsWithProgress = category.content.steps.map(step => this.getStepProgress(step));
 		const stepsComplete = stepsWithProgress.filter(step => step.done);
 
+		const isFeatured = category.isFeatured;
+
+		const firstSeenDate = this.metadata.get(category.id)?.firstSeen;
+		const isNew = firstSeenDate && firstSeenDate > (+new Date() - NEW_WALKTHROUGH_TIME);
+
+		const lastStepIDs = this.metadata.get(category.id)?.stepIDs;
+		const hasNewSteps = lastStepIDs && category.content.steps.length === lastStepIDs.length && category.content.steps.every(({ id }, index) => id === lastStepIDs[index]);
+
+		let priority = 0;
+
+		if (isFeatured) {
+			priority += 20;
+		}
+
+		if (isNew && firstSeenDate) {
+			priority += 10 + (NEW_WALKTHROUGH_TIME - (+new Date() - firstSeenDate)) / (24 * 60 * 60 * 1000);
+		}
+
+		if (hasNewSteps) {
+			priority += 1;
+		}
 		return {
 			...category,
-			priority: 1 - (stepsComplete.length / stepsWithProgress.length),
+			priority,
 			content: {
 				type: 'steps',
 				steps: stepsWithProgress,
+				accolades: isFeatured ? 'featured' : isNew ? 'newCategory' : hasNewSteps ? 'newContent' : undefined,
+				// accolades: Math.random() < 0.333 ? 'featured' : Math.random() < 0.5 ? 'newCategory' : 'newContent',
 				stepsComplete: stepsComplete.length,
 				stepsTotal: stepsWithProgress.length,
 				done: stepsComplete.length === stepsWithProgress.length,
@@ -816,7 +862,7 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 			return;
 		}
 
-		const category: IGettingStartedCategory = { ...categoryDescriptor };
+		const category: IGettingStartedCategory = { ...categoryDescriptor, isFeatured: false };
 
 		this.gettingStartedContributions.set(categoryDescriptor.id, category);
 		this._onDidAddCategory.fire();
@@ -830,6 +876,7 @@ export class GettingStartedService extends Disposable implements IGettingStarted
 		}
 
 		const category: IGettingStartedCategory = { ...categoryDescriptor, content: { type: 'steps', steps } };
+
 		this.gettingStartedContributions.set(categoryDescriptor.id, category);
 		steps.forEach(step => {
 			if (this.steps.has(step.id)) { throw Error('Attempting to register step with id ' + step.id + ' twice. Second is dropped.'); }