Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Colored titlebar for Windows #39972

Merged
merged 35 commits into from
Jun 18, 2018
Merged

[WIP] Colored titlebar for Windows #39972

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
f4e80de
Initial changes
rianadon Aug 26, 2017
ddddfde
Add custom titlebar
rianadon Nov 23, 2017
04f2b9b
Revert vibrancy changes, cross-platform support
rianadon Dec 9, 2017
96c530b
Add hover states for titlebar
rianadon Dec 9, 2017
3fc07e3
Implement button actions, make maximize icon change
rianadon Dec 9, 2017
c758472
Merge with master
rianadon Dec 9, 2017
12a1393
Remove debugging statement
rianadon Dec 9, 2017
7f12e76
Remove formatting changes
rianadon Dec 9, 2017
c840d0d
Remove more formatting changes
rianadon Dec 9, 2017
be8cb21
Fix compilation errors
rianadon Dec 9, 2017
a66d521
Fix code formatting
rianadon Dec 10, 2017
bec93d4
Make icon sizes independent of zoom
rianadon Dec 10, 2017
f2648cd
Make positioning of icons same as otherWindows apps
rianadon Dec 10, 2017
c9bf4c9
Use setting, standard titlebar
rianadon Dec 12, 2017
1fdd9ed
Make sizing consistent with Windows
rianadon Dec 12, 2017
ae5e8d4
Make window resiable from top
rianadon Dec 12, 2017
233784d
More consistency
rianadon Dec 12, 2017
80411d3
Make titlebar render correctly on reload
rianadon Dec 12, 2017
94cb977
More positioning changes
rianadon Dec 12, 2017
b5bdbf1
Merge with master
rianadon Dec 12, 2017
a0b33ed
Merge remote-tracking branch 'upstream/master' into titlebar
bpasero Dec 13, 2017
25e5ca6
Make frame show by default on Windows
rianadon Dec 14, 2017
63f86d2
Merge branch 'titlebar' of https://github.com/rianadon/vscode into ti…
rianadon Dec 14, 2017
961ec4c
Try to make window draggable before load
rianadon Dec 14, 2017
a5a0553
Fix drag issue
rianadon Dec 16, 2017
0c7174b
Remove unnecessary console.log
rianadon Dec 16, 2017
8667ae7
Merge remote-tracking branch 'upstream' into titlebar
rianadon Dec 16, 2017
2afb336
Make Linux compatible
rianadon Dec 17, 2017
4ce2f07
Titlebar fixes for linux
rianadon Dec 17, 2017
b3db9ac
Remove unused import
rianadon Dec 17, 2017
0976b51
Make framless window draggable on LInux
rianadon Dec 17, 2017
dc5f62b
Add hover transitions
rianadon Dec 17, 2017
8c8de9f
Make double-clicking icon close window
rianadon Dec 17, 2017
91ac8c8
Merge remote-tracking branch 'upstream/master' into titlebar
bpasero Mar 24, 2018
c1e4b74
Merge remote-tracking branch 'upstream/master' into titlebar
rianadon May 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/vs/code/electron-main/window.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,9 @@ export class CodeWindow implements ICodeWindow {
}

let useCustomTitleStyle = false;
if (isMacintosh && (!windowConfig || !windowConfig.titleBarStyle || windowConfig.titleBarStyle === 'custom')) {
if ((isWindows || isMacintosh) && (!windowConfig || !windowConfig.titleBarStyle || windowConfig.titleBarStyle === 'custom')) {
const isDev = !this.environmentService.isBuilt || !!config.extensionDevelopmentPath;
if (!isDev) {
if (!isMacintosh || !isDev) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why adding !isMacintosh here? Wouldn't that break the custom titlebar on Macs?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it would. The !isDev addresses some bug (electron/electron#3647) that was fixed for Windows (for me at least). For MacOS, if isDev is false the custom titlebar will still work. The reason I added the !isMacintosh was to allow VS Code to use the custom titlebar in non-MacOS environments even when isDev is true (since there is no bug then).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not putting that directly in the precedent if or straight in the variable declaration, like this:

// not enabled when developing on Mac due to https://github.com/electron/electron/issues/3647
let useCustomTitleStyle = (!isMacintosh && windowConfig && windowConfig.titleBarStyle === 'custom') ||
                          (isMacintosh && (!windowConfig || !windowConfig.titleBarStyle || windowConfig.titleBarStyle === 'custom') && (!this.environmentService.isBuilt || !!config.extensionDevelopmentPath));

Might want to look also why is !! before config.extensionDevelopmentPath because the double ! cancels themselves.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it is a little weird to have that on the separate line. I was keeping the computation of isDev separate as it was before, which would make the if statement less complicated.

As for the !! it is my understanding that the operation casts config.extensionDevelopmentPath to a boolean. That way, if !this.environmentService.isBuilt is false, then isDev evaluates to true and not whatever the value of config.extensionDevelopmentPath is. However, given that this is plugged into a later if statement, this is likely unnecessary. It may only be so that TypeScript identifies isDev as a boolean.

useCustomTitleStyle = true; // not enabled when developing due to https://github.com/electron/electron/issues/3647
}
}
Expand All @@ -188,6 +188,9 @@ export class CodeWindow implements ICodeWindow {
if (useCustomTitleStyle) {
options.titleBarStyle = 'hidden';
this.hiddenTitleBarStyle = true;
if (isWindows) {
options.frame = false;
}
}

// Create the browser window.
Expand Down Expand Up @@ -224,6 +227,9 @@ export class CodeWindow implements ICodeWindow {
});
}

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();

Expand Down
8 changes: 8 additions & 0 deletions src/vs/platform/windows/common/windows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ export interface IWindowsService {
onWindowOpen: Event<number>;
onWindowFocus: Event<number>;
onWindowBlur: Event<number>;
onWindowMaximize: Event<number>;
onWindowUnmaximize: Event<number>;

pickFileFolderAndOpen(options: INativeOpenDialogOptions): TPromise<void>;
pickFileAndOpen(options: INativeOpenDialogOptions): TPromise<void>;
Expand All @@ -120,6 +122,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>;
Expand Down Expand Up @@ -168,6 +171,7 @@ export interface IWindowService {
_serviceBrand: any;

onDidChangeFocus: Event<boolean>;
onDidChangeMaximize: Event<boolean>;

getConfiguration(): IWindowConfiguration;
getCurrentWindowId(): number;
Expand All @@ -189,6 +193,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): number;
Expand Down
23 changes: 23 additions & 0 deletions src/vs/platform/windows/common/windowsIpc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,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>;
Expand All @@ -68,18 +69,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);
Expand Down Expand Up @@ -121,6 +128,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]);
Expand Down Expand Up @@ -156,6 +164,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);
}
Expand Down Expand Up @@ -264,6 +279,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);
}
Expand Down
20 changes: 20 additions & 0 deletions src/vs/platform/windows/electron-browser/windowService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { IWorkspaceFolderCreationData } from 'vs/platform/workspaces/common/work
export class WindowService implements IWindowService {

readonly onDidChangeFocus: Event<boolean>;
readonly onDidChangeMaximize: Event<boolean>;

_serviceBrand: any;

Expand All @@ -28,7 +29,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 {
Expand Down Expand Up @@ -111,6 +115,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);
}
Expand Down
14 changes: 13 additions & 1 deletion src/vs/platform/windows/electron-main/windowsService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export class WindowsService implements IWindowsService, IDisposable {
readonly onWindowOpen: Event<number> = fromNodeEventEmitter(app, 'browser-window-created', (_, w: Electron.BrowserWindow) => w.id);
readonly onWindowFocus: Event<number> = fromNodeEventEmitter(app, 'browser-window-focus', (_, w: Electron.BrowserWindow) => w.id);
readonly onWindowBlur: Event<number> = fromNodeEventEmitter(app, 'browser-window-blur', (_, w: Electron.BrowserWindow) => w.id);
readonly onWindowMaximize: Event<number> = fromNodeEventEmitter(app, 'browser-window-maximize', (_, w: Electron.BrowserWindow) => w.id);
readonly onWindowUnmaximize: Event<number> = fromNodeEventEmitter(app, 'browser-window-unmaximize', (_, w: Electron.BrowserWindow) => w.id);

constructor(
private sharedProcess: ISharedProcess,
Expand Down Expand Up @@ -288,6 +290,16 @@ export class WindowsService implements IWindowsService, 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> {
const codeWindow = this.windowsMainService.getWindowById(windowId);

Expand Down Expand Up @@ -416,4 +428,4 @@ export class WindowsService implements IWindowsService, IDisposable {
dispose(): void {
this.disposables = dispose(this.disposables);
}
}
}
18 changes: 15 additions & 3 deletions src/vs/workbench/browser/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, isWindows } from 'vs/base/common/platform';
import { memoize } from 'vs/base/common/decorators';

const MIN_SIDEBAR_PART_WIDTH = 170;
Expand All @@ -31,7 +32,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 : 28;
const STATUS_BAR_HEIGHT = 22;
const ACTIVITY_BAR_WIDTH = 50;

Expand Down Expand Up @@ -70,6 +71,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;
Expand Down Expand Up @@ -135,6 +137,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();
}

Expand Down Expand Up @@ -449,7 +453,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

const previousMaxPanelHeight = this.sidebarHeight - this.partLayoutInfo.editor.minHeight;
this.sidebarHeight = this.workbenchSize.height - this.statusbarHeight - this.titlebarHeight;
Expand Down Expand Up @@ -773,4 +777,12 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
this.toUnbind = null;
}
}
}

public onMaximizeChange(maximized: boolean): void {
if (isWindows) {
this.titlebarBaseHeight = maximized ? 25 : this.partLayoutInfo.titlebar.height;
} else {
this.titlebarBaseHeight = this.partLayoutInfo.titlebar.height;
}
}
}
1 change: 1 addition & 0 deletions src/vs/workbench/browser/parts/sidebar/sidebarPart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,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);
Expand Down
56 changes: 55 additions & 1 deletion src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,58 @@
text-overflow: ellipsis;
-webkit-app-region: drag;
zoom: 1; /* prevent zooming */
}
}

/*************\
| Windows CSS |
\*************/

.monaco-workbench.windows > .part.titlebar {
line-height: 25px;
height: 25px;
padding: 0 calc(0.5em / 12) 0 0.5em;
}

.monaco-workbench.windows > .part.titlebar > .window-title {
line-height: 25px;
flex-grow: 1;
margin-left: 0.5em;
}

.monaco-workbench.windows > .part.titlebar > .window-appicon {
width: calc(16em / 12);
height: calc(16em / 12);
-webkit-app-region: no-drag;
}

.monaco-workbench.windows > .part.titlebar > .window-icon {
width: calc(46em / 12);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-app-region: no-drag;
}

.window-unmaximize {
display: none;
}

.monaco-workbench.windows > .part.titlebar > .window-icon svg {
width: calc(10em / 12);
height: calc(10em / 12);
shape-rendering: crispEdges;
}

.monaco-workbench.windows > .part.titlebar > .window-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.monaco-workbench.windows > .part.titlebar.light > .window-icon:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.monaco-workbench.windows > .part.titlebar.titlebar > .window-close:hover {
background-color: rgba(232, 17, 35, 0.9);
color: rgba(255, 255, 255, 1);
}
Loading