Make menubar its own widget and add overflow (#63954)

* working state

* fix keybindings and add compact submenu mode

* fix blur

* fix mnemonics in overflow menu

* fix issues with window resizing

* switch to ellipsis

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

@@ -675,12 +675,28 @@ export class ActionBar extends Disposable implements IActionRunner {
 		return this.items.length === 0;
 	}
 
-	focus(selectFirst?: boolean): void {
+	focus(index?: number): void;
+	focus(selectFirst?: boolean): void;
+	focus(arg?: any): void {
+		let selectFirst: boolean;
+		let index: number;
+		if (arg === undefined) {
+			selectFirst = true;
+		} else if (typeof arg === 'number') {
+			index = arg;
+		} else if (typeof arg === 'boolean') {
+			selectFirst = arg;
+		}
+
 		if (selectFirst && typeof this.focusedItem === 'undefined') {
 			// Focus the first enabled item
 			this.focusedItem = this.items.length - 1;
 			this.focusNext();
 		} else {
+			if (index !== undefined) {
+				this.focusedItem = index;
+			}
+
 			this.updateFocus();
 		}
 	}

src/vs/base/browser/ui/menu/ellipsis.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>Ellipsis_bold_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M6,7.5A2.5,2.5,0,1,1,3.5,5,2.5,2.5,0,0,1,6,7.5ZM8.5,5A2.5,2.5,0,1,0,11,7.5,2.5,2.5,0,0,0,8.5,5Zm5,0A2.5,2.5,0,1,0,16,7.5,2.5,2.5,0,0,0,13.5,5Z" style="display: none;"/></g><g id="iconBg"><path class="icon-vs-bg" d="M5,7.5A1.5,1.5,0,1,1,3.5,6,1.5,1.5,0,0,1,5,7.5ZM8.5,6A1.5,1.5,0,1,0,10,7.5,1.5,1.5,0,0,0,8.5,6Zm5,0A1.5,1.5,0,1,0,15,7.5,1.5,1.5,0,0,0,13.5,6Z"/></g></svg>
\ No newline at end of file

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

@@ -145,4 +145,64 @@
 
 .hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 	background: none;
+}
+
+/* Menubar styles */
+
+.menubar {
+	display: flex;
+	flex-shrink: 1;
+	box-sizing: border-box;
+	height: 30px;
+	-webkit-app-region: no-drag;
+	overflow: hidden;
+	flex-wrap: wrap;
+}
+
+.fullscreen .menubar {
+	margin: 0px;
+	padding: 0px 5px;
+}
+
+.menubar > .menubar-menu-button {
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0px 8px;
+	cursor: default;
+	-webkit-app-region: no-drag;
+	zoom: 1;
+	white-space: nowrap;
+	outline: 0;
+}
+
+.menubar .menubar-menu-items-holder {
+	position: absolute;
+	left: 0px;
+	opacity: 1;
+	z-index: 2000;
+}
+
+.menubar .menubar-menu-items-holder.monaco-menu-container {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
+	outline: 0;
+	border: none;
+}
+
+.menubar .menubar-menu-items-holder.monaco-menu-container :focus {
+	outline: 0;
+}
+
+.menubar .toolbar-toggle-more {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 14px;
+	width: 20px;
+	height: 100%;
+}
+
+.menubar .toolbar-toggle-more {
+	display: inline-block;
+	padding: 0;
+	-webkit-mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px;
+	mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px;
 }
\ No newline at end of file

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

@@ -9,7 +9,7 @@ import * as strings from 'vs/base/common/strings';
 import { IActionRunner, IAction, Action } from 'vs/base/common/actions';
 import { ActionBar, IActionItemProvider, ActionsOrientation, Separator, ActionItem, IActionItemOptions, BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ResolvedKeybinding, KeyCode, KeyCodeUtils } from 'vs/base/common/keyCodes';
-import { addClass, EventType, EventHelper, EventLike, removeTabIndexAndUpdateFocus, isAncestor, hasClass, addDisposableListener, removeClass, append, $, addClasses, getClientArea, removeClasses } from 'vs/base/browser/dom';
+import { addClass, EventType, EventHelper, EventLike, removeTabIndexAndUpdateFocus, isAncestor, hasClass, addDisposableListener, removeClass, append, $, addClasses, removeClasses } from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
@@ -209,7 +209,7 @@ export class Menu extends ActionBar {
 		return this.scrollableElement.getDomNode();
 	}
 
-	public get onScroll(): Event<void> {
+	get onScroll(): Event<void> {
 		return this._onScroll.event;
 	}
 
@@ -217,6 +217,20 @@ export class Menu extends ActionBar {
 		return this.menuElement.scrollTop;
 	}
 
+	trigger(index: number): void {
+		if (index <= this.items.length && index >= 0) {
+			const item = this.items[index];
+			if (item instanceof SubmenuActionItem) {
+				super.focus(index);
+				item.open(true);
+			} else if (item instanceof MenuActionItem) {
+				super.run(item._action, item._context);
+			} else {
+				return;
+			}
+		}
+	}
+
 	private focusItemByElement(element: HTMLElement) {
 		const lastFocusedItem = this.focusedItem;
 		this.setFocusedItem(element);
@@ -285,10 +299,6 @@ export class Menu extends ActionBar {
 			return menuActionItem;
 		}
 	}
-
-	public focus(selectFirst = true) {
-		super.focus(selectFirst);
-	}
 }
 
 interface IMenuItemOptions extends IActionItemOptions {
@@ -571,6 +581,11 @@ class SubmenuActionItem extends MenuActionItem {
 		}));
 	}
 
+	open(selectFirst?: boolean): void {
+		this.cleanupExistingSubmenu(false);
+		this.createSubmenu(selectFirst);
+	}
+
 	onClick(e: EventLike): void {
 		// stop clicking from trying to run an action
 		EventHelper.stop(e, true);
@@ -595,8 +610,22 @@ class SubmenuActionItem extends MenuActionItem {
 		if (!this.parentData.submenu) {
 			this.submenuContainer = append(this.element, $('div.monaco-submenu'));
 			addClasses(this.submenuContainer, 'menubar-menu-items-holder', 'context-view');
-			this.submenuContainer.style.left = `${getClientArea(this.element).width}px`;
-			this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset}px`;
+
+			this.parentData.submenu = new Menu(this.submenuContainer, this.submenuActions, this.submenuOptions);
+			if (this.menuStyle) {
+				this.parentData.submenu.style(this.menuStyle);
+			}
+
+			const boundingRect = this.element.getBoundingClientRect();
+			const childBoundingRect = this.submenuContainer.getBoundingClientRect();
+
+			if (window.innerWidth <= boundingRect.right + childBoundingRect.width) {
+				this.submenuContainer.style.left = '10px';
+				this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset + boundingRect.height}px`;
+			} else {
+				this.submenuContainer.style.left = `${this.element.offsetWidth}px`;
+				this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset}px`;
+			}
 
 			this.submenuDisposables.push(addDisposableListener(this.submenuContainer, EventType.KEY_UP, e => {
 				let event = new StandardKeyboardEvent(e);
@@ -619,10 +648,6 @@ class SubmenuActionItem extends MenuActionItem {
 				}
 			}));
 
-			this.parentData.submenu = new Menu(this.submenuContainer, this.submenuActions, this.submenuOptions);
-			if (this.menuStyle) {
-				this.parentData.submenu.style(this.menuStyle);
-			}
 
 			this.submenuDisposables.push(this.parentData.submenu.onDidCancel(() => {
 				this.parentData.parent.focus();

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -156,49 +156,4 @@
 
 .monaco-workbench > .part.titlebar > .window-controls-container .window-icon.window-close:hover {
 	background-color: white;
-}
-
-/* Menubar styles */
-
-.monaco-workbench .menubar {
-	display: flex;
-	flex-shrink: 1;
-	box-sizing: border-box;
-	height: 30px;
-	-webkit-app-region: no-drag;
-	overflow: hidden;
-	flex-wrap: wrap;
-}
-
-.monaco-workbench.fullscreen .menubar {
-	margin: 0px;
-	padding: 0px 5px;
-}
-
-.monaco-workbench .menubar > .menubar-menu-button {
-	align-items: center;
-	box-sizing: border-box;
-	padding: 0px 8px;
-	cursor: default;
-	-webkit-app-region: no-drag;
-	zoom: 1;
-	white-space: nowrap;
-	outline: 0;
-}
-
-.monaco-workbench .menubar .menubar-menu-items-holder {
-	position: absolute;
-	left: 0px;
-	opacity: 1;
-	z-index: 2000;
-}
-
-.monaco-workbench .menubar .menubar-menu-items-holder.monaco-menu-container {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", "Ubuntu", "Droid Sans", sans-serif;
-	outline: 0;
-	border: none;
-}
-
-.monaco-workbench .menubar .menubar-menu-items-holder.monaco-menu-container :focus {
-	outline: 0;
 }
\ No newline at end of file