@theia/core 1.77.0-next.0 → 1.77.0-next.12

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/browser/tree/tree-widget.spec.tsx

@@ -38,6 +38,14 @@ class CountingView extends TreeWidget.View {
             this.scrollCount++;
         }
     };
+    /** Reports the list height the way Virtuoso does once it has measured the list. */
+    measure(height: number, renderedHeight = height): void {
+        this.setRenderedHeight(renderedHeight);
+        this.onTotalListHeightChanged(height);
+    }
+    setRenderedHeight(scrollHeight: number): void {
+        this.scroller = { scrollHeight } as HTMLElement;
+    }
 }
 
 class TestTreeWidget extends TreeWidget {
@@ -190,6 +198,8 @@ describe('TreeWidget', () => {
         let container: HTMLElement;
         let root: Root;
         let view: CountingView | undefined;
+        let frames: FrameRequestCallback[];
+        let requestAnimationFrame: typeof window.requestAnimationFrame;
         const rows: TreeWidget.NodeRow[] = [0, 1, 2].map(index => ({ index, depth: 0, node: leaf(`node-${index}`) }));
 
         const render = (props: Partial<TreeWidget.ViewProps>): void => flushSync(() => root.render(
@@ -202,20 +212,66 @@ describe('TreeWidget', () => {
                 {...props}
             />
         ));
+        const runFrames = (): void => frames.splice(0).forEach(frame => frame(0));
+        /** Mount and measure the list, and serve the mount-time request. */
+        const mount = (props: Partial<TreeWidget.ViewProps>): void => {
+            render(props);
+            view!.measure(300);
+            runFrames();
+        };
 
         beforeEach(() => {
             container = document.createElement('div');
             document.body.appendChild(container);
             root = createRoot(container);
+            frames = [];
+            requestAnimationFrame = window.requestAnimationFrame;
+            window.requestAnimationFrame = frame => frames.push(frame);
         });
 
         afterEach(() => {
+            window.requestAnimationFrame = requestAnimationFrame;
             flushSync(() => root.unmount());
             document.body.removeChild(container);
         });
 
-        it('does not scroll again when re-rendered without a new scroll request', () => {
+        it('holds a scroll request made before the list is measured until the list is rendered at its height', () => {
+            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            expect(view!.scrollCount).to.equal(0);
+
+            view!.measure(300, 100);
+            runFrames();
+            expect(view!.scrollCount).to.equal(0);
+
+            view!.setRenderedHeight(300);
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('waits for the latest list height when the first reported height shrinks', () => {
+            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            view!.measure(300, 100);
+            view!.measure(200, 200);
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('serves a held scroll request when the list is never rendered at its height', () => {
             render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            view!.measure(300, 100);
+            for (let frame = 0; frame < 30; frame++) {
+                runFrames();
+                expect(view!.scrollCount).to.equal(0);
+            }
+            runFrames();
+            expect(view!.scrollCount).to.equal(1);
+        });
+
+        it('does not scroll again when re-rendered without a new scroll request', () => {
+            mount({ scrollToRow: 2, scrollToRowRequestId: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2, scrollToRowRequestId: 1 });
@@ -225,7 +281,7 @@ describe('TreeWidget', () => {
         });
 
         it('scrolls again when a new scroll request arrives for the same row', () => {
-            render({ scrollToRow: 2, scrollToRowRequestId: 1 });
+            mount({ scrollToRow: 2, scrollToRowRequestId: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2, scrollToRowRequestId: 2 });
@@ -234,7 +290,7 @@ describe('TreeWidget', () => {
         });
 
         it('scrolls when the row to scroll to changes', () => {
-            render({ scrollToRow: 1 });
+            mount({ scrollToRow: 1 });
             const scrollsAfterMount = view!.scrollCount;
 
             render({ scrollToRow: 2 });

package/src/browser/tree/tree-widget.tsx

@@ -1655,13 +1655,73 @@ export namespace TreeWidget {
             }
         };
 
+        /**
+         * `true` once Virtuoso has measured the list. Before that, `scrollIntoView` sees every row as visible and does nothing.
+         */
+        protected measured = false;
+        /**
+         * `true` while a scroll request made before the list was measured waits to be served.
+         */
+        protected scrollHeld = false;
+        /**
+         * The latest list height reported by Virtuoso. It can still change after the first report, as more rows are measured.
+         */
+        protected listHeight = 0;
+        /**
+         * How many frames a held scroll request waits for the list to be rendered at its height, about half a second at 60 Hz.
+         */
+        protected readonly maxRenderWaitFrames = 30;
+        protected scroller: HTMLElement | undefined;
+
+        /**
+         * Scroll now, or hold the request until the list is measured, e.g. for the focus restored when the view mounts.
+         */
+        protected requestScroll(): void {
+            if (this.measured) {
+                this.scrollIntoViewIfNeeded();
+            } else {
+                this.scrollHeld = this.props.scrollToRow !== undefined;
+            }
+        }
+
+        protected readonly onTotalListHeightChanged = (height: number): void => {
+            this.listHeight = height;
+            if (!this.measured && height > 0) {
+                this.measured = true;
+                if (this.scrollHeld) {
+                    this.scrollHeld = false;
+                    this.scrollWhenRendered();
+                }
+            }
+            this.props.totalListHeightChanged?.(height);
+        };
+
+        protected readonly setScroller = (scroller: HTMLElement | Window | null): void => {
+            this.scroller = scroller instanceof HTMLElement ? scroller : undefined;
+            this.props.scrollerRef?.(scroller);
+        };
+
+        /**
+         * Virtuoso reports the list height before React renders the list at it, and a scroll before that is clamped
+         * to the old height. Wait for the rendered height, at most `maxRenderWaitFrames` frames.
+         */
+        protected scrollWhenRendered(framesLeft = this.maxRenderWaitFrames): void {
+            window.requestAnimationFrame(() => {
+                if (this.scroller && this.scroller.scrollHeight < this.listHeight && framesLeft > 0) {
+                    this.scrollWhenRendered(framesLeft - 1);
+                } else {
+                    this.scrollIntoViewIfNeeded();
+                }
+            });
+        }
+
         override componentDidMount(): void {
-            this.scrollIntoViewIfNeeded();
+            this.requestScroll();
         }
 
         override componentDidUpdate(prevProps: ViewProps): void {
             if (this.props.scrollToRow !== prevProps.scrollToRow || this.props.scrollToRowRequestId !== prevProps.scrollToRowRequestId) {
-                this.scrollIntoViewIfNeeded();
+                this.requestScroll();
             }
         }
 
@@ -1681,6 +1741,8 @@ export namespace TreeWidget {
                 // Higher value provides smoother scrolling experience especially during inference, but uses more memory
                 overscan={800}
                 {...other}
+                totalListHeightChanged={this.onTotalListHeightChanged}
+                scrollerRef={this.setScroller}
             />;
         }
     }

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
@@ -152,18 +153,18 @@ export const corePreferenceSchema: PreferenceSchema = {
         'http.proxy': {
             type: 'string',
             pattern: '^https?://([^:]*(:[^@]*)?@)?([^:]+|\\[[:0-9a-fA-F]+\\])(:\\d+)?/?$|^$',
-            markdownDescription: nls.localizeByDefault('The proxy setting to use. If not set, will be inherited from the `http_proxy` and `https_proxy` environment variables. When during [remote development](https://aka.ms/vscode-remote) the {0} setting is disabled this setting can be configured in the local and the remote settings separately.'),
+            markdownDescription: nls.localize('theia/core/http/proxy', 'The proxy setting to use. If not set, will be inherited from the `http_proxy` and `https_proxy` environment variables.'),
             scope: PreferenceScope.User
         },
         'http.proxyStrictSSL': {
             type: 'boolean',
             default: true,
-            description: nls.localizeByDefault('Controls whether the proxy server certificate should be verified against the list of supplied CAs. When during [remote development](https://aka.ms/vscode-remote) the {0} setting is disabled this setting can be configured in the local and the remote settings separately.'),
+            description: nls.localize('theia/core/http/proxyStrictSSL', 'Controls whether the proxy server certificate should be verified against the list of supplied CAs.'),
             scope: PreferenceScope.User
         },
         'http.proxyAuthorization': {
             type: 'string',
-            markdownDescription: nls.localizeByDefault('The value to send as the `Proxy-Authorization` header for every network request. When during [remote development](https://aka.ms/vscode-remote) the {0} setting is disabled this setting can be configured in the local and the remote settings separately.'),
+            markdownDescription: nls.localize('theia/core/http/proxyAuthorization', 'The value to send as the `Proxy-Authorization` header for every network request.'),
             scope: PreferenceScope.User
         },
         'http.proxySupport': {
@@ -176,13 +177,13 @@ export const corePreferenceSchema: PreferenceSchema = {
                 nls.localizeByDefault('Enable proxy support for extensions, override request options.'),
             ],
             default: 'override',
-            description: nls.localizeByDefault('Use the proxy support for extensions. When during [remote development](https://aka.ms/vscode-remote) the {0} setting is disabled this setting can be configured in the local and the remote settings separately.'),
+            description: nls.localize('theia/core/http/proxySupport', 'Use the proxy support for extensions.'),
             scope: PreferenceScope.User
         },
         'http.systemCertificates': {
             type: 'boolean',
             default: true,
-            description: nls.localizeByDefault('Controls whether CA certificates should be loaded from the OS. On Windows and macOS, a reload of the window is required after turning this off. When during [remote development](https://aka.ms/vscode-remote) the {0} setting is disabled this setting can be configured in the local and the remote settings separately.'),
+            description: nls.localize('theia/core/http/systemCertificates', 'Controls whether CA certificates should be loaded from the OS. On Windows and macOS, a reload of the window is required after turning this off.'),
             scope: PreferenceScope.User
         },
         'workbench.list.openMode': {
@@ -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>();