@theia/core 1.61.0 → 1.62.0

package/src/browser/shell/theia-dock-panel.ts

@@ -15,17 +15,14 @@
 // *****************************************************************************
 
 import { find, toArray } from '@lumino/algorithm';
-import { TabBar, Widget, DockPanel, Title, DockLayout } from '@lumino/widgets';
+import { TabBar, Widget, DockPanel, Title } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 import { Disposable, DisposableCollection } from '../../common/disposable';
-import { UnsafeWidgetUtilities } from '../widgets';
 import { CorePreferences } from '../core-preferences';
 import { Emitter, Event, environment } from '../../common';
 import { ToolbarAwareTabBar } from './tab-bars';
 
-export const MAXIMIZED_CLASS = 'theia-maximized';
 export const ACTIVE_TABBAR_CLASS = 'theia-tabBar-active';
-const VISIBLE_MENU_MAXIMIZED_CLASS = 'theia-visible-menu-maximized';
 
 export const MAIN_AREA_ID = 'theia-main-content-panel';
 export const BOTTOM_AREA_ID = 'theia-bottom-content-panel';
@@ -49,15 +46,15 @@ export class TheiaDockPanel extends DockPanel {
      */
     readonly widgetRemoved = new Signal<this, Widget>(this);
 
-    protected readonly onDidToggleMaximizedEmitter = new Emitter<Widget>();
-    readonly onDidToggleMaximized = this.onDidToggleMaximizedEmitter.event;
     protected readonly onDidChangeCurrentEmitter = new Emitter<Title<Widget> | undefined>();
+
     get onDidChangeCurrent(): Event<Title<Widget> | undefined> {
         return this.onDidChangeCurrentEmitter.event;
     }
 
     constructor(options?: DockPanel.IOptions,
-        protected readonly preferences?: CorePreferences
+        protected readonly preferences?: CorePreferences,
+        protected readonly maximizeCallback?: (area: TheiaDockPanel) => void
     ) {
         super(options);
         this['_onCurrentChanged'] = (sender: TabBar<Widget>, args: TabBar.ICurrentChangedArgs<Widget>) => {
@@ -77,12 +74,11 @@ export class TheiaDockPanel extends DockPanel {
             this.markAsCurrent(args.title);
             super['_onTabActivateRequested'](sender, args);
         };
-        if (preferences) {
-            preferences.onPreferenceChanged(preference => {
-                if (!this.isElectron() && preference.preferenceName === 'window.menuBarVisibility' && (preference.newValue === 'visible' || preference.oldValue === 'visible')) {
-                    this.handleMenuBarVisibility(preference.newValue);
-                }
-            });
+    }
+
+    toggleMaximized(): void {
+        if (this.maximizeCallback) {
+            this.maximizeCallback(this);
         }
     }
 
@@ -90,19 +86,6 @@ export class TheiaDockPanel extends DockPanel {
         return environment.electron.is();
     }
 
-    protected handleMenuBarVisibility(newValue: string): void {
-        const areaContainer = this.node.parentElement;
-        const maximizedElement = this.getMaximizedElement();
-
-        if (areaContainer === maximizedElement) {
-            if (newValue === 'visible') {
-                this.addClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            } else {
-                this.removeClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            }
-        }
-    }
-
     protected _currentTitle: Title<Widget> | undefined;
     get currentTitle(): Title<Widget> | undefined {
         return this._currentTitle;
@@ -195,75 +178,11 @@ export class TheiaDockPanel extends DockPanel {
         }
         return undefined;
     }
-
-    protected readonly toDisposeOnToggleMaximized = new DisposableCollection();
-    toggleMaximized(): void {
-        const areaContainer = this.node.parentElement;
-        if (!areaContainer) {
-            return;
-        }
-        const maximizedElement = this.getMaximizedElement();
-        if (areaContainer === maximizedElement) {
-            this.toDisposeOnToggleMaximized.dispose();
-            return;
-        }
-        if (this.isAttached) {
-            UnsafeWidgetUtilities.detach(this);
-        }
-        maximizedElement.style.display = 'block';
-        this.addClass(MAXIMIZED_CLASS);
-        const preference = this.preferences?.get('window.menuBarVisibility');
-        if (!this.isElectron() && preference === 'visible') {
-            this.addClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-        }
-        UnsafeWidgetUtilities.attach(this, maximizedElement);
-        this.fit();
-        this.onDidToggleMaximizedEmitter.fire(this);
-        this.toDisposeOnToggleMaximized.push(Disposable.create(() => {
-            maximizedElement.style.display = 'none';
-            this.removeClass(MAXIMIZED_CLASS);
-            this.onDidToggleMaximizedEmitter.fire(this);
-            if (!this.isElectron()) {
-                this.removeClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            }
-            if (this.isAttached) {
-                UnsafeWidgetUtilities.detach(this);
-            }
-            UnsafeWidgetUtilities.attach(this, areaContainer);
-            this.fit();
-        }));
-
-        const layout = this.layout;
-        if (layout instanceof DockLayout) {
-            const onResize = layout['onResize'];
-            layout['onResize'] = () => onResize.bind(layout)(Widget.ResizeMessage.UnknownSize);
-            this.toDisposeOnToggleMaximized.push(Disposable.create(() => layout['onResize'] = onResize));
-        }
-
-        const removedListener = () => {
-            if (!this.widgets().next()) {
-                this.toDisposeOnToggleMaximized.dispose();
-            }
-        };
-        this.widgetRemoved.connect(removedListener);
-        this.toDisposeOnToggleMaximized.push(Disposable.create(() => this.widgetRemoved.disconnect(removedListener)));
-    }
-
-    protected maximizedElement: HTMLElement | undefined;
-    protected getMaximizedElement(): HTMLElement {
-        if (!this.maximizedElement) {
-            this.maximizedElement = document.createElement('div');
-            this.maximizedElement.style.display = 'none';
-            document.body.appendChild(this.maximizedElement);
-        }
-        return this.maximizedElement;
-    }
-
 }
 export namespace TheiaDockPanel {
     export const Factory = Symbol('TheiaDockPanel#Factory');
     export interface Factory {
-        (options?: DockPanel.IOptions): TheiaDockPanel;
+        (options?: DockPanel.IOptions, maximizeCallback?: (area: TheiaDockPanel) => void): TheiaDockPanel;
     }
 
     export interface AddOptions extends DockPanel.IAddOptions {

package/src/browser/shell/theia-split-panel.ts

@@ -0,0 +1,56 @@
+// *****************************************************************************
+// Copyright (C) 2025 STMicroelectronics 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 { SplitLayout, SplitPanel } from '@lumino/widgets';
+
+export class TheiaSplitPanel extends SplitPanel {
+    constructor(options?: SplitPanel.IOptions) {
+        super(options);
+
+        let oldCursor: string | undefined;
+        let pointerId: number | undefined;
+
+        this['_evtPointerDown'] = (event: PointerEvent) => {
+            super['_evtPointerDown'](event);
+            if (this['_pressData']) { // indicating that the drag has started
+                this.node.setPointerCapture(event.pointerId);
+                pointerId = event.pointerId;
+                const layout = this.layout as SplitLayout;
+                const handle = layout.handles.find(h => h.contains(event.target as HTMLElement));
+                if (handle) {
+                    const style = window.getComputedStyle(handle);
+                    oldCursor = this.node.style.cursor;
+                    this.node.style.cursor = style.cursor;
+                }
+            }
+        };
+        this['_releaseMouse'] = () => {
+            super['_releaseMouse']();
+            if (oldCursor !== undefined) {
+                this.node.style.cursor = oldCursor;
+                oldCursor = undefined;
+            }
+            if (pointerId) {
+                this.node.releasePointerCapture(pointerId);
+                pointerId = undefined;
+            }
+        };
+    }
+
+    override handleEvent(event: Event): void {
+        super.handleEvent(event);
+    }
+}

package/src/browser/style/hover-service.css

@@ -29,7 +29,12 @@
   border: 1px solid var(--theia-editorHoverWidget-border);
   padding: var(--theia-ui-padding);
   max-width: var(--theia-hover-max-width);
-  z-index: 1000;
+}
+
+/* overwrite potentially different default user agent styles */
+.theia-hover[popover] {
+  inset: unset;
+  overflow: visible;
 }
 
 .theia-hover .hover-row:not(:first-child):not(:empty) {

package/src/browser/style/index.css

@@ -90,6 +90,7 @@ body {
     color: var(--theia-foreground);
     border: 1px solid var(--theia-window-activeBorder);
 }
+
 body:window-inactive,
 body:-moz-window-inactive {
     border-color: var(--theia-window-inactiveBorder);
@@ -139,19 +140,10 @@ blockquote {
 }
 
 .theia-maximized {
-    position: fixed !important;
     top: 0 !important;
-    bottom: 0 !important;
     left: 0 !important;
-    right: 0 !important;
-    width: auto !important;
-    height: auto !important;
-    z-index: 255 !important;
-    background: var(--theia-editor-background);
-}
-
-.theia-visible-menu-maximized {
-    top: var(--theia-private-menubar-height) !important;
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .theia-ApplicationShell {

package/src/browser/style/view-container.css

@@ -16,9 +16,7 @@
 
 :root {
   --theia-view-container-title-height: var(--theia-content-line-height);
-  --theia-view-container-content-height: calc(
-    100% - var(--theia-view-container-title-height)
-  );
+  --theia-view-container-content-height: calc(100% - var(--theia-view-container-title-height));
 }
 
 .theia-view-container {
@@ -27,36 +25,36 @@
   flex-direction: column;
 }
 
-.theia-view-container > .lm-SplitPanel {
+.theia-view-container>.lm-SplitPanel {
   height: 100%;
   width: 100%;
 }
 
-.theia-view-container > .lm-SplitPanel > .lm-SplitPanel-child {
+.theia-view-container>.lm-SplitPanel>.lm-SplitPanel-child {
   min-width: 50px;
   min-height: var(--theia-content-line-height);
 }
 
-.theia-view-container > .lm-SplitPanel > .lm-SplitPanel-handle::after {
+.theia-view-container>.lm-SplitPanel>.lm-SplitPanel-handle::after {
   min-height: 2px;
   min-width: 2px;
 }
 
-.lm-SplitPanel > .lm-SplitPanel-handle:hover::after {
+.lm-SplitPanel>.lm-SplitPanel-handle:hover::after {
   background-color: var(--theia-sash-hoverBorder);
   transition-delay: var(--theia-sash-hoverDelay);
 }
 
-.lm-SplitPanel > .lm-SplitPanel-handle:active::after {
+.lm-SplitPanel>.lm-SplitPanel-handle:active::after {
   background-color: var(--theia-sash-activeBorder);
   transition-delay: 0s !important;
 }
 
-.lm-SplitPanel[data-orientation="horizontal"] > .lm-SplitPanel-handle::after {
+.lm-SplitPanel[data-orientation="horizontal"]>.lm-SplitPanel-handle::after {
   min-width: var(--theia-sash-width);
 }
 
-.lm-SplitPanel[data-orientation="vertical"] > .lm-SplitPanel-handle::after {
+.lm-SplitPanel[data-orientation="vertical"]>.lm-SplitPanel-handle::after {
   min-height: var(--theia-sash-width);
 }
 
@@ -76,11 +74,11 @@
   overflow: hidden;
 }
 
-.lm-Widget > .theia-view-container-part-header {
+.lm-Widget>.theia-view-container-part-header {
   box-shadow: 0 1px 0 var(--theia-sideBarSectionHeader-border) inset;
 }
 
-.lm-Widget.lm-first-visible > .theia-view-container-part-header {
+.lm-Widget.lm-first-visible>.theia-view-container-part-header {
   box-shadow: none;
 }
 
@@ -88,20 +86,12 @@
   padding-left: 4px;
 }
 
-.theia-view-container
-  > .lm-SplitPanel[data-orientation="horizontal"]
-  .part
-  > .theia-header
-  .theia-ExpansionToggle::before {
+.theia-view-container>.lm-SplitPanel[data-orientation="horizontal"] .part>.theia-header .theia-ExpansionToggle::before {
   display: none;
   padding-left: 0px;
 }
 
-.theia-view-container
-  > .lm-SplitPanel[data-orientation="horizontal"]
-  .part
-  > .theia-header
-  .theia-ExpansionToggle {
+.theia-view-container>.lm-SplitPanel[data-orientation="horizontal"] .part>.theia-header .theia-ExpansionToggle {
   padding-left: 0px;
 }
 
@@ -127,19 +117,19 @@
   margin-right: 12px;
 }
 
-.theia-view-container .part > .body {
+.theia-view-container .part>.body {
   height: var(--theia-view-container-content-height);
   min-width: 50px;
   min-height: 50px;
   position: relative;
 }
 
-.theia-view-container .part > .body .theia-tree-source-node-placeholder {
+.theia-view-container .part>.body .theia-tree-source-node-placeholder {
   padding-top: 4px;
   height: 100%;
 }
 
-.theia-view-container .part:hover > .body {
+.theia-view-container .part:hover>.body {
   display: block;
 }
 
@@ -174,12 +164,8 @@
 }
 
 .theia-view-container-part-title.menu-open,
-.lm-Widget.part:not(.collapsed):hover
-  .theia-view-container-part-header
-  .theia-view-container-part-title,
-.lm-Widget.part:not(.collapsed):focus-within
-  .theia-view-container-part-header
-  .theia-view-container-part-title {
+.lm-Widget.part:not(.collapsed):hover .theia-view-container-part-header .theia-view-container-part-title,
+.lm-Widget.part:not(.collapsed):focus-within .theia-view-container-part-header .theia-view-container-part-title {
   display: flex;
 }
 

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

@@ -445,6 +445,13 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         super.onUpdateRequest(msg);
     }
 
+    protected override handleVisiblityChanged(isNowVisible: boolean): void {
+        super.handleVisiblityChanged(isNowVisible);
+        if (isNowVisible) {
+            this.update();
+        }
+    }
+
     protected override onResize(msg: Widget.ResizeMessage): void {
         super.onResize(msg);
         this.update();

package/src/browser/view-container.ts

@@ -23,13 +23,13 @@ import {
 import { Event as CommonEvent, Emitter } from '../common/event';
 import { Disposable, DisposableCollection } from '../common/disposable';
 import { CommandRegistry } from '../common/command';
-import { MenuModelRegistry, MenuPath, MenuAction } from '../common/menu';
+import { MenuModelRegistry, MenuPath, MenuAction, SubmenuImpl, ActionMenuNode, MenuNode, RenderedMenuNode } from '../common/menu';
 import { ApplicationShell, StatefulWidget, SplitPositionHandler, SplitPositionOptions, SIDE_PANEL_TOOLBAR_CONTEXT_MENU } from './shell';
 import { MAIN_AREA_ID, BOTTOM_AREA_ID } from './shell/theia-dock-panel';
 import { FrontendApplicationStateService } from './frontend-application-state';
 import { ContextMenuRenderer, Anchor } from './context-menu-renderer';
 import { parseCssMagnitude } from './browser';
-import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar, TabBarDelegator, RenderedToolbarItem } from './shell/tab-bar-toolbar';
+import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar, TabBarDelegator } from './shell/tab-bar-toolbar';
 import { isEmpty, isObject, nls } from '../common';
 import { WidgetManager } from './widget-manager';
 import { Key } from './keys';
@@ -38,6 +38,10 @@ import { Drag } from '@lumino/dragdrop';
 import { MimeData } from '@lumino/coreutils';
 import { ElementExt } from '@lumino/domutils';
 import { TabBarDecoratorService } from './shell/tab-bar-decorator';
+import { ContextKeyService } from './context-key-service';
+import { KeybindingRegistry } from './keybinding';
+import { ToolbarMenuNodeWrapper } from './shell/tab-bar-toolbar/tab-bar-toolbar-menu-adapters';
+import { TheiaSplitPanel } from './shell/theia-split-panel';
 
 export interface ViewContainerTitleOptions {
     label: string;
@@ -90,6 +94,26 @@ export namespace DynamicToolbarWidget {
     }
 }
 
+class PartsMenuToolbarItem extends ToolbarMenuNodeWrapper {
+    constructor(
+        protected readonly target: () => Widget | undefined,
+        effectiveMenuPath: MenuPath,
+        commandRegistry: CommandRegistry,
+        menuRegistry: MenuModelRegistry,
+        contextKeyService: ContextKeyService,
+        contextMenuRenderer: ContextMenuRenderer,
+        menuNode: MenuNode & RenderedMenuNode,
+        group: string | undefined,
+        menuPath?: MenuPath,
+    ) {
+        super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer, menuNode, group, menuPath);
+    }
+
+    override isVisible(widget: Widget): boolean {
+        return widget === this.target() && super.isVisible(widget);
+    }
+}
+
 /**
  * A view container holds an arbitrary number of widgets inside a split panel.
  * Each widget is wrapped in a _part_ that displays the widget title and toolbar
@@ -146,13 +170,20 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
     @inject(TabBarDecoratorService)
     protected readonly decoratorService: TabBarDecoratorService;
 
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
+    @inject(KeybindingRegistry)
+    protected readonly keybindingRegistry: KeybindingRegistry;
+
     @postConstruct()
     protected init(): void {
+        this.toDispose.push(Disposable.create(() => { this.toDisposeOnUpdateTitle.dispose(); }));
         this.id = this.options.id;
         this.addClass('theia-view-container');
         const layout = new PanelLayout();
         this.layout = layout;
-        this.panel = new SplitPanel({
+        this.panel = new TheiaSplitPanel({
             layout: new ViewContainerLayout({
                 renderer: SplitPanel.defaultRenderer,
                 orientation: this.orientation,
@@ -243,7 +274,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
         this.updateTitle();
     }
 
-    protected readonly toDisposeOnUpdateTitle = new DisposableCollection();
+    protected toDisposeOnUpdateTitle = new DisposableCollection();
 
     protected _tabBarDelegate: Widget = this;
     updateTabBarDelegate(): void {
@@ -261,7 +292,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
 
     protected updateTitle(): void {
         this.toDisposeOnUpdateTitle.dispose();
-        this.toDispose.push(this.toDisposeOnUpdateTitle);
+        this.toDisposeOnUpdateTitle = new DisposableCollection();
         this.updateTabBarDelegate();
         let title = Object.assign({}, this.titleOptions);
         if (isEmpty(title)) {
@@ -315,36 +346,26 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
 
     protected updateToolbarItems(allParts: ViewContainerPart[]): void {
         if (allParts.length > 1) {
-            const group = this.getToggleVisibilityGroupLabel();
+            const group = new SubmenuImpl(`toggleParts-${this.id}`, this.getToggleVisibilityGroupLabel(), undefined, '000');
             for (const part of allParts) {
                 const existingId = this.toggleVisibilityCommandId(part);
-                const { caption, label, dataset: { visibilityCommandLabel } } = part.wrapped.title;
-                this.registerToolbarItem(existingId, { tooltip: visibilityCommandLabel || caption || label, group });
+                const { label } = part.wrapped.title;
+                group.addNode(new ActionMenuNode({
+                    commandId: existingId,
+                    label: label
+                }, this.commandRegistry, this.keybindingRegistry, this.contextKeyService));
             }
+
+            // widget === this.getTabBarDelegate()
+
+            const toolbarItem = new PartsMenuToolbarItem(() => this.getTabBarDelegate(), [this.id], this.commandRegistry, this.menuRegistry,
+                this.contextKeyService, this.contextMenuRenderer, group, '000_views', [this.id]);
+            this.toDisposeOnUpdateTitle.push(this.toolbarRegistry.doRegisterItem(toolbarItem));
         }
     }
 
     protected getToggleVisibilityGroupLabel(): string {
-        return 'view';
-    }
-
-    protected registerToolbarItem(commandId: string, options?: Partial<Omit<RenderedToolbarItem, 'id' | 'command'>>): void {
-        const newId = `${this.id}-tabbar-toolbar-${commandId}`;
-        const existingHandler = this.commandRegistry.getAllHandlers(commandId)[0];
-        const existingCommand = this.commandRegistry.getCommand(commandId);
-        if (existingHandler && existingCommand) {
-            this.toDisposeOnUpdateTitle.push(this.commandRegistry.registerCommand({ ...existingCommand, id: newId }, {
-                execute: (_widget, ...args) => this.commandRegistry.executeCommand(commandId, ...args),
-                isToggled: (_widget, ...args) => this.commandRegistry.isToggled(commandId, ...args),
-                isEnabled: (_widget, ...args) => this.commandRegistry.isEnabled(commandId, ...args),
-                isVisible: (widget, ...args) => widget === this.getTabBarDelegate() && this.commandRegistry.isVisible(commandId, ...args),
-            }));
-            this.toDisposeOnUpdateTitle.push(this.toolbarRegistry.registerItem({
-                ...options,
-                id: newId,
-                command: newId,
-            }));
-        }
+        return 'Views';
     }
 
     protected findOriginalPart(): ViewContainerPart | undefined {
@@ -593,8 +614,8 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
                 }
                 return false;
             },
-            isEnabled: arg => toRegister.canHide && (!this.titleOptions || !(arg instanceof Widget) || (arg instanceof ViewContainer && arg.id === this.id)),
-            isVisible: arg => !this.titleOptions || !(arg instanceof Widget) || (arg instanceof ViewContainer && arg.id === this.id)
+            isEnabled: arg => toRegister.canHide && (!this.titleOptions || !(arg instanceof Widget) || arg === this.getTabBarDelegate()),
+            isVisible: arg => !this.titleOptions || !(arg instanceof Widget) || arg === this.getTabBarDelegate()
         });
     }
 

package/src/browser/window/default-secondary-window-service.ts

@@ -80,6 +80,10 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
             });
         });
 
+        this.registerShutdownListeners();
+    }
+
+    protected registerShutdownListeners(): void {
         // Close all open windows when the main window is closed.
         this.windowService.onUnload(() => {
             // Iterate backwards because calling window.close might remove the window from the array