[WIP] Colored titlebar for Windows

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

@@ -166,9 +166,10 @@ export class CodeWindow implements ICodeWindow {
 		}
 
 		let useCustomTitleStyle = false;
-		if (isMacintosh && (!windowConfig || !windowConfig.titleBarStyle || windowConfig.titleBarStyle === 'custom')) {
+		if ((!isMacintosh && windowConfig && windowConfig.titleBarStyle === 'custom') ||
+			(isMacintosh && (!windowConfig || !windowConfig.titleBarStyle || windowConfig.titleBarStyle === 'custom'))) {
 			const isDev = !this.environmentService.isBuilt || !!config.extensionDevelopmentPath;
-			if (!isDev) {
+			if (!isMacintosh || !isDev) {
 				useCustomTitleStyle = true; // not enabled when developing due to https://github.com/electron/electron/issues/3647
 			}
 		}
@@ -180,6 +181,9 @@ export class CodeWindow implements ICodeWindow {
 		if (useCustomTitleStyle) {
 			options.titleBarStyle = 'hidden';
 			this.hiddenTitleBarStyle = true;
+			if (!isMacintosh) {
+				options.frame = false;
+			}
 		}
 
 		// Create the browser window.
@@ -207,6 +211,9 @@ export class CodeWindow implements ICodeWindow {
 			this._win.setSheetOffset(22); // offset dialogs by the height of the custom title bar if we have any
 		}
 
+		this._win.on('maximize', (e) => app.emit('browser-window-maximize', e, this._win));
+		this._win.on('unmaximize', (e) => app.emit('browser-window-unmaximize', e, this._win));
+
 		if (isFullscreenOrMaximized) {
 			this._win.maximize();
 
@@ -603,6 +610,7 @@ export class CodeWindow implements ICodeWindow {
 		// Theme
 		windowConfiguration.baseTheme = this.getBaseTheme();
 		windowConfiguration.backgroundColor = this.getBackgroundColor();
+		windowConfiguration.frameless = this.hasHiddenTitleBarStyle() && !isMacintosh;
 
 		// Perf Counters
 		windowConfiguration.perfEntries = exportEntries();

src/vs/platform/windows/common/windows.ts

@@ -103,6 +103,8 @@ export interface IWindowsService {
 	onWindowOpen: Event<number>;
 	onWindowFocus: Event<number>;
 	onWindowBlur: Event<number>;
+	onWindowMaximize: Event<number>;
+	onWindowUnmaximize: Event<number>;
 
 	// Dialogs
 	pickFileFolderAndOpen(options: INativeOpenDialogOptions): TPromise<void>;
@@ -131,6 +133,7 @@ export interface IWindowsService {
 	isMaximized(windowId: number): TPromise<boolean>;
 	maximizeWindow(windowId: number): TPromise<void>;
 	unmaximizeWindow(windowId: number): TPromise<void>;
+	minimizeWindow(windowId: number): TPromise<void>;
 	onWindowTitleDoubleClick(windowId: number): TPromise<void>;
 	setDocumentEdited(windowId: number, flag: boolean): TPromise<void>;
 	quit(): TPromise<void>;
@@ -181,6 +184,7 @@ export interface IWindowService {
 	_serviceBrand: any;
 
 	onDidChangeFocus: Event<boolean>;
+	onDidChangeMaximize: Event<boolean>;
 
 	getConfiguration(): IWindowConfiguration;
 	getCurrentWindowId(): number;
@@ -202,6 +206,10 @@ export interface IWindowService {
 	closeWindow(): TPromise<void>;
 	isFocused(): TPromise<boolean>;
 	setDocumentEdited(flag: boolean): TPromise<void>;
+	isMaximized(): TPromise<boolean>;
+	maximizeWindow(): TPromise<void>;
+	unmaximizeWindow(): TPromise<void>;
+	minimizeWindow(): TPromise<void>;
 	onWindowTitleDoubleClick(): TPromise<void>;
 	show(): TPromise<void>;
 	showMessageBox(options: MessageBoxOptions): TPromise<IMessageBoxResult>;
@@ -328,6 +336,7 @@ export interface IWindowConfiguration extends ParsedArgs, IOpenFileRequest {
 	highContrast?: boolean;
 	baseTheme?: string;
 	backgroundColor?: string;
+	frameless?: boolean;
 	accessibilitySupport?: boolean;
 
 	perfEntries: PerformanceEntry[];

src/vs/platform/windows/common/windowsIpc.ts

@@ -49,6 +49,7 @@ export interface IWindowsChannel extends IChannel {
 	call(command: 'isMaximized', arg: number): TPromise<boolean>;
 	call(command: 'maximizeWindow', arg: number): TPromise<void>;
 	call(command: 'unmaximizeWindow', arg: number): TPromise<void>;
+	call(command: 'minimizeWindow', arg: number): TPromise<void>;
 	call(command: 'onWindowTitleDoubleClick', arg: number): TPromise<void>;
 	call(command: 'setDocumentEdited', arg: [number, boolean]): TPromise<void>;
 	call(command: 'quit'): TPromise<void>;
@@ -73,18 +74,24 @@ export class WindowsChannel implements IWindowsChannel {
 	private onWindowOpen: Event<number>;
 	private onWindowFocus: Event<number>;
 	private onWindowBlur: Event<number>;
+	private onWindowMaximize: Event<number>;
+	private onWindowUnmaximize: Event<number>;
 
 	constructor(private service: IWindowsService) {
 		this.onWindowOpen = buffer(service.onWindowOpen, true);
 		this.onWindowFocus = buffer(service.onWindowFocus, true);
 		this.onWindowBlur = buffer(service.onWindowBlur, true);
+		this.onWindowMaximize = buffer(service.onWindowMaximize, true);
+		this.onWindowUnmaximize = buffer(service.onWindowUnmaximize, true);
 	}
 
 	call(command: string, arg?: any): TPromise<any> {
 		switch (command) {
 			case 'event:onWindowOpen': return eventToCall(this.onWindowOpen);
 			case 'event:onWindowFocus': return eventToCall(this.onWindowFocus);
 			case 'event:onWindowBlur': return eventToCall(this.onWindowBlur);
+			case 'event:onWindowMaximize': return eventToCall(this.onWindowMaximize);
+			case 'event:onWindowUnmaximize': return eventToCall(this.onWindowUnmaximize);
 			case 'pickFileFolderAndOpen': return this.service.pickFileFolderAndOpen(arg);
 			case 'pickFileAndOpen': return this.service.pickFileAndOpen(arg);
 			case 'pickFolderAndOpen': return this.service.pickFolderAndOpen(arg);
@@ -129,6 +136,7 @@ export class WindowsChannel implements IWindowsChannel {
 			case 'isMaximized': return this.service.isMaximized(arg);
 			case 'maximizeWindow': return this.service.maximizeWindow(arg);
 			case 'unmaximizeWindow': return this.service.unmaximizeWindow(arg);
+			case 'minimizeWindow': return this.service.minimizeWindow(arg);
 			case 'onWindowTitleDoubleClick': return this.service.onWindowTitleDoubleClick(arg);
 			case 'setDocumentEdited': return this.service.setDocumentEdited(arg[0], arg[1]);
 			case 'openWindow': return this.service.openWindow(arg[0], arg[1]);
@@ -165,6 +173,13 @@ export class WindowsChannelClient implements IWindowsService {
 	private _onWindowBlur: Event<number> = eventFromCall<number>(this.channel, 'event:onWindowBlur');
 	get onWindowBlur(): Event<number> { return this._onWindowBlur; }
 
+	private _onWindowMaximize: Event<number> = eventFromCall<number>(this.channel, 'event:onWindowMaximize');
+	get onWindowMaximize(): Event<number> { return this._onWindowMaximize; }
+
+	private _onWindowUnmaximize: Event<number> = eventFromCall<number>(this.channel, 'event:onWindowUnmaximize');
+	get onWindowUnmaximize(): Event<number> { return this._onWindowUnmaximize; }
+
+
 	pickFileFolderAndOpen(options: INativeOpenDialogOptions): TPromise<void> {
 		return this.channel.call('pickFileFolderAndOpen', options);
 	}
@@ -285,6 +300,14 @@ export class WindowsChannelClient implements IWindowsService {
 		return this.channel.call('unmaximizeWindow', windowId);
 	}
 
+	minimizeWindow(windowId: number): TPromise<void> {
+		return this.channel.call('minimizeWindow', windowId);
+	}
+
+	addMaximizeListener(windowId: number, listener: (maximized: boolean) => void): TPromise<void> {
+		return TPromise.as(null);
+	}
+
 	onWindowTitleDoubleClick(windowId: number): TPromise<void> {
 		return this.channel.call('onWindowTitleDoubleClick', windowId);
 	}

src/vs/platform/windows/electron-browser/windowService.ts

@@ -16,6 +16,7 @@ import { ParsedArgs } from 'vs/platform/environment/common/environment';
 export class WindowService implements IWindowService {
 
 	readonly onDidChangeFocus: Event<boolean>;
+	readonly onDidChangeMaximize: Event<boolean>;
 
 	_serviceBrand: any;
 
@@ -26,7 +27,10 @@ export class WindowService implements IWindowService {
 	) {
 		const onThisWindowFocus = mapEvent(filterEvent(windowsService.onWindowFocus, id => id === windowId), _ => true);
 		const onThisWindowBlur = mapEvent(filterEvent(windowsService.onWindowBlur, id => id === windowId), _ => false);
+		const onThisWindowMaximize = mapEvent(filterEvent(windowsService.onWindowMaximize, id => id === windowId), _ => true);
+		const onThisWindowUnmaximize = mapEvent(filterEvent(windowsService.onWindowUnmaximize, id => id === windowId), _ => false);
 		this.onDidChangeFocus = anyEvent(onThisWindowFocus, onThisWindowBlur);
+		this.onDidChangeMaximize = anyEvent(onThisWindowMaximize, onThisWindowUnmaximize);
 	}
 
 	getCurrentWindowId(): number {
@@ -109,6 +113,22 @@ export class WindowService implements IWindowService {
 		return this.windowsService.isFocused(this.windowId);
 	}
 
+	isMaximized(): TPromise<boolean> {
+		return this.windowsService.isMaximized(this.windowId);
+	}
+
+	maximizeWindow(): TPromise<void> {
+		return this.windowsService.maximizeWindow(this.windowId);
+	}
+
+	unmaximizeWindow(): TPromise<void> {
+		return this.windowsService.unmaximizeWindow(this.windowId);
+	}
+
+	minimizeWindow(): TPromise<void> {
+		return this.windowsService.minimizeWindow(this.windowId);
+	}
+
 	onWindowTitleDoubleClick(): TPromise<void> {
 		return this.windowsService.onWindowTitleDoubleClick(this.windowId);
 	}

src/vs/platform/windows/electron-main/windowsService.ts

@@ -39,6 +39,8 @@ export class WindowsService implements IWindowsService, IURLHandler, IDisposable
 	);
 
 	readonly onWindowBlur: Event<number> = filterEvent(fromNodeEventEmitter(app, 'browser-window-blur', (_, w: Electron.BrowserWindow) => w.id), id => !!this.windowsMainService.getWindowById(id));
+	readonly onWindowMaximize: Event<number> = filterEvent(fromNodeEventEmitter(app, 'browser-window-maximize', (_, w: Electron.BrowserWindow) => w.id), id => !!this.windowsMainService.getWindowById(id));
+	readonly onWindowUnmaximize: Event<number> = filterEvent(fromNodeEventEmitter(app, 'browser-window-unmaximize', (_, w: Electron.BrowserWindow) => w.id), id => !!this.windowsMainService.getWindowById(id));
 
 	constructor(
 		private sharedProcess: ISharedProcess,
@@ -338,6 +340,16 @@ export class WindowsService implements IWindowsService, IURLHandler, IDisposable
 		return TPromise.as(null);
 	}
 
+	minimizeWindow(windowId: number): TPromise<void> {
+		const codeWindow = this.windowsMainService.getWindowById(windowId);
+
+		if (codeWindow) {
+			codeWindow.win.minimize();
+		}
+
+		return TPromise.as(null);
+	}
+
 	onWindowTitleDoubleClick(windowId: number): TPromise<void> {
 		this.logService.trace('windowsService#onWindowTitleDoubleClick', windowId);
 		const codeWindow = this.windowsMainService.getWindowById(windowId);
@@ -510,4 +522,4 @@ export class WindowsService implements IWindowsService, IURLHandler, IDisposable
 	dispose(): void {
 		this.disposables = dispose(this.disposables);
 	}
-}
+}

src/vs/workbench/browser/layout.ts

@@ -19,6 +19,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { getZoomFactor } from 'vs/base/browser/browser';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { isMacintosh } from 'vs/base/common/platform';
 import { memoize } from 'vs/base/common/decorators';
 import { NotificationsCenter } from 'vs/workbench/browser/parts/notifications/notificationsCenter';
 import { NotificationsToasts } from 'vs/workbench/browser/parts/notifications/notificationsToasts';
@@ -36,7 +37,7 @@ const PANEL_SIZE_BEFORE_MAXIMIZED_BOUNDARY = 0.7;
 const HIDE_SIDEBAR_WIDTH_THRESHOLD = 50;
 const HIDE_PANEL_HEIGHT_THRESHOLD = 50;
 const HIDE_PANEL_WIDTH_THRESHOLD = 100;
-const TITLE_BAR_HEIGHT = 22;
+const TITLE_BAR_HEIGHT = isMacintosh ? 22 : 29;
 const STATUS_BAR_HEIGHT = 22;
 const ACTIVITY_BAR_WIDTH = 50;
 
@@ -78,6 +79,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 	private sashY: Sash;
 	private _sidebarWidth: number;
 	private sidebarHeight: number;
+	private titlebarBaseHeight: number;
 	private titlebarHeight: number;
 	private statusbarHeight: number;
 	private panelSizeBeforeMaximized: number;
@@ -149,6 +151,8 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 		this.toUnbind.push(editorGroupService.onEditorsChanged(() => this.onEditorsChanged()));
 		this.toUnbind.push(editorGroupService.onGroupOrientationChanged(e => this.onGroupOrientationChanged()));
 
+		this.onMaximizeChange(false);
+
 		this.registerSashListeners();
 	}
 
@@ -463,7 +467,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 		}
 
 		this.statusbarHeight = isStatusbarHidden ? 0 : this.partLayoutInfo.statusbar.height;
-		this.titlebarHeight = isTitlebarHidden ? 0 : this.partLayoutInfo.titlebar.height / getZoomFactor(); // adjust for zoom prevention
+		this.titlebarHeight = isTitlebarHidden ? 0 : this.titlebarBaseHeight / getZoomFactor(); // adjust for zoom prevention
 
 		this.sidebarHeight = this.workbenchSize.height - this.statusbarHeight - this.titlebarHeight;
 		let sidebarSize = new Dimension(this.sidebarWidth, this.sidebarHeight);
@@ -794,6 +798,14 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 		}
 	}
 
+	public onMaximizeChange(maximized: boolean): void {
+		if (!isMacintosh) {
+			this.titlebarBaseHeight = maximized ? 23 : this.partLayoutInfo.titlebar.height;
+		} else {
+			this.titlebarBaseHeight = this.partLayoutInfo.titlebar.height;
+		}
+	}
+
 	public dispose(): void {
 		if (this.toUnbind) {
 			dispose(this.toUnbind);

src/vs/workbench/browser/parts/sidebar/sidebarPart.ts

@@ -91,6 +91,7 @@ export class SidebarPart extends CompositePart<Viewlet> {
 		const container = $(this.getContainer());
 
 		container.style('background-color', this.getColor(SIDE_BAR_BACKGROUND));
+
 		container.style('color', this.getColor(SIDE_BAR_FOREGROUND));
 
 		const borderColor = this.getColor(SIDE_BAR_BORDER) || this.getColor(contrastBorder);

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

@@ -28,4 +28,63 @@
 	text-overflow: ellipsis;
 	-webkit-app-region: drag;
 	zoom: 1; /* prevent zooming */
-}
+}
+
+/***********************\
+| Windows and Linux CSS |
+\***********************/
+
+.monaco-workbench.windows > .part.titlebar, .monaco-workbench.linux > .part.titlebar {
+	line-height: 25px;
+	height: 25px;
+	padding: 0 0 0 0.5em;
+	-webkit-app-region: no-drag;
+}
+
+.monaco-workbench.windows > .part.titlebar > .window-title, .monaco-workbench.linux > .part.titlebar > .window-title  {
+	line-height: 25px;
+	flex-grow: 1;
+	margin-left: 0.35em;
+	-webkit-app-region: drag;
+}
+
+.monaco-workbench > .part.titlebar > .window-appicon {
+	width: calc(16em / 12);
+	height: calc(16em / 12);
+	-webkit-app-region: no-drag;
+}
+
+.monaco-workbench > .part.titlebar > .window-icon {
+	width: calc(46em / 12);
+	height: calc(100% - 1.5em / 12);
+	margin-bottom: calc(1.5em / 12);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	-webkit-app-region: no-drag;
+	-webkit-transition: background-color .2s;
+	transition: background-color .2s;
+}
+
+.window-unmaximize {
+	display: none;
+}
+
+.monaco-workbench > .part.titlebar > .window-icon svg {
+	width: calc(10em / 12);
+	height: calc(10em / 12);
+	shape-rendering: crispEdges;
+}
+
+.monaco-workbench > .part.titlebar > .window-icon:hover {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.monaco-workbench > .part.titlebar.light > .window-icon:hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-close:hover {
+	background-color: rgba(232, 17, 35, 0.9);
+	color: rgba(255, 255, 255, 1);
+}