unify keyboard and mouse focus in menus (#54428)

remove hover theming for menus as it no longer applies
remove unnecessary and conflicting high contrast theme border
use border over outline like hc

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

@@ -496,6 +496,28 @@ export class ActionBar implements IActionRunner {
 			this.actionsList.setAttribute('aria-label', this.options.ariaLabel);
 		}
 
+		if (this.options.isMenu) {
+			$(this.actionsList).on(DOM.EventType.MOUSE_OVER, (e) => {
+				let target = e.target as HTMLElement;
+				if (!target || !DOM.isAncestor(target, this.actionsList) || target === this.actionsList) {
+					return;
+				}
+
+				while (target.parentElement !== this.actionsList) {
+					target = target.parentElement;
+				}
+
+				if (DOM.hasClass(target, 'action-item') && !DOM.hasClass(target, 'disabled')) {
+					const lastFocusedItem = this.focusedItem;
+					this.setFocusedItem(target);
+
+					if (lastFocusedItem !== this.focusedItem) {
+						this.updateFocus();
+					}
+				}
+			});
+		}
+
 		this.domNode.appendChild(this.actionsList);
 
 		container.appendChild(this.domNode);
@@ -525,6 +547,16 @@ export class ActionBar implements IActionRunner {
 		}
 	}
 
+	private setFocusedItem(element: HTMLElement): void {
+		for (let i = 0; i < this.actionsList.children.length; i++) {
+			let elem = this.actionsList.children[i];
+			if (element === elem) {
+				this.focusedItem = i;
+				break;
+			}
+		}
+	}
+
 	private updateFocusedItem(): void {
 		for (let i = 0; i < this.actionsList.children.length; i++) {
 			let elem = this.actionsList.children[i];

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

@@ -35,10 +35,6 @@
 	background-color: #E4E4E4;
 }
 
-.monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
-	background-color: #EEE;
-}
-
 .monaco-menu .monaco-action-bar.vertical .action-menu-item {
 	-ms-flex: 1 1 auto;
 	flex: 1 1 auto;
@@ -125,15 +121,15 @@
 	outline: 0;
 }
 
+.monaco-menu .monaco-action-bar.vertical .action-item {
+	border: 1px solid transparent; /* prevents jumping behaviour on hover or focus */
+}
+
 /* Dark theme */
 .vs-dark .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 	background-color: #4B4C4D;
 }
 
-.vs-dark .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
-	background-color: #3A3A3A;
-}
-
 .vs-dark .context-view.monaco-menu-container {
 	box-shadow: 0 2px 8px #000;
 	color: #BBB;
@@ -148,16 +144,7 @@
 	box-shadow: none;
 }
 
-.hc-black .monaco-menu .monaco-action-bar.vertical .action-item {
-	border: 1px solid transparent; /* prevents jumpig behaviour on hover or focus */
-}
-
 .hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 	background: none;
 	border: 1px dotted #f38518;
-}
-
-.hc-black .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
-	background: none;
-	border: 1px dashed #f38518;
 }
\ No newline at end of file

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

@@ -359,6 +359,8 @@ class SubmenuActionItem extends MenuActionItem {
 			this.parentData.submenu.focus();
 
 			this.mysubmenu = this.parentData.submenu;
+		} else {
+			this.parentData.submenu.focus();
 		}
 	}
 

src/vs/workbench/browser/parts/menubar/menubarPart.ts

@@ -1060,8 +1060,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const selectedMenuItemBgColor = theme.getColor(MENU_SELECTION_BACKGROUND);
 	if (menuBgColor) {
 		collector.addRule(`
-			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused,
-			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
+			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 					background-color: ${selectedMenuItemBgColor};
 				}
 		`);
@@ -1070,8 +1069,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const selectedMenuItemFgColor = theme.getColor(MENU_SELECTION_FOREGROUND);
 	if (selectedMenuItemFgColor) {
 		collector.addRule(`
-		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused,
-		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
+		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 				color: ${selectedMenuItemFgColor};
 			}
 		`);
@@ -1081,17 +1079,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	if (selectedMenuItemBorderColor) {
 		collector.addRule(`
 		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused {
-			outline: solid 1px;
-		}
-
-		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
-			outline: dashed 1px;
-		}
-
-		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused,
-		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item:hover:not(.disabled) {
-				outline-offset: -1px;
-				outline-color: ${selectedMenuItemBorderColor};
+				border: 1px solid ${selectedMenuItemBorderColor};
 			}
 		`);
 	}

src/vs/workbench/common/theme.ts

@@ -435,7 +435,7 @@ export const MENU_SELECTION_BACKGROUND = registerColor('menu.selectionBackground
 export const MENU_SELECTION_BORDER = registerColor('menu.selectionBorder', {
 	dark: null,
 	light: null,
-	hc: activeContrastBorder
+	hc: null
 }, nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));
 
 // < --- Notifications --- >

src/vs/workbench/electron-browser/media/shell.css

@@ -107,7 +107,6 @@
 .monaco-shell input[type="button"]:active,
 .monaco-shell input[type="checkbox"]:active,
 .monaco-shell .monaco-tree .monaco-tree-row
-.monaco-action-bar .action-item [tabindex="0"]:hover,
 .monaco-shell .monaco-tree.focused.no-focused-item:active:before {
 	outline: 0 !important; /* fixes some flashing outlines from showing up when clicking */
 }