@theia/core 1.61.0 → 1.62.0

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

@@ -34,7 +34,7 @@ import { FrontendApplicationStateService } from '../frontend-application-state';
 import { TabBarToolbarRegistry, TabBarToolbarFactory } from './tab-bar-toolbar';
 import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
-import { waitForRevealed, waitForClosed, PINNED_CLASS } from '../widgets';
+import { waitForRevealed, waitForClosed, PINNED_CLASS, UnsafeWidgetUtilities } from '../widgets';
 import { CorePreferences } from '../core-preferences';
 import { BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { Deferred } from '../../common/promise-util';
@@ -45,6 +45,7 @@ import URI from '../../common/uri';
 import { OpenerService } from '../opener-service';
 import { PreviewableWidget } from '../widgets/previewable-widget';
 import { WindowService } from '../window/window-service';
+import { TheiaSplitPanel } from './theia-split-panel';
 
 /** The class name added to ApplicationShell instances. */
 export const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
@@ -85,10 +86,6 @@ export interface DockPanelRendererFactory {
  */
 @injectable()
 export class DockPanelRenderer implements DockLayout.IRenderer {
-
-    @inject(TheiaDockPanel.Factory)
-    protected readonly dockPanelFactory: TheiaDockPanel.Factory;
-
     readonly tabBarClasses: string[] = [];
 
     private readonly onDidCreateTabBarEmitter = new Emitter<TabBar<Widget>>();
@@ -175,6 +172,7 @@ interface WidgetDragState {
     leaveTimeout?: number;
 }
 
+export const MAXIMIZED_CLASS = 'theia-maximized';
 /**
  * The application shell manages the top-level widgets of the application. Use this class to
  * add, remove, or activate a widget.
@@ -269,6 +267,8 @@ export class ApplicationShell extends Widget {
     protected initializedDeferred = new Deferred<void>();
     initialized = this.initializedDeferred.promise;
 
+    protected readonly maximizedElement: HTMLElement;
+
     /**
      * Construct a new application shell.
      */
@@ -286,6 +286,16 @@ export class ApplicationShell extends Widget {
     ) {
         super(options as Widget.IOptions);
 
+        this.maximizedElement = this.node.ownerDocument.createElement('div');
+        this.maximizedElement.style.position = 'fixed';
+        this.maximizedElement.style.display = 'none';
+        this.maximizedElement.style.left = '0px';
+        this.maximizedElement.style.bottom = '0px';
+        this.maximizedElement.style.right = '0px';
+        this.maximizedElement.style.background = 'var(--theia-editor-background)';
+        this.maximizedElement.style.zIndex = '2000';
+        this.node.ownerDocument.body.appendChild(this.maximizedElement);
+
         // Merge the user-defined application options with the default options
         this.options = {
             bottomPanel: {
@@ -301,6 +311,13 @@ export class ApplicationShell extends Widget {
                 ...options?.rightPanel || {}
             }
         };
+        if (corePreferences) {
+            corePreferences.onPreferenceChanged(preference => {
+                if (preference.preferenceName === 'window.menuBarVisibility' && (preference.newValue === 'visible' || preference.oldValue === 'visible')) {
+                    this.handleMenuBarVisibility(preference.newValue);
+                }
+            });
+        }
     }
 
     @postConstruct()
@@ -561,7 +578,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, area => this.doToggleMaximized(area));
         dockPanel.id = MAIN_AREA_ID;
         dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
@@ -658,7 +675,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, area => this.doToggleMaximized(area));
         dockPanel.id = BOTTOM_AREA_ID;
         dockPanel.widgetAdded.connect((sender, widget) => {
             this.refreshBottomPanelToggleButton();
@@ -731,7 +748,7 @@ export class ApplicationShell extends Widget {
             [1, 0],
             { orientation: 'vertical', spacing: 0 }
         );
-        const panelForBottomArea = new SplitPanel({ layout: bottomSplitLayout });
+        const panelForBottomArea = new TheiaSplitPanel({ layout: bottomSplitLayout });
         panelForBottomArea.id = 'theia-bottom-split-panel';
 
         const leftRightSplitLayout = this.createSplitLayout(
@@ -739,7 +756,7 @@ export class ApplicationShell extends Widget {
             [0, 1, 0],
             { orientation: 'horizontal', spacing: 0 }
         );
-        const panelForSideAreas = new SplitPanel({ layout: leftRightSplitLayout });
+        const panelForSideAreas = new TheiaSplitPanel({ layout: leftRightSplitLayout });
         panelForSideAreas.id = 'theia-left-right-split-panel';
 
         return this.createBoxLayout(
@@ -1178,9 +1195,6 @@ export class ApplicationShell extends Widget {
                 w.title.className = w.title.className.replace(' theia-mod-active', '');
                 w = w.parent;
             }
-            // Reset the z-index to the default
-            // eslint-disable-next-line no-null/no-null
-            this.setZIndex(oldValue.node, null);
         }
         if (newValue) {
             let w: Widget | null = newValue;
@@ -1203,11 +1217,6 @@ export class ApplicationShell extends Widget {
                 // if widget was undefined, we wouldn't have gotten a panel back before
                 panel.markAsCurrent(widget!.title);
             }
-            // Add checks to ensure that the 'sash' for left panel is displayed correctly
-            if (newValue.node.className === 'lm-Widget theia-view-container lm-DockPanel-widget') {
-                // Set the z-index so elements with `position: fixed` contained in the active widget are displayed correctly
-                this.setZIndex(newValue.node, '1');
-            }
 
             // activate another widget if an active widget will be closed
             const onCloseRequest = newValue['onCloseRequest'];
@@ -1237,17 +1246,6 @@ export class ApplicationShell extends Widget {
         this.onDidChangeActiveWidgetEmitter.fire(args);
     }
 
-    /**
-     * Set the z-index of the given element and its ancestors to the value `z`.
-     */
-    private setZIndex(element: HTMLElement, z: string | null): void {
-        element.style.zIndex = z || '';
-        const parent = element.parentElement;
-        if (parent && parent !== this.node) {
-            this.setZIndex(parent, z);
-        }
-    }
-
     /**
      * Track the given widget so it is considered in the `current` and `active` state of the shell.
      */
@@ -2118,11 +2116,75 @@ export class ApplicationShell extends Widget {
     toggleMaximized(widget: Widget | undefined = this.currentWidget): void {
         const area = widget && this.getAreaPanelFor(widget);
         if (area instanceof TheiaDockPanel && (area === this.mainPanel || area === this.bottomPanel)) {
-            area.toggleMaximized();
+            this.doToggleMaximized(area);
             this.revealWidget(widget!.id);
         }
     }
 
+    protected handleMenuBarVisibility(newValue: string): void {
+        if (newValue === 'visible') {
+            const topRect = this.topPanel.node.getBoundingClientRect();
+            this.maximizedElement.style.top = `${topRect.bottom}px`;
+        } else {
+            this.maximizedElement.style.removeProperty('top');
+        }
+    }
+
+    protected readonly onDidToggleMaximizedEmitter = new Emitter<Widget>();
+    readonly onDidToggleMaximized = this.onDidToggleMaximizedEmitter.event;
+
+    protected unmaximize: (() => void) | undefined;
+    doToggleMaximized(area: TheiaDockPanel): void {
+        if (this.unmaximize) {
+            this.unmaximize();
+            this.unmaximize = undefined;
+            return;
+        }
+
+        const removedListener = () => {
+            if (!area.widgets().next().value) {
+                this.doToggleMaximized(area);
+            }
+        };
+
+        const parent = area.parent as SplitPanel;
+        const layout = area.parent?.layout as SplitLayout;
+        const sizes = layout.relativeSizes().slice();
+        const stretch = SplitPanel.getStretch(area);
+        const index = parent.widgets.indexOf(area);
+        parent.layout?.removeWidget(area);
+
+        // eslint-disable-next-line no-null/no-null
+        this.maximizedElement.style.display = 'block';
+        area.addClass(MAXIMIZED_CLASS);
+        const topRect = this.topPanel.node.getBoundingClientRect();
+        UnsafeWidgetUtilities.attach(area, this.maximizedElement);
+        this.maximizedElement.style.top = `${topRect.bottom}px`;
+        area.fit();
+        const observer = new ResizeObserver(entries => {
+            area.fit();
+        });
+        observer.observe(this.maximizedElement);
+
+        this.unmaximize = () => {
+            observer.unobserve(this.maximizedElement);
+            observer.disconnect();
+            this.maximizedElement.style.display = 'none';
+            area.removeClass(MAXIMIZED_CLASS);
+            if (area.isAttached) {
+                UnsafeWidgetUtilities.detach(area);
+            }
+            parent?.insertWidget(index, area);
+            SplitPanel.setStretch(area, stretch);
+            layout.setRelativeSizes(sizes);
+            parent.fit();
+            this.onDidToggleMaximizedEmitter.fire(area);
+            area.widgetRemoved.disconnect(removedListener);
+        };
+
+        area.widgetRemoved.connect(removedListener);
+        this.onDidToggleMaximizedEmitter.fire(area);
+    }
 }
 
 /**

package/src/browser/shell/index.ts

@@ -21,3 +21,4 @@ export * from './sidebar-menu-widget';
 export * from './split-panels';
 export * from './tab-bars';
 export * from './view-contribution';
+export * from './theia-split-panel';

package/src/browser/shell/sidebar-bottom-menu-widget.tsx

@@ -33,7 +33,8 @@ export class SidebarBottomMenuWidget extends SidebarMenuWidget {
                 x: button.left + button.width,
                 y: button.top + button.height,
             },
-            context: e.currentTarget
+            context: e.currentTarget,
+            contextKeyService: this.contextKeyService
         });
     }
 

package/src/browser/shell/sidebar-menu-widget.tsx

@@ -18,9 +18,10 @@ import { injectable, inject } from 'inversify';
 import * as React from 'react';
 import { ReactWidget } from '../widgets';
 import { ContextMenuRenderer } from '../context-menu-renderer';
-import { MenuPath } from '../../common/menu';
+import { CompoundMenuNode, MenuModelRegistry, MenuPath } from '../../common/menu';
 import { HoverService } from '../hover-service';
 import { Event, Disposable, Emitter, DisposableCollection } from '../../common';
+import { ContextKeyService } from '../context-key-service';
 
 export const SidebarTopMenuWidgetFactory = Symbol('SidebarTopMenuWidgetFactory');
 export const SidebarBottomMenuWidgetFactory = Symbol('SidebarBottomMenuWidgetFactory');
@@ -90,9 +91,15 @@ export class SidebarMenuWidget extends ReactWidget {
     @inject(ContextMenuRenderer)
     protected readonly contextMenuRenderer: ContextMenuRenderer;
 
+    @inject(MenuModelRegistry)
+    protected readonly menuRegistry: MenuModelRegistry;
+
     @inject(HoverService)
     protected readonly hoverService: HoverService;
 
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
     constructor() {
         super();
         this.items = [];
@@ -145,14 +152,17 @@ export class SidebarMenuWidget extends ReactWidget {
     protected onClick(e: React.MouseEvent<HTMLElement, MouseEvent>, menuPath: MenuPath): void {
         this.preservingContext = true;
         const button = e.currentTarget.getBoundingClientRect();
+        const menu = this.menuRegistry.getMenuNode(menuPath) as CompoundMenuNode;
         this.contextMenuRenderer.render({
-            menuPath,
+            menuPath: menuPath,
+            menu: menu,
             includeAnchorArg: false,
             anchor: {
                 x: button.left + button.width,
                 y: button.top,
             },
             context: e.currentTarget,
+            contextKeyService: this.contextKeyService,
             onHide: () => {
                 this.preservingContext = false;
                 if (this.preservedContext) {

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-menu-adapters.tsx

@@ -0,0 +1,239 @@
+// *****************************************************************************
+// Copyright (C) 2022 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-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { Widget } from '@lumino/widgets';
+import * as React from 'react';
+import { CommandRegistry, Event } from '../../../common';
+import { NAVIGATION, RenderedToolbarAction } from './tab-bar-toolbar-types';
+import { TabBarToolbar, toAnchor } from './tab-bar-toolbar';
+import { ACTION_ITEM, codicon } from '../../widgets';
+import { ContextMenuRenderer } from '../../context-menu-renderer';
+import { TabBarToolbarItem } from './tab-toolbar-item';
+import { ContextKeyService, ContextMatcher } from '../../context-key-service';
+import { CommandMenu, CompoundMenuNode, MenuModelRegistry, MenuNode, MenuPath, RenderedMenuNode } from '../../../common/menu';
+
+export const TOOLBAR_WRAPPER_ID_SUFFIX = '-as-tabbar-toolbar-item';
+
+abstract class AbstractToolbarMenuWrapper {
+
+    constructor(
+        protected readonly effectiveMenuPath: MenuPath,
+        protected readonly commandRegistry: CommandRegistry,
+        protected readonly menuRegistry: MenuModelRegistry,
+        protected readonly contextKeyService: ContextKeyService,
+        protected readonly contextMenuRenderer: ContextMenuRenderer) {
+    }
+
+    protected abstract menuPath?: MenuPath;
+    protected abstract menuNode: MenuNode;
+    protected abstract id: string;
+    protected abstract icon: string | undefined;
+    protected abstract tooltip: string | undefined;
+    protected abstract text: string | undefined;
+    protected abstract executeCommand(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+
+    isEnabled(): boolean {
+        if (CommandMenu.is(this.menuNode)) {
+            return this.menuNode.isEnabled(this.effectiveMenuPath);
+        }
+        return true;
+    }
+    isToggled(): boolean {
+        if (CommandMenu.is(this.menuNode) && this.menuNode.isToggled) {
+            return !!this.menuNode.isToggled(this.effectiveMenuPath);
+        }
+        return false;
+    }
+    render(widget: Widget): React.ReactNode {
+        return this.renderMenuItem(widget);
+    }
+
+    toMenuNode?(): MenuNode {
+        return this.menuNode;
+    }
+
+    /**
+     * Presents the menu to popup on the `event` that is the clicking of
+     * a menu toolbar item.
+     *
+     * @param menuPath the path of the registered menu to show
+     * @param event the mouse event triggering the menu
+     */
+    showPopupMenu(widget: Widget | undefined, menuPath: MenuPath, event: React.MouseEvent, contextMatcher: ContextMatcher): void {
+        event.stopPropagation();
+        event.preventDefault();
+        const anchor = toAnchor(event);
+
+        this.contextMenuRenderer.render({
+            menuPath: menuPath,
+            menu: this.menuNode as CompoundMenuNode,
+            args: [widget],
+            anchor,
+            context: widget?.node || event.target as HTMLElement,
+            contextKeyService: contextMatcher,
+        });
+    }
+
+    /**
+     * Renders a toolbar item that is a menu, presenting it as a button with a little
+     * chevron decoration that pops up a floating menu when clicked.
+     *
+     * @param item a toolbar item that is a menu item
+     * @returns the rendered toolbar item
+     */
+    protected renderMenuItem(widget: Widget): React.ReactNode {
+        const icon = this.icon || 'ellipsis';
+        const contextMatcher: ContextMatcher = this.contextKeyService;
+        if (CompoundMenuNode.is(this.menuNode) && !this.menuNode.isEmpty(this.effectiveMenuPath, this.contextKeyService, widget.node)) {
+
+            return <div key={this.id} className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}>
+                <div className={codicon(icon, true)}
+                    title={this.text}
+                    onClick={e => this.executeCommand(e)}
+                />
+                <div className={ACTION_ITEM} onClick={event => this.showPopupMenu(widget, this.menuPath!, event, contextMatcher)} >
+                    <div className={codicon('chevron-down') + ' chevron'} />
+                </div>
+            </div>;
+        } else {
+            return <div key={this.id} className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}>
+                <div className={codicon(icon, true)}
+                    title={this.text}
+                    onClick={e => this.executeCommand(e)}
+                />
+            </div>;
+        }
+    }
+}
+
+export class ToolbarMenuNodeWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
+    constructor(
+        effectiveMenuPath: MenuPath,
+        commandRegistry: CommandRegistry,
+        menuRegistry: MenuModelRegistry,
+        contextKeyService: ContextKeyService,
+        contextMenuRenderer: ContextMenuRenderer,
+        protected readonly menuNode: MenuNode & RenderedMenuNode,
+        readonly group: string | undefined,
+        readonly menuPath?: MenuPath) {
+        super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer);
+    }
+
+    executeCommand(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
+        if (CommandMenu.is(this.menuNode)) {
+            this.menuNode.run(this.effectiveMenuPath);
+        }
+    }
+
+    isVisible(widget: Widget): boolean {
+        const menuNodeVisible = this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node);
+        if (CommandMenu.is(this.menuNode)) {
+            return menuNodeVisible;
+        } else if (CompoundMenuNode.is(this.menuNode)) {
+            return menuNodeVisible && !MenuModelRegistry.isEmpty(this.menuNode);
+        } else {
+            return menuNodeVisible;
+        }
+    }
+
+    get id(): string { return this.menuNode.id + TOOLBAR_WRAPPER_ID_SUFFIX; }
+    get icon(): string | undefined { return this.menuNode.icon; }
+    get tooltip(): string | undefined { return this.menuNode.label; }
+    get text(): string | undefined {
+        return (this.group === NAVIGATION || this.group === undefined) ? undefined : this.menuNode.label;
+    }
+    get onDidChange(): Event<void> | undefined {
+        return this.menuNode.onDidChange;
+    }
+}
+
+export class ToolbarSubmenuWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
+    constructor(
+        effectiveMenuPath: MenuPath,
+        commandRegistry: CommandRegistry,
+        menuRegistry: MenuModelRegistry,
+        contextKeyService: ContextKeyService,
+        contextMenuRenderer: ContextMenuRenderer,
+        protected readonly toolbarItem: RenderedToolbarAction
+    ) {
+        super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer);
+    }
+
+    override isEnabled(widget?: Widget): boolean {
+        return this.toolbarItem.command ? this.commandRegistry.isEnabled(this.toolbarItem.command, widget) : !!this.toolbarItem.menuPath;
+    }
+
+    protected executeCommand(e: React.MouseEvent<HTMLElement>, widget?: Widget): void {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!this.isEnabled(widget)) {
+            return;
+        }
+
+        if (this.toolbarItem.command) {
+            this.commandRegistry.executeCommand(this.toolbarItem.command, widget);
+        }
+    };
+
+    isVisible(widget: Widget): boolean {
+        const menuNode = this.menuNode;
+        if (this.toolbarItem.isVisible && !this.toolbarItem.isVisible(widget)) {
+            return false;
+        }
+        if (!menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget)) {
+            return false;
+        }
+        if (this.toolbarItem.command) {
+            return true;
+        }
+        if (CompoundMenuNode.is(menuNode)) {
+            return !menuNode.isEmpty(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+        }
+        return true;
+    }
+    group?: string | undefined;
+    priority?: number | undefined;
+
+    get id(): string { return this.toolbarItem.id; }
+    get icon(): string | undefined {
+        if (typeof this.toolbarItem.icon === 'function') {
+            return this.toolbarItem.icon();
+        }
+        if (this.toolbarItem.icon) {
+            return this.toolbarItem.icon;
+        }
+        if (this.toolbarItem.command) {
+            const command = this.commandRegistry.getCommand(this.toolbarItem.command);
+            return command?.iconClass;
+        }
+        return undefined;
+    }
+    get tooltip(): string | undefined { return this.toolbarItem.tooltip; }
+    get text(): string | undefined { return (this.toolbarItem.group === NAVIGATION || this.toolbarItem.group === undefined) ? undefined : this.toolbarItem.text; }
+    get onDidChange(): Event<void> | undefined {
+        return this.menuNode.onDidChange;
+    }
+
+    get menuPath(): MenuPath {
+        return this.toolbarItem.menuPath!;
+    }
+
+    get menuNode(): MenuNode {
+        return this.menuRegistry.getMenu(this.menuPath);
+    }
+}
+