implement #192386

src/vs/base/browser/ui/icons/iconSelectBox.css

@@ -35,4 +35,5 @@
 
 .icon-select-box .icon-select-id-container .icon-select-id-label .highlight {
 	color: var(--vscode-list-highlightForeground);
+	font-weight: bold;
 }

src/vs/base/browser/ui/icons/iconSelectBox.ts

@@ -46,7 +46,7 @@ export class IconSelectBox extends Disposable {
 	private scrollableElement: DomScrollableElement | undefined;
 	private iconIdElement: HighlightedLabel | undefined;
 	private readonly iconContainerWidth = 36;
-	private readonly iconContainerHeight = 32;
+	private readonly iconContainerHeight = 36;
 
 	constructor(
 		private readonly options: IIconSelectBoxOptions,

src/vs/platform/userDataProfile/common/userDataProfile.ts

@@ -41,6 +41,7 @@ export interface IUserDataProfile {
 	readonly isDefault: boolean;
 	readonly name: string;
 	readonly shortName?: string;
+	readonly icon?: string;
 	readonly location: URI;
 	readonly globalStorageHome: URI;
 	readonly settingsResource: URI;
@@ -84,12 +85,14 @@ export type WillRemoveProfileEvent = {
 
 export interface IUserDataProfileOptions {
 	readonly shortName?: string;
+	readonly icon?: string;
 	readonly useDefaultFlags?: UseDefaultProfileFlags;
 	readonly transient?: boolean;
 }
 
-export interface IUserDataProfileUpdateOptions extends IUserDataProfileOptions {
+export interface IUserDataProfileUpdateOptions extends Omit<IUserDataProfileOptions, 'icon'> {
 	readonly name?: string;
+	readonly icon?: string | null;
 }
 
 export const IUserDataProfilesService = createDecorator<IUserDataProfilesService>('IUserDataProfilesService');
@@ -124,6 +127,7 @@ export function reviveProfile(profile: UriDto<IUserDataProfile>, scheme: string)
 		isDefault: profile.isDefault,
 		name: profile.name,
 		shortName: profile.shortName,
+		icon: profile.icon,
 		location: URI.revive(profile.location).with({ scheme }),
 		globalStorageHome: URI.revive(profile.globalStorageHome).with({ scheme }),
 		settingsResource: URI.revive(profile.settingsResource).with({ scheme }),
@@ -144,6 +148,7 @@ export function toUserDataProfile(id: string, name: string, location: URI, profi
 		location,
 		isDefault: false,
 		shortName: options?.shortName,
+		icon: options?.icon,
 		globalStorageHome: defaultProfile && options?.useDefaultFlags?.globalState ? defaultProfile.globalStorageHome : joinPath(location, 'globalStorage'),
 		settingsResource: defaultProfile && options?.useDefaultFlags?.settings ? defaultProfile.settingsResource : joinPath(location, 'settings.json'),
 		keybindingsResource: defaultProfile && options?.useDefaultFlags?.keybindings ? defaultProfile.keybindingsResource : joinPath(location, 'keybindings.json'),
@@ -166,6 +171,7 @@ export type StoredUserDataProfile = {
 	name: string;
 	location: URI;
 	shortName?: string;
+	icon?: string;
 	useDefaultFlags?: UseDefaultProfileFlags;
 };
 
@@ -246,7 +252,7 @@ export class UserDataProfilesService extends Disposable implements IUserDataProf
 							this.logService.warn('Skipping the invalid stored profile', storedProfile.location || storedProfile.name);
 							continue;
 						}
-						profiles.push(toUserDataProfile(basename(storedProfile.location), storedProfile.name, storedProfile.location, this.profilesCacheHome, { shortName: storedProfile.shortName, useDefaultFlags: storedProfile.useDefaultFlags }, defaultProfile));
+						profiles.push(toUserDataProfile(basename(storedProfile.location), storedProfile.name, storedProfile.location, this.profilesCacheHome, { shortName: storedProfile.shortName, icon: storedProfile.icon, useDefaultFlags: storedProfile.useDefaultFlags }, defaultProfile));
 					}
 				} catch (error) {
 					this.logService.error(error);
@@ -365,7 +371,12 @@ export class UserDataProfilesService extends Disposable implements IUserDataProf
 			throw new Error(`Profile '${profileToUpdate.name}' does not exist`);
 		}
 
-		profile = toUserDataProfile(profile.id, options.name ?? profile.name, profile.location, this.profilesCacheHome, { shortName: options.shortName ?? profile.shortName, transient: options.transient ?? profile.isTransient, useDefaultFlags: options.useDefaultFlags ?? profile.useDefaultFlags }, this.defaultProfile);
+		profile = toUserDataProfile(profile.id, options.name ?? profile.name, profile.location, this.profilesCacheHome, {
+			shortName: options.shortName ?? profile.shortName,
+			icon: options.icon === null ? undefined : options.icon ?? profile.icon,
+			transient: options.transient ?? profile.isTransient,
+			useDefaultFlags: options.useDefaultFlags ?? profile.useDefaultFlags
+		}, this.defaultProfile);
 		this.updateProfiles([], [], [profile]);
 
 		return profile;
@@ -516,7 +527,7 @@ export class UserDataProfilesService extends Disposable implements IUserDataProf
 			if (profile.isTransient) {
 				this.transientProfilesObject.profiles.push(profile);
 			} else {
-				storedProfiles.push({ location: profile.location, name: profile.name, shortName: profile.shortName, useDefaultFlags: profile.useDefaultFlags });
+				storedProfiles.push({ location: profile.location, name: profile.name, shortName: profile.shortName, icon: profile.icon, useDefaultFlags: profile.useDefaultFlags });
 			}
 		}
 		this.saveStoredProfiles(storedProfiles);

src/vs/platform/userDataSync/common/userDataProfilesManifestMerge.ts

@@ -18,6 +18,7 @@ interface IUserDataProfileInfo {
 	readonly id: string;
 	readonly name: string;
 	readonly shortName?: string;
+	readonly icon?: string;
 	readonly useDefaultFlags?: UseDefaultProfileFlags;
 }
 
@@ -119,14 +120,15 @@ function compare(from: IUserDataProfileInfo[] | null, to: IUserDataProfileInfo[]
 	const removed = fromKeys.filter(key => !toKeys.includes(key));
 	const updated: string[] = [];
 
-	for (const { id, name, shortName, useDefaultFlags } of from) {
+	for (const { id, name, shortName, icon, useDefaultFlags } of from) {
 		if (removed.includes(id)) {
 			continue;
 		}
 		const toProfile = to.find(p => p.id === id);
 		if (!toProfile
 			|| toProfile.name !== name
 			|| toProfile.shortName !== shortName
+			|| toProfile.icon !== icon
 			|| !equals(toProfile.useDefaultFlags, useDefaultFlags)
 		) {
 			updated.push(id);

src/vs/platform/userDataSync/common/userDataProfilesManifestSync.ts

@@ -191,7 +191,7 @@ export class UserDataProfilesManifestSynchroniser extends AbstractSynchroniser i
 			for (const profile of local.added) {
 				promises.push((async () => {
 					this.logService.trace(`${this.syncResourceLogLabel}: Creating '${profile.name}' profile...`);
-					await this.userDataProfilesService.createProfile(profile.id, profile.name, { shortName: profile.shortName, useDefaultFlags: profile.useDefaultFlags });
+					await this.userDataProfilesService.createProfile(profile.id, profile.name, { shortName: profile.shortName, icon: profile.icon, useDefaultFlags: profile.useDefaultFlags });
 					this.logService.info(`${this.syncResourceLogLabel}: Created profile '${profile.name}'.`);
 				})());
 			}
@@ -207,7 +207,7 @@ export class UserDataProfilesManifestSynchroniser extends AbstractSynchroniser i
 				if (localProfile) {
 					promises.push((async () => {
 						this.logService.trace(`${this.syncResourceLogLabel}: Updating '${profile.name}' profile...`);
-						await this.userDataProfilesService.updateProfile(localProfile, { name: profile.name, shortName: profile.shortName, useDefaultFlags: profile.useDefaultFlags });
+						await this.userDataProfilesService.updateProfile(localProfile, { name: profile.name, shortName: profile.shortName, icon: profile.icon, useDefaultFlags: profile.useDefaultFlags });
 						this.logService.info(`${this.syncResourceLogLabel}: Updated profile '${profile.name}'.`);
 					})());
 				} else {
@@ -225,7 +225,7 @@ export class UserDataProfilesManifestSynchroniser extends AbstractSynchroniser i
 				for (const profile of remote?.added || []) {
 					const collection = await this.userDataSyncStoreService.createCollection(this.syncHeaders);
 					addedCollections.push(collection);
-					remoteProfiles.push({ id: profile.id, name: profile.name, collection, shortName: profile.shortName, useDefaultFlags: profile.useDefaultFlags });
+					remoteProfiles.push({ id: profile.id, name: profile.name, collection, shortName: profile.shortName, icon: profile.icon, useDefaultFlags: profile.useDefaultFlags });
 				}
 			} else {
 				this.logService.info(`${this.syncResourceLogLabel}: Could not create remote profiles as there are too many profiles.`);
@@ -236,7 +236,7 @@ export class UserDataProfilesManifestSynchroniser extends AbstractSynchroniser i
 			for (const profile of remote?.updated || []) {
 				const profileToBeUpdated = remoteProfiles.find(({ id }) => profile.id === id);
 				if (profileToBeUpdated) {
-					remoteProfiles.splice(remoteProfiles.indexOf(profileToBeUpdated), 1, { ...profileToBeUpdated, id: profile.id, name: profile.name, shortName: profile.shortName, useDefaultFlags: profile.useDefaultFlags });
+					remoteProfiles.splice(remoteProfiles.indexOf(profileToBeUpdated), 1, { ...profileToBeUpdated, id: profile.id, name: profile.name, shortName: profile.shortName, icon: profile.icon, useDefaultFlags: profile.useDefaultFlags });
 				}
 			}
 

src/vs/platform/userDataSync/common/userDataSync.ts

@@ -342,6 +342,7 @@ export interface ISyncUserDataProfile {
 	readonly collection: string;
 	readonly name: string;
 	readonly shortName?: string;
+	readonly icon?: string;
 	readonly useDefaultFlags?: UseDefaultProfileFlags;
 }
 

src/vs/workbench/browser/parts/activitybar/activitybarActions.ts

@@ -492,7 +492,6 @@ export class GlobalActivityActionViewItem extends MenuActivityActionViewItem {
 		@IKeybindingService keybindingService: IKeybindingService,
 	) {
 		super(MenuId.GlobalActivity, action, contextMenuActionsProvider, true, colors, activityHoverOptions, themeService, hoverService, menuService, contextMenuService, contextKeyService, configurationService, environmentService, keybindingService);
-		this._register(this.userDataProfileService.onDidChangeCurrentProfile(() => this.updateProfileBadge()));
 	}
 
 	override render(container: HTMLElement): void {

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -43,6 +43,8 @@ import { StringSHA1 } from 'vs/base/common/hash';
 import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget';
 import { GestureEvent } from 'vs/base/browser/touch';
 import { IPaneCompositePart, IPaneCompositeSelectorPart } from 'vs/workbench/browser/parts/paneCompositePart';
+import { IUserDataProfileService } from 'vs/workbench/services/userDataProfile/common/userDataProfile';
+import { IUserDataProfile } from 'vs/platform/userDataProfile/common/userDataProfile';
 
 interface IPlaceholderViewContainer {
 	readonly id: string;
@@ -130,6 +132,7 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
+		@IUserDataProfileService private readonly userDataProfileService: IUserDataProfileService,
 	) {
 		super(Parts.ACTIVITYBAR_PART, { hasTitle: false }, themeService, storageService, layoutService);
 
@@ -523,10 +526,11 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
 			preventLoopNavigation: true
 		}));
 
-		this.globalActivityAction = this._register(new ActivityAction({
-			id: 'workbench.actions.manage',
-			name: localize('manage', "Manage"),
-			classNames: ThemeIcon.asClassNameArray(ActivitybarPart.GEAR_ICON),
+		this.globalActivityAction = this._register(new ActivityAction(this.createGlobalActivity(this.userDataProfileService.currentProfile)));
+		this._register(this.userDataProfileService.onDidChangeCurrentProfile(e => {
+			if (this.globalActivityAction) {
+				this.globalActivityAction.activity = this.createGlobalActivity(e.profile);
+			}
 		}));
 
 		if (this.accountsVisibilityPreference) {
@@ -542,6 +546,14 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
 		this.globalActivityActionBar.push(this.globalActivityAction);
 	}
 
+	private createGlobalActivity(profile: IUserDataProfile): IActivity {
+		return {
+			id: 'workbench.actions.manage',
+			name: localize('manage', "Manage"),
+			classNames: ThemeIcon.asClassNameArray(profile.icon ? ThemeIcon.fromId(profile.icon) : ActivitybarPart.GEAR_ICON),
+		};
+	}
+
 	private toggleAccountsActivity() {
 		if (!!this.accountsActivityAction === this.accountsVisibilityPreference) {
 			return;

src/vs/workbench/services/userDataProfile/browser/media/userDataProfileView.css

@@ -62,24 +62,63 @@
 	padding: 0 4px;
 }
 
-.profile-type-widget {
+.profile-edit-widget {
+	padding: 4px 6px 0px 11px;
+}
+
+.profile-edit-widget > .profile-icon-container {
+	display: flex;
+	margin-bottom: 8px;
+}
+
+.profile-edit-widget > .profile-icon-container > .profile-icon {
+	cursor: pointer;
+	padding: 3px;
+	border-radius: 5px;
+}
+
+.profile-edit-widget > .profile-icon-container > .profile-icon.codicon{
+	font-size: 18px;
+}
+
+.profile-edit-widget > .profile-icon-container > .profile-icon:hover {
+	outline: 1px dashed var(--vscode-toolbar-hoverOutline);
+	outline-offset: -1px;
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.profile-edit-widget > .profile-type-container {
 	display: flex;
-	margin: 0px 6px 8px 11px;
 	align-items: center;
 	justify-content: space-between;
 	font-size: 12px;
+	margin-bottom: 8px;
+}
+
+.profile-edit-widget > .profile-icon-container > .profile-icon-label,
+.profile-edit-widget > .profile-type-container > .profile-type-create-label {
+	width: 90px;
+	display: inline-flex;
+	align-items: center;
+}
+
+.profile-edit-widget > .profile-icon-container > .profile-icon-id {
+	display: inline-flex;
+	align-items: center;
+	margin-left: 5px;
+	opacity: .8;
+	font-size: 0.9em;
 }
 
-.profile-type-widget>.profile-type-select-container {
+.profile-edit-widget > .profile-type-container > .profile-type-select-container {
 	overflow: hidden;
-	padding-left: 10px;
 	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.profile-type-widget>.profile-type-select-container>.monaco-select-box {
+.profile-edit-widget > .profile-type-container > .profile-type-select-container > .monaco-select-box {
 	cursor: pointer;
 	line-height: 17px;
 	padding: 2px 23px 2px 8px;