@theia/core 1.18.0-next.de7b81be → 1.20.0

package/src/electron-browser/menu/electron-main-menu-factory.ts

@@ -24,10 +24,9 @@ import {
 } from '../../common';
 import { Keybinding } from '../../common/keybinding';
 import { PreferenceService, KeybindingRegistry, CommonCommands } from '../../browser';
-import { ContextKeyService } from '../../browser/context-key-service';
 import debounce = require('lodash.debounce');
-import { ContextMenuContext } from '../../browser/menu/context-menu-context';
 import { MAXIMIZED_CLASS } from '../../browser/shell/theia-dock-panel';
+import { BrowserMainMenuFactory } from '../../browser/menu/browser-menu-plugin';
 
 /**
  * Representation of possible electron menu options.
@@ -55,23 +54,18 @@ export type ElectronMenuItemRole = ('undo' | 'redo' | 'cut' | 'copy' | 'paste' |
     'moveTabToNewWindow' | 'windowMenu');
 
 @injectable()
-export class ElectronMainMenuFactory {
+export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
 
     protected _menu: Electron.Menu | undefined;
     protected _toggledCommands: Set<string> = new Set();
 
-    @inject(ContextKeyService)
-    protected readonly contextKeyService: ContextKeyService;
-
-    @inject(ContextMenuContext)
-    protected readonly context: ContextMenuContext;
-
     constructor(
         @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry,
         @inject(PreferenceService) protected readonly preferencesService: PreferenceService,
         @inject(MenuModelRegistry) protected readonly menuProvider: MenuModelRegistry,
         @inject(KeybindingRegistry) protected readonly keybindingRegistry: KeybindingRegistry
     ) {
+        super();
         preferencesService.onPreferenceChanged(
             debounce(e => {
                 if (e.preferenceName === 'window.menuBarVisibility') {
@@ -92,15 +86,16 @@ export class ElectronMainMenuFactory {
 
     async setMenuBar(): Promise<void> {
         await this.preferencesService.ready;
-        const createdMenuBar = this.createMenuBar();
         if (isOSX) {
+            const createdMenuBar = this.createElectronMenuBar();
             electron.remote.Menu.setApplicationMenu(createdMenuBar);
-        } else {
+        } else if (this.preferencesService.get('window.titleBarStyle') === 'native') {
+            const createdMenuBar = this.createElectronMenuBar();
             electron.remote.getCurrentWindow().setMenu(createdMenuBar);
         }
     }
 
-    createMenuBar(): Electron.Menu | null {
+    createElectronMenuBar(): Electron.Menu | null {
         const preference = this.preferencesService.get<string>('window.menuBarVisibility') || 'classic';
         const maxWidget = document.getElementsByClassName(MAXIMIZED_CLASS);
         if (preference === 'visible' || (preference === 'classic' && maxWidget.length === 0)) {
@@ -118,7 +113,7 @@ export class ElectronMainMenuFactory {
         return null;
     }
 
-    createContextMenu(menuPath: MenuPath, args?: any[]): Electron.Menu {
+    createElectronContextMenu(menuPath: MenuPath, args?: any[]): Electron.Menu {
         const menuModel = this.menuProvider.getMenu(menuPath);
         const template = this.fillMenuTemplate([], menuModel, args, { showDisabled: false });
         return electron.remote.Menu.buildFromTemplate(template);
@@ -221,13 +216,13 @@ export class ElectronMainMenuFactory {
                     this._toggledCommands.add(commandId);
                 }
             } else {
-                items.push(...this.handleDefault(menu, args, options));
+                items.push(...this.handleElectronDefault(menu, args, options));
             }
         }
         return items;
     }
 
-    protected handleDefault(menuNode: MenuNode, args: any[] = [], options?: ElectronMenuOptions): Electron.MenuItemConstructorOptions[] {
+    protected handleElectronDefault(menuNode: MenuNode, args: any[] = [], options?: ElectronMenuOptions): Electron.MenuItemConstructorOptions[] {
         return [];
     }
 

package/src/electron-browser/menu/electron-menu-contribution.ts

@@ -18,44 +18,51 @@ import * as electron from '../../../shared/electron';
 import { inject, injectable } from 'inversify';
 import {
     Command, CommandContribution, CommandRegistry,
-    isOSX, isWindows, MenuModelRegistry, MenuContribution, Disposable
+    isOSX, isWindows, MenuModelRegistry, MenuContribution, Disposable, nls
 } from '../../common';
-import { ApplicationShell, KeybindingContribution, KeybindingRegistry, PreferenceScope, PreferenceService } from '../../browser';
-import { FrontendApplication, FrontendApplicationContribution, CommonMenus } from '../../browser';
+import {
+    ApplicationShell, codicon, ConfirmDialog, KeybindingContribution, KeybindingRegistry,
+    PreferenceScope, Widget, FrontendApplication, FrontendApplicationContribution, CommonMenus, CommonCommands, Dialog
+} from '../../browser';
 import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { FrontendApplicationStateService, FrontendApplicationState } from '../../browser/frontend-application-state';
+import { FrontendApplicationConfigProvider } from '../../browser/frontend-application-config-provider';
+import { RequestTitleBarStyle, Restart, TitleBarStyleAtStartup, TitleBarStyleChanged } from '../../electron-common/messaging/electron-messages';
 import { ZoomLevel } from '../window/electron-window-preferences';
+import { BrowserMenuBarContribution } from '../../browser/menu/browser-menu-plugin';
+
+import '../../../src/electron-browser/menu/electron-menu-style.css';
 
 export namespace ElectronCommands {
-    export const TOGGLE_DEVELOPER_TOOLS: Command = {
+    export const TOGGLE_DEVELOPER_TOOLS = Command.toDefaultLocalizedCommand({
         id: 'theia.toggleDevTools',
         label: 'Toggle Developer Tools'
-    };
-    export const RELOAD: Command = {
+    });
+    export const RELOAD = Command.toDefaultLocalizedCommand({
         id: 'view.reload',
         label: 'Reload Window'
-    };
-    export const ZOOM_IN: Command = {
+    });
+    export const ZOOM_IN = Command.toDefaultLocalizedCommand({
         id: 'view.zoomIn',
         label: 'Zoom In'
-    };
-    export const ZOOM_OUT: Command = {
+    });
+    export const ZOOM_OUT = Command.toDefaultLocalizedCommand({
         id: 'view.zoomOut',
         label: 'Zoom Out'
-    };
-    export const RESET_ZOOM: Command = {
+    });
+    export const RESET_ZOOM = Command.toDefaultLocalizedCommand({
         id: 'view.resetZoom',
         label: 'Reset Zoom'
-    };
-    export const CLOSE_WINDOW: Command = {
+    });
+    export const CLOSE_WINDOW = Command.toDefaultLocalizedCommand({
         id: 'close.window',
         label: 'Close Window'
-    };
-    export const TOGGLE_FULL_SCREEN: Command = {
+    });
+    export const TOGGLE_FULL_SCREEN = Command.toDefaultLocalizedCommand({
         id: 'workbench.action.toggleFullScreen',
-        category: 'View',
+        category: CommonCommands.VIEW_CATEGORY,
         label: 'Toggle Full Screen'
-    };
+    });
 }
 
 export namespace ElectronMenus {
@@ -72,38 +79,33 @@ export namespace ElectronMenus {
 }
 
 @injectable()
-export class ElectronMenuContribution implements FrontendApplicationContribution, CommandContribution, MenuContribution, KeybindingContribution {
+export class ElectronMenuContribution extends BrowserMenuBarContribution implements FrontendApplicationContribution, CommandContribution, MenuContribution, KeybindingContribution {
 
     @inject(FrontendApplicationStateService)
     protected readonly stateService: FrontendApplicationStateService;
 
-    @inject(PreferenceService)
-    protected readonly preferenceService: PreferenceService;
+    protected titleBarStyleChangeFlag = false;
+    protected titleBarStyle?: string;
 
     constructor(
         @inject(ElectronMainMenuFactory) protected readonly factory: ElectronMainMenuFactory,
         @inject(ApplicationShell) protected shell: ApplicationShell
-    ) { }
+    ) {
+        super(factory);
+    }
 
     onStart(app: FrontendApplication): void {
-        this.hideTopPanel(app);
-        this.preferenceService.ready.then(() => {
-            this.setMenu();
-            electron.remote.getCurrentWindow().setMenuBarVisibility(true);
-        });
+        this.handleTitleBarStyling(app);
         if (isOSX) {
             // OSX: Recreate the menus when changing windows.
             // OSX only has one menu bar for all windows, so we need to swap
             // between them as the user switches windows.
-            electron.remote.getCurrentWindow().on('focus', () => this.setMenu());
+            electron.remote.getCurrentWindow().on('focus', () => this.setMenu(app));
         }
         // Make sure the application menu is complete, once the frontend application is ready.
         // https://github.com/theia-ide/theia/issues/5100
         let onStateChange: Disposable | undefined = undefined;
         const stateServiceListener = (state: FrontendApplicationState) => {
-            if (state === 'ready') {
-                this.setMenu();
-            }
             if (state === 'closing_window') {
                 if (!!onStateChange) {
                     onStateChange.dispose();
@@ -119,6 +121,30 @@ export class ElectronMenuContribution implements FrontendApplicationContribution
         });
     }
 
+    handleTitleBarStyling(app: FrontendApplication): void {
+        this.hideTopPanel(app);
+        electron.ipcRenderer.on(TitleBarStyleAtStartup, (_event, style: string) => {
+            this.titleBarStyle = style;
+            this.preferenceService.ready.then(() => {
+                this.preferenceService.set('window.titleBarStyle', this.titleBarStyle, PreferenceScope.User);
+            });
+        });
+        electron.ipcRenderer.send(RequestTitleBarStyle);
+        this.preferenceService.ready.then(() => {
+            this.setMenu(app);
+            electron.remote.getCurrentWindow().setMenuBarVisibility(['classic', 'visible'].includes(this.preferenceService.get('window.menuBarVisibility', 'classic')));
+        });
+        this.preferenceService.onPreferenceChanged(change => {
+            if (change.preferenceName === 'window.titleBarStyle') {
+                if (this.titleBarStyleChangeFlag && this.titleBarStyle !== change.newValue && electron.remote.getCurrentWindow().isFocused()) {
+                    electron.ipcRenderer.send(TitleBarStyleChanged, change.newValue);
+                    this.handleRequiredRestart();
+                }
+                this.titleBarStyleChangeFlag = true;
+            }
+        });
+    }
+
     handleToggleMaximized(): void {
         const preference = this.preferenceService.get('window.menuBarVisibility');
         if (preference === 'classic') {
@@ -127,31 +153,95 @@ export class ElectronMenuContribution implements FrontendApplicationContribution
     }
 
     /**
-     * Makes the `theia-top-panel` hidden as it is unused for the electron-based application.
+     * Hides the `theia-top-panel` depending on the selected `titleBarStyle`.
      * The `theia-top-panel` is used as the container of the main, application menu-bar for the
-     * browser. Electron has it's own.
+     * browser. Native Electron has it's own.
      * By default, this method is called on application `onStart`.
      */
     protected hideTopPanel(app: FrontendApplication): void {
         const itr = app.shell.children();
         let child = itr.next();
         while (child) {
-            // Top panel for the menu contribution is not required for Electron.
+            // Top panel for the menu contribution is not required for native Electron title bar.
             if (child.id === 'theia-top-panel') {
-                child.setHidden(true);
-                child = undefined;
+                child.setHidden(this.titleBarStyle !== 'custom');
+                break;
             } else {
                 child = itr.next();
             }
         }
     }
 
-    private setMenu(menu: electron.Menu | null = this.factory.createMenuBar(), electronWindow: electron.BrowserWindow = electron.remote.getCurrentWindow()): void {
+    protected setMenu(app: FrontendApplication, electronMenu: electron.Menu | null = this.factory.createElectronMenuBar(),
+        electronWindow: electron.BrowserWindow = electron.remote.getCurrentWindow()): void {
         if (isOSX) {
-            electron.remote.Menu.setApplicationMenu(menu);
+            electron.remote.Menu.setApplicationMenu(electronMenu);
         } else {
+            this.hideTopPanel(app);
+            if (this.titleBarStyle === 'custom' && !this.menuBar) {
+                this.createCustomTitleBar(app, electronWindow);
+            }
             // Unix/Windows: Set the per-window menus
-            electronWindow.setMenu(menu);
+            electronWindow.setMenu(electronMenu);
+        }
+    }
+
+    protected createCustomTitleBar(app: FrontendApplication, electronWindow: electron.BrowserWindow): void {
+        const dragPanel = new Widget();
+        dragPanel.id = 'theia-drag-panel';
+        app.shell.addWidget(dragPanel, { area: 'top' });
+        this.appendMenu(app.shell);
+        const controls = document.createElement('div');
+        controls.id = 'window-controls';
+        controls.append(
+            this.createControlButton('minimize', () => electronWindow.minimize()),
+            this.createControlButton('maximize', () => electronWindow.maximize()),
+            this.createControlButton('restore', () => electronWindow.unmaximize()),
+            this.createControlButton('close', () => electronWindow.close())
+        );
+        app.shell.topPanel.node.append(controls);
+        this.handleWindowControls(electronWindow);
+    }
+
+    protected handleWindowControls(electronWindow: electron.BrowserWindow): void {
+        toggleControlButtons();
+        electronWindow.on('maximize', toggleControlButtons);
+        electronWindow.on('unmaximize', toggleControlButtons);
+
+        function toggleControlButtons(): void {
+            if (electronWindow.isMaximized()) {
+                document.body.classList.add('maximized');
+            } else {
+                document.body.classList.remove('maximized');
+            }
+        }
+    }
+
+    protected createControlButton(id: string, handler: () => void): HTMLElement {
+        const button = document.createElement('div');
+        button.id = `${id}-button`;
+        button.className = `control-button ${codicon(`chrome-${id}`)}`;
+        button.addEventListener('click', handler);
+        return button;
+    }
+
+    protected async handleRequiredRestart(): Promise<void> {
+        const msgNode = document.createElement('div');
+        const message = document.createElement('p');
+        message.textContent = nls.localizeByDefault('A setting has changed that requires a restart to take effect');
+        const detail = document.createElement('p');
+        detail.textContent = nls.localizeByDefault(
+            'Press the restart button to restart {0} and enable the setting.', FrontendApplicationConfigProvider.get().applicationName);
+        msgNode.append(message, detail);
+        const restart = nls.localizeByDefault('Restart');
+        const dialog = new ConfirmDialog({
+            title: restart,
+            msg: msgNode,
+            ok: restart,
+            cancel: Dialog.CANCEL
+        });
+        if (await dialog.open()) {
+            electron.ipcRenderer.send(Restart);
         }
     }
 

package/src/electron-browser/menu/electron-menu-style.css

@@ -0,0 +1,84 @@
+/********************************************************************************
+ * Copyright (C) 2021 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+#theia-drag-panel {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 4px);
+  margin: 4px;
+  -webkit-app-region: drag !important;
+}
+
+#theia-top-panel > * {
+  -webkit-app-region: no-drag;
+}
+
+#window-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 48px);
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+#window-controls .control-button {
+  display: flex;
+  line-height: 30px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+#minimize-button {
+  grid-column: 1;
+}
+
+#maximize-button, #restore-button {
+  grid-column: 2;
+}
+
+#close-button {
+  grid-column: 3;
+}
+
+#window-controls .control-button {
+  user-select: none;
+}
+
+#window-controls .control-button:hover {
+  background: rgba(50%, 50%, 50%, 0.2);
+}
+
+#window-controls #close-button:hover {
+  background: #E81123;
+}
+
+#window-controls #close-button:hover:before {
+  color: white;
+}
+
+body:not(.maximized) #restore-button {
+  display: none;
+}
+
+body.maximized #maximize-button {
+  display: none;
+}

package/src/electron-browser/window/electron-window-preferences.ts

@@ -15,7 +15,9 @@
  ********************************************************************************/
 
 import { interfaces } from 'inversify';
+import { nls } from '../../common/nls';
 import { createPreferenceProxy, PreferenceContribution, PreferenceProxy, PreferenceSchema, PreferenceService } from '../../browser/preferences';
+import { isOSX, isWindows } from '../../common';
 
 export namespace ZoomLevel {
     export const DEFAULT = 0;
@@ -36,13 +38,23 @@ export const electronWindowPreferencesSchema: PreferenceSchema = {
             'maximum': ZoomLevel.MAX,
             'scope': 'application',
             // eslint-disable-next-line max-len
-            'description': 'Adjust the zoom level of the window. The original size is 0 and each increment above (e.g. 1.0) or below (e.g. -1.0) represents zooming 20% larger or smaller. You can also enter decimals to adjust the zoom level with a finer granularity.'
+            'description': nls.localizeByDefault('Adjust the zoom level of the window. The original size is 0 and each increment above (e.g. 1.0) or below (e.g. -1.0) represents zooming 20% larger or smaller. You can also enter decimals to adjust the zoom level with a finer granularity.')
+        },
+        'window.titleBarStyle': {
+            type: 'string',
+            enum: ['native', 'custom'],
+            default: isWindows ? 'custom' : 'native',
+            scope: 'application',
+            // eslint-disable-next-line max-len
+            description: nls.localizeByDefault('Adjust the appearance of the window title bar. On Linux and Windows, this setting also affects the application and context menu appearances. Changes require a full restart to apply.'),
+            included: !isOSX
         },
     }
 };
 
 export class ElectronWindowConfiguration {
     'window.zoomLevel': number;
+    'window.titleBarStyle': 'native' | 'custom';
 }
 
 export const ElectronWindowPreferenceContribution = Symbol('ElectronWindowPreferenceContribution');

package/src/electron-browser/window/electron-window-service.ts

@@ -16,7 +16,7 @@
 
 import { injectable, inject, postConstruct } from 'inversify';
 import { remote } from '../../../shared/electron';
-import { NewWindowOptions } from '../../browser/window/window-service';
+import { NewWindowOptions } from '../../common/window';
 import { DefaultWindowService } from '../../browser/window/default-window-service';
 import { ElectronMainWindowService } from '../../electron-common/electron-main-window-service';
 import { ElectronWindowPreferences } from './electron-window-preferences';

package/src/electron-common/electron-main-window-service.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { NewWindowOptions } from '../browser/window/window-service';
+import { NewWindowOptions } from '../common/window';
 
 export const electronMainWindowServicePath = '/services/electron-window';
 export const ElectronMainWindowService = Symbol('ElectronMainWindowService');

package/src/electron-common/messaging/electron-messages.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (C) 2021 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+export const RequestTitleBarStyle = 'requestTitleBarStyle';
+export const TitleBarStyleChanged = 'titleBarStyleChanged';
+export const TitleBarStyleAtStartup = 'titleBarStyleAtStartup';
+export const Restart = 'restart';

package/src/electron-main/electron-main-application.ts

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { inject, injectable, named } from 'inversify';
-import { screen, globalShortcut, app, BrowserWindow, BrowserWindowConstructorOptions, Event as ElectronEvent } from '../../shared/electron';
+import { screen, globalShortcut, ipcMain, app, BrowserWindow, BrowserWindowConstructorOptions, Event as ElectronEvent } from '../../shared/electron';
 import * as path from 'path';
 import { Argv } from 'yargs';
 import { AddressInfo } from 'net';
@@ -30,7 +30,10 @@ import { ContributionProvider } from '../common/contribution-provider';
 import { ElectronSecurityTokenService } from './electron-security-token-service';
 import { ElectronSecurityToken } from '../electron-common/electron-token';
 import Storage = require('electron-store');
-import { DEFAULT_WINDOW_HASH } from '../browser/window/window-service';
+import { isOSX, isWindows } from '../common';
+import { RequestTitleBarStyle, Restart, TitleBarStyleAtStartup, TitleBarStyleChanged } from '../electron-common/messaging/electron-messages';
+import { DEFAULT_WINDOW_HASH } from '../common/window';
+
 const createYargs: (argv?: string[], cwd?: string) => Argv = require('yargs/yargs');
 
 /**
@@ -180,6 +183,10 @@ export class ElectronMainApplication {
     readonly backendPort = this._backendPort.promise;
 
     protected _config: FrontendApplicationConfig | undefined;
+    protected useNativeWindowFrame: boolean = true;
+    protected didUseNativeWindowFrameOnStart = new Map<number, boolean>();
+    protected restarting = false;
+
     get config(): FrontendApplicationConfig {
         if (!this._config) {
             throw new Error('You have to start the application first.');
@@ -188,6 +195,7 @@ export class ElectronMainApplication {
     }
 
     async start(config: FrontendApplicationConfig): Promise<void> {
+        this.useNativeWindowFrame = this.getTitleBarStyle(config) === 'native';
         this._config = config;
         this.hookApplicationEvents();
         const port = await this.startBackend();
@@ -202,6 +210,23 @@ export class ElectronMainApplication {
         });
     }
 
+    protected getTitleBarStyle(config: FrontendApplicationConfig): 'native' | 'custom' {
+        if (isOSX) {
+            return 'native';
+        }
+        const storedFrame = this.electronStore.get('windowstate')?.frame;
+        if (storedFrame !== undefined) {
+            return !!storedFrame ? 'native' : 'custom';
+        }
+        if (config.preferences && config.preferences['window.titleBarStyle']) {
+            const titleBarStyle = config.preferences['window.titleBarStyle'];
+            if (titleBarStyle === 'native' || titleBarStyle === 'custom') {
+                return titleBarStyle;
+            }
+        }
+        return isWindows ? 'custom' : 'native';
+    }
+
     protected async launch(params: ElectronMainExecutionParams): Promise<void> {
         createYargs(params.argv, params.cwd)
             .command('$0 [file]', false,
@@ -231,6 +256,7 @@ export class ElectronMainApplication {
     async getLastWindowOptions(): Promise<TheiaBrowserWindowOptions> {
         const windowState: TheiaBrowserWindowOptions | undefined = this.electronStore.get('windowstate') || this.getDefaultTheiaWindowOptions();
         return {
+            frame: this.useNativeWindowFrame,
             ...windowState,
             ...this.getDefaultOptions()
         };
@@ -325,6 +351,7 @@ export class ElectronMainApplication {
         const y = Math.round(bounds.y + (bounds.height - height) / 2);
         const x = Math.round(bounds.x + (bounds.width - width) / 2);
         return {
+            frame: this.useNativeWindowFrame,
             isFullScreen: false,
             isMaximized: false,
             width,
@@ -346,31 +373,41 @@ export class ElectronMainApplication {
      * Save the window geometry state on every change.
      */
     protected attachSaveWindowState(electronWindow: BrowserWindow): void {
-        const saveWindowState = () => {
-            try {
-                const bounds = electronWindow.getBounds();
-                this.electronStore.set('windowstate', {
-                    isFullScreen: electronWindow.isFullScreen(),
-                    isMaximized: electronWindow.isMaximized(),
-                    width: bounds.width,
-                    height: bounds.height,
-                    x: bounds.x,
-                    y: bounds.y
-                });
-            } catch (e) {
-                console.error('Error while saving window state:', e);
-            }
-        };
         let delayedSaveTimeout: NodeJS.Timer | undefined;
         const saveWindowStateDelayed = () => {
             if (delayedSaveTimeout) {
                 clearTimeout(delayedSaveTimeout);
             }
-            delayedSaveTimeout = setTimeout(saveWindowState, 1000);
+            delayedSaveTimeout = setTimeout(() => this.saveWindowState(electronWindow), 1000);
         };
-        electronWindow.on('close', saveWindowState);
+        electronWindow.on('close', () => {
+            this.saveWindowState(electronWindow);
+            this.didUseNativeWindowFrameOnStart.delete(electronWindow.id);
+        });
         electronWindow.on('resize', saveWindowStateDelayed);
         electronWindow.on('move', saveWindowStateDelayed);
+        this.didUseNativeWindowFrameOnStart.set(electronWindow.id, this.useNativeWindowFrame);
+    }
+
+    protected saveWindowState(electronWindow: BrowserWindow): void {
+        // In some circumstances the `electronWindow` can be `null`
+        if (!electronWindow) {
+            return;
+        }
+        try {
+            const bounds = electronWindow.getBounds();
+            this.electronStore.set('windowstate', {
+                isFullScreen: electronWindow.isFullScreen(),
+                isMaximized: electronWindow.isMaximized(),
+                width: bounds.width,
+                height: bounds.height,
+                x: bounds.x,
+                y: bounds.y,
+                frame: this.useNativeWindowFrame
+            });
+        } catch (e) {
+            console.error('Error while saving window state:', e);
+        }
     }
 
     /**
@@ -475,6 +512,19 @@ export class ElectronMainApplication {
         app.on('will-quit', this.onWillQuit.bind(this));
         app.on('second-instance', this.onSecondInstance.bind(this));
         app.on('window-all-closed', this.onWindowAllClosed.bind(this));
+
+        ipcMain.on(TitleBarStyleChanged, ({ sender }, titleBarStyle: string) => {
+            this.useNativeWindowFrame = titleBarStyle === 'native';
+            this.saveWindowState(BrowserWindow.fromId(sender.id));
+        });
+
+        ipcMain.on(Restart, ({ sender }) => {
+            this.restart(sender.id);
+        });
+
+        ipcMain.on(RequestTitleBarStyle, ({ sender }) => {
+            sender.send(TitleBarStyleAtStartup, this.didUseNativeWindowFrameOnStart.get(sender.id) ? 'native' : 'custom');
+        });
     }
 
     protected onWillQuit(event: ElectronEvent): void {
@@ -493,7 +543,23 @@ export class ElectronMainApplication {
     }
 
     protected onWindowAllClosed(event: ElectronEvent): void {
-        this.requestStop();
+        if (!this.restarting) {
+            this.requestStop();
+        }
+    }
+
+    protected restart(id: number): void {
+        this.restarting = true;
+        const window = BrowserWindow.fromId(id);
+        window.on('closed', async () => {
+            await this.launch({
+                secondInstance: false,
+                argv: this.processArgv.getProcessArgvWithoutBin(process.argv),
+                cwd: process.cwd()
+            });
+            this.restarting = false;
+        });
+        window.close();
     }
 
     protected async startContributions(): Promise<void> {