web - add a home indicator API

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

@@ -20,7 +20,7 @@ import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeServic
 import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
-import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
+import { Dimension, addClass, removeNode, addClasses } from 'vs/base/browser/dom';
 import { IStorageService, StorageScope, IWorkspaceStorageChangeEvent } from 'vs/platform/storage/common/storage';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
 import { URI, UriComponents } from 'vs/base/common/uri';
@@ -38,7 +38,6 @@ import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menuba
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { getMenuBarVisibility } from 'vs/platform/windows/common/windows';
 import { isWeb } from 'vs/base/common/platform';
-import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { IStorageKeysSyncRegistryService } from 'vs/platform/userDataSync/common/storageKeys';
 import { getUserDataSyncStore } from 'vs/platform/userDataSync/common/userDataSync';
 import { IProductService } from 'vs/platform/product/common/productService';
@@ -85,19 +84,21 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 	//#endregion
 
+	private content: HTMLElement | undefined;
+
+	private homeIndicatorActionLabel: HTMLAnchorElement | undefined = undefined;
+
+	private menubar: CustomMenubarControl | undefined;
+	private menubarContainer: HTMLElement | undefined;
+
+	private compositeBar: CompositeBar;
+
 	private globalActivityAction: ActivityAction | undefined;
 	private globalActivityActionBar: ActionBar | undefined;
 	private readonly globalActivity: ICompositeActivity[] = [];
 
-	private customMenubar: CustomMenubarControl | undefined;
-	private menubar: HTMLElement | undefined;
-	private content: HTMLElement | undefined;
-
 	private readonly cachedViewlets: ICachedViewlet[] = [];
-
-	private compositeBar: CompositeBar;
 	private readonly compositeActions = new Map<string, { activityAction: ViewletActivityAction, pinnedAction: ToggleCompositePinnedAction }>();
-
 	private readonly viewletDisposables = new Map<string, IDisposable>();
 
 	constructor(
@@ -110,8 +111,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		@IViewDescriptorService private readonly viewDescriptorService: IViewDescriptorService,
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
-		@IWorkbenchEnvironmentService workbenchEnvironmentService: IWorkbenchEnvironmentService,
-		@IEnvironmentService private readonly environmentService: IEnvironmentService,
+		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
 		@IStorageKeysSyncRegistryService storageKeysSyncRegistryService: IStorageKeysSyncRegistryService,
 		@IProductService private readonly productService: IProductService
 	) {
@@ -122,7 +122,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 		this.cachedViewlets = this.getCachedViewlets();
 		for (const cachedViewlet of this.cachedViewlets) {
-			if (workbenchEnvironmentService.configuration.remoteAuthority // In remote window, hide activity bar entries until registered.
+			if (environmentService.configuration.remoteAuthority // In remote window, hide activity bar entries until registered.
 				|| this.shouldBeHidden(cachedViewlet.id, cachedViewlet)
 			) {
 				cachedViewlet.visible = false;
@@ -297,25 +297,25 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 	}
 
 	private uninstallMenubar() {
-		if (this.customMenubar) {
-			this.customMenubar.dispose();
+		if (this.menubar) {
+			this.menubar.dispose();
 		}
 
-		if (this.menubar) {
-			removeNode(this.menubar);
+		if (this.menubarContainer) {
+			removeNode(this.menubarContainer);
 		}
 	}
 
 	private installMenubar() {
-		this.menubar = document.createElement('div');
-		addClass(this.menubar, 'menubar');
+		this.menubarContainer = document.createElement('div');
+		addClass(this.menubarContainer, 'menubar');
 
 		const content = assertIsDefined(this.content);
-		content.prepend(this.menubar);
+		content.prepend(this.menubarContainer);
 
 		// Menubar: install a custom menu bar depending on configuration
-		this.customMenubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
-		this.customMenubar.create(this.menubar);
+		this.menubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
+		this.menubar.create(this.menubarContainer);
 	}
 
 	createContentArea(parent: HTMLElement): HTMLElement {
@@ -325,6 +325,12 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		addClass(this.content, 'content');
 		parent.appendChild(this.content);
 
+		// Home action bar
+		const homeIndicator = this.environmentService.options?.homeIndicator;
+		if (homeIndicator) {
+			this.createHomeBar(homeIndicator.href, homeIndicator.title, homeIndicator.icon);
+		}
+
 		// Install menubar if compact
 		if (getMenuBarVisibility(this.configurationService, this.environmentService) === 'compact') {
 			this.installMenubar();
@@ -343,12 +349,33 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		return this.content;
 	}
 
+	private createHomeBar(href: string, title: string, icon: string): void {
+		const homeBarContainer = document.createElement('div');
+		homeBarContainer.setAttribute('aria-label', nls.localize('homeIndicator', "Home"));
+		homeBarContainer.setAttribute('role', 'toolbar');
+		addClass(homeBarContainer, 'home-bar');
+
+		const content = assertIsDefined(this.content);
+		content.prepend(homeBarContainer);
+
+		this.homeIndicatorActionLabel = document.createElement('a');
+		this.homeIndicatorActionLabel.tabIndex = 0;
+		this.homeIndicatorActionLabel.title = title;
+		this.homeIndicatorActionLabel.setAttribute('aria-label', title);
+		this.homeIndicatorActionLabel.setAttribute('role', 'button');
+		this.homeIndicatorActionLabel.href = href;
+		addClasses(this.homeIndicatorActionLabel, 'action-label', 'codicon', `codicon-${icon}`);
+
+		homeBarContainer.appendChild(this.homeIndicatorActionLabel);
+	}
+
 	updateStyles(): void {
 		super.updateStyles();
 
 		// Part container
 		const container = assertIsDefined(this.getContainer());
 		const background = this.getColor(ACTIVITY_BAR_BACKGROUND) || '';
+		const forground = this.getColor(ACTIVITY_BAR_FOREGROUND) || '';
 		container.style.backgroundColor = background;
 
 		const borderColor = this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder) || '';
@@ -360,7 +387,11 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		container.style.borderLeftWidth = borderColor && !isPositionLeft ? '1px' : '';
 		container.style.borderLeftStyle = borderColor && !isPositionLeft ? 'solid' : '';
 		container.style.borderLeftColor = !isPositionLeft ? borderColor : '';
-		// container.style.outlineColor = this.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND) ?? '';
+
+		// Home action label
+		if (this.homeIndicatorActionLabel) {
+			this.homeIndicatorActionLabel.style.color = forground;
+		}
 	}
 
 	private getActivitybarItemColors(theme: IColorTheme): ICompositeBarColors {
@@ -570,8 +601,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		if (this.globalActivityActionBar) {
 			availableHeight -= (this.globalActivityActionBar.viewItems.length * ActivitybarPart.ACTION_HEIGHT); // adjust height for global actions showing
 		}
-		if (this.menubar) {
-			availableHeight -= this.menubar.clientHeight;
+		if (this.menubarContainer) {
+			availableHeight -= this.menubarContainer.clientHeight;
 		}
 		this.compositeBar.layout(new Dimension(width, availableHeight));
 	}

src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css

@@ -14,6 +14,22 @@
 	justify-content: space-between;
 }
 
+/** Home Bar */
+
+.monaco-workbench .activitybar > .content > .home-bar {
+	width: 100%;
+	height: 35px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.monaco-workbench .activitybar > .content > .home-bar > .action-label {
+	font-size: 24px;
+}
+
+/** Viewlet Switcher */
+
 .monaco-workbench .activitybar > .content .monaco-action-bar {
 	text-align: left;
 	background-color: inherit;
@@ -31,6 +47,8 @@
 	height: 100%;
 }
 
+/** Menu Bar */
+
 .monaco-workbench .activitybar .menubar {
 	width: 100%;
 	height: 35px;

src/vs/workbench/workbench.web.api.ts

@@ -86,6 +86,25 @@ interface ICommand {
 	handler: (...args: any[]) => unknown;
 }
 
+interface IHomeIndicator {
+
+	/**
+	 * The location to open when clicking the home indicator.
+	 */
+	href: string;
+
+	/**
+	 * The icon name for the home indicator. This needs to be one of the existing
+	 * icons from our Codicon icon set. For example `sync`.
+	 */
+	icon: string;
+
+	/**
+	 * A tooltip that will appear while hovering over the home indicator.
+	 */
+	title: string;
+}
+
 interface IWorkbenchConstructionOptions {
 
 	//#region Connection related configuration
@@ -181,6 +200,11 @@ interface IWorkbenchConstructionOptions {
 	 */
 	readonly commands?: readonly ICommand[];
 
+	/**
+	 * Optional home indicator to appear above the hamburger menu in the activity bar.
+	 */
+	readonly homeIndicator?: IHomeIndicator;
+
 	//#endregion
 
 
@@ -324,7 +348,10 @@ export {
 
 	// Commands
 	ICommand,
-	commands
+	commands,
+
+	// Home Indicator
+	IHomeIndicator
 };
 
 //#endregion