@theia/core 1.18.0 → 1.19.0

package/src/browser/window-contribution.ts

@@ -23,10 +23,10 @@ import { CommonMenus } from '../browser/common-frontend-contribution';
 
 export namespace WindowCommands {
 
-    export const NEW_WINDOW: Command = {
+    export const NEW_WINDOW = Command.toLocalizedCommand({
         id: 'workbench.action.newWindow',
         label: 'New Window'
-    };
+    }, 'vscode/windowActions/newWindow');
 }
 
 @injectable()

package/src/common/command.ts

@@ -18,8 +18,7 @@ import { injectable, inject, named } from 'inversify';
 import { Event, Emitter, WaitUntilEvent } from './event';
 import { Disposable, DisposableCollection } from './disposable';
 import { ContributionProvider } from './contribution-provider';
-// eslint-disable-next-line @theia/runtime-import-check
-import { nls } from '../browser/nls';
+import { nls } from './nls';
 
 /**
  * A command is a unique identifier of a function

package/src/common/i18n/localization.ts

@@ -31,3 +31,47 @@ export interface Localization {
     localizedLanguageName?: string;
     translations: { [key: string]: string };
 }
+
+export type FormatType = string | number | boolean | undefined;
+
+export namespace Localization {
+
+    function format(message: string, args: FormatType[]): string {
+        let result = message;
+        if (args.length > 0) {
+            result = message.replace(/\{(\d+)\}/g, (match, rest) => {
+                const index = rest[0];
+                const arg = args[index];
+                let replacement = match;
+                if (typeof arg === 'string') {
+                    replacement = arg;
+                } else if (typeof arg === 'number' || typeof arg === 'boolean' || !arg) {
+                    replacement = String(arg);
+                }
+                return replacement;
+            });
+        }
+        return result;
+    }
+
+    export function localize(localization: Localization | undefined, key: string, defaultValue: string, ...args: FormatType[]): string {
+        let value = defaultValue;
+        if (localization) {
+            const translation = localization.translations[key];
+            if (translation) {
+                // vscode's localizations often contain additional '&&' symbols, which we simply ignore
+                value = translation.replace(/&&/g, '');
+            }
+        }
+        return format(value, args);
+    }
+
+    export function transformKey(key: string): string {
+        let nlsKey = key;
+        const keySlashIndex = key.lastIndexOf('/');
+        if (keySlashIndex >= 0) {
+            nlsKey = key.substring(keySlashIndex + 1);
+        }
+        return nlsKey;
+    }
+}

package/src/common/index.ts

@@ -38,6 +38,7 @@ export * from './strings';
 export * from './application-error';
 export * from './lsp-types';
 export * from './contribution-filter';
+export * from './nls';
 
 import { environment } from '@theia/application-package/lib/environment';
 export { environment };

package/src/common/nls.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+import { FormatType, Localization } from './i18n/localization';
+
+export namespace nls {
+
+    export let localization: Localization | undefined;
+
+    export const localeId = 'localeId';
+
+    export const locale = typeof window === 'object' && window && window.localStorage.getItem(localeId) || undefined;
+
+    export function localize(key: string, defaultValue: string, ...args: FormatType[]): string {
+        return Localization.localize(localization, key, defaultValue, ...args);
+    }
+}

package/src/common/window.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (C) 2021 Ericsson 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
+ ********************************************************************************/
+
+/**
+ * The window hash value that is used to spawn a new default window.
+ */
+export const DEFAULT_WINDOW_HASH: string = '!empty';
+
+/**
+ * The options for opening new windows.
+ */
+export interface NewWindowOptions {
+    /**
+     * Controls whether the window should be opened externally.
+     */
+    readonly external?: boolean;
+}

package/src/electron-browser/menu/electron-context-menu-renderer.ts

@@ -17,11 +17,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import * as electron from '../../../shared/electron';
-import { inject, injectable } from 'inversify';
-import { ContextMenuRenderer, RenderContextMenuOptions, ContextMenuAccess, FrontendApplicationContribution, CommonCommands, coordinateFromAnchor } from '../../browser';
+import { inject, injectable, postConstruct } from 'inversify';
+import {
+    ContextMenuRenderer, RenderContextMenuOptions, ContextMenuAccess, FrontendApplicationContribution, CommonCommands, coordinateFromAnchor, PreferenceService
+} from '../../browser';
 import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { ContextMenuContext } from '../../browser/menu/context-menu-context';
 import { MenuPath, MenuContribution, MenuModelRegistry } from '../../common';
+import { BrowserContextMenuRenderer } from '../../browser/menu/browser-context-menu-renderer';
+import { RequestTitleBarStyle, TitleBarStyleAtStartup } from '../../electron-common/messaging/electron-messages';
 
 export class ElectronContextMenuAccess extends ContextMenuAccess {
     constructor(readonly menu: electron.Menu) {
@@ -73,27 +77,45 @@ export class ElectronTextInputContextMenuContribution implements FrontendApplica
 }
 
 @injectable()
-export class ElectronContextMenuRenderer extends ContextMenuRenderer {
+export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
 
     @inject(ContextMenuContext)
     protected readonly context: ContextMenuContext;
 
-    constructor(@inject(ElectronMainMenuFactory) private menuFactory: ElectronMainMenuFactory) {
-        super();
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    protected useNativeStyle: boolean = true;
+
+    constructor(@inject(ElectronMainMenuFactory) private electronMenuFactory: ElectronMainMenuFactory) {
+        super(electronMenuFactory);
+    }
+
+    @postConstruct()
+    protected async init(): Promise<void> {
+        electron.ipcRenderer.on(TitleBarStyleAtStartup, (_event, style: string) => {
+            this.useNativeStyle = style === 'native';
+        });
+        electron.ipcRenderer.send(RequestTitleBarStyle);
     }
 
-    protected doRender({ menuPath, anchor, args, onHide }: RenderContextMenuOptions): ElectronContextMenuAccess {
-        const menu = this.menuFactory.createContextMenu(menuPath, args);
-        const { x, y } = coordinateFromAnchor(anchor);
-        const zoom = electron.webFrame.getZoomFactor();
-        // x and y values must be Ints or else there is a conversion error
-        menu.popup({ x: Math.round(x * zoom), y: Math.round(y * zoom) });
-        // native context menu stops the event loop, so there is no keyboard events
-        this.context.resetAltPressed();
-        if (onHide) {
-            menu.once('menu-will-close', () => onHide());
+    protected doRender(options: RenderContextMenuOptions): ContextMenuAccess {
+        if (this.useNativeStyle) {
+            const { menuPath, anchor, args, onHide } = options;
+            const menu = this.electronMenuFactory.createElectronContextMenu(menuPath, args);
+            const { x, y } = coordinateFromAnchor(anchor);
+            const zoom = electron.webFrame.getZoomFactor();
+            // x and y values must be Ints or else there is a conversion error
+            menu.popup({ x: Math.round(x * zoom), y: Math.round(y * zoom) });
+            // native context menu stops the event loop, so there is no keyboard events
+            this.context.resetAltPressed();
+            if (onHide) {
+                menu.once('menu-will-close', () => onHide());
+            }
+            return new ElectronContextMenuAccess(menu);
+        } else {
+            return super.doRender(options);
         }
-        return new ElectronContextMenuAccess(menu);
     }
 
 }

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.toLocalizedCommand({
         id: 'theia.toggleDevTools',
         label: 'Toggle Developer Tools'
-    };
-    export const RELOAD: Command = {
+    }, 'vscode/developerActions/toggleDevTools');
+    export const RELOAD = Command.toLocalizedCommand({
         id: 'view.reload',
         label: 'Reload Window'
-    };
-    export const ZOOM_IN: Command = {
+    }, 'vscode/windowActions/reloadWindow');
+    export const ZOOM_IN = Command.toLocalizedCommand({
         id: 'view.zoomIn',
         label: 'Zoom In'
-    };
-    export const ZOOM_OUT: Command = {
+    }, 'vscode/windowActions/zoomIn');
+    export const ZOOM_OUT = Command.toLocalizedCommand({
         id: 'view.zoomOut',
         label: 'Zoom Out'
-    };
-    export const RESET_ZOOM: Command = {
+    }, 'vscode/windowActions/zoomOut');
+    export const RESET_ZOOM = Command.toLocalizedCommand({
         id: 'view.resetZoom',
         label: 'Reset Zoom'
-    };
-    export const CLOSE_WINDOW: Command = {
+    }, 'vscode/windowActions/zoomReset');
+    export const CLOSE_WINDOW = Command.toLocalizedCommand({
         id: 'close.window',
         label: 'Close Window'
-    };
-    export const TOGGLE_FULL_SCREEN: Command = {
+    }, 'vscode/windowActions/close');
+    export const TOGGLE_FULL_SCREEN = Command.toLocalizedCommand({
         id: 'workbench.action.toggleFullScreen',
-        category: 'View',
+        category: CommonCommands.VIEW_CATEGORY,
         label: 'Toggle Full Screen'
-    };
+    }, 'vscode/windowActions/toggleFullScreen', CommonCommands.VIEW_CATEGORY_KEY);
 }
 
 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.localize('vscode/relauncher.contribution/relaunchSettingMessage', 'A setting has changed that requires a restart to take effect');
+        const detail = document.createElement('p');
+        detail.textContent = nls.localize('vscode/relauncher.contribution/relaunchSettingDetail',
+            'Press the restart button to restart {0} and enable the setting.', FrontendApplicationConfigProvider.get().applicationName);
+        msgNode.append(message, detail);
+        const restart = nls.localize('vscode/relauncher.contribution/restart', '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;
+}