Custom Menubar Implementation

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

@@ -43,6 +43,8 @@ export class BaseActionItem implements IActionItem {
 	public _context: any;
 	public _action: IAction;
 
+	static MNEMONIC_REGEX: RegExp = /&&(.)/g;
+
 	private _actionRunner: IActionRunner;
 
 	constructor(context: any, action: IAction, protected options?: IBaseActionItemOptions) {
@@ -167,12 +169,14 @@ export class BaseActionItem implements IActionItem {
 	public focus(): void {
 		if (this.builder) {
 			this.builder.domFocus();
+			this.builder.addClass('focused');
 		}
 	}
 
 	public blur(): void {
 		if (this.builder) {
 			this.builder.domBlur();
+			this.builder.removeClass('focused');
 		}
 	}
 
@@ -273,7 +277,11 @@ export class ActionItem extends BaseActionItem {
 
 	public _updateLabel(): void {
 		if (this.options.label) {
-			this.$e.text(this.getAction().label);
+			let label = this.getAction().label;
+			if (label && this.options.isMenu) {
+				label = label.replace(BaseActionItem.MNEMONIC_REGEX, '$1\u0332');
+			}
+			this.$e.text(label);
 		}
 	}
 
@@ -372,7 +380,6 @@ export class ActionBar implements IActionRunner {
 
 	// Items
 	public items: IActionItem[];
-
 	private focusedItem: number;
 	private focusTracker: DOM.IFocusTracker;
 
@@ -487,7 +494,7 @@ export class ActionBar implements IActionRunner {
 		this.actionsList = document.createElement('ul');
 		this.actionsList.className = 'actions-container';
 		if (this.options.isMenu) {
-			this.actionsList.setAttribute('role', 'menubar');
+			this.actionsList.setAttribute('role', 'menu');
 		} else {
 			this.actionsList.setAttribute('role', 'toolbar');
 		}
@@ -558,6 +565,15 @@ export class ActionBar implements IActionRunner {
 		return this.domNode;
 	}
 
+	private _addMnemonic(action: IAction, actionItemElement: HTMLElement): void {
+		let matches = BaseActionItem.MNEMONIC_REGEX.exec(action.label);
+		if (matches && matches.length === 2) {
+			let mnemonic = matches[1];
+
+			actionItemElement.accessKey = mnemonic.toLocaleLowerCase();
+		}
+	}
+
 	public push(arg: IAction | IAction[], options: IActionOptions = {}): void {
 
 		const actions: IAction[] = !Array.isArray(arg) ? [arg] : arg;
@@ -575,6 +591,10 @@ export class ActionBar implements IActionRunner {
 				e.stopPropagation();
 			});
 
+			if (options.isMenu) {
+				this._addMnemonic(action, actionItemElement);
+			}
+
 			let item: IActionItem = null;
 
 			if (this.options.actionItemProvider) {
@@ -808,4 +828,4 @@ export class SelectActionItem extends BaseActionItem {
 
 		super.dispose();
 	}
-}
+}

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

@@ -87,6 +87,10 @@
 	color: inherit;
 }
 
+.monaco-menu .monaco-action-bar.vertical .action-label.checked:after {
+	content: '  \2713';
+}
+
 /* Context Menu */
 
 .context-view.monaco-menu-container {

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

@@ -18,6 +18,7 @@ export interface IMenuOptions {
 	actionItemProvider?: IActionItemProvider;
 	actionRunner?: IActionRunner;
 	getKeyBinding?: (action: IAction) => ResolvedKeybinding;
+	ariaLabel?: string;
 }
 
 export class Menu {
@@ -27,20 +28,23 @@ export class Menu {
 
 	constructor(container: HTMLElement, actions: IAction[], options: IMenuOptions = {}) {
 		addClass(container, 'monaco-menu-container');
+		container.setAttribute('role', 'presentation');
 
 		let menuContainer = document.createElement('div');
 		addClass(menuContainer, 'monaco-menu');
+		menuContainer.setAttribute('role', 'presentation');
 		container.appendChild(menuContainer);
 
 		this.actionBar = new ActionBar(menuContainer, {
 			orientation: ActionsOrientation.VERTICAL,
 			actionItemProvider: options.actionItemProvider,
 			context: options.context,
 			actionRunner: options.actionRunner,
-			isMenu: true
+			isMenu: true,
+			ariaLabel: options.ariaLabel
 		});
 
-		this.actionBar.push(actions, { icon: true, label: true });
+		this.actionBar.push(actions, { icon: true, label: true, isMenu: true });
 	}
 
 	public get onDidCancel(): Event<void> {

src/vs/code/electron-main/app.ts

@@ -12,7 +12,6 @@ import { IWindowsService, OpenContext, ActiveWindowManager } from 'vs/platform/w
 import { WindowsChannel } from 'vs/platform/windows/common/windowsIpc';
 import { WindowsService } from 'vs/platform/windows/electron-main/windowsService';
 import { ILifecycleService } from 'vs/platform/lifecycle/electron-main/lifecycleMain';
-import { CodeMenu } from 'vs/code/electron-main/menus';
 import { getShellEnvironment } from 'vs/code/node/shellEnv';
 import { IUpdateService } from 'vs/platform/update/common/update';
 import { UpdateChannel } from 'vs/platform/update/common/updateIpc';
@@ -61,6 +60,11 @@ import { LogLevelSetterChannel } from 'vs/platform/log/common/logIpc';
 import { setUnexpectedErrorHandler } from 'vs/base/common/errors';
 import { ElectronURLListener } from 'vs/platform/url/electron-main/electronUrlListener';
 import { serve as serveDriver } from 'vs/platform/driver/electron-main/driver';
+import { IMenubarService } from 'vs/platform/menubar/common/menubar';
+import { MenubarService } from 'vs/platform/menubar/electron-main/menubarService';
+import { MenubarChannel } from 'vs/platform/menubar/common/menubarIpc';
+// TODO@sbatten: Remove after conversion to new dynamic menubar
+import { CodeMenu } from 'vs/code/electron-main/menus';
 
 export class CodeApplication {
 
@@ -340,6 +344,7 @@ export class CodeApplication {
 		services.set(IWindowsService, new SyncDescriptor(WindowsService, this.sharedProcess));
 		services.set(ILaunchService, new SyncDescriptor(LaunchService));
 		services.set(IIssueService, new SyncDescriptor(IssueService, machineId, this.userEnv));
+		services.set(IMenubarService, new SyncDescriptor(MenubarService));
 
 		// Telemtry
 		if (this.environmentService.isBuilt && !this.environmentService.isExtensionDevelopment && !this.environmentService.args['disable-telemetry'] && !!product.enableTelemetry) {
@@ -383,6 +388,10 @@ export class CodeApplication {
 		this.electronIpcServer.registerChannel('windows', windowsChannel);
 		this.sharedProcessClient.done(client => client.registerChannel('windows', windowsChannel));
 
+		const menubarService = accessor.get(IMenubarService);
+		const menubarChannel = new MenubarChannel(menubarService);
+		this.electronIpcServer.registerChannel('menubar', menubarChannel);
+
 		const urlService = accessor.get(IURLService);
 		const urlChannel = new URLServiceChannel(urlService);
 		this.electronIpcServer.registerChannel('url', urlChannel);
@@ -447,7 +456,6 @@ export class CodeApplication {
 	}
 
 	private afterWindowOpen(accessor: ServicesAccessor): void {
-		const appInstantiationService = accessor.get(IInstantiationService);
 		const windowsMainService = accessor.get(IWindowsMainService);
 
 		let windowsMutex: Mutex = null;
@@ -487,8 +495,13 @@ export class CodeApplication {
 			}
 		}
 
+		// TODO@sbatten: Remove when menu is converted
 		// Install Menu
-		appInstantiationService.createInstance(CodeMenu);
+		const instantiationService = accessor.get(IInstantiationService);
+		const configurationService = accessor.get(IConfigurationService);
+		if (platform.isMacintosh || configurationService.getValue<string>('window.titleBarStyle') !== 'custom') {
+			instantiationService.createInstance(CodeMenu);
+		}
 
 		// Jump List
 		this.historyMainService.updateWindowsJumpList();