@theia/core 1.65.0-next.6 → 1.65.1

package/src/browser/secondary-window-handler.ts

@@ -16,26 +16,68 @@
 
 import debounce = require('lodash.debounce');
 import { inject, injectable } from 'inversify';
-import { BoxLayout, BoxPanel, ExtractableWidget, Widget } from './widgets';
+import { BoxLayout, ExtractableWidget, TabBar, Widget } from './widgets';
 import { MessageService } from '../common/message-service';
-import { ApplicationShell } from './shell/application-shell';
+import { ApplicationShell, DockPanelRenderer, MAIN_AREA_CLASS, MAIN_BOTTOM_AREA_CLASS } from './shell/application-shell';
 import { Emitter } from '../common/event';
-import { SecondaryWindowService } from './window/secondary-window-service';
+import { isSecondaryWindow, SecondaryWindowRootWidget, SecondaryWindowService } from './window/secondary-window-service';
 import { KeybindingRegistry } from './keybinding';
+import { MAIN_AREA_ID, TheiaDockPanel } from './shell/theia-dock-panel';
 
-/** Widget to be contained directly in a secondary window. */
-class SecondaryWindowRootWidget extends Widget {
+/** Widgets to be contained inside a DockPanel in the secondary window. */
+class SecondaryWindowDockPanelWidget extends SecondaryWindowRootWidget {
 
-    constructor() {
+    protected _widgets: Widget[] = [];
+    protected dockPanel: TheiaDockPanel;
+
+    constructor(
+        dockPanelFactory: TheiaDockPanel.Factory,
+        dockPanelRendererFactory: (document?: Document | ShadowRoot) => DockPanelRenderer,
+        closeHandler: (sender: TabBar<Widget>, args: TabBar.ITabCloseRequestedArgs<Widget>) => boolean,
+        secondaryWindow: Window
+    ) {
         super();
-        this.layout = new BoxLayout();
+        this.secondaryWindow = secondaryWindow;
+        const boxLayout = new BoxLayout();
+
+        // reuse same tab bar classes and dock panel id as main window to inherit styling
+        const renderer = dockPanelRendererFactory(secondaryWindow.document);
+        renderer.tabBarClasses.push(MAIN_BOTTOM_AREA_CLASS);
+        renderer.tabBarClasses.push(MAIN_AREA_CLASS);
+        this.dockPanel = dockPanelFactory({
+            disableDragAndDrop: true,
+            closeHandler,
+            mode: 'multiple-document',
+            renderer,
+        });
+        this.dockPanel.id = MAIN_AREA_ID;
+        BoxLayout.setStretch(this.dockPanel, 1);
+        boxLayout.addWidget(this.dockPanel);
+        this.layout = boxLayout;
+    }
+
+    override get widgets(): ReadonlyArray<Widget> {
+        return this._widgets;
     }
 
-    addWidget(widget: Widget): void {
-        (this.layout as BoxLayout).addWidget(widget);
-        BoxPanel.setStretch(widget, 1);
+    addWidget(widget: Widget, disposeCallback: () => void, options?: TheiaDockPanel.AddOptions): void {
+        this._widgets.push(widget);
+        this.dockPanel.addWidget(widget, options);
+
+        widget.disposed.connect(() => {
+            const index = this._widgets.indexOf(widget);
+            if (index > -1) {
+                this._widgets.splice(index, 1);
+            }
+            disposeCallback();
+        });
+
+        this.dockPanel.activateWidget(widget);
     }
 
+    override getTabBar(widget: Widget): TabBar<Widget> | undefined {
+        return this.dockPanel.findTabBar(widget.title);
+    }
 }
 
 /**
@@ -49,13 +91,18 @@ class SecondaryWindowRootWidget extends Widget {
 @injectable()
 export class SecondaryWindowHandler {
     /** List of widgets in secondary windows. */
-    protected readonly _widgets: ExtractableWidget[] = [];
+    protected readonly _widgets: Widget[] = [];
 
     protected applicationShell: ApplicationShell;
 
+    protected dockPanelRendererFactory: (document?: Document | ShadowRoot) => DockPanelRenderer;
+
     @inject(KeybindingRegistry)
     protected keybindings: KeybindingRegistry;
 
+    @inject(TheiaDockPanel.Factory)
+    protected dockPanelFactory: TheiaDockPanel.Factory;
+
     protected readonly onWillAddWidgetEmitter = new Emitter<[Widget, Window]>();
     /** Subscribe to get notified when a widget is added to this handler, i.e. the widget was moved to an secondary window . */
     readonly onWillAddWidget = this.onWillAddWidgetEmitter.event;
@@ -89,13 +136,17 @@ export class SecondaryWindowHandler {
      * Does nothing if this service has already been initialized.
      *
      * @param shell The `ApplicationShell` that widgets will be moved out from.
+     * @param dockPanelRendererFactory A factory function to create a `DockPanelRenderer` for use in secondary windows.
      */
-    init(shell: ApplicationShell): void {
+    init(shell: ApplicationShell, dockPanelRendererFactory: (document?: Document | ShadowRoot) => DockPanelRenderer): void {
         if (this.applicationShell) {
             // Already initialized
             return;
         }
         this.applicationShell = shell;
+        this.dockPanelRendererFactory = dockPanelRendererFactory;
+
+        this.secondaryWindowService.beforeWidgetRestore(([widget, window]) => this.removeWidget(widget, window));
     }
 
     /**
@@ -138,25 +189,24 @@ export class SecondaryWindowHandler {
             this.onWillAddWidgetEmitter.fire([widget, newWindow]);
 
             widget.secondaryWindow = newWindow;
-            const rootWidget = new SecondaryWindowRootWidget();
+            widget.previousArea = this.applicationShell.getAreaFor(widget);
+            const rootWidget: SecondaryWindowRootWidget = new SecondaryWindowDockPanelWidget(this.dockPanelFactory, this.dockPanelRendererFactory, this.onTabCloseRequested,
+                newWindow);
+            rootWidget.defaultRestoreArea = widget.previousArea;
             rootWidget.addClass('secondary-widget-root');
             rootWidget.addClass('monaco-workbench'); // needed for compatility with VSCode styles
             Widget.attach(rootWidget, element);
-            rootWidget.addWidget(widget);
+            if (isSecondaryWindow(newWindow)) {
+                newWindow.rootWidget = rootWidget;
+            }
+            rootWidget.addWidget(widget, () => {
+                this.onWidgetRemove(widget, newWindow, rootWidget);
+            });
             widget.show();
             widget.update();
 
             this.addWidget(widget, newWindow);
 
-            // Close the window if the widget is disposed, e.g. by a command closing all widgets.
-            widget.disposed.connect(() => {
-                this.onWillRemoveWidgetEmitter.fire([widget, newWindow]);
-                this.removeWidget(widget, newWindow);
-                if (!newWindow.closed) {
-                    newWindow.close();
-                }
-            });
-
             // debounce to avoid rapid updates while resizing the secondary window
             const updateWidget = debounce(() => {
                 rootWidget.update();
@@ -168,13 +218,60 @@ export class SecondaryWindowHandler {
         });
     }
 
+    private onWidgetRemove(widget: Widget, newWindow: Window, rootWidget: SecondaryWindowRootWidget): void {
+        // Close the window if the widget is disposed, e.g. by a command closing all widgets.
+        this.onWillRemoveWidgetEmitter.fire([widget, newWindow]);
+        this.removeWidget(widget, newWindow);
+        if (!newWindow.closed && rootWidget.widgets.length === 0) {
+            // no remaining widgets in window -> close the window
+            newWindow.close();
+        }
+
+    }
+
+    addWidgetToSecondaryWindow(widget: Widget, secondaryWindow: Window, options?: TheiaDockPanel.AddOptions): void {
+        const rootWidget = isSecondaryWindow(secondaryWindow) ? secondaryWindow.rootWidget : undefined;
+        if (!rootWidget) {
+            console.error('Given secondary window no known root.');
+            return;
+        }
+
+        // we allow to add any widget to an existing secondary window unless it is marked as not extractable or is already extracted
+        if (ExtractableWidget.is(widget)) {
+            if (!widget.isExtractable) {
+                console.error('Widget is not extractable.', widget.id);
+                return;
+            }
+            if (widget.secondaryWindow !== undefined) {
+                console.error('Widget is extracted already.', widget.id);
+                return;
+            }
+            widget.secondaryWindow = secondaryWindow;
+            widget.previousArea = this.applicationShell.getAreaFor(widget);
+        }
+
+        rootWidget.addWidget(widget, () => {
+            this.onWidgetRemove(widget, secondaryWindow, rootWidget);
+        }, options);
+        widget.show();
+        widget.update();
+        this.addWidget(widget, secondaryWindow);
+        widget.activate();
+    }
+
+    onTabCloseRequested(_sender: TabBar<Widget>, _args: TabBar.ITabCloseRequestedArgs<Widget>): boolean {
+        // return false to keep default behavior
+        // override this method if you want to move tabs back instead of closing them
+        return false;
+    }
+
     /**
      * If the given widget is tracked by this handler, activate it and focus its secondary window.
      *
      * @param widgetId The widget to activate specified by its id
      * @returns The activated `ExtractableWidget` or `undefined` if the given widget id is unknown to this handler.
      */
-    activateWidget(widgetId: string): ExtractableWidget | undefined {
+    activateWidget(widgetId: string): ExtractableWidget | Widget | undefined {
         const trackedWidget = this.revealWidget(widgetId);
         trackedWidget?.activate();
         return trackedWidget;
@@ -186,30 +283,93 @@ export class SecondaryWindowHandler {
      * @param widgetId The widget to reveal specified by its id
      * @returns The revealed `ExtractableWidget` or `undefined` if the given widget id is unknown to this handler.
      */
-    revealWidget(widgetId: string): ExtractableWidget | undefined {
+    revealWidget(widgetId: string): ExtractableWidget | Widget | undefined {
         const trackedWidget = this._widgets.find(w => w.id === widgetId);
         if (trackedWidget && this.getFocusedWindow()) {
-            this.secondaryWindowService.focus(trackedWidget.secondaryWindow!);
+            if (ExtractableWidget.is(trackedWidget)) {
+                this.secondaryWindowService.focus(trackedWidget.secondaryWindow!);
+                return trackedWidget;
+            } else {
+                const window = extractSecondaryWindow(trackedWidget);
+                if (window) {
+                    this.secondaryWindowService.focus(window);
+                    return trackedWidget;
+                }
+            }
         }
-        return trackedWidget;
+        return undefined;
     }
 
     getFocusedWindow(): Window | undefined {
         return window.document.hasFocus() ? window : this.secondaryWindowService.getWindows().find(candidate => candidate.document.hasFocus());
     }
 
-    protected addWidget(widget: ExtractableWidget, win: Window): void {
+    protected addWidget(widget: Widget, win: Window): void {
         if (!this._widgets.includes(widget)) {
             this._widgets.push(widget);
             this.onDidAddWidgetEmitter.fire([widget, win]);
         }
     }
 
-    protected removeWidget(widget: ExtractableWidget, win: Window): void {
+    protected removeWidget(widget: Widget, win: Window): void {
         const index = this._widgets.indexOf(widget);
         if (index > -1) {
             this._widgets.splice(index, 1);
             this.onDidRemoveWidgetEmitter.fire([widget, win]);
         }
     }
+
+    getTabBarFor(widget: Widget): TabBar<Widget> | undefined {
+        const secondaryWindowRootWidget = extractSecondaryWindowRootWidget(widget);
+        if (secondaryWindowRootWidget && secondaryWindowRootWidget.getTabBar) {
+            return secondaryWindowRootWidget.getTabBar(widget);
+        }
+        return undefined;
+    }
+
+}
+
+export function getDefaultRestoreArea(window: Window): ApplicationShell.Area | undefined {
+    if (isSecondaryWindow(window) && window.rootWidget !== undefined) {
+        return window.rootWidget.defaultRestoreArea;
+    }
+    return undefined;
+}
+
+export function getAllWidgetsFromSecondaryWindow(window: Window): ReadonlyArray<Widget> | undefined {
+    if (isSecondaryWindow(window) && window.rootWidget !== undefined) {
+        return window.rootWidget.widgets;
+    }
+    return undefined;
+}
+
+export function extractSecondaryWindowRootWidget(widget: Widget | undefined | null): SecondaryWindowRootWidget | undefined {
+    if (!widget) {
+        return undefined;
+    }
+    //  check two levels of parent hierarchy, usually a root widget would have nested layout widget
+    if (widget.parent instanceof SecondaryWindowRootWidget) {
+        return widget.parent;
+    }
+    if (widget.parent?.parent instanceof SecondaryWindowRootWidget) {
+        return widget.parent.parent;
+    }
+}
+
+export function extractSecondaryWindow(widget: Widget | undefined | null): Window | undefined {
+    if (!widget) {
+        return undefined;
+    }
+    if (ExtractableWidget.is(widget)) {
+        return widget.secondaryWindow;
+    }
+    if (widget instanceof SecondaryWindowRootWidget) {
+        return widget.secondaryWindow;
+    }
+    const secondaryWindowRootWidget = extractSecondaryWindowRootWidget(widget);
+    if (secondaryWindowRootWidget) {
+        return secondaryWindowRootWidget.secondaryWindow;
+    }
+
+    return undefined;
 }

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

@@ -35,12 +35,12 @@ import { TabBarToolbarRegistry, TabBarToolbarFactory } from './tab-bar-toolbar';
 import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
 import { waitForRevealed, waitForClosed, PINNED_CLASS, UnsafeWidgetUtilities } from '../widgets';
-import { CorePreferences } from '../core-preferences';
+import { CorePreferences } from '../../common/core-preferences';
 import { BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { Deferred } from '../../common/promise-util';
 import { SaveableService } from '../saveable-service';
 import { nls } from '../../common/nls';
-import { SecondaryWindowHandler } from '../secondary-window-handler';
+import { extractSecondaryWindow, SecondaryWindowHandler } from '../secondary-window-handler';
 import URI from '../../common/uri';
 import { OpenerService } from '../opener-service';
 import { PreviewableWidget } from '../widgets/previewable-widget';
@@ -78,7 +78,7 @@ export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 5.0;
 export const ApplicationShellOptions = Symbol('ApplicationShellOptions');
 export const DockPanelRendererFactory = Symbol('DockPanelRendererFactory');
 export interface DockPanelRendererFactory {
-    (): DockPanelRenderer
+    (document?: Document | ShadowRoot): DockPanelRenderer
 }
 
 /**
@@ -88,6 +88,12 @@ export interface DockPanelRendererFactory {
 export class DockPanelRenderer implements DockLayout.IRenderer {
     readonly tabBarClasses: string[] = [];
 
+    /**
+     * In case of DockPanels rendered in secondary windows, will be set
+     * to the document of that window
+     */
+    document?: Document | ShadowRoot;
+
     private readonly onDidCreateTabBarEmitter = new Emitter<TabBar<Widget>>();
 
     constructor(
@@ -95,7 +101,7 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
         @inject(TabBarToolbarRegistry) protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
         @inject(TabBarToolbarFactory) protected readonly tabBarToolbarFactory: TabBarToolbarFactory,
         @inject(BreadcrumbsRendererFactory) protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
-        @inject(CorePreferences) protected readonly corePreferences: CorePreferences
+        @inject(CorePreferences) protected readonly corePreferences: CorePreferences,
     ) { }
 
     get onDidCreateTabBar(): CommonEvent<TabBar<Widget>> {
@@ -120,6 +126,7 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
             this.tabBarToolbarFactory,
             this.breadcrumbsRendererFactory,
             {
+                document: this.document,
                 renderer
             },
             {
@@ -366,7 +373,7 @@ export class ApplicationShell extends Widget {
         this.rightPanelHandler.dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         this.rightPanelHandler.dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
 
-        this.secondaryWindowHandler.init(this);
+        this.secondaryWindowHandler.init(this, this.dockPanelRendererFactory);
         this.secondaryWindowHandler.onDidAddWidget(([widget, window]) => this.fireDidAddWidget(widget));
         this.secondaryWindowHandler.onDidRemoveWidget(([widget, window]) => this.fireDidRemoveWidget(widget));
 
@@ -990,8 +997,19 @@ export class ApplicationShell extends Widget {
                 this.rightPanelHandler.addWidget(widget, sidePanelOptions);
                 break;
             case 'secondaryWindow':
-                /** At the moment, widgets are only moved to this area (i.e. a secondary window) by moving them from one of the other areas. */
-                throw new Error('Widgets cannot be added directly to a secondary window');
+                const secondaryWindow = extractSecondaryWindow(addOptions.ref);
+                if (secondaryWindow) {
+                    this.secondaryWindowHandler.addWidgetToSecondaryWindow(widget, secondaryWindow, addOptions);
+                } else {
+                    // Fall back to adding widgets to the main area. This is preferred to throwing an error, because toolbar actions on secondary windows/commands
+                    // may e.g. open further editors, e.g. a markdown preview.
+                    this.mainPanel.addWidget(widget, {
+                        ...addOptions,
+                        ref: undefined
+                    });
+                }
+
+                break;
             default:
                 throw new Error('Unexpected area: ' + options?.area);
         }
@@ -1399,22 +1417,23 @@ export class ApplicationShell extends Widget {
         this.toDisposeOnActivationCheck.push(Disposable.create(() => widget.disposed.disconnect(onDispose)));
 
         let start = 0;
-        const step: FrameRequestCallback = timestamp => {
+        const step: FrameRequestCallback = () => {
             const activeElement = widget.node.ownerDocument.activeElement;
             if (activeElement && widget.node.contains(activeElement)) {
                 return;
             }
+            const now = Date.now();
             if (!start) {
-                start = timestamp;
+                start = now;
             }
-            const delta = timestamp - start;
+            const delta = now - start;
             if (delta < this.activationTimeout) {
-                request = window.requestAnimationFrame(step);
+                request = setTimeout(step, 0);
             } else {
                 console.warn(`Widget was activated, but did not accept focus after ${this.activationTimeout}ms: ${widget.id}`);
             }
         };
-        let request = window.requestAnimationFrame(step);
+        let request = setTimeout(step, 0);
         this.toDisposeOnActivationCheck.push(Disposable.create(() => window.cancelAnimationFrame(request)));
     }
 
@@ -1846,7 +1865,7 @@ export class ApplicationShell extends Widget {
                 case 'right':
                     return this.rightPanelHandler.tabBar;
                 case 'secondaryWindow':
-                    // Secondary windows don't have a tab bar
+                    // there may be multiple secondary windows, so we can't return a single tabbar here
                     return undefined;
                 default:
                     throw new Error('Illegal argument: ' + widgetOrArea);
@@ -1873,6 +1892,10 @@ export class ApplicationShell extends Widget {
         if (ArrayExt.firstIndexOf(rightPanelTabBar.titles, widgetTitle) > -1) {
             return rightPanelTabBar;
         }
+        const secondaryWindowTabBar = this.secondaryWindowHandler.getTabBarFor(widget);
+        if (secondaryWindowTabBar) {
+            return secondaryWindowTabBar;
+        }
         return undefined;
     }
 

package/src/browser/shell/shell-layout-restorer.ts

@@ -111,6 +111,19 @@ export interface ApplicationShellLayoutMigration {
     onWillInflateWidget?(desc: WidgetDescription, context: ApplicationShellLayoutMigrationContext): MaybePromise<WidgetDescription | undefined>;
 }
 
+export const ShellLayoutTransformer = Symbol('ShellLayoutTransformer');
+/**
+ * This contribution point allows arbitrary modifications to the shell layout
+ * data when it is restored.
+ */
+export interface ShellLayoutTransformer {
+    /**
+     * Modifies the shell layout data before it is restored.
+     * @param layoutData
+     */
+    transformLayoutOnRestore(layoutData: ApplicationShell.LayoutData): void;
+}
+
 export const RESET_LAYOUT = Command.toLocalizedCommand({
     id: 'reset.layout',
     category: CommonCommands.VIEW_CATEGORY,
@@ -124,6 +137,7 @@ export class ShellLayoutRestorer implements CommandContribution {
     protected shouldStoreLayout: boolean = true;
 
     @inject(ContributionProvider) @named(ApplicationShellLayoutMigration) protected readonly migrations: ContributionProvider<ApplicationShellLayoutMigration>;
+    @inject(ContributionProvider) @named(ShellLayoutTransformer) protected readonly transformations: ContributionProvider<ShellLayoutTransformer>;
     @inject(WindowService) protected readonly windowService: WindowService;
     @inject(ThemeService) protected readonly themeService: ThemeService;
 
@@ -172,6 +186,7 @@ export class ShellLayoutRestorer implements CommandContribution {
             return false;
         }
         const layoutData = await this.inflate(serializedLayoutData);
+        this.transformations.getContributions().forEach(transformation => transformation.transformLayoutOnRestore(layoutData));
         await app.shell.setLayoutData(layoutData);
         this.logger.info('<<< The layout has been successfully restored.');
         return true;