Fix Activity Bar Position Bottom with Menu (microsoft#208767)

fix microsoft#207242

Author: benibenj

src/vs/base/browser/ui/menu/menu.ts

@@ -31,11 +31,21 @@ export const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;
 
 
 
-export enum Direction {
+export enum HorizontalDirection {
 	Right,
 	Left
 }
 
+export enum VerticalDirection {
+	Above,
+	Below
+}
+
+export interface IMenuDirection {
+	horizontal: HorizontalDirection;
+	vertical: VerticalDirection;
+}
+
 export interface IMenuOptions {
 	context?: unknown;
 	actionViewItemProvider?: IActionViewItemProvider;
@@ -44,7 +54,7 @@ export interface IMenuOptions {
 	ariaLabel?: string;
 	enableMnemonics?: boolean;
 	anchorAlignment?: AnchorAlignment;
-	expandDirection?: Direction;
+	expandDirection?: IMenuDirection;
 	useEventAsContext?: boolean;
 	submenuIds?: Set<string>;
 }
@@ -725,7 +735,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 	private mouseOver: boolean = false;
 	private showScheduler: RunOnceScheduler;
 	private hideScheduler: RunOnceScheduler;
-	private expandDirection: Direction;
+	private expandDirection: IMenuDirection;
 
 	constructor(
 		action: IAction,
@@ -736,7 +746,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 	) {
 		super(action, action, submenuOptions, menuStyles);
 
-		this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : Direction.Right;
+		this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below };
 
 		this.showScheduler = new RunOnceScheduler(() => {
 			if (this.mouseOver) {
@@ -850,11 +860,11 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 		}
 	}
 
-	private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: Direction): { top: number; left: number } {
+	private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: IMenuDirection): { top: number; left: number } {
 		const ret = { top: 0, left: 0 };
 
 		// Start with horizontal
-		ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection === Direction.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, offset: entry.left, size: entry.width });
+		ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection.horizontal === HorizontalDirection.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, offset: entry.left, size: entry.width });
 
 		// We don't have enough room to layout the menu fully, so we are overlapping the menu
 		if (ret.left >= entry.left && ret.left < entry.left + entry.width) {

src/vs/base/browser/ui/menu/menubar.ts

@@ -8,7 +8,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { EventType, Gesture, GestureEvent } from 'vs/base/browser/touch';
-import { cleanMnemonic, Direction, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX } from 'vs/base/browser/ui/menu/menu';
+import { cleanMnemonic, HorizontalDirection, IMenuDirection, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX, VerticalDirection } from 'vs/base/browser/ui/menu/menu';
 import { ActionRunner, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
 import { asArray } from 'vs/base/common/arrays';
 import { RunOnceScheduler } from 'vs/base/common/async';
@@ -32,7 +32,7 @@ export interface IMenuBarOptions {
 	visibility?: string;
 	getKeybinding?: (action: IAction) => ResolvedKeybinding | undefined;
 	alwaysOnMnemonics?: boolean;
-	compactMode?: Direction;
+	compactMode?: IMenuDirection;
 	actionRunner?: IActionRunner;
 	getCompactMenuActions?: () => IAction[];
 }
@@ -333,9 +333,9 @@ export class MenuBar extends Disposable {
 			} else {
 				triggerKeys.push(KeyCode.Space);
 
-				if (this.options.compactMode === Direction.Right) {
+				if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
 					triggerKeys.push(KeyCode.RightArrow);
-				} else if (this.options.compactMode === Direction.Left) {
+				} else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
 					triggerKeys.push(KeyCode.LeftArrow);
 				}
 			}
@@ -1007,26 +1007,33 @@ export class MenuBar extends Disposable {
 		const titleBoundingRect = customMenu.titleElement.getBoundingClientRect();
 		const titleBoundingRectZoom = DOM.getDomNodeZoomLevel(customMenu.titleElement);
 
-		if (this.options.compactMode === Direction.Right) {
-			menuHolder.style.top = `${titleBoundingRect.top}px`;
+		if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
 			menuHolder.style.left = `${titleBoundingRect.left + this.container.clientWidth}px`;
-		} else if (this.options.compactMode === Direction.Left) {
+		} else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
 			menuHolder.style.top = `${titleBoundingRect.top}px`;
 			menuHolder.style.right = `${this.container.clientWidth}px`;
 			menuHolder.style.left = 'auto';
 		} else {
-			menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
 			menuHolder.style.left = `${titleBoundingRect.left * titleBoundingRectZoom}px`;
 		}
 
+		if (this.options.compactMode?.vertical === VerticalDirection.Above) {
+			// TODO@benibenj Do not hardcode the height of the menu holder
+			menuHolder.style.top = `${titleBoundingRect.top - this.menus.length * 30 + this.container.clientHeight}px`;
+		} else if (this.options.compactMode?.vertical === VerticalDirection.Below) {
+			menuHolder.style.top = `${titleBoundingRect.top}px`;
+		} else {
+			menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
+		}
+
 		customMenu.buttonElement.appendChild(menuHolder);
 
 		const menuOptions: IMenuOptions = {
 			getKeyBinding: this.options.getKeybinding,
 			actionRunner: this.actionRunner,
 			enableMnemonics: this.options.alwaysOnMnemonics || (this.mnemonicsInUse && this.options.enableMnemonics),
 			ariaLabel: customMenu.buttonElement.getAttribute('aria-label') ?? undefined,
-			expandDirection: this.isCompact ? this.options.compactMode : Direction.Right,
+			expandDirection: this.isCompact ? this.options.compactMode : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below },
 			useEventAsContext: true
 		};
 

src/vs/workbench/browser/parts/titlebar/menubarControl.ts

@@ -25,7 +25,7 @@ import { INotificationService, Severity } from 'vs/platform/notification/common/
 import { IPreferencesService } from 'vs/workbench/services/preferences/common/preferences';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { MenuBar, IMenuBarOptions } from 'vs/base/browser/ui/menu/menubar';
-import { Direction } from 'vs/base/browser/ui/menu/menu';
+import { HorizontalDirection, IMenuDirection, VerticalDirection } from 'vs/base/browser/ui/menu/menu';
 import { mnemonicMenuLabel, unmnemonicLabel } from 'vs/base/common/labels';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { isFullscreen, onDidChangeFullscreen } from 'vs/base/browser/browser';
@@ -41,6 +41,7 @@ import { isICommandActionToggleInfo } from 'vs/platform/action/common/action';
 import { createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { defaultMenuStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { mainWindow } from 'vs/base/browser/window';
+import { ActivityBarPosition } from 'vs/workbench/services/layout/browser/layoutService';
 
 export type IOpenRecentAction = IAction & { uri: URI; remoteAuthority?: string };
 
@@ -536,14 +537,19 @@ export class CustomMenubarControl extends MenubarControl {
 		return enableMenuBarMnemonics && (!isWeb || isFullscreen(mainWindow));
 	}
 
-	private get currentCompactMenuMode(): Direction | undefined {
+	private get currentCompactMenuMode(): IMenuDirection | undefined {
 		if (this.currentMenubarVisibility !== 'compact') {
 			return undefined;
 		}
 
 		// Menu bar lives in activity bar and should flow based on its location
 		const currentSidebarLocation = this.configurationService.getValue<string>('workbench.sideBar.location');
-		return currentSidebarLocation === 'right' ? Direction.Left : Direction.Right;
+		const horizontalDirection = currentSidebarLocation === 'right' ? HorizontalDirection.Left : HorizontalDirection.Right;
+
+		const activityBarLocation = this.configurationService.getValue<string>('workbench.activityBar.location');
+		const verticalDirection = activityBarLocation === ActivityBarPosition.BOTTOM ? VerticalDirection.Above : VerticalDirection.Below;
+
+		return { horizontal: horizontalDirection, vertical: verticalDirection };
 	}
 
 	private onDidVisibilityChange(visible: boolean): void {