Fix #9779: add support for window.menuBarVisibility (#9830)

Signed-off-by: ChayaLau <[email protected]>

Author: ChayaLau

CHANGELOG.md

@@ -13,6 +13,11 @@
 - [vsx-registry] `VSXExtensionsContribution` no longer implements `TabBarToolbarContribution` and is not bound as such. Extensions of the class that expect such behavior should reimplement it with caution. See caveats in PR. [#9798](https://github.com/eclipse-theia/theia/pull/9798)
 - [core] `handleExpansionToggleDblClickEvent` in `TreeWidget` can no longer be overridden. Instead, `doHandleExpansionToggleDblClickEvent` can be overridden. [#9877](https://github.com/eclipse-theia/theia/pull/9877)
 - [core] `ViewContainerPart` methods and properties related to hiding and showing toolbar removed: `toHideToolbar`, `hideToolbar`, `showToolbar`, `toolbarHidden`. `ViewContainerPart` toolbars are now hidden or shown using CSS properties. [#9935](https://github.com/eclipse-theia/theia/pull/9935)
+- [core] `SidePanelHandler.addMenu` and `SidePanelHandler.removeMenu` no longer exists, instead added `addBottomMenu` and `addTopMenu` for adding menu, `removeTopMenu` and `removeBottomMenu` for removing menu. 
+  - `SidebarBottomMenu` interface is renamed `SidebarMenu` and handles not only bottom menu's. 
+  - Changed style class name from `theia-sidebar-bottom-menu` to `theia-sidebar-menu`
+- [preferences] `TheiaDockPanel` constructor takes a new parameter `preferences`. 
+[#9830](https://github.com/eclipse-theia/theia/pull/9830)
 
 ## v1.16.0 - 7/29/2021
 

examples/api-samples/src/electron-browser/updater/sample-updater-frontend-contribution.ts

@@ -90,7 +90,7 @@ export class ElectronMenuUpdater {
         this.setMenu();
     }
 
-    private setMenu(menu: Menu = this.factory.createMenuBar(), electronWindow: BrowserWindow = remote.getCurrentWindow()): void {
+    private setMenu(menu: Menu | null = this.factory.createMenuBar(), electronWindow: BrowserWindow = remote.getCurrentWindow()): void {
         if (isOSX) {
             remote.Menu.setApplicationMenu(menu);
         } else {

packages/core/src/browser/common-frontend-contribution.ts

@@ -43,9 +43,9 @@ import { environment } from '@theia/application-package/lib/environment';
 import { IconThemeService } from './icon-theme-service';
 import { ColorContribution } from './color-application-contribution';
 import { ColorRegistry, Color } from './color-registry';
-import { CorePreferences } from './core-preferences';
+import { CoreConfiguration, CorePreferences } from './core-preferences';
 import { ThemeService } from './theming';
-import { PreferenceService, PreferenceScope } from './preferences';
+import { PreferenceService, PreferenceScope, PreferenceChangeEvent } from './preferences';
 import { ClipboardService } from './clipboard-service';
 import { EncodingRegistry } from './encoding-registry';
 import { UTF8 } from '../common/encodings';
@@ -358,17 +358,11 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         this.updateStyles();
         this.updateThemeFromPreference('workbench.colorTheme');
         this.updateThemeFromPreference('workbench.iconTheme');
-        this.preferences.onPreferenceChanged(e => {
-            if (e.preferenceName === 'workbench.editor.highlightModifiedTabs') {
-                this.updateStyles();
-            } else if (e.preferenceName === 'workbench.colorTheme' || e.preferenceName === 'workbench.iconTheme') {
-                this.updateThemeFromPreference(e.preferenceName);
-            }
-        });
+        this.preferences.onPreferenceChanged(e => this.handlePreferenceChange(e, app));
         this.themeService.onDidColorThemeChange(() => this.updateThemePreference('workbench.colorTheme'));
         this.iconThemes.onDidChangeCurrent(() => this.updateThemePreference('workbench.iconTheme'));
 
-        app.shell.leftPanelHandler.addMenu({
+        app.shell.leftPanelHandler.addBottomMenu({
             id: 'settings-menu',
             iconClass: 'codicon codicon-settings-gear',
             title: 'Settings',
@@ -383,11 +377,11 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             order: 1,
         };
         this.authenticationService.onDidRegisterAuthenticationProvider(() => {
-            app.shell.leftPanelHandler.addMenu(accountsMenu);
+            app.shell.leftPanelHandler.addBottomMenu(accountsMenu);
         });
         this.authenticationService.onDidUnregisterAuthenticationProvider(() => {
             if (this.authenticationService.getProviderIds().length === 0) {
-                app.shell.leftPanelHandler.removeMenu(accountsMenu.id);
+                app.shell.leftPanelHandler.removeBottomMenu(accountsMenu.id);
             }
         });
     }
@@ -425,6 +419,36 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         }
     }
 
+    protected handlePreferenceChange(e: PreferenceChangeEvent<CoreConfiguration>, app: FrontendApplication): void {
+        switch (e.preferenceName) {
+            case 'workbench.editor.highlightModifiedTabs': {
+                this.updateStyles();
+                break;
+            }
+            case 'workbench.colorTheme':
+            case 'workbench.iconTheme': {
+                this.updateThemeFromPreference(e.preferenceName);
+                break;
+            }
+            case 'window.menuBarVisibility': {
+                const { newValue } = e;
+                const mainMenuId = 'main-menu';
+                if (newValue === 'compact') {
+                    this.shell.leftPanelHandler.addTopMenu({
+                        id: mainMenuId,
+                        iconClass: 'codicon codicon-menu',
+                        title: 'Application Menu',
+                        menuPath: ['menubar'],
+                        order: 0,
+                    });
+                } else {
+                    app.shell.leftPanelHandler.removeTopMenu(mainMenuId);
+                }
+                break;
+            }
+        }
+    }
+
     onStart(): void {
         this.storageService.getData<{ recent: Command[] }>(RECENT_COMMANDS_STORAGE_KEY, { recent: [] })
             .then(tasks => this.commandRegistry.recent = tasks.recent);

packages/core/src/browser/core-preferences.ts

@@ -18,6 +18,7 @@ import { interfaces } from 'inversify';
 import { createPreferenceProxy, PreferenceProxy, PreferenceService, PreferenceContribution, PreferenceSchema } from './preferences';
 import { SUPPORTED_ENCODINGS } from './supported-encodings';
 import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
+import { isOSX } from '../common/os';
 
 export const corePreferenceSchema: PreferenceSchema = {
     'type': 'object',
@@ -97,6 +98,21 @@ export const corePreferenceSchema: PreferenceSchema = {
             default: 'code',
             description: 'Whether to interpret keypresses by the `code` of the physical key, or by the `keyCode` provided by the OS.'
         },
+        'window.menuBarVisibility': {
+            type: 'string',
+            enum: ['classic', 'visible', 'hidden', 'compact'],
+            markdownEnumDescriptions: [
+                'Menu is displayed at the top of the window and only hidden in full screen mode.',
+                'Menu is always visible at the top of the window even in full screen mode.',
+                'Menu is always hidden.',
+                'Menu is displayed as a compact button in the sidebar.'
+            ],
+            default: 'classic',
+            scope: 'application',
+            markdownDescription: `Control the visibility of the menu bar. 
+            A setting of 'compact' will move the menu into the sidebar.`,
+            included: !isOSX
+        },
     }
 };
 
@@ -112,6 +128,7 @@ export interface CoreConfiguration {
     'workbench.silentNotifications': boolean;
     'files.encoding': string
     'workbench.tree.renderIndentGuides': 'onHover' | 'none' | 'always';
+    'window.menuBarVisibility': 'classic' | 'visible' | 'hidden' | 'compact';
 }
 
 export const CorePreferenceContribution = Symbol('CorePreferenceContribution');

packages/core/src/browser/frontend-application-module.ts

@@ -43,8 +43,8 @@ import {
     ApplicationShell, ApplicationShellOptions, DockPanelRenderer, TabBarRenderer,
     TabBarRendererFactory, ShellLayoutRestorer,
     SidePanelHandler, SidePanelHandlerFactory,
-    SidebarBottomMenuWidget, SidebarBottomMenuWidgetFactory,
-    SplitPositionHandler, DockPanelRendererFactory, ApplicationShellLayoutMigration, ApplicationShellLayoutMigrationError
+    SidebarMenuWidget, SidebarTopMenuWidgetFactory,
+    SplitPositionHandler, DockPanelRendererFactory, ApplicationShellLayoutMigration, ApplicationShellLayoutMigrationError, SidebarBottomMenuWidgetFactory
 } from './shell';
 import { StatusBar, StatusBarImpl } from './status-bar/status-bar';
 import { LabelParser } from './label-parser';
@@ -104,6 +104,7 @@ import {
 } from './quick-input';
 import { QuickAccessContribution } from './quick-input/quick-access';
 import { QuickCommandService } from './quick-input/quick-command-service';
+import { SidebarBottomMenuWidget } from './shell/sidebar-bottom-menu-widget';
 
 export { bindResourceProvider, bindMessageService, bindPreferenceService };
 
@@ -133,8 +134,10 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
     bind(ApplicationShell).toSelf().inSingletonScope();
     bind(SidePanelHandlerFactory).toAutoFactory(SidePanelHandler);
     bind(SidePanelHandler).toSelf();
-    bind(SidebarBottomMenuWidgetFactory).toAutoFactory(SidebarBottomMenuWidget);
+    bind(SidebarTopMenuWidgetFactory).toAutoFactory(SidebarMenuWidget);
+    bind(SidebarMenuWidget).toSelf();
     bind(SidebarBottomMenuWidget).toSelf();
+    bind(SidebarBottomMenuWidgetFactory).toAutoFactory(SidebarBottomMenuWidget);
     bind(SplitPositionHandler).toSelf().inSingletonScope();
 
     bindContributionProvider(bind, TabBarToolbarContribution);

packages/core/src/browser/menu/browser-menu-plugin.ts

@@ -27,6 +27,7 @@ import { ContextKeyService } from '../context-key-service';
 import { ContextMenuContext } from './context-menu-context';
 import { waitForRevealed } from '../widgets';
 import { ApplicationShell } from '../shell';
+import { CorePreferences } from '../core-preferences';
 
 export abstract class MenuBarWidget extends MenuBar {
     abstract activateMenu(label: string, ...labels: string[]): Promise<MenuWidget>;
@@ -45,6 +46,9 @@ export class BrowserMainMenuFactory implements MenuWidgetFactory {
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
 
+    @inject(CorePreferences)
+    protected readonly corePreferences: CorePreferences;
+
     @inject(KeybindingRegistry)
     protected readonly keybindingRegistry: KeybindingRegistry;
 
@@ -54,15 +58,31 @@ export class BrowserMainMenuFactory implements MenuWidgetFactory {
     createMenuBar(): MenuBarWidget {
         const menuBar = new DynamicMenuBarWidget();
         menuBar.id = 'theia:menubar';
-        this.fillMenuBar(menuBar);
-        const listener = this.keybindingRegistry.onKeybindingsChanged(() => {
-            menuBar.clearMenus();
-            this.fillMenuBar(menuBar);
+        const preferenceListener = this.corePreferences.onPreferenceChanged(preference => {
+            if (preference.preferenceName === 'window.menuBarVisibility') {
+                this.showMenuBar(menuBar, preference.newValue);
+            }
+        });
+        const keybindingListener = this.keybindingRegistry.onKeybindingsChanged(() => {
+            const preference = this.corePreferences['window.menuBarVisibility'];
+            this.showMenuBar(menuBar, preference);
+        });
+        menuBar.disposed.connect(() => {
+            preferenceListener.dispose();
+            keybindingListener.dispose();
         });
-        menuBar.disposed.connect(() => listener.dispose());
         return menuBar;
     }
 
+    protected showMenuBar(menuBar: DynamicMenuBarWidget, preference: string | undefined): void {
+        if (preference && ['classic', 'visible'].includes(preference)) {
+            menuBar.clearMenus();
+            this.fillMenuBar(menuBar);
+        } else {
+            menuBar.clearMenus();
+        }
+    }
+
     protected fillMenuBar(menuBar: MenuBarWidget): void {
         const menuModel = this.menuProvider.getMenu(MAIN_MENU_BAR);
         const menuCommandRegistry = this.createMenuCommandRegistry(menuModel);

packages/core/src/browser/shell/application-shell.ts

@@ -36,6 +36,8 @@ import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar } from './ta
 import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
 import { waitForRevealed, waitForClosed } from '../widgets';
+import { CorePreferences } from '../core-preferences';
+import { environment } from '../../common';
 
 /** The class name added to ApplicationShell instances. */
 const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
@@ -204,7 +206,8 @@ export class ApplicationShell extends Widget {
         @inject(SidePanelHandlerFactory) sidePanelHandlerFactory: () => SidePanelHandler,
         @inject(SplitPositionHandler) protected splitPositionHandler: SplitPositionHandler,
         @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService,
-        @inject(ApplicationShellOptions) @optional() options: RecursivePartial<ApplicationShell.Options> = {}
+        @inject(ApplicationShellOptions) @optional() options: RecursivePartial<ApplicationShell.Options> = {},
+        @inject(CorePreferences) protected readonly corePreferences: CorePreferences
     ) {
         super(options as Widget.IOptions);
         this.addClass(APPLICATION_SHELL_CLASS);
@@ -250,6 +253,17 @@ export class ApplicationShell extends Widget {
     protected init(): void {
         this.initSidebarVisibleKeyContext();
         this.initFocusKeyContexts();
+
+        if (!environment.electron.is()) {
+            this.corePreferences.ready.then(() => {
+                this.setTopPanelVisibily(this.corePreferences['window.menuBarVisibility']);
+            });
+            this.corePreferences.onPreferenceChanged(preference => {
+                if (preference.preferenceName === 'window.menuBarVisibility') {
+                    this.setTopPanelVisibily(preference.newValue);
+                }
+            });
+        }
     }
 
     protected initSidebarVisibleKeyContext(): void {
@@ -279,6 +293,11 @@ export class ApplicationShell extends Widget {
         this.activeChanged.connect(updateFocusContextKeys);
     }
 
+    protected setTopPanelVisibily(preference: string): void {
+        const hiddenPreferences = ['compact', 'hidden'];
+        this.topPanel.setHidden(hiddenPreferences.includes(preference));
+    }
+
     protected onBeforeAttach(msg: Message): void {
         document.addEventListener('p-dragenter', this, true);
         document.addEventListener('p-dragover', this, true);
@@ -448,7 +467,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, this.corePreferences);
         dockPanel.id = MAIN_AREA_ID;
         dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
@@ -466,7 +485,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, this.corePreferences);
         dockPanel.id = BOTTOM_AREA_ID;
         dockPanel.widgetAdded.connect((sender, widget) => {
             this.refreshBottomPanelToggleButton();
@@ -493,6 +512,7 @@ export class ApplicationShell extends Widget {
     protected createTopPanel(): Panel {
         const topPanel = new Panel();
         topPanel.id = 'theia-top-panel';
+        topPanel.hide();
         return topPanel;
     }
 

packages/core/src/browser/shell/index.ts

@@ -17,7 +17,7 @@
 export * from './application-shell';
 export * from './shell-layout-restorer';
 export * from './side-panel-handler';
-export * from './sidebar-bottom-menu-widget';
+export * from './sidebar-menu-widget';
 export * from './split-panels';
 export * from './tab-bars';
 export * from './view-contribution';