Merge from vscode e0762af258c0b20320ed03f3871a41967acc4421 (#7404)

* Merge from vscode e0762af258c0b20320ed03f3871a41967acc4421 * readd svgs
2026-03-31 17:20:28 -04:00 · 2019-09-27 11:13:19 -07:00
parent 6385443a4c
commit 07109617b5
348 changed files with 4219 additions and 4307 deletions
--- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
+++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
@@ -266,9 +266,9 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
 	if (activeForegroundColor) {
 		collector.addRule(`
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.active .action-label,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:focus .action-label,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:hover .action-label {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label {
 				background-color: ${activeForegroundColor} !important;
 			}
 		`);
@@ -278,7 +278,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const outline = theme.getColor(activeContrastBorder);
 	if (outline) {
 		collector.addRule(`
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:before {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:before {
 				content: "";
 				position: absolute;
 				top: 9px;
@@ -287,26 +287,26 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 				width: 32px;
 			}

-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.active:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.active:hover:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked:hover:before {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active:hover:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:hover:before {
 				outline: 1px solid;
 			}

-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:hover:before {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover:before {
 				outline: 1px dashed;
 			}

-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:focus:before {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 				border-left-color: ${outline};
 			}

-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.active:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.active:hover:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked:hover:before,
-			.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:hover:before {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active:hover:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:hover:before,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover:before {
 				outline-color: ${outline};
 			}
 		`);
@@ -317,7 +317,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		const focusBorderColor = theme.getColor(focusBorder);
 		if (focusBorderColor) {
 			collector.addRule(`
-					.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:focus:before {
+					.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 						border-left-color: ${focusBorderColor};
 					}
 				`);
--- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
+++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
@@ -21,7 +21,7 @@ import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar, ICompositeBarItem } from 'vs/workbench/browser/parts/compositeBar';
-import { Dimension, addClass } from 'vs/base/browser/dom';
+import { Dimension, addClass, removeNode } from 'vs/base/browser/dom';
 import { IStorageService, StorageScope, IWorkspaceStorageChangeEvent } from 'vs/platform/storage/common/storage';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
 import { URI, UriComponents } from 'vs/base/common/uri';
@@ -35,6 +35,9 @@ import { IActivityBarService } from 'vs/workbench/services/activityBar/browser/a
 import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { Schemas } from 'vs/base/common/network';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
+import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarControl';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { MenuBarVisibility } from 'vs/platform/windows/common/windows';

 interface ICachedViewlet {
 	id: string;
@@ -65,6 +68,10 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 	private globalActivityAction: ActivityAction;
 	private globalActivityActionBar: ActionBar;

+	private customMenubar: CustomMenubarControl | undefined;
+	private menubar: HTMLElement | undefined;
+	private content: HTMLElement;
+
 	private cachedViewlets: ICachedViewlet[] = [];

 	private compositeBar: CompositeBar;
@@ -81,7 +88,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		@IExtensionService private readonly extensionService: IExtensionService,
 		@IViewsService private readonly viewsService: IViewsService,
 		@IContextKeyService private readonly contextKeyService: IContextKeyService,
-		@IWorkbenchEnvironmentService workbenchEnvironmentService: IWorkbenchEnvironmentService,
+		@IConfigurationService private readonly configurationService: IConfigurationService,
+		@IWorkbenchEnvironmentService workbenchEnvironmentService: IWorkbenchEnvironmentService
 	) {
 		super(Parts.ACTIVITYBAR_PART, { hasTitle: false }, themeService, storageService, layoutService);

@@ -135,6 +143,17 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 			this.compositeBar.onDidChange(() => this.saveCachedViewlets(), this, disposables);
 			this.storageService.onDidChangeStorage(e => this.onDidStorageChange(e), this, disposables);
 		}));
+
+		// Register for configuration changes
+		this._register(this.configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('window.menuBarVisibility')) {
+				if (this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'compact') {
+					this.installMenubar();
+				} else {
+					this.uninstallMenubar();
+				}
+			}
+		}));
 	}

 	private onDidRegisterExtensions(): void {
@@ -181,26 +200,52 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		return toDisposable(() => this.globalActivityAction.setBadge(undefined));
 	}

+	private uninstallMenubar() {
+		if (this.customMenubar) {
+			this.customMenubar.dispose();
+		}
+
+		if (this.menubar) {
+			removeNode(this.menubar);
+		}
+	}
+
+	private installMenubar() {
+		this.menubar = document.createElement('div');
+		addClass(this.menubar, 'menubar');
+		this.content.prepend(this.menubar);
+
+		// Menubar: install a custom menu bar depending on configuration
+		this.customMenubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
+		this.customMenubar.create(this.menubar);
+
+	}
+
 	createContentArea(parent: HTMLElement): HTMLElement {
 		this.element = parent;

-		const content = document.createElement('div');
-		addClass(content, 'content');
-		parent.appendChild(content);
+		this.content = document.createElement('div');
+		addClass(this.content, 'content');
+		parent.appendChild(this.content);
+
+		// Install menubar if compact
+		if (this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'compact') {
+			this.installMenubar();
+		}

 		// Viewlets action bar
-		this.compositeBar.create(content);
+		this.compositeBar.create(this.content);

 		// Global action bar
 		const globalActivities = document.createElement('div');
 		addClass(globalActivities, 'global-activity');
-		content.appendChild(globalActivities);
+		this.content.appendChild(globalActivities);

 		this.createGlobalActivityActionBar(globalActivities);

 		this.element.style.display = this.layoutService.isVisible(Parts.ACTIVITYBAR_PART) ? null : 'none';

-		return content;
+		return this.content;
 	}

 	updateStyles(): void {
--- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css
+++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css
@@ -3,13 +3,13 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-.monaco-workbench .activitybar > .content .monaco-action-bar .action-item {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item {
 	display: block;
 	position: relative;
 	padding: 5px 0;
 }

-.monaco-workbench .activitybar > .content .monaco-action-bar .action-label {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label {
 	display: flex;
 	overflow: hidden;
 	height: 40px;
@@ -20,7 +20,7 @@
 	font-size: 15px;
 }

-.monaco-workbench .activitybar > .content .monaco-action-bar .action-item:focus:before {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	content: "";
 	position: absolute;
 	top: 9px;
@@ -29,19 +29,19 @@
 	border-left: 2px solid;
 }

-.monaco-workbench .activitybar > .content .monaco-action-bar .action-item.clicked:focus:before {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.clicked:focus:before {
 	border-left: none !important; /* no focus feedback when using mouse */
 }

-.monaco-workbench .activitybar.left > .content .monaco-action-bar .action-item:focus:before {
+.monaco-workbench .activitybar.left > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	left: 1px;
 }

-.monaco-workbench .activitybar.right > .content .monaco-action-bar .action-item:focus:before {
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus:before {
 	right: 1px;
 }

-.monaco-workbench .activitybar > .content .monaco-action-bar .badge {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge {
 	position: absolute;
 	top: 5px;
 	left: 0;
@@ -50,7 +50,7 @@
 	height: 40px;
 }

-.monaco-workbench .activitybar > .content .monaco-action-bar .badge .badge-content {
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
 	position: absolute;
 	top: 20px;
 	right: 8px;
@@ -66,13 +66,13 @@

 /* Right aligned */

-.monaco-workbench .activitybar.right > .content .monaco-action-bar .action-label {
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-label {
 	margin-left: 0;
 	padding: 0 50px 0 0;
 	background-position: calc(100% - 9px) center;
 }

-.monaco-workbench .activitybar.right > .content .monaco-action-bar .badge {
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .badge {
 	left: auto;
 	right: 0;
-}
+}
--- a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css
+++ b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css
@@ -29,4 +29,13 @@

 .monaco-workbench .activitybar .global-activity .monaco-action-bar .action-label.update-activity {
 	-webkit-mask: url('settings-activity-bar.svg') no-repeat 50% 50%;
-}
+}
+
+.monaco-workbench .activitybar > .content > .composite-bar {
+	margin-bottom: auto;
+}
+
+.monaco-workbench .activitybar .menubar {
+	width: 100%;
+	height: 35px;
+}
--- a/src/vs/workbench/browser/parts/editor/binaryEditor.ts
+++ b/src/vs/workbench/browser/parts/editor/binaryEditor.ts
@@ -19,8 +19,6 @@ import { CancellationToken } from 'vs/base/common/cancellation';
 import { dispose } from 'vs/base/common/lifecycle';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
-import { IFileService } from 'vs/platform/files/common/files';
-import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';

 export interface IOpenCallbacks {
 	openInternal: (input: EditorInput, options: EditorOptions | undefined) => Promise<void>;
@@ -49,10 +47,8 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 		callbacks: IOpenCallbacks,
 		telemetryService: ITelemetryService,
 		themeService: IThemeService,
-		@IFileService private readonly fileService: IFileService,
 		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
 		@IStorageService storageService: IStorageService,
-		@IInstantiationService private readonly instantiationService: IInstantiationService,
 	) {
 		super(id, telemetryService, themeService, storageService);

@@ -95,11 +91,11 @@ export abstract class BaseBinaryResourceEditor extends BaseEditor {
 			this.resourceViewerContext.dispose();
 		}

-		this.resourceViewerContext = ResourceViewer.show({ name: model.getName(), resource: model.getResource(), size: model.getSize(), etag: model.getETag(), mime: model.getMime() }, this.fileService, this.binaryContainer, this.scrollbar, {
+		this.resourceViewerContext = ResourceViewer.show({ name: model.getName(), resource: model.getResource(), size: model.getSize(), etag: model.getETag(), mime: model.getMime() }, this.binaryContainer, this.scrollbar, {
 			openInternalClb: () => this.handleOpenInternalCallback(input, options),
 			openExternalClb: this.environmentService.configuration.remoteAuthority ? undefined : resource => this.callbacks.openExternal(resource),
 			metadataClb: meta => this.handleMetadataChanged(meta)
-		}, this.instantiationService);
+		});
 	}

 	private async handleOpenInternalCallback(input: EditorInput, options: EditorOptions | undefined): Promise<void> {
--- a/src/vs/workbench/browser/parts/editor/editorActions.ts
+++ b/src/vs/workbench/browser/parts/editor/editorActions.ts
@@ -16,7 +16,7 @@ import { IHistoryService } from 'vs/workbench/services/history/common/history';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
-import { IWindowsService } from 'vs/platform/windows/common/windows';
+import { IWorkspacesHistoryService } from 'vs/workbench/services/workspace/common/workspacesHistoryService';
 import { CLOSE_EDITOR_COMMAND_ID, NAVIGATE_ALL_EDITORS_GROUP_PREFIX, MOVE_ACTIVE_EDITOR_COMMAND_ID, NAVIGATE_IN_ACTIVE_GROUP_PREFIX, ActiveEditorMoveArguments, SPLIT_EDITOR_LEFT, SPLIT_EDITOR_RIGHT, SPLIT_EDITOR_UP, SPLIT_EDITOR_DOWN, splitEditor, LAYOUT_EDITOR_GROUPS_COMMAND_ID, mergeAllGroups } from 'vs/workbench/browser/parts/editor/editorCommands';
 import { IEditorGroupsService, IEditorGroup, GroupsArrangement, EditorsOrder, GroupLocation, GroupDirection, preferredSideBySideGroupDirection, IFindGroupScope, GroupOrientation, EditorGroupLayout, GroupsOrder } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { IEditorService, SIDE_GROUP } from 'vs/workbench/services/editor/common/editorService';
@@ -1218,7 +1218,7 @@ export class ClearRecentFilesAction extends Action {
 	constructor(
 		id: string,
 		label: string,
-		@IWindowsService private readonly windowsService: IWindowsService,
+		@IWorkspacesHistoryService private readonly workspacesHistoryService: IWorkspacesHistoryService,
 		@IHistoryService private readonly historyService: IHistoryService
 	) {
 		super(id, label);
@@ -1227,7 +1227,7 @@ export class ClearRecentFilesAction extends Action {
 	run(): Promise<any> {

 		// Clear global recently opened
-		this.windowsService.clearRecentlyOpened();
+		this.workspacesHistoryService.clearRecentlyOpened();

 		// Clear workspace specific recently opened
 		this.historyService.clearRecentlyOpened();
--- a/src/vs/workbench/browser/parts/editor/editorStatus.ts
+++ b/src/vs/workbench/browser/parts/editor/editorStatus.ts
@@ -49,7 +49,7 @@ import { INotificationHandle, INotificationService, Severity } from 'vs/platform
 import { Event } from 'vs/base/common/event';
 import { IAccessibilityService, AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
 import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
-import { IStatusbarEntryAccessor, IStatusbarService, StatusbarAlignment, IStatusbarEntry } from 'vs/platform/statusbar/common/statusbar';
+import { IStatusbarEntryAccessor, IStatusbarService, StatusbarAlignment, IStatusbarEntry } from 'vs/workbench/services/statusbar/common/statusbar';

 // {{SQL CARBON EDIT}}
 import { IQueryEditorService } from 'sql/workbench/services/queryEditor/common/queryEditorService';
@@ -415,7 +415,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('gotoLine', "Go to Line"),
 			command: 'workbench.action.gotoLine'
@@ -430,7 +430,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('selectIndentation', "Select Indentation"),
 			command: 'changeEditorIndentation'
@@ -445,7 +445,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('selectEncoding', "Select Encoding"),
 			command: 'workbench.action.editor.changeEncoding'
@@ -460,7 +460,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('selectEOL', "Select End of Line Sequence"),
 			command: 'workbench.action.editor.changeEOL'
@@ -475,7 +475,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('selectLanguageMode', "Select Language Mode"),
 			command: 'workbench.action.editor.changeLanguageMode'
@@ -490,7 +490,7 @@ export class EditorStatus extends Disposable implements IWorkbenchContribution {
 			return;
 		}

-		const props = {
+		const props: IStatusbarEntry = {
 			text,
 			tooltip: nls.localize('fileInfo', "File Information")
 		};
--- a/src/vs/workbench/browser/parts/editor/editorWidgets.ts
+++ b/src/vs/workbench/browser/parts/editor/editorWidgets.ts
@@ -12,7 +12,7 @@ import { $, append } from 'vs/base/browser/dom';
 import { attachStylerCallback } from 'vs/platform/theme/common/styler';
 import { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IWindowService } from 'vs/platform/windows/common/windows';
+import { IHostService } from 'vs/workbench/services/host/browser/host';
 import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
 import { hasWorkspaceFileExtension } from 'vs/platform/workspaces/common/workspaces';
 import { Disposable, dispose } from 'vs/base/common/lifecycle';
@@ -106,7 +106,7 @@ export class OpenWorkspaceButtonContribution extends Disposable implements IEdit
 	constructor(
 		private editor: ICodeEditor,
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
-		@IWindowService private readonly windowService: IWindowService,
+		@IHostService private readonly hostService: IHostService,
 		@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
 		@IFileService private readonly fileService: IFileService
 	) {
@@ -163,7 +163,7 @@ export class OpenWorkspaceButtonContribution extends Disposable implements IEdit
 			this._register(this.openWorkspaceButton.onClick(() => {
 				const model = this.editor.getModel();
 				if (model) {
-					this.windowService.openWindow([{ workspaceUri: model.uri }]);
+					this.hostService.openInWindow([{ workspaceUri: model.uri }]);
 				}
 			}));

@@ -181,4 +181,4 @@ export class OpenWorkspaceButtonContribution extends Disposable implements IEdit

 		super.dispose();
 	}
-}
+}
--- a/src/vs/workbench/browser/parts/editor/resourceViewer.ts
+++ b/src/vs/workbench/browser/parts/editor/resourceViewer.ts
@@ -10,8 +10,6 @@ import { Schemas } from 'vs/base/common/network';
 import { URI } from 'vs/base/common/uri';
 import 'vs/css!./media/resourceviewer';
 import * as nls from 'vs/nls';
-import { IFileService } from 'vs/platform/files/common/files';
-import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ICssStyleCollector, ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IMAGE_PREVIEW_BORDER } from 'vs/workbench/common/theme';

@@ -75,11 +73,9 @@ export class ResourceViewer {

 	static show(
 		descriptor: IResourceDescriptor,
-		fileService: IFileService,
 		container: HTMLElement,
 		scrollbar: DomScrollableElement,
 		delegate: ResourceViewerDelegate,
-		instantiationService: IInstantiationService,
 	): ResourceViewerContext {

 		// Ensure CSS class
@@ -95,10 +91,8 @@ export class ResourceViewer {
 			return FileSeemsBinaryFileView.create(container, descriptor, scrollbar, delegate);
 		}
 	}
-
 }

-
 class FileTooLargeFileView {
 	static create(
 		container: HTMLElement,
--- a/src/vs/workbench/browser/parts/editor/textDiffEditor.ts
+++ b/src/vs/workbench/browser/parts/editor/textDiffEditor.ts
@@ -30,7 +30,7 @@ import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editor
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { EditorMemento } from 'vs/workbench/browser/parts/editor/baseEditor';
-import { IWindowService } from 'vs/platform/windows/common/windows';
+import { IHostService } from 'vs/workbench/services/host/browser/host';
 import { EditorActivation, IEditorOptions } from 'vs/platform/editor/common/editor';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';

@@ -55,10 +55,10 @@ export class TextDiffEditor extends BaseTextEditor implements ITextDiffEditor {
 		@IThemeService themeService: IThemeService,
 		@IEditorGroupsService editorGroupService: IEditorGroupsService,
 		@ITextFileService textFileService: ITextFileService,
-		@IWindowService windowService: IWindowService,
+		@IHostService hostService: IHostService,
 		@IClipboardService private _clipboardService: IClipboardService,
 	) {
-		super(TextDiffEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, textFileService, editorService, editorGroupService, windowService);
+		super(TextDiffEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, textFileService, editorService, editorGroupService, hostService);
 	}

 	protected getEditorMemento<T>(editorGroupService: IEditorGroupsService, key: string, limit: number = 10): IEditorMemento<T> {
--- a/src/vs/workbench/browser/parts/editor/textEditor.ts
+++ b/src/vs/workbench/browser/parts/editor/textEditor.ts
@@ -23,7 +23,7 @@ import { isDiffEditor, isCodeEditor, getCodeEditor } from 'vs/editor/browser/edi
 import { IEditorGroupsService, IEditorGroup } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
-import { IWindowService } from 'vs/platform/windows/common/windows';
+import { IHostService } from 'vs/workbench/services/host/browser/host';

 const TEXT_EDITOR_VIEW_STATE_PREFERENCE_KEY = 'textEditorViewState';

@@ -53,7 +53,7 @@ export abstract class BaseTextEditor extends BaseEditor implements ITextEditor {
 		@ITextFileService private readonly _textFileService: ITextFileService,
 		@IEditorService protected editorService: IEditorService,
 		@IEditorGroupsService protected editorGroupService: IEditorGroupsService,
-		@IWindowService private readonly windowService: IWindowService
+		@IHostService private readonly hostService: IHostService
 	) {
 		super(id, telemetryService, themeService, storageService);

@@ -151,7 +151,7 @@ export abstract class BaseTextEditor extends BaseEditor implements ITextEditor {
 		}

 		this._register(this.editorService.onDidActiveEditorChange(() => this.onEditorFocusLost()));
-		this._register(this.windowService.onDidChangeFocus(focused => this.onWindowFocusChange(focused)));
+		this._register(this.hostService.onDidChangeFocus(focused => this.onWindowFocusChange(focused)));
 	}

 	private onEditorFocusLost(): void {
--- a/src/vs/workbench/browser/parts/editor/textResourceEditor.ts
+++ b/src/vs/workbench/browser/parts/editor/textResourceEditor.ts
@@ -23,7 +23,7 @@ import { ScrollType } from 'vs/editor/common/editorCommon';
 import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
-import { IWindowService } from 'vs/platform/windows/common/windows';
+import { IHostService } from 'vs/workbench/services/host/browser/host';

 /**
 * An editor implementation that is capable of showing the contents of resource inputs. Uses
@@ -41,9 +41,9 @@ export class AbstractTextResourceEditor extends BaseTextEditor {
 		@IEditorGroupsService editorGroupService: IEditorGroupsService,
 		@ITextFileService textFileService: ITextFileService,
 		@IEditorService editorService: IEditorService,
-		@IWindowService windowService: IWindowService
+		@IHostService hostService: IHostService
 	) {
-		super(id, telemetryService, instantiationService, storageService, configurationService, themeService, textFileService, editorService, editorGroupService, windowService);
+		super(id, telemetryService, instantiationService, storageService, configurationService, themeService, textFileService, editorService, editorGroupService, hostService);
 	}

 	getTitle(): string | undefined {
@@ -201,8 +201,8 @@ export class TextResourceEditor extends AbstractTextResourceEditor {
 		@ITextFileService textFileService: ITextFileService,
 		@IEditorService editorService: IEditorService,
 		@IEditorGroupsService editorGroupService: IEditorGroupsService,
-		@IWindowService windowService: IWindowService
+		@IHostService hostService: IHostService
 	) {
-		super(TextResourceEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, editorGroupService, textFileService, editorService, windowService);
+		super(TextResourceEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, editorGroupService, textFileService, editorService, hostService);
 	}
 }
--- a/src/vs/workbench/browser/parts/notifications/notificationsList.ts
+++ b/src/vs/workbench/browser/parts/notifications/notificationsList.ts
@@ -103,7 +103,7 @@ export class NotificationsList extends Themable {

 		// Clear focus when DOM focus moves out
 		// Use document.hasFocus() to not clear the focus when the entire window lost focus
-		// This ensures that when the focus comes back, the notifciation is still focused
+		// This ensures that when the focus comes back, the notification is still focused
 		const listFocusTracker = this._register(trackFocus(this.list.getHTMLElement()));
 		this._register(listFocusTracker.onDidBlur(() => {
 			if (document.hasFocus()) {
--- a/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts
+++ b/src/vs/workbench/browser/parts/notifications/notificationsStatus.ts
@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/

 import { INotificationsModel, INotificationChangeEvent, NotificationChangeType, INotificationViewItem, IStatusMessageChangeEvent, StatusMessageChangeType, IStatusMessageViewItem } from 'vs/workbench/common/notifications';
-import { IStatusbarService, StatusbarAlignment, IStatusbarEntryAccessor, IStatusbarEntry } from 'vs/platform/statusbar/common/statusbar';
+import { IStatusbarService, StatusbarAlignment, IStatusbarEntryAccessor, IStatusbarEntry } from 'vs/workbench/services/statusbar/common/statusbar';
 import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { HIDE_NOTIFICATIONS_CENTER, SHOW_NOTIFICATIONS_CENTER } from 'vs/workbench/browser/parts/notifications/notificationsCommands';
 import { localize } from 'vs/nls';
--- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts
+++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts
@@ -21,7 +21,7 @@ import { localize } from 'vs/nls';
 import { Severity } from 'vs/platform/notification/common/notification';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { ILifecycleService, LifecyclePhase } from 'vs/platform/lifecycle/common/lifecycle';
-import { IWindowService } from 'vs/platform/windows/common/windows';
+import { IHostService } from 'vs/workbench/services/host/browser/host';
 import { timeout } from 'vs/base/common/async';

 interface INotificationToast {
@@ -67,7 +67,7 @@ export class NotificationsToasts extends Themable {
 		@IEditorGroupsService private readonly editorGroupService: IEditorGroupsService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@ILifecycleService private readonly lifecycleService: ILifecycleService,
-		@IWindowService private readonly windowService: IWindowService
+		@IHostService private readonly hostService: IHostService
 	) {
 		super(themeService);

@@ -240,9 +240,9 @@ export class NotificationsToasts extends Themable {
 				// again before triggering the timeout again. This prevents an issue where
 				// focussing the window could immediately hide the notification because the
 				// timeout was triggered again.
-				if (!this.windowService.hasFocus) {
+				if (!this.hostService.hasFocus) {
 					if (!listener) {
-						listener = this.windowService.onDidChangeFocus(focus => {
+						listener = this.hostService.onDidChangeFocus(focus => {
 							if (focus) {
 								hideAfterTimeout();
 							}
--- a/src/vs/workbench/browser/parts/panel/media/panelpart.css
+++ b/src/vs/workbench/browser/parts/panel/media/panelpart.css
@@ -124,6 +124,8 @@
 	margin-right: 10px;
 }

+/* Rotate icons when panel is on right */
+.monaco-workbench .part.panel.right .title-actions .codicon-split-horizontal,
 .monaco-workbench .part.panel.right .title-actions .codicon-chevron-up,
 .monaco-workbench .part.panel.right .title-actions .codicon-chevron-down {
 	transform: rotate(-90deg);
--- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
+++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
@@ -13,7 +13,7 @@ import { IEditorService } from 'vs/workbench/services/editor/common/editorServic
 import { Part } from 'vs/workbench/browser/part';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { StatusbarAlignment, IStatusbarService, IStatusbarEntry, IStatusbarEntryAccessor } from 'vs/platform/statusbar/common/statusbar';
+import { StatusbarAlignment, IStatusbarService, IStatusbarEntry, IStatusbarEntryAccessor } from 'vs/workbench/services/statusbar/common/statusbar';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { Action, IAction, WorkbenchActionExecutedEvent, WorkbenchActionExecutedClassification } from 'vs/base/common/actions';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector, ThemeColor } from 'vs/platform/theme/common/themeService';
--- a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
+++ b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts
@@ -6,7 +6,8 @@
 import * as nls from 'vs/nls';
 import { IMenuService, MenuId, IMenu, SubmenuItemAction } from 'vs/platform/actions/common/actions';
 import { registerThemingParticipant, ITheme, ICssStyleCollector, IThemeService } from 'vs/platform/theme/common/themeService';
-import { IWindowService, MenuBarVisibility, IWindowsService, getTitleBarStyle, IURIToOpen } from 'vs/platform/windows/common/windows';
+import { MenuBarVisibility, getTitleBarStyle, IWindowOpenable } from 'vs/platform/windows/common/windows';
+import { IWorkspacesHistoryService } from 'vs/workbench/services/workspace/common/workspacesHistoryService';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IAction, Action } from 'vs/base/common/actions';
 import { Separator } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -16,24 +17,32 @@ import { isMacintosh, isWeb } from 'vs/base/common/platform';
 import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
 import { Event, Emitter } from 'vs/base/common/event';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { IRecentlyOpened, isRecentFolder, IRecent, isRecentWorkspace } from 'vs/platform/history/common/history';
+import { IRecentlyOpened, isRecentFolder, IRecent, isRecentWorkspace } from 'vs/platform/workspaces/common/workspacesHistory';
 import { RunOnceScheduler } from 'vs/base/common/async';
-import { MENUBAR_SELECTION_FOREGROUND, MENUBAR_SELECTION_BACKGROUND, MENUBAR_SELECTION_BORDER, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
+import { MENUBAR_SELECTION_FOREGROUND, MENUBAR_SELECTION_BACKGROUND, MENUBAR_SELECTION_BORDER, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_INACTIVE_FOREGROUND } from 'vs/workbench/common/theme';
 import { URI } from 'vs/base/common/uri';
 import { ILabelService } from 'vs/platform/label/common/label';
 import { IUpdateService, StateType } from 'vs/platform/update/common/update';
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
 import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
 import { IPreferencesService } from 'vs/workbench/services/preferences/common/preferences';
-import { IEnvironmentService } from 'vs/platform/environment/common/environment';
+import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { MenuBar } from 'vs/base/browser/ui/menu/menubar';
-import { SubmenuAction } from 'vs/base/browser/ui/menu/menu';
+import { SubmenuAction, Direction } from 'vs/base/browser/ui/menu/menu';
 import { attachMenuStyler } from 'vs/platform/theme/common/styler';
 import { assign } from 'vs/base/common/objects';
 import { mnemonicMenuLabel, unmnemonicLabel } from 'vs/base/common/labels';
 import { IAccessibilityService, AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
 import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
 import { isFullscreen } from 'vs/base/browser/browser';
+import { IHostService } from 'vs/workbench/services/host/browser/host';
+
+// TODO@sbatten https://github.com/microsoft/vscode/issues/81360
+// tslint:disable-next-line: import-patterns layering TODO@sbatten
+import { IElectronService } from 'vs/platform/electron/node/electron';
+import { optional } from 'vs/platform/instantiation/common/instantiation';
+// tslint:disable-next-line: import-patterns layering TODO@sbatten
+import { IElectronEnvironmentService } from 'vs/workbench/services/electron/electron-browser/electronEnvironmentService';

 export abstract class MenubarControl extends Disposable {

@@ -41,6 +50,7 @@ export abstract class MenubarControl extends Disposable {
 		'window.menuBarVisibility',
 		'window.enableMenuBarMnemonics',
 		'window.customMenuBarAltFocus',
+		'workbench.sideBar.location',
 		'window.nativeTabs'
 	];

@@ -76,8 +86,7 @@ export abstract class MenubarControl extends Disposable {

 	constructor(
 		protected readonly menuService: IMenuService,
-		protected readonly windowService: IWindowService,
-		protected readonly windowsService: IWindowsService,
+		protected readonly workspacesHistoryService: IWorkspacesHistoryService,
 		protected readonly contextKeyService: IContextKeyService,
 		protected readonly keybindingService: IKeybindingService,
 		protected readonly configurationService: IConfigurationService,
@@ -86,8 +95,9 @@ export abstract class MenubarControl extends Disposable {
 		protected readonly storageService: IStorageService,
 		protected readonly notificationService: INotificationService,
 		protected readonly preferencesService: IPreferencesService,
-		protected readonly environmentService: IEnvironmentService,
-		protected readonly accessibilityService: IAccessibilityService
+		protected readonly environmentService: IWorkbenchEnvironmentService,
+		protected readonly accessibilityService: IAccessibilityService,
+		protected readonly hostService: IHostService
 	) {

 		super();
@@ -119,7 +129,7 @@ export abstract class MenubarControl extends Disposable {
 		this.updateService.onStateChange(() => this.updateMenubar());

 		// Listen for changes in recently opened menu
-		this._register(this.windowsService.onRecentlyOpenedChange(() => { this.onRecentlyOpenedChange(); }));
+		this._register(this.workspacesHistoryService.onRecentlyOpenedChange(() => { this.onRecentlyOpenedChange(); }));

 		// Listen to keybindings change
 		this._register(this.keybindingService.onDidUpdateKeybindings(() => this.updateMenubar()));
@@ -181,7 +191,7 @@ export abstract class MenubarControl extends Disposable {
 	}

 	private onRecentlyOpenedChange(): void {
-		this.windowService.getRecentlyOpened().then(recentlyOpened => {
+		this.workspacesHistoryService.getRecentlyOpened().then(recentlyOpened => {
 			this.recentlyOpened = recentlyOpened;
 			this.updateMenubar();
 		});
@@ -192,29 +202,29 @@ export abstract class MenubarControl extends Disposable {
 		let label: string;
 		let uri: URI;
 		let commandId: string;
-		let uriToOpen: IURIToOpen;
+		let openable: IWindowOpenable;

 		if (isRecentFolder(recent)) {
 			uri = recent.folderUri;
 			label = recent.label || this.labelService.getWorkspaceLabel(uri, { verbose: true });
 			commandId = 'openRecentFolder';
-			uriToOpen = { folderUri: uri };
+			openable = { folderUri: uri };
 		} else if (isRecentWorkspace(recent)) {
 			uri = recent.workspace.configPath;
 			label = recent.label || this.labelService.getWorkspaceLabel(recent.workspace, { verbose: true });
 			commandId = 'openRecentWorkspace';
-			uriToOpen = { workspaceUri: uri };
+			openable = { workspaceUri: uri };
 		} else {
 			uri = recent.fileUri;
 			label = recent.label || this.labelService.getUriLabel(uri);
 			commandId = 'openRecentFile';
-			uriToOpen = { fileUri: uri };
+			openable = { fileUri: uri };
 		}

 		const ret: IAction = new Action(commandId, unmnemonicLabel(label), undefined, undefined, (event) => {
 			const openInNewWindow = event && ((!isMacintosh && (event.ctrlKey || event.shiftKey)) || (isMacintosh && (event.metaKey || event.altKey)));

-			return this.windowService.openWindow([uriToOpen], {
+			return this.hostService.openInWindow([openable], {
 				forceNewWindow: openInNewWindow
 			});
 		});
@@ -261,8 +271,7 @@ export class CustomMenubarControl extends MenubarControl {

 	constructor(
 		@IMenuService menuService: IMenuService,
-		@IWindowService windowService: IWindowService,
-		@IWindowsService windowsService: IWindowsService,
+		@IWorkspacesHistoryService workspacesHistoryService: IWorkspacesHistoryService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		@IKeybindingService keybindingService: IKeybindingService,
 		@IConfigurationService configurationService: IConfigurationService,
@@ -271,16 +280,18 @@ export class CustomMenubarControl extends MenubarControl {
 		@IStorageService storageService: IStorageService,
 		@INotificationService notificationService: INotificationService,
 		@IPreferencesService preferencesService: IPreferencesService,
-		@IEnvironmentService environmentService: IEnvironmentService,
+		@IWorkbenchEnvironmentService environmentService: IWorkbenchEnvironmentService,
 		@IAccessibilityService accessibilityService: IAccessibilityService,
 		@IThemeService private readonly themeService: IThemeService,
-		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService
+		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService,
+		@IHostService protected readonly hostService: IHostService,
+		@optional(IElectronService) private readonly electronService: IElectronService,
+		@optional(IElectronEnvironmentService) private readonly electronEnvironmentService: IElectronEnvironmentService
 	) {

 		super(
 			menuService,
-			windowService,
-			windowsService,
+			workspacesHistoryService,
 			contextKeyService,
 			keybindingService,
 			configurationService,
@@ -290,12 +301,14 @@ export class CustomMenubarControl extends MenubarControl {
 			notificationService,
 			preferencesService,
 			environmentService,
-			accessibilityService);
+			accessibilityService,
+			hostService
+		);

 		this._onVisibilityChange = this._register(new Emitter<boolean>());
 		this._onFocusStateChange = this._register(new Emitter<boolean>());

-		this.windowService.getRecentlyOpened().then((recentlyOpened) => {
+		this.workspacesHistoryService.getRecentlyOpened().then((recentlyOpened) => {
 			this.recentlyOpened = recentlyOpened;
 		});

@@ -315,14 +328,45 @@ export class CustomMenubarControl extends MenubarControl {
 				`);
 			}

+			const activityBarInactiveFgColor = theme.getColor(ACTIVITY_BAR_INACTIVE_FOREGROUND);
+			if (activityBarInactiveFgColor) {
+				collector.addRule(`
+				.monaco-workbench .menubar.compact > .menubar-menu-button {
+					color: ${activityBarInactiveFgColor};
+				}
+
+				.monaco-workbench .menubar.compact .toolbar-toggle-more {
+					background-color: ${activityBarInactiveFgColor}
+				}
+				`);
+
+			}
+
+			const activityBarFgColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
+			if (activityBarFgColor) {
+				collector.addRule(`
+				.monaco-workbench .menubar.compact > .menubar-menu-button.open,
+				.monaco-workbench .menubar.compact > .menubar-menu-button:focus,
+				.monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover {
+					color: ${activityBarFgColor};
+				}
+
+				.monaco-workbench .menubar.compact  > .menubar-menu-button.open .toolbar-toggle-more,
+				.monaco-workbench .menubar.compact > .menubar-menu-button:focus .toolbar-toggle-more,
+				.monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover .toolbar-toggle-more {
+					background-color: ${activityBarFgColor}
+				}
+			`);
+			}
+
 			const menubarInactiveWindowFgColor = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND);
 			if (menubarInactiveWindowFgColor) {
 				collector.addRule(`
-					.monaco-workbench .menubar.inactive > .menubar-menu-button {
+					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button {
 						color: ${menubarInactiveWindowFgColor};
 					}

-					.monaco-workbench .menubar.inactive > .menubar-menu-button .toolbar-toggle-more {
+					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button .toolbar-toggle-more {
 						background-color: ${menubarInactiveWindowFgColor}
 					}
 				`);
@@ -332,15 +376,15 @@ export class CustomMenubarControl extends MenubarControl {
 			const menubarSelectedFgColor = theme.getColor(MENUBAR_SELECTION_FOREGROUND);
 			if (menubarSelectedFgColor) {
 				collector.addRule(`
-					.monaco-workbench .menubar > .menubar-menu-button.open,
-					.monaco-workbench .menubar > .menubar-menu-button:focus,
-					.monaco-workbench .menubar:not(:focus-within) > .menubar-menu-button:hover {
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open,
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus,
+					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover {
 						color: ${menubarSelectedFgColor};
 					}

-					.monaco-workbench .menubar  > .menubar-menu-button.open .toolbar-toggle-more,
-					.monaco-workbench .menubar > .menubar-menu-button:focus .toolbar-toggle-more,
-					.monaco-workbench .menubar:not(:focus-within) > .menubar-menu-button:hover .toolbar-toggle-more {
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open .toolbar-toggle-more,
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus .toolbar-toggle-more,
+					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover .toolbar-toggle-more {
 						background-color: ${menubarSelectedFgColor}
 					}
 				`);
@@ -349,9 +393,9 @@ export class CustomMenubarControl extends MenubarControl {
 			const menubarSelectedBgColor = theme.getColor(MENUBAR_SELECTION_BACKGROUND);
 			if (menubarSelectedBgColor) {
 				collector.addRule(`
-					.monaco-workbench .menubar > .menubar-menu-button.open,
-					.monaco-workbench .menubar > .menubar-menu-button:focus,
-					.monaco-workbench .menubar:not(:focus-within) > .menubar-menu-button:hover {
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open,
+					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus,
+					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover {
 						background-color: ${menubarSelectedBgColor};
 					}
 				`);
@@ -392,7 +436,7 @@ export class CustomMenubarControl extends MenubarControl {
 				return null;

 			case StateType.Idle:
-				const windowId = this.windowService.windowId;
+				const windowId = this.electronEnvironmentService.windowId;
 				return new Action('update.check', nls.localize({ key: 'checkForUpdates', comment: ['&& denotes a mnemonic'] }, "Check for &&Updates..."), undefined, true, () =>
 					this.updateService.checkForUpdates({ windowId }));

@@ -466,6 +510,15 @@ export class CustomMenubarControl extends MenubarControl {
 		return enableMenuBarMnemonics && (!isWeb || isFullscreen());
 	}

+	private get currentCompactMenuMode(): Direction | undefined {
+		if (this.currentMenubarVisibility !== 'compact') {
+			return undefined;
+		}
+
+		const currentSidebarLocation = this.configurationService.getValue<string>('workbench.sideBar.location');
+		return currentSidebarLocation === 'right' ? Direction.Left : Direction.Right;
+	}
+
 	private setupCustomMenubar(firstTime: boolean): void {
 		if (firstTime) {
 			this.menubar = this._register(new MenuBar(
@@ -474,12 +527,13 @@ export class CustomMenubarControl extends MenubarControl {
 				disableAltFocus: this.currentDisableMenuBarAltFocus,
 				visibility: this.currentMenubarVisibility,
 				getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id),
+				compactMode: this.currentCompactMenuMode
 			}
 			));

 			this.accessibilityService.alwaysUnderlineAccessKeys().then(val => {
 				this.alwaysOnMnemonics = val;
-				this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics });
+				this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics, compactMode: this.currentCompactMenuMode });
 			});

 			this._register(this.menubar.onFocusStateChange(focused => {
@@ -505,7 +559,7 @@ export class CustomMenubarControl extends MenubarControl {

 			this._register(attachMenuStyler(this.menubar, this.themeService));
 		} else {
-			this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics });
+			this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics, compactMode: this.currentCompactMenuMode });
 		}

 		// Update the menu actions
@@ -586,9 +640,15 @@ export class CustomMenubarControl extends MenubarControl {
 		super.registerListeners();

 		// Listen for window focus changes
-		this._register(this.windowService.onDidChangeFocus(e => this.onDidChangeWindowFocus(e)));
+		this._register(this.hostService.onDidChangeFocus(e => this.onDidChangeWindowFocus(e)));

-		this._register(this.windowService.onDidChangeMaximize(e => this.updateMenubar()));
+		// Listen for maximize/unmaximize
+		if (!isWeb) {
+			this._register(Event.any(
+				Event.map(Event.filter(this.electronService.onWindowMaximize, id => id === this.electronEnvironmentService.windowId), _ => true),
+				Event.map(Event.filter(this.electronService.onWindowUnmaximize, id => id === this.electronEnvironmentService.windowId), _ => false)
+			)(e => this.updateMenubar()));
+		}

 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, () => {
 			this.menubar.blur();
@@ -633,7 +693,7 @@ export class CustomMenubarControl extends MenubarControl {
 		}

 		if (this.menubar) {
-			this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics });
+			this.menubar.update({ enableMnemonics: this.currentEnableMenuBarMnemonics, disableAltFocus: this.currentDisableMenuBarAltFocus, visibility: this.currentMenubarVisibility, getKeybinding: (action) => this.keybindingService.lookupKeybinding(action.id), alwaysOnMnemonics: this.alwaysOnMnemonics, compactMode: this.currentCompactMenuMode });
 		}
 	}
 }
--- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
+++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
@@ -8,7 +8,7 @@ import * as resources from 'vs/base/common/resources';
 import { Part } from 'vs/workbench/browser/part';
 import { ITitleService, ITitleProperties } from 'vs/workbench/services/title/common/titleService';
 import { getZoomFactor } from 'vs/base/browser/browser';
-import { IWindowService, MenuBarVisibility, getTitleBarStyle } from 'vs/platform/windows/common/windows';
+import { MenuBarVisibility, getTitleBarStyle } from 'vs/platform/windows/common/windows';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { IAction } from 'vs/base/common/actions';
@@ -25,7 +25,7 @@ import { isMacintosh, isWindows, isLinux, isWeb } from 'vs/base/common/platform'
 import { URI } from 'vs/base/common/uri';
 import { Color } from 'vs/base/common/color';
 import { trim } from 'vs/base/common/strings';
-import { EventType, EventHelper, Dimension, isAncestor, hide, show, removeClass, addClass, append, $, addDisposableListener, runAtThisOrScheduleAtNextAnimationFrame } from 'vs/base/browser/dom';
+import { EventType, EventHelper, Dimension, isAncestor, hide, show, removeClass, addClass, append, $, addDisposableListener, runAtThisOrScheduleAtNextAnimationFrame, removeNode } from 'vs/base/browser/dom';
 import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarControl';
 import { IInstantiationService, optional } from 'vs/platform/instantiation/common/instantiation';
 import { template } from 'vs/base/common/labels';
@@ -38,10 +38,13 @@ import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { IMenuService, IMenu, MenuId } from 'vs/platform/actions/common/actions';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { IHostService } from 'vs/workbench/services/host/browser/host';

 // TODO@sbatten https://github.com/microsoft/vscode/issues/81360
 // tslint:disable-next-line: import-patterns layering
 import { IElectronService } from 'vs/platform/electron/node/electron';
+// tslint:disable-next-line: import-patterns layering
+import { IElectronEnvironmentService } from 'vs/workbench/services/electron/electron-browser/electronEnvironmentService';

 export class TitlebarPart extends Part implements ITitleService {

@@ -55,8 +58,8 @@ export class TitlebarPart extends Part implements ITitleService {

 	readonly minimumWidth: number = 0;
 	readonly maximumWidth: number = Number.POSITIVE_INFINITY;
-	get minimumHeight(): number { return isMacintosh && !isWeb ? 22 / getZoomFactor() : (30 / (this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'hidden' ? getZoomFactor() : 1)); }
-	get maximumHeight(): number { return isMacintosh && !isWeb ? 22 / getZoomFactor() : (30 / (this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'hidden' ? getZoomFactor() : 1)); }
+	get minimumHeight(): number { return isMacintosh && !isWeb ? 22 / getZoomFactor() : (30 / (this.currentMenubarVisibility === 'hidden' ? getZoomFactor() : 1)); }
+	get maximumHeight(): number { return isMacintosh && !isWeb ? 22 / getZoomFactor() : (30 / (this.currentMenubarVisibility === 'hidden' ? getZoomFactor() : 1)); }

 	//#endregion

@@ -71,7 +74,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	private maxRestoreControl: HTMLElement;
 	private appIcon: HTMLElement;
 	private customMenubar: CustomMenubarControl | undefined;
-	private menubar: HTMLElement;
+	private menubar?: HTMLElement;
 	private resizer: HTMLElement;
 	private lastLayoutDimensions: Dimension;

@@ -88,7 +91,6 @@ export class TitlebarPart extends Part implements ITitleService {

 	constructor(
 		@IContextMenuService private readonly contextMenuService: IContextMenuService,
-		@IWindowService private readonly windowService: IWindowService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@IEditorService private readonly editorService: IEditorService,
 		@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
@@ -100,7 +102,9 @@ export class TitlebarPart extends Part implements ITitleService {
 		@IWorkbenchLayoutService layoutService: IWorkbenchLayoutService,
 		@IMenuService menuService: IMenuService,
 		@IContextKeyService contextKeyService: IContextKeyService,
-		@optional(IElectronService) private electronService: IElectronService
+		@IHostService private readonly hostService: IHostService,
+		@optional(IElectronService) private electronService: IElectronService,
+		@optional(IElectronEnvironmentService) private readonly electronEnvironmentService: IElectronEnvironmentService
 	) {
 		super(Parts.TITLEBAR_PART, { hasTitle: false }, themeService, storageService, layoutService);

@@ -110,7 +114,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	}

 	private registerListeners(): void {
-		this._register(this.windowService.onDidChangeFocus(focused => focused ? this.onFocus() : this.onBlur()));
+		this._register(this.hostService.onDidChangeFocus(focused => focused ? this.onFocus() : this.onBlur()));
 		this._register(this.configurationService.onDidChangeConfiguration(e => this.onConfigurationChanged(e)));
 		this._register(this.editorService.onDidActiveEditorChange(() => this.onActiveEditorChange()));
 		this._register(this.contextService.onDidChangeWorkspaceFolders(() => this.titleUpdater.schedule()));
@@ -134,6 +138,14 @@ export class TitlebarPart extends Part implements ITitleService {
 			this.titleUpdater.schedule();
 		}

+		if (event.affectsConfiguration('window.menuBarVisibility')) {
+			if (this.currentMenubarVisibility === 'compact') {
+				this.uninstallMenubar();
+			} else {
+				this.installMenubar();
+			}
+		}
+
 		if (event.affectsConfiguration('window.doubleClickIconToClose')) {
 			if (this.appIcon) {
 				this.onUpdateAppIconDragBehavior();
@@ -144,7 +156,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	private onMenubarVisibilityChanged(visible: boolean) {
 		if (isWeb || isWindows || isLinux) {
 			// Hide title when toggling menu bar
-			if (!isWeb && this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'toggle' && visible) {
+			if (!isWeb && this.currentMenubarVisibility === 'toggle' && visible) {
 				// Hack to fix issue #52522 with layered webkit-app-region elements appearing under cursor
 				hide(this.dragRegion);
 				setTimeout(() => show(this.dragRegion), 50);
@@ -157,7 +169,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	}

 	private onMenubarFocusChanged(focused: boolean) {
-		if (!isWeb && (isWindows || isLinux)) {
+		if (!isWeb && (isWindows || isLinux) && this.currentMenubarVisibility === 'compact') {
 			if (focused) {
 				hide(this.dragRegion);
 			} else {
@@ -313,6 +325,31 @@ export class TitlebarPart extends Part implements ITitleService {
 		});
 	}

+	private uninstallMenubar(): void {
+		if (this.customMenubar) {
+			this.customMenubar.dispose();
+			this.customMenubar = undefined;
+		}
+
+		if (this.menubar) {
+			removeNode(this.menubar);
+			this.menubar = undefined;
+		}
+	}
+
+	private installMenubar(): void {
+		this.customMenubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
+
+		this.menubar = this.element.insertBefore($('div.menubar'), this.title);
+
+		this.menubar.setAttribute('role', 'menubar');
+
+		this.customMenubar.create(this.menubar);
+
+		this._register(this.customMenubar.onVisibilityChange(e => this.onMenubarVisibilityChanged(e)));
+		this._register(this.customMenubar.onFocusStateChange(e => this.onMenubarFocusChanged(e)));
+	}
+
 	createContentArea(parent: HTMLElement): HTMLElement {
 		this.element = parent;

@@ -332,15 +369,11 @@ export class TitlebarPart extends Part implements ITitleService {
 		}

 		// Menubar: install a custom menu bar depending on configuration
-		if (getTitleBarStyle(this.configurationService, this.environmentService) !== 'native' && (!isMacintosh || isWeb)) {
-			this.customMenubar = this._register(this.instantiationService.createInstance(CustomMenubarControl));
-			this.menubar = append(this.element, $('div.menubar'));
-			this.menubar.setAttribute('role', 'menubar');
-
-			this.customMenubar.create(this.menubar);
-
-			this._register(this.customMenubar.onVisibilityChange(e => this.onMenubarVisibilityChanged(e)));
-			this._register(this.customMenubar.onFocusStateChange(e => this.onMenubarFocusChanged(e)));
+		// and when not in activity bar
+		if (getTitleBarStyle(this.configurationService, this.environmentService) !== 'native'
+			&& (!isMacintosh || isWeb)
+			&& this.currentMenubarVisibility !== 'compact') {
+			this.installMenubar();
 		}

 		// Title
@@ -401,13 +434,17 @@ export class TitlebarPart extends Part implements ITitleService {

 			const isMaximized = this.environmentService.configuration.maximized ? true : false;
 			this.onDidChangeMaximized(isMaximized);
-			this._register(this.windowService.onDidChangeMaximize(this.onDidChangeMaximized, this));
+
+			this._register(Event.any(
+				Event.map(Event.filter(this.electronService.onWindowMaximize, id => id === this.electronEnvironmentService.windowId), _ => true),
+				Event.map(Event.filter(this.electronService.onWindowUnmaximize, id => id === this.electronEnvironmentService.windowId), _ => false)
+			)(e => this.onDidChangeMaximized(e)));
 		}

 		// Since the title area is used to drag the window, we do not want to steal focus from the
 		// currently active element. So we restore focus after a timeout back to where it was.
 		this._register(addDisposableListener(this.element, EventType.MOUSE_DOWN, e => {
-			if (e.target && isAncestor(e.target as HTMLElement, this.menubar)) {
+			if (e.target && this.menubar && isAncestor(e.target as HTMLElement, this.menubar)) {
 				return;
 			}

@@ -501,7 +538,7 @@ export class TitlebarPart extends Part implements ITitleService {
 	}

 	private adjustTitleMarginToCenter(): void {
-		if (this.customMenubar) {
+		if (this.customMenubar && this.menubar) {
 			const leftMarker = (this.appIcon ? this.appIcon.clientWidth : 0) + this.menubar.clientWidth + 10;
 			const rightMarker = this.element.clientWidth - (this.windowControls ? this.windowControls.clientWidth : 0) - 10;

@@ -521,12 +558,16 @@ export class TitlebarPart extends Part implements ITitleService {
 		this.title.style.transform = 'translate(-50%, 0)';
 	}

+	private get currentMenubarVisibility(): MenuBarVisibility {
+		return this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility');
+	}
+
 	updateLayout(dimension: Dimension): void {
 		this.lastLayoutDimensions = dimension;

 		if (getTitleBarStyle(this.configurationService, this.environmentService) === 'custom') {
 			// Only prevent zooming behavior on macOS or when the menubar is not visible
-			if ((!isWeb && isMacintosh) || this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'hidden') {
+			if ((!isWeb && isMacintosh) || this.currentMenubarVisibility === 'hidden') {
 				this.title.style.zoom = `${1 / getZoomFactor()}`;
 				if (!isWeb && (isWindows || isLinux)) {
 					this.appIcon.style.zoom = `${1 / getZoomFactor()}`;
--- a/src/vs/workbench/browser/parts/views/media/tree-collapsed-dark.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-collapsed-dark.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69064L6.33333 3.02397L5.71461 3.64269L10.0719 7.99999Z" fill="#C5C5C5"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/tree-collapsed-hc.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-collapsed-hc.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="white"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/tree-collapsed-light.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-collapsed-light.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="#424242"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/tree-expanded-dark.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-expanded-dark.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#C5C5C5"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/tree-expanded-hc.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-expanded-hc.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="white"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/tree-expanded-light.svg
+++ b/src/vs/workbench/browser/parts/views/media/tree-expanded-light.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97603 10.0719L12.3333 5.71461L12.9521 6.33333L8.28539 11L7.66667 11L3 6.33333L3.61872 5.71461L7.97603 10.0719Z" fill="#424242"/>
-</svg>
--- a/src/vs/workbench/browser/parts/views/media/views.css
+++ b/src/vs/workbench/browser/parts/views/media/views.css
@@ -20,31 +20,6 @@
 	content: ' ';
 }

-.file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
-	background-image: url("tree-expanded-light.svg");
-}
-
-.file-icon-themable-tree .monaco-tree-row.has-children .content::before {
-	display: inline-block;
-	background-image: url("tree-collapsed-light.svg");
-}
-
-.vs-dark .file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
-	background-image: url("tree-expanded-dark.svg");
-}
-
-.vs-dark .file-icon-themable-tree .monaco-tree-row.has-children .content::before {
-	background-image: url("tree-collapsed-dark.svg");
-}
-
-.hc-black .file-icon-themable-tree .monaco-tree-row.has-children.expanded .content::before {
-	background-image: url("tree-expanded-hc.svg");
-}
-
-.hc-black .file-icon-themable-tree .monaco-tree-row.has-children .content::before {
-	background-image: url("tree-collapsed-hc.svg");
-}
-
 .file-icon-themable-tree.align-icons-and-twisties .monaco-tree-row:not(.has-children) .content::before,
 .file-icon-themable-tree.hide-arrows .monaco-tree-row .content::before {
 	display: none;
@@ -58,6 +33,7 @@
 	background-image: none !important;
 	width: 0 !important;
 	margin-right: 0 !important;
+	visibility: hidden;
 }

 /* Misc */
--- a/src/vs/workbench/browser/parts/views/panelViewlet.ts
+++ b/src/vs/workbench/browser/parts/views/panelViewlet.ts
@@ -71,6 +71,7 @@ export abstract class ViewletPanel extends Panel implements IView {
 	private readonly showActionsAlways: boolean = false;
 	private headerContainer: HTMLElement;
 	private titleContainer: HTMLElement;
+	protected twistiesContainer: HTMLElement;

 	constructor(
 		options: IViewletPanelOptions,
@@ -133,6 +134,8 @@ export abstract class ViewletPanel extends Panel implements IView {
 	protected renderHeader(container: HTMLElement): void {
 		this.headerContainer = container;

+		this.renderTwisties(container);
+
 		this.renderHeaderTitle(container, this.title);

 		const actions = append(container, $('.actions'));
@@ -153,6 +156,10 @@ export abstract class ViewletPanel extends Panel implements IView {
 		this.updateActionsVisibility();
 	}

+	protected renderTwisties(container: HTMLElement): void {
+		this.twistiesContainer = append(container, $('.twisties.codicon.codicon-chevron-right'));
+	}
+
 	protected renderHeaderTitle(container: HTMLElement, title: string): void {
 		this.titleContainer = append(container, $('h3.title', undefined, title));
 	}