Allow menubar to convert into hamburger below threshold (#155223)

fixes #152906
microsoft · Jul 18, 2022 · a69dc7c · a69dc7c
1 parent c1374a7
commit a69dc7c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 28 deletions.
diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts
@@ -33,8 +33,7 @@ export const MENU_ESCAPED_MNEMONIC_REGEX = /(&amp;)?(&amp;)([^\s&])/g;
 
 export enum Direction {
 	Right,
-	Left,
-	Down
+	Left
 }
 
 export interface IMenuOptions {

diff --git a/src/vs/base/browser/ui/menu/menubar.css b/src/vs/base/browser/ui/menu/menubar.css
@@ -13,6 +13,10 @@
 	overflow: hidden;
 }
 
+.menubar.overflow-menu-only {
+	width: 38px;
+}
+
 .fullscreen .menubar:not(.compact) {
 	margin: 0px;
 	padding: 4px 5px;
@@ -93,6 +97,7 @@
 	justify-content: center;
 }
 
+.menubar:not(.compact) .menubar-menu-button:first-child .toolbar-toggle-more::before,
 .menubar.compact .toolbar-toggle-more::before {
 	content: "\eb94" !important;
 }

diff --git a/src/vs/base/browser/ui/menu/menubar.ts b/src/vs/base/browser/ui/menu/menubar.ts
@@ -334,8 +334,6 @@ export class MenuBar extends Disposable {
 					triggerKeys.push(KeyCode.RightArrow);
 				} else if (this.options.compactMode === Direction.Left) {
 					triggerKeys.push(KeyCode.LeftArrow);
-				} else if (this.options.compactMode === Direction.Down) {
-					triggerKeys.push(KeyCode.DownArrow);
 				}
 			}
 
@@ -475,6 +473,11 @@ export class MenuBar extends Disposable {
 			return;
 		}
 
+		const overflowMenuOnlyClass = 'overflow-menu-only';
+
+		// Remove overflow only restriction to allow the most space
+		this.container.classList.toggle(overflowMenuOnlyClass, false);
+
 		const sizeAvailable = this.container.offsetWidth;
 		let currentSize = 0;
 		let full = this.isCompact;
@@ -501,6 +504,18 @@ export class MenuBar extends Disposable {
 			}
 		}
 
+
+		// If below minimium menu threshold, show the overflow menu only as hamburger menu
+		if (this.numMenusShown - 1 <= showableMenus.length / 2) {
+			for (const menuBarMenu of showableMenus) {
+				menuBarMenu.buttonElement.style.visibility = 'hidden';
+			}
+
+			full = true;
+			this.numMenusShown = 0;
+			currentSize = 0;
+		}
+
 		// Overflow
 		if (this.isCompact) {
 			this.overflowMenu.actions = [];
@@ -540,6 +555,9 @@ export class MenuBar extends Disposable {
 			this.container.appendChild(this.overflowMenu.buttonElement);
 			this.overflowMenu.buttonElement.style.visibility = 'hidden';
 		}
+
+		// If we are only showing the overflow, add this class to avoid taking up space
+		this.container.classList.toggle(overflowMenuOnlyClass, this.numMenusShown === 0);
 	}
 
 	private updateLabels(titleElement: HTMLElement, buttonElement: HTMLElement, label: string): void {

diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
@@ -133,6 +133,7 @@
 
 	/* width */
 	width: 16px;
+	flex-shrink: 0;
 }
 
 .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label {

diff --git a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
@@ -581,17 +581,6 @@ export class CustomMenubarControl extends MenubarControl {
 		return getMenuBarVisibility(this.configurationService);
 	}
 
-	private get currentCommandCenterEnabled(): boolean {
-		const settingValue = this.configurationService.getValue<boolean>('window.commandCenter');
-
-		let enableCommandCenter = false;
-		if (typeof settingValue === 'boolean') {
-			enableCommandCenter = !!settingValue;
-		}
-
-		return enableCommandCenter;
-	}
-
 	private get currentDisableMenuBarAltFocus(): boolean {
 		const settingValue = this.configurationService.getValue<boolean>('window.customMenuBarAltFocus');
 
@@ -637,11 +626,6 @@ export class CustomMenubarControl extends MenubarControl {
 
 	private get currentCompactMenuMode(): Direction | undefined {
 		if (this.currentMenubarVisibility !== 'compact') {
-			// With the command center enabled, use compact menu in title bar and flow to the right
-			if (this.currentCommandCenterEnabled) {
-				return Direction.Down;
-			}
-
 			return undefined;
 		}
 

diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
@@ -157,14 +157,6 @@ export class TitlebarPart extends Part implements ITitleService {
 					this.installMenubar();
 				}
 			}
-
-			// Trigger a re-install of the menubar with command center change
-			if (event.affectsConfiguration('window.commandCenter')) {
-				if (this.currentMenubarVisibility !== 'compact') {
-					this.uninstallMenubar();
-					this.installMenubar();
-				}
-			}
 		}
 
 		if (this.titleBarStyle !== 'native' && this.layoutControls && event.affectsConfiguration('workbench.layoutControl.enabled')) {