demote menubar from part (#56031)

src/vs/workbench/browser/parts/menubar/media/menubarpart.css

-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-.monaco-workbench .part.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 .part.menubar {
-	margin: 0px;
-	padding: 0px 5px;
-}
-
-.monaco-workbench .part.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;
-}
-
-.monaco-workbench .part.menubar .menubar-menu-items-holder {
-	position: absolute;
-	left: 0px;
-	opacity: 1;
-	z-index: 2000;
-}
-
-.monaco-workbench .part.menubar .menubar-menu-items-holder.monaco-menu-container {
-	font-family: "Segoe WPC", "Segoe UI", ".SFNSDisplay-Light", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
-	outline: 0;
-	border: none;
-}
-
-.monaco-workbench .part.menubar .menubar-menu-items-holder.monaco-menu-container :focus {
-	outline: 0;
-}
-
-.hc-black .monaco-workbench .part.menubar .menubar-menu-items-holder.monaco-menu-container {
-	border: 2px solid #6FC3DF;
-}
\ No newline at end of file

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

@@ -150,4 +150,52 @@
 
 .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;
+}
+
+.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: "Segoe WPC", "Segoe UI", ".SFNSDisplay-Light", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
+	outline: 0;
+	border: none;
+}
+
+.monaco-workbench .menubar .menubar-menu-items-holder.monaco-menu-container :focus {
+	outline: 0;
+}
+
+.hc-black .monaco-workbench .menubar .menubar-menu-items-holder.monaco-menu-container {
+	border: 2px solid #6FC3DF;
 }
\ No newline at end of file

src/vs/workbench/browser/parts/menubar/menubarPart.ts → src/vs/workbench/browser/parts/titlebar/menubarControl.ts

@@ -5,11 +5,9 @@
 
 'use strict';
 
-import 'vs/workbench/browser/parts/menubar/menubar.contribution';
-import 'vs/css!./media/menubarpart';
+import 'vs/workbench/browser/parts/titlebar/titlebar.contribution';
 import * as nls from 'vs/nls';
 import * as browser from 'vs/base/browser/browser';
-import { Part } from 'vs/workbench/browser/part';
 import { IMenubarMenu, IMenubarMenuItemAction, IMenubarMenuItemSubmenu, IMenubarKeybinding } from 'vs/platform/menubar/common/menubar';
 import { IMenuService, MenuId, IMenu, SubmenuItemAction } from 'vs/platform/actions/common/actions';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
@@ -26,7 +24,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
 import { Event, Emitter } from 'vs/base/common/event';
-import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
 import { domEvent } from 'vs/base/browser/event';
 import { IRecentlyOpened } from 'vs/platform/history/common/history';
 import { IWorkspaceIdentifier, getWorkspaceLabel, ISingleFolderWorkspaceIdentifier, isSingleFolderWorkspaceIdentifier, isWorkspaceIdentifier } from 'vs/platform/workspaces/common/workspaces';
@@ -52,7 +50,7 @@ enum MenubarState {
 	OPEN
 }
 
-export class MenubarPart extends Part {
+export class MenubarControl extends Disposable {
 
 	private keys = [
 		'files.autoSave',
@@ -126,7 +124,8 @@ export class MenubarPart extends Part {
 		@IUriDisplayService private uriDisplayService: IUriDisplayService,
 		@IUpdateService private updateService: IUpdateService
 	) {
-		super(id, { hasTitle: false }, themeService);
+
+		super();
 
 		this.topLevelMenus = {
 			'File': this._register(this.menuService.createMenu(MenuId.MenubarFileMenu, this.contextKeyService)),
@@ -315,7 +314,6 @@ export class MenubarPart extends Part {
 
 	private onDidChangeFullscreen(): void {
 		this.setUnfocusedState();
-		this.updateStyles();
 	}
 
 	private onDidChangeWindowFocus(hasFocus: boolean): void {
@@ -525,7 +523,7 @@ export class MenubarPart extends Part {
 		const result: IAction[] = [];
 
 		if (workspaces.length > 0) {
-			for (let i = 0; i < MenubarPart.MAX_MENU_RECENT_ENTRIES && i < workspaces.length; i++) {
+			for (let i = 0; i < MenubarControl.MAX_MENU_RECENT_ENTRIES && i < workspaces.length; i++) {
 				result.push(this.createOpenRecentMenuAction(workspaces[i], 'openRecentWorkspace', false));
 			}
 
@@ -533,7 +531,7 @@ export class MenubarPart extends Part {
 		}
 
 		if (files.length > 0) {
-			for (let i = 0; i < MenubarPart.MAX_MENU_RECENT_ENTRIES && i < files.length; i++) {
+			for (let i = 0; i < MenubarControl.MAX_MENU_RECENT_ENTRIES && i < files.length; i++) {
 				result.push(this.createOpenRecentMenuAction(files[i], 'openRecentFile', false));
 			}
 
@@ -991,14 +989,16 @@ export class MenubarPart extends Part {
 		return this._onVisibilityChange.event;
 	}
 
-	public layout(dimension: Dimension): Dimension[] {
+	public layout(dimension: Dimension) {
+		if (this.container) {
+			this.container.style({ height: `${dimension.height}px` });
+		}
+
 		if (!this.isVisible) {
 			this.hideMenubar();
 		} else {
 			this.showMenubar();
 		}
-
-		return super.layout(dimension);
 	}
 
 	public getMenubarItemsDimensions(): Dimension {
@@ -1011,7 +1011,7 @@ export class MenubarPart extends Part {
 		return new Dimension(0, 0);
 	}
 
-	public createContentArea(parent: HTMLElement): HTMLElement {
+	public create(parent: HTMLElement): HTMLElement {
 		this.container = $(parent);
 
 		// Build the menubar
@@ -1031,7 +1031,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const menubarActiveWindowFgColor = theme.getColor(TITLE_BAR_ACTIVE_FOREGROUND);
 	if (menubarActiveWindowFgColor) {
 		collector.addRule(`
-		.monaco-workbench .part.menubar > .menubar-menu-button {
+		.monaco-workbench .menubar > .menubar-menu-button {
 			color: ${menubarActiveWindowFgColor};
 		}
 		`);
@@ -1040,7 +1040,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const menubarInactiveWindowFgColor = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND);
 	if (menubarInactiveWindowFgColor) {
 		collector.addRule(`
-			.monaco-workbench .part.menubar.inactive > .menubar-menu-button {
+			.monaco-workbench .menubar.inactive > .menubar-menu-button {
 				color: ${menubarInactiveWindowFgColor};
 			}
 		`);
@@ -1050,9 +1050,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const menubarSelectedFgColor = theme.getColor(MENUBAR_SELECTION_FOREGROUND);
 	if (menubarSelectedFgColor) {
 		collector.addRule(`
-			.monaco-workbench .part.menubar > .menubar-menu-button.open,
-			.monaco-workbench .part.menubar > .menubar-menu-button:focus,
-			.monaco-workbench .part.menubar > .menubar-menu-button:hover {
+			.monaco-workbench .menubar > .menubar-menu-button.open,
+			.monaco-workbench .menubar > .menubar-menu-button:focus,
+			.monaco-workbench .menubar > .menubar-menu-button:hover {
 				color: ${menubarSelectedFgColor};
 			}
 		`);
@@ -1061,9 +1061,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const menubarSelectedBgColor = theme.getColor(MENUBAR_SELECTION_BACKGROUND);
 	if (menubarSelectedBgColor) {
 		collector.addRule(`
-			.monaco-workbench .part.menubar > .menubar-menu-button.open,
-			.monaco-workbench .part.menubar > .menubar-menu-button:focus,
-			.monaco-workbench .part.menubar > .menubar-menu-button:hover {
+			.monaco-workbench .menubar > .menubar-menu-button.open,
+			.monaco-workbench .menubar > .menubar-menu-button:focus,
+			.monaco-workbench .menubar > .menubar-menu-button:hover {
 				background-color: ${menubarSelectedBgColor};
 			}
 		`);
@@ -1072,18 +1072,18 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const menubarSelectedBorderColor = theme.getColor(MENUBAR_SELECTION_BORDER);
 	if (menubarSelectedBorderColor) {
 		collector.addRule(`
-			.monaco-workbench .part.menubar > .menubar-menu-button:hover {
+			.monaco-workbench .menubar > .menubar-menu-button:hover {
 				outline: dashed 1px;
 			}
 
-			.monaco-workbench .part.menubar > .menubar-menu-button.open,
-			.monaco-workbench .part.menubar > .menubar-menu-button:focus {
+			.monaco-workbench .menubar > .menubar-menu-button.open,
+			.monaco-workbench .menubar > .menubar-menu-button:focus {
 				outline: solid 1px;
 			}
 
-			.monaco-workbench .part.menubar > .menubar-menu-button.open,
-			.monaco-workbench .part.menubar > .menubar-menu-button:focus,
-			.monaco-workbench .part.menubar > .menubar-menu-button:hover {
+			.monaco-workbench .menubar > .menubar-menu-button.open,
+			.monaco-workbench .menubar > .menubar-menu-button:focus,
+			.monaco-workbench .menubar > .menubar-menu-button:hover {
 				outline-offset: -1px;
 				outline-color: ${menubarSelectedBorderColor};
 			}

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

@@ -31,7 +31,7 @@ import URI from 'vs/base/common/uri';
 import { Color } from 'vs/base/common/color';
 import { trim } from 'vs/base/common/strings';
 import { addDisposableListener, EventType, EventHelper, Dimension } from 'vs/base/browser/dom';
-import { MenubarPart } from 'vs/workbench/browser/parts/menubar/menubarPart';
+import { MenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarControl';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { template, getBaseLabel } from 'vs/base/common/labels';
 import { IUriDisplayService } from 'vs/platform/uriDisplay/common/uriDisplay';
@@ -52,7 +52,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	private windowControls: Builder;
 	private maxRestoreControl: Builder;
 	private appIcon: Builder;
-	private menubarPart: MenubarPart;
+	private menubarPart: MenubarControl;
 	private menubar: Builder;
 	private resizer: Builder;
 
@@ -273,10 +273,10 @@ export class TitlebarPart extends Part implements ITitleService {
 		}
 
 		// Menubar: the menubar part which is responsible for populating both the custom and native menubars
-		this.menubarPart = this.instantiationService.createInstance(MenubarPart, 'workbench.parts.menubar');
+		this.menubarPart = this.instantiationService.createInstance(MenubarControl, 'workbench.parts.titlebar.menubar');
 		this.menubar = $(this.titleContainer).div({
-			'class': ['part', 'menubar'],
-			id: 'workbench.parts.menubar',
+			'class': ['menubar'],
+			id: 'workbench.parts.titlebar.menubar',
 			role: 'menubar'
 		});