@theia/core 1.76.0 → 1.77.0-next.1

package/src/browser/menu/browser-menu-plugin.ts

@@ -18,7 +18,7 @@ import { injectable, inject } from 'inversify';
 import { Menu, MenuBar, Menu as MenuWidget, Widget } from '@lumino/widgets';
 import { CommandRegistry as LuminoCommandRegistry } from '@lumino/commands';
 import {
-    environment, DisposableCollection,
+    environment, Disposable, DisposableCollection,
     AcceleratorSource,
     ArrayUtils,
     PreferenceService
@@ -92,7 +92,7 @@ export class BrowserMainMenuFactory implements MenuWidgetFactory {
     }
 
     protected showMenuBar(menuBar: DynamicMenuBarWidget, preference = this.getMenuBarVisibility()): void {
-        if (preference && ['classic', 'visible'].includes(preference)) {
+        if (preference && ['classic', 'visible', 'toggle'].includes(preference)) {
             menuBar.clearMenus();
             this.fillMenuBar(menuBar);
         } else {
@@ -432,6 +432,11 @@ export class BrowserMenuBarContribution implements FrontendApplicationContributi
     @inject(PreferenceService)
     protected readonly preferenceService: PreferenceService;
 
+    protected toggleModeListeners = new DisposableCollection();
+
+    protected menuWidget?: MenuBarWidget;
+    protected logoWidget?: Widget;
+
     constructor(
         @inject(BrowserMainMenuFactory) protected readonly factory: BrowserMainMenuFactory
     ) { }
@@ -449,20 +454,178 @@ export class BrowserMenuBarContribution implements FrontendApplicationContributi
         shell.addWidget(logo, { area: 'top' });
         const menu = this.factory.createMenuBar();
         shell.addWidget(menu, { area: 'top' });
-        // Hiding the menu is only necessary in electron
-        // In the browser we hide the whole top panel
+        this.menuWidget = menu;
+        this.logoWidget = logo;
         if (environment.electron.is()) {
             this.preferenceService.ready.then(() => {
-                menu.setHidden(['compact', 'hidden'].includes(this.preferenceService.get('window.menuBarVisibility', '')));
+                this.updateElectronMenuToggleMode(menu, logo);
+            });
+            this.preferenceService.onPreferenceChanged(change => {
+                if (change.preferenceName === 'window.menuBarVisibility') {
+                    this.updateElectronMenuToggleMode(menu, logo);
+                }
+            });
+        } else {
+            // In the browser, the whole top panel is hidden for compact/hidden/toggle
+            // (handled by ApplicationShell). For toggle mode, this installs an Alt-key
+            // listener that temporarily shows the top panel.
+            this.preferenceService.ready.then(() => {
+                this.updateBrowserMenuToggleMode(menu);
             });
             this.preferenceService.onPreferenceChanged(change => {
                 if (change.preferenceName === 'window.menuBarVisibility') {
-                    menu.setHidden(['compact', 'hidden'].includes(this.preferenceService.get('window.menuBarVisibility', 'classic')));
+                    this.updateBrowserMenuToggleMode(menu);
                 }
             });
         }
     }
 
+    /**
+     * Manages Lumino menu bar visibility and Alt-key toggling in Electron.
+     *
+     * With native title bar, the native Electron menu bar handles toggle via
+     * `autoHideMenuBar`, so the Lumino menu bar is simply hidden.
+     *
+     * With custom title bar, the Lumino menu bar is the only menu bar visible
+     * to the user. For 'toggle' mode, an Alt-key listener is installed to
+     * show/hide the menu bar widget.
+     */
+    protected updateElectronMenuToggleMode(menu: MenuBarWidget, logo: Widget): void {
+        this.toggleModeListeners.dispose();
+        const pref = this.preferenceService.get<string>('window.menuBarVisibility', 'classic');
+        this.applyElectronMenuBarVisibility(menu, logo, pref);
+        if (pref === 'toggle') {
+            this.toggleModeListeners = this.installAltKeyToggle(menu, () => this.getElectronToggleTargets(menu, logo));
+        }
+    }
+
+    /**
+     * Establishes the resting visibility of the menu bar widgets in Electron, i.e. the state
+     * a clean Alt press toggles away from in 'toggle' mode.
+     */
+    protected applyElectronMenuBarVisibility(menu: MenuBarWidget, logo: Widget, pref: string): void {
+        const shouldHide = ['compact', 'hidden', 'toggle'].includes(pref);
+        menu.setHidden(shouldHide);
+        logo.setHidden(shouldHide);
+    }
+
+    /**
+     * The widgets a clean Alt press shows and hides in 'toggle' mode in Electron.
+     */
+    protected getElectronToggleTargets(menu: MenuBarWidget, logo: Widget): Widget[] {
+        return [menu, logo];
+    }
+
+    /**
+     * Manages Alt-key toggle behavior for 'toggle' mode in the browser.
+     * The top panel's initial visibility is handled by {@link ApplicationShell.setTopPanelVisibility};
+     * this method only installs or removes the Alt-key listener.
+     */
+    protected updateBrowserMenuToggleMode(menu: MenuBarWidget): void {
+        this.toggleModeListeners.dispose();
+        const pref = this.preferenceService.get<string>('window.menuBarVisibility', 'classic');
+        if (pref === 'toggle') {
+            this.toggleModeListeners = this.installAltKeyToggle(menu, () => [this.shell.topPanel]);
+        }
+    }
+
+    /**
+     * Installs Alt-key listeners to toggle menu bar visibility.
+     * A clean Alt press (press and release without other keys) shows the
+     * given toggle targets and focuses the first menu. Pressing Alt again
+     * or clicking outside hides them.
+     *
+     * @param menu the menu bar widget to focus when shown
+     * @param toggleTargets supplies the widgets to show/hide on Alt toggle. It is consulted on
+     * each gesture, because the targets can depend on state that changes while the listener is
+     * installed, e.g. whether the window is in full screen.
+     */
+    protected installAltKeyToggle(menu: MenuBarWidget, toggleTargets: () => Widget[]): DisposableCollection {
+        const disposables = new DisposableCollection();
+        let altKeyPressed = false;
+        let lastKeyWasAlt = false;
+
+        const isHidden = (): boolean => toggleTargets().some(w => w.isHidden);
+
+        const hide = (): void => {
+            for (const w of toggleTargets()) {
+                w.setHidden(true);
+            }
+        };
+
+        const show = (): void => {
+            for (const w of toggleTargets()) {
+                w.setHidden(false);
+            }
+        };
+
+        const onKeyDown = (e: KeyboardEvent): void => {
+            if (e.key === 'Alt') {
+                if (!e.repeat) {
+                    altKeyPressed = true;
+                    lastKeyWasAlt = true;
+                }
+            } else {
+                // Any other key invalidates the Alt-only gesture
+                lastKeyWasAlt = false;
+            }
+        };
+
+        // Mouse interaction while Alt is held is a modifier gesture of its own, e.g. Alt+click to add a
+        // cursor or Alt+scroll to scroll faster, so it invalidates the Alt-only gesture as any other key does.
+        const onPointerInteraction = (): void => {
+            lastKeyWasAlt = false;
+        };
+
+        const onKeyUp = (e: KeyboardEvent): void => {
+            if (e.key !== 'Alt') {
+                return;
+            }
+            const wasCleanAltPress = altKeyPressed && lastKeyWasAlt;
+            altKeyPressed = false;
+            lastKeyWasAlt = false;
+            if (!wasCleanAltPress) {
+                return;
+            }
+            // Keep the browser from acting on the solitary Alt press itself: Firefox, for
+            // instance, focuses its own menu bar, which would then toggle along with ours.
+            e.preventDefault();
+            if (isHidden()) {
+                show();
+                menu.activeIndex = 0;
+                menu.node.focus();
+            } else {
+                hide();
+            }
+        };
+
+        // When a menu closes and focus leaves the menu bar, hide it again
+        const onFocusOut = (): void => {
+            // Use setTimeout to allow focus to settle (e.g. focus moving between menu items)
+            setTimeout(() => {
+                if (!isHidden() && !menu.node.contains(document.activeElement)) {
+                    hide();
+                }
+            }, 100);
+        };
+
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
+        document.addEventListener('mousedown', onPointerInteraction, true);
+        document.addEventListener('wheel', onPointerInteraction, { capture: true, passive: true });
+        menu.node.addEventListener('focusout', onFocusOut);
+
+        disposables.push(Disposable.create(() => {
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            document.removeEventListener('mousedown', onPointerInteraction, true);
+            document.removeEventListener('wheel', onPointerInteraction, true);
+            menu.node.removeEventListener('focusout', onFocusOut);
+        }));
+
+        return disposables;
+    }
+
     protected createLogo(): Widget {
         const logo = new Widget();
         logo.id = 'theia:icon';

package/src/browser/shell/application-shell.ts

@@ -422,7 +422,7 @@ export class ApplicationShell extends Widget {
     }
 
     protected setTopPanelVisibility(preference: string): void {
-        const hiddenPreferences = ['compact', 'hidden'];
+        const hiddenPreferences = ['compact', 'hidden', 'toggle'];
         this.topPanel.setHidden(hiddenPreferences.includes(preference));
     }
 

package/src/common/core-preferences.ts

@@ -92,10 +92,11 @@ export const corePreferenceSchema: PreferenceSchema = {
         },
         'window.menuBarVisibility': {
             type: 'string',
-            enum: ['classic', 'visible', 'hidden', 'compact'],
+            enum: ['classic', 'visible', 'toggle', 'hidden', 'compact'],
             markdownEnumDescriptions: [
                 nls.localizeByDefault('Menu is displayed at the top of the window and only hidden in full screen mode.'),
                 nls.localizeByDefault('Menu is always visible at the top of the window even in full screen mode.'),
+                nls.localizeByDefault('Menu is hidden but can be displayed at the top of the window via the Alt key.'),
                 nls.localizeByDefault('Menu is always hidden.'),
                 environment.electron.is()
                     // we do not support the window.menuStyle setting yet, so we do not use the default string in this case yet
@@ -314,7 +315,7 @@ export interface CoreConfiguration {
     'files.encoding': string;
     'keyboard.dispatch': 'code' | 'keyCode';
     'window.tabbar.enhancedPreview': 'classic' | 'enhanced' | 'visual';
-    'window.menuBarVisibility': 'classic' | 'visible' | 'hidden' | 'compact';
+    'window.menuBarVisibility': 'classic' | 'visible' | 'toggle' | 'hidden' | 'compact';
     'window.title': string;
     'window.titleSeparator': string;
     'window.tabCloseIconPlacement': 'end' | 'start';

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

@@ -91,6 +91,12 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
     @inject(PreferenceService)
     protected preferencesService: PreferenceService;
 
+    /**
+     * The title bar style ('native' or 'custom'). Set by {@link ElectronMenuContribution}
+     * after querying the main process for the active style.
+     */
+    titleBarStyle?: string;
+
     setMenuBar = debounce(() => this.doSetMenuBar(), 100);
 
     @postConstruct()
@@ -140,13 +146,45 @@ export class ElectronMainMenuFactory extends BrowserMainMenuFactory {
 
     doSetMenuBar(): void {
         const preference = this.preferencesService.get<string>('window.menuBarVisibility') || 'classic';
-        const shouldShowTop = !window.electronTheiaCore.isFullScreen() || preference === 'visible';
-        if (shouldShowTop) {
-            this.menu = this.createElectronMenuBar();
-            window.electronTheiaCore.setMenu(this.menu);
-            window.electronTheiaCore.setMenuBarVisible(true);
-        } else {
-            window.electronTheiaCore.setMenuBarVisible(false);
+        const isFullScreen = window.electronTheiaCore.isFullScreen();
+        const isCustomTitleBar = this.titleBarStyle === 'custom';
+
+        switch (preference) {
+            case 'visible':
+                this.menu = this.createElectronMenuBar();
+                window.electronTheiaCore.setMenu(this.menu);
+                window.electronTheiaCore.setMenuBarVisible(true);
+                window.electronTheiaCore.setAutoHideMenuBar(false);
+                break;
+            case 'toggle':
+                if (isCustomTitleBar) {
+                    // With custom title bar, the Lumino menu bar handles toggle via Alt-key listener.
+                    // Do not set autoHideMenuBar on the native window to prevent it from appearing.
+                    window.electronTheiaCore.setMenuBarVisible(false);
+                    window.electronTheiaCore.setAutoHideMenuBar(false);
+                } else {
+                    // With native title bar, Electron's autoHideMenuBar handles Alt toggling.
+                    this.menu = this.createElectronMenuBar();
+                    window.electronTheiaCore.setMenu(this.menu);
+                    window.electronTheiaCore.setMenuBarVisible(false);
+                    window.electronTheiaCore.setAutoHideMenuBar(true);
+                }
+                break;
+            case 'hidden':
+                window.electronTheiaCore.setMenuBarVisible(false);
+                window.electronTheiaCore.setAutoHideMenuBar(false);
+                break;
+            case 'compact':
+                window.electronTheiaCore.setMenuBarVisible(false);
+                window.electronTheiaCore.setAutoHideMenuBar(false);
+                break;
+            case 'classic':
+            default:
+                this.menu = this.createElectronMenuBar();
+                window.electronTheiaCore.setMenu(this.menu);
+                window.electronTheiaCore.setMenuBarVisible(!isFullScreen);
+                window.electronTheiaCore.setAutoHideMenuBar(isFullScreen);
+                break;
         }
     }
 

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

@@ -27,7 +27,7 @@ import { ElectronMainMenuFactory } from './electron-main-menu-factory';
 import { FrontendApplicationStateService, FrontendApplicationState } from '../../browser/frontend-application-state';
 import { FrontendApplicationConfigProvider } from '../../browser/frontend-application-config-provider';
 import { PREF_WINDOW_ZOOM_LEVEL, ZoomLevel } from '../../electron-common/electron-window-preferences';
-import { BrowserMenuBarContribution } from '../../browser/menu/browser-menu-plugin';
+import { BrowserMenuBarContribution, MenuBarWidget } from '../../browser/menu/browser-menu-plugin';
 import { WindowService } from '../../browser/window/window-service';
 import { WindowTitleService } from '../../browser/window/window-title-service';
 
@@ -152,8 +152,9 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
 
     handleTitleBarStyling(app: FrontendApplication): void {
         this.hideTopPanel(app);
-        window.electronTheiaCore.getTitleBarStyleAtStartup().then(style => {
+        const titleBarStyleAtStartup = window.electronTheiaCore.getTitleBarStyleAtStartup().then(style => {
             this.titleBarStyle = style;
+            this.factory.titleBarStyle = style;
             this.setMenu(app);
             this.preferenceService.ready.then(() => {
                 const current = this.preferenceService.inspect('window.titleBarStyle');
@@ -171,8 +172,17 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
             });
         });
 
-        this.preferenceService.ready.then(() => {
-            window.electronTheiaCore.setMenuBarVisible(['classic', 'visible'].includes(this.preferenceService.get('window.menuBarVisibility', 'classic')));
+        // `titleBarStyle` decides whether the native menu bar is used at all, so wait for it:
+        // preferences can become ready first, in which case it would still be `undefined` here.
+        Promise.all([titleBarStyleAtStartup, this.preferenceService.ready]).then(() => {
+            const pref = this.preferenceService.get<string>('window.menuBarVisibility', 'classic');
+            if (pref === 'toggle' && this.titleBarStyle !== 'custom') {
+                window.electronTheiaCore.setMenuBarVisible(false);
+                window.electronTheiaCore.setAutoHideMenuBar(true);
+            } else {
+                window.electronTheiaCore.setMenuBarVisible(['classic', 'visible'].includes(pref));
+                window.electronTheiaCore.setAutoHideMenuBar(false);
+            }
         });
 
         this.preferenceService.onPreferenceChanged(change => {
@@ -424,7 +434,19 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
     protected handleFullScreen(menuBarVisibility: string): void {
         const shouldShowTop = !window.electronTheiaCore.isFullScreen() || menuBarVisibility === 'visible';
         if (this.titleBarStyle === 'native') {
-            window.electronTheiaCore.setMenuBarVisible(shouldShowTop);
+            if (menuBarVisibility === 'toggle') {
+                window.electronTheiaCore.setMenuBarVisible(false);
+                window.electronTheiaCore.setAutoHideMenuBar(true);
+            } else {
+                window.electronTheiaCore.setMenuBarVisible(shouldShowTop);
+                // Match `ElectronMainMenuFactory.doSetMenuBar`: in 'classic' the menu is hidden in
+                // full screen but Alt still reveals it. Without this the two disagree and the
+                // effective behaviour depends on which of them ran last.
+                window.electronTheiaCore.setAutoHideMenuBar(!shouldShowTop && menuBarVisibility === 'classic');
+            }
+        } else if (menuBarVisibility === 'toggle' && this.menuWidget && this.logoWidget) {
+            // Which widget Alt reveals depends on the full screen state, so re-establish it.
+            this.updateElectronMenuToggleMode(this.menuWidget, this.logoWidget);
         } else if (shouldShowTop) {
             this.shell.topPanel.show();
         } else {
@@ -432,6 +454,29 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
         }
     }
 
+    /**
+     * Outside of full screen the top panel also carries the window controls, so it has to stay
+     * visible and Alt toggles the menu widgets inside it. In full screen the panel is hidden
+     * altogether, so Alt toggles the panel itself and the widgets inside it stay visible.
+     */
+    protected override applyElectronMenuBarVisibility(menu: MenuBarWidget, logo: Widget, pref: string): void {
+        if (pref === 'toggle' && this.titleBarStyle === 'custom') {
+            const isFullScreen = window.electronTheiaCore.isFullScreen();
+            menu.setHidden(!isFullScreen);
+            logo.setHidden(!isFullScreen);
+            this.shell.topPanel.setHidden(isFullScreen);
+            return;
+        }
+        super.applyElectronMenuBarVisibility(menu, logo, pref);
+    }
+
+    protected override getElectronToggleTargets(menu: MenuBarWidget, logo: Widget): Widget[] {
+        if (this.titleBarStyle === 'custom' && window.electronTheiaCore.isFullScreen()) {
+            return [this.shell.topPanel];
+        }
+        return super.getElectronToggleTargets(menu, logo);
+    }
+
     protected handleThemeChange(e: ThemeChangeEvent): void {
         const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
         window.electronTheiaCore.setBackgroundColor(backgroundColor);

package/src/electron-browser/preload.ts

@@ -28,7 +28,8 @@ import {
     CHANNEL_KEYBOARD_LAYOUT_CHANGED, CHANNEL_IPC_CONNECTION, InternalMenuDto, CHANNEL_REQUEST_SECONDARY_CLOSE, CHANNEL_SET_BACKGROUND_COLOR,
     CHANNEL_WC_METADATA, CHANNEL_ABOUT_TO_CLOSE, CHANNEL_OPEN_WITH_SYSTEM_APP,
     CHANNEL_OPEN_URL, CHANNEL_SET_THEME, CHANNEL_OPEN_DEVTOOLS_FOR_WINDOW,
-    CHANNEL_UPDATE_RECENT_WORKSPACES
+    CHANNEL_UPDATE_RECENT_WORKSPACES,
+    CHANNEL_SET_AUTO_HIDE_MENU_BAR
 } from '../electron-common/electron-api';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -80,6 +81,7 @@ function convertMenu(menu: MenuDto[] | undefined, handlerMap: Map<number, () =>
 const api: TheiaCoreAPI = {
     WindowMetadata: { webcontentId: 'none' },
     setMenuBarVisible: (visible: boolean, windowName?: string) => ipcRenderer.send(CHANNEL_SET_MENU_BAR_VISIBLE, visible, windowName),
+    setAutoHideMenuBar: (enabled: boolean, windowName?: string) => ipcRenderer.send(CHANNEL_SET_AUTO_HIDE_MENU_BAR, enabled, windowName),
     setMenu: (menu: MenuDto[] | undefined) => {
         commandHandlers.delete(mainMenuId);
         const handlers = new Map<number, () => void>();

package/src/electron-common/electron-api.ts

@@ -59,6 +59,7 @@ export interface TheiaCoreAPI {
     attachSecurityToken: (endpoint: string) => Promise<void>;
 
     setMenuBarVisible(visible: boolean, windowName?: string): void;
+    setAutoHideMenuBar(enabled: boolean, windowName?: string): void;
     setMenu(menu: MenuDto[] | undefined): void;
 
     popup(menu: MenuDto[], x: number, y: number, onClosed: () => void, windowName?: string): Promise<number>;
@@ -127,6 +128,7 @@ declare global {
 export const CHANNEL_WC_METADATA = 'WebContentMetadata';
 export const CHANNEL_SET_MENU = 'SetMenu';
 export const CHANNEL_SET_MENU_BAR_VISIBLE = 'SetMenuBarVisible';
+export const CHANNEL_SET_AUTO_HIDE_MENU_BAR = 'SetAutoHideMenuBar';
 export const CHANNEL_INVOKE_MENU = 'InvokeMenu';
 export const CHANNEL_OPEN_POPUP = 'OpenPopup';
 export const CHANNEL_ON_CLOSE_POPUP = 'OnClosePopup';

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

@@ -59,7 +59,8 @@ import {
     CHANNEL_OPEN_URL,
     CHANNEL_SET_THEME,
     CHANNEL_OPEN_DEVTOOLS_FOR_WINDOW,
-    CHANNEL_UPDATE_RECENT_WORKSPACES
+    CHANNEL_UPDATE_RECENT_WORKSPACES,
+    CHANNEL_SET_AUTO_HIDE_MENU_BAR
 } from '../electron-common/electron-api';
 import { ElectronMainApplication, ElectronMainApplicationContribution } from './electron-main-application';
 import { Disposable, DisposableCollection, isOSX, isWindows, MaybePromise, URI } from '../common';
@@ -128,6 +129,20 @@ export class TheiaMainApi implements ElectronMainApplicationContribution {
             }
         });
 
+        ipcMain.on(CHANNEL_SET_AUTO_HIDE_MENU_BAR, (event, enabled: boolean, windowName: string | undefined) => {
+            let electronWindow;
+            if (windowName) {
+                electronWindow = BrowserWindow.getAllWindows().find(win => win.webContents.mainFrame.name === windowName);
+            } else {
+                electronWindow = BrowserWindow.fromWebContents(event.sender);
+            }
+            if (electronWindow) {
+                electronWindow.autoHideMenuBar = enabled;
+            } else {
+                console.warn(`There is no known secondary window '${windowName}'. Thus, autoHideMenuBar could not be set.`);
+            }
+        });
+
         // popup menu
         ipcMain.handle(CHANNEL_OPEN_POPUP, (event, menuId, menu, x, y, windowName?: string) => {
             const zoom = event.sender.getZoomFactor();