@theia/core 1.74.0 → 1.74.1

package/src/browser/tree/tree-consistency.spec.ts

@@ -21,6 +21,10 @@ import { TreeImpl, CompositeTreeNode, TreeNode } from './tree';
 import { TreeModel } from './tree-model';
 import { ExpandableTreeNode } from './tree-expansion';
 import { TreeLabelProvider } from './tree-label-provider';
+import { MockTreeModel } from './test/mock-tree-model';
+import { MockLogger } from '../../common/test/mock-logger';
+import { ILogger } from '../../common';
+import { Deferred, timeout } from '../../common/promise-util';
 
 @injectable()
 class ConsistencyTestTree extends TreeImpl {
@@ -69,6 +73,48 @@ function createConsistencyTestRoot(rootName: string): CompositeTreeNode {
     return root;
 }
 
+/**
+ * A `TreeImpl` whose `resolveChildren` can be stalled or overridden per node id, to
+ * simulate slow child resolution (e.g. a file system request) in tests.
+ */
+@injectable()
+class StallingTestTree extends TreeImpl {
+
+    protected readonly stalled = new Map<string, Deferred<TreeNode[]>>();
+    protected readonly overrides = new Map<string, () => TreeNode[]>();
+
+    /**
+     * Stall the *next* `resolveChildren` for `id` on the returned deferred. Later
+     * resolutions for the same id proceed normally, so the stall cannot leak into
+     * unrelated refreshes (e.g. the cascade of a newly set root).
+     */
+    stallNextResolve(id: string): Deferred<TreeNode[]> {
+        const gate = new Deferred<TreeNode[]>();
+        this.stalled.set(id, gate);
+        return gate;
+    }
+
+    /** Make the *next* `resolveChildren` for `id` return `children()` instead of the current child nodes. */
+    overrideNextResolve(id: string, children: () => TreeNode[]): void {
+        this.overrides.set(id, children);
+    }
+
+    protected override resolveChildren(parent: CompositeTreeNode): Promise<TreeNode[]> {
+        const gate = this.stalled.get(parent.id);
+        if (gate) {
+            this.stalled.delete(parent.id);
+            return gate.promise;
+        }
+        const override = this.overrides.get(parent.id);
+        if (override) {
+            this.overrides.delete(parent.id);
+            return Promise.resolve(override());
+        }
+        return super.resolveChildren(parent);
+    }
+
+}
+
 describe('Tree Consistency', () => {
 
     it('setting different tree roots should finish', async () => {
@@ -102,4 +148,77 @@ describe('Tree Consistency', () => {
         assert.ok(false, 'Resolving does not stop, attempts: ' + tree.resolveCounter);
     });
 
+    describe('stale refreshes', () => {
+
+        let tree: StallingTestTree;
+        let model: TreeModel;
+        let loggedErrors: unknown[][];
+
+        beforeEach(async () => {
+            const container = createTreeTestContainer();
+            container.bind(StallingTestTree).toSelf();
+            container.rebind(TreeImpl).toService(StallingTestTree);
+            tree = container.get(StallingTestTree);
+            model = container.get<TreeModel>(TreeModel);
+            loggedErrors = [];
+            const logger = container.get<MockLogger>(ILogger);
+            logger.error = async (...args: unknown[]) => { loggedErrors.push(args); };
+            model.root = MockTreeModel.HIERARCHICAL_MOCK_ROOT();
+            // let the refresh cascade triggered by setting the root settle
+            await timeout(0);
+        });
+
+        it('drops an in-flight refresh when the root is replaced meanwhile', async () => {
+            const stale = model.getNode('1.2') as CompositeTreeNode;
+            const gate = tree.stallNextResolve('1.2');
+            const pendingRefresh = tree.refresh(stale);
+
+            model.root = MockTreeModel.HIERARCHICAL_MOCK_ROOT();
+            gate.resolve(Array.from(stale.children));
+
+            assert.strictEqual(await pendingRefresh, undefined);
+            assert.deepStrictEqual(loggedErrors, []);
+            const fresh = model.getNode('1.2');
+            assert.ok(fresh);
+            assert.notStrictEqual(fresh, stale);
+        });
+
+        it('does not resurrect a removed subtree when a stale refresh completes', async () => {
+            const target = model.getNode('1.2') as CompositeTreeNode;
+            const gate = tree.stallNextResolve('1.2');
+            const pendingRefresh = tree.refresh(target);
+
+            CompositeTreeNode.removeChild(target.parent as CompositeTreeNode, target, tree);
+            assert.strictEqual(model.getNode('1.2'), undefined);
+            gate.resolve(Array.from(target.children));
+
+            assert.strictEqual(await pendingRefresh, undefined);
+            assert.strictEqual(model.getNode('1.2'), undefined);
+            assert.strictEqual(model.getNode('1.2.1'), undefined);
+        });
+
+        it('does not re-index a node object that a concurrent ancestor refresh replaced', async () => {
+            const stale = model.getNode('1.2') as CompositeTreeNode;
+            const gate = tree.stallNextResolve('1.2');
+            const pendingRefresh = tree.refresh(stale);
+
+            // an ancestor refresh yields a *fresh* object for the same id, as trees whose
+            // `resolveChildren` builds new nodes do
+            const parent = model.getNode('1') as CompositeTreeNode;
+            const replacement: CompositeTreeNode = { id: '1.2', name: '1.2', parent, children: [] };
+            tree.overrideNextResolve('1', () => parent.children.map(child => child.id === '1.2' ? replacement : child));
+            await tree.refresh(parent);
+            assert.strictEqual(model.getNode('1.2'), replacement);
+
+            gate.resolve(Array.from(stale.children));
+
+            assert.strictEqual(await pendingRefresh, undefined);
+            assert.deepStrictEqual(loggedErrors, []);
+            // the stale object must not take the replacement's place in the index, nor bring its children back
+            assert.strictEqual(model.getNode('1.2'), replacement);
+            assert.strictEqual(model.getNode('1.2.1'), undefined);
+        });
+
+    });
+
 });

package/src/browser/tree/tree.ts

@@ -354,6 +354,12 @@ export class TreeImpl implements Tree {
                 result = parent;
                 const children = await this.resolveChildren(parent);
                 if (cancellationToken?.isCancellationRequested) { return; }
+                if (this.validateNode(parent) !== parent) {
+                    // the tree changed while children were being resolved (e.g. a new root was
+                    // set or the node was removed): drop the stale refresh
+                    this.logger.debug(`Refresh of node '${parent.id}' dropped, it no longer belongs to the tree.`);
+                    return undefined;
+                }
                 result = await this.setChildren(parent, children);
                 if (cancellationToken?.isCancellationRequested) { return; }
             } finally {

package/src/browser/widgets/select-component.tsx

@@ -61,6 +61,10 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
     protected optimalWidth = 0;
     protected optimalHeight = 0;
     protected resizeObserver: ResizeObserver | undefined;
+    /** Window the scroll/wheel/resize listeners are attached to; may differ from the main window in secondary windows. */
+    protected listenersWindow: Window | undefined;
+    /** Perfect-scrollbar ancestors the `ps-scroll-y` listener was attached to. The field may have moved to another window since, so the elements are remembered. */
+    protected psScrollListenerTargets: HTMLElement[] = [];
 
     constructor(props: SelectComponentProps) {
         super(props);
@@ -71,14 +75,28 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             hover: selected
         };
 
-        let list = document.getElementById(SELECT_COMPONENT_CONTAINER);
+        this.dropdownElement = this.resolveDropdownContainer(document);
+    }
+
+    /**
+     * The document that currently hosts this component. Falls back to the main document before
+     * the first render. Widgets can be moved to secondary windows, so this must be re-queried
+     * instead of captured once.
+     */
+    protected getHostDocument(): Document {
+        return this.fieldRef.current?.ownerDocument ?? document;
+    }
+
+    /** Finds or creates the dropdown portal container in the given document. */
+    protected resolveDropdownContainer(hostDocument: Document): HTMLElement {
+        let list = hostDocument.getElementById(SELECT_COMPONENT_CONTAINER);
         if (!list) {
-            list = document.createElement('div');
+            list = hostDocument.createElement('div');
             list.id = SELECT_COMPONENT_CONTAINER;
             list.className = 'theia-select-component-container';
-            document.body.appendChild(list);
+            hostDocument.body.appendChild(list);
         }
-        this.dropdownElement = list;
+        return list;
     }
 
     protected getInitialSelectedIndex(props: SelectComponentProps): number {
@@ -179,12 +197,14 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             // neither triggers the `scroll`, `wheel` nor `blur` event
             if (parent.classList.contains('ps')) {
                 parent.addEventListener('ps-scroll-y', hide);
+                this.psScrollListenerTargets.push(parent);
             }
             parent = parent.parentElement;
         }
 
+        this.listenersWindow = this.getHostDocument().defaultView ?? window;
         for (const [key, listener] of this.mountedListeners.entries()) {
-            window.addEventListener(key, listener);
+            this.listenersWindow.addEventListener(key, listener);
         }
 
         // Catch Lumino sash drags globally - observe the closest lm-Widget panel
@@ -222,18 +242,24 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
     }
 
     override componentWillUnmount(): void {
+        this.detachListeners();
+    }
+
+    protected detachListeners(): void {
         this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
         if (this.mountedListeners.size > 0) {
             const eventListener = this.mountedListeners.get('scroll')!;
-            let parent = this.fieldRef.current?.parentElement;
-            while (parent) {
-                parent.removeEventListener('ps-scroll-y', eventListener);
-                parent = parent.parentElement;
+            for (const target of this.psScrollListenerTargets) {
+                target.removeEventListener('ps-scroll-y', eventListener);
             }
             for (const [key, listener] of this.mountedListeners.entries()) {
-                window.removeEventListener(key, listener);
+                (this.listenersWindow ?? window).removeEventListener(key, listener);
             }
+            this.mountedListeners.clear();
         }
+        this.psScrollListenerTargets = [];
+        this.listenersWindow = undefined;
     }
 
     override render(): React.ReactNode {
@@ -345,6 +371,14 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             return;
         }
         if (!this.state.dimensions) {
+            // Re-resolve the portal container and listener window against the document that
+            // currently hosts the field: the widget may have been moved to a secondary window
+            // (or back to the main window) since the last time the dropdown was opened.
+            const hostDocument = this.getHostDocument();
+            this.dropdownElement = this.resolveDropdownContainer(hostDocument);
+            if (this.listenersWindow && this.listenersWindow !== hostDocument.defaultView) {
+                this.detachListeners();
+            }
             const rect = this.fieldRef.current.getBoundingClientRect();
             this.setState({ dimensions: rect });
         } else {
@@ -361,7 +395,8 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             hover: selectedIndex
         });
         // Force releasing focus of the select element to allow closing via escape later on
-        if (releaseFocus && document.activeElement && document.activeElement === this.fieldRef.current) {
+        const hostDocument = this.getHostDocument();
+        if (releaseFocus && hostDocument.activeElement && hostDocument.activeElement === this.fieldRef.current) {
             this.fieldRef.current.blur();
         }
     }
@@ -371,7 +406,9 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             return;
         }
 
-        const shellArea = document.getElementById('theia-app-shell')!.getBoundingClientRect();
+        // Secondary windows have no 'theia-app-shell' element; use the document element as the boundary there.
+        const hostDocument = this.getHostDocument();
+        const shellArea = (hostDocument.getElementById('theia-app-shell') ?? hostDocument.documentElement).getBoundingClientRect();
         const maxWidth = this.alignLeft ? shellArea.width - this.state.dimensions.left : this.state.dimensions.right;
         if (this.mountedListeners.size === 0) {
             // Only attach our listeners once we render our dropdown menu

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

@@ -28,6 +28,8 @@ import { WindowFocusService } from './window-focus-service';
 export class DefaultSecondaryWindowService implements SecondaryWindowService {
     protected readonly onWindowOpenedEmitter = new Emitter<Window>;
     readonly onWindowOpened: Event<Window> = this.onWindowOpenedEmitter.event;
+    protected readonly onWindowLoadedEmitter = new Emitter<Window>;
+    readonly onWindowLoaded: Event<Window> = this.onWindowLoadedEmitter.event;
     protected readonly onWindowClosedEmitter = new Emitter<Window>;
     readonly onWindowClosed: Event<Window> = this.onWindowClosedEmitter.event;
     protected readonly beforeWidgetRestoreEmitter = new Emitter<[Widget, Window]>;
@@ -110,6 +112,10 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
             this.secondaryWindows.push(newWindow);
             this.onWindowOpenedEmitter.fire(newWindow);
             newWindow.addEventListener('DOMContentLoaded', () => {
+                // This fires for the final secondary-window.html document, not for the initial
+                // about:blank document the window starts out with, so onWindowLoaded listeners
+                // can safely modify the document.
+                this.onWindowLoadedEmitter.fire(newWindow);
                 const focusRegistration = this.windowFocusService.registerWindow(newWindow);
                 newWindow.addEventListener('beforeunload', evt => {
                     const widgets = getAllWidgetsFromSecondaryWindow(newWindow) ?? [widget];
@@ -124,7 +130,7 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
                     }
                 }, { capture: true });
 
-                newWindow.addEventListener('unload', () => {
+                newWindow.addEventListener('pagehide', () => {
                     focusRegistration.dispose();
                     const extIndex = this.secondaryWindows.indexOf(newWindow);
                     if (extIndex > -1) {
@@ -140,7 +146,7 @@ export class DefaultSecondaryWindowService implements SecondaryWindowService {
     }
 
     protected windowCreated(newWindow: Window, widget: ExtractableWidget, shell: ApplicationShell): void {
-        newWindow.addEventListener('unload', () => {
+        newWindow.addEventListener('pagehide', () => {
             this.restoreWidgets(newWindow, widget, shell);
         });
     }

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

@@ -77,4 +77,26 @@ describe('DefaultWindowService', () => {
         assert(windowService['collectContributionUnloadVetoes']().length > 0, 'there should be vetoes');
         assert(frontendContributions.every(contribution => contribution.onWillStopCalled), 'contributions should have been called');
     });
+    it('should reload unconditionally when restored from the back/forward cache', () => {
+        const frontendContributions: TestFrontendApplicationContribution[] = [
+            new TestFrontendApplicationContribution(true),
+        ];
+        const windowService = setupWindowService('always', frontendContributions);
+        let reloaded = 0;
+        windowService.reload = () => { reloaded++; };
+        windowService['handlePageShow']({ persisted: false } as PageTransitionEvent);
+        const reloadsBeforeRestore = reloaded;
+        windowService['handlePageShow']({ persisted: true } as PageTransitionEvent);
+        assert(reloadsBeforeRestore === 0, 'a regular page show should not reload');
+        assert(reloaded === 1, 'a restored page should reload');
+        assert(windowService['collectContributionUnloadVetoes']().length === 0, 'the recovery reload should not be vetoed');
+    });
+    it('onUnload should fire at most once, even if `pagehide` fires repeatedly', () => {
+        const windowService = setupWindowService('never', []);
+        let fired = 0;
+        windowService.onUnload(() => fired++);
+        windowService['handlePageHide']();
+        windowService['handlePageHide']();
+        assert(fired === 1, `onUnload should have fired once, but fired ${fired} time(s)`);
+    });
 });

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

@@ -30,6 +30,7 @@ export class DefaultWindowService implements WindowService, FrontendApplicationC
 
     protected frontendApplication: FrontendApplication;
     protected allowVetoes = true;
+    protected unloaded = false;
 
     protected onUnloadEmitter = new Emitter<void>();
     get onUnload(): Event<void> {
@@ -103,12 +104,43 @@ export class DefaultWindowService implements WindowService, FrontendApplicationC
      * Implement the mechanism to detect unloading of the page.
      */
     protected registerUnloadListeners(): void {
+        // If `beforeunload` is cancelled and the user stays, the page is not unloaded, so `pagehide` is not fired.
         window.addEventListener('beforeunload', event => this.handleBeforeUnloadEvent(event));
-        // In a browser, `unload` is correctly fired when the page unloads, unlike Electron.
-        // If `beforeunload` is cancelled, the user will be prompted to leave or stay.
-        // If the user stays, the page won't be unloaded, so `unload` is not fired.
-        // If the user leaves, the page will be unloaded, so `unload` is fired.
-        window.addEventListener('unload', () => this.onUnloadEmitter.fire());
+        this.registerPageHideListener();
+        window.addEventListener('pageshow', event => this.handlePageShow(event));
+    }
+
+    /**
+     * `pagehide` is used instead of the deprecated `unload` event, which Chrome may block
+     * via permissions policy (https://developer.chrome.com/docs/web-platform/deprecating-unload),
+     * silently skipping the handler and thus e.g. losing the layout.
+     */
+    protected registerPageHideListener(): void {
+        window.addEventListener('pagehide', () => this.handlePageHide());
+    }
+
+    /**
+     * `pagehide` also fires when the page enters the back/forward cache, in which case the frontend
+     * has already shut down (state saved, connections closed). Reload to get a working application
+     * again if the page is restored from the cache. That shutdown already happened, so the reload
+     * must not be vetoed by the contributions.
+     */
+    protected handlePageShow(event: PageTransitionEvent): void {
+        if (event.persisted) {
+            this.setSafeToShutDown();
+            this.reload();
+        }
+    }
+
+    /**
+     * Fires {@link onUnload} at most once per document: `pagehide` fires again for the reload that
+     * recovers a page restored from the back/forward cache, but the application is already stopped.
+     */
+    protected handlePageHide(): void {
+        if (!this.unloaded) {
+            this.unloaded = true;
+            this.onUnloadEmitter.fire();
+        }
     }
 
     async isSafeToShutDown(stopReason: StopReason): Promise<boolean> {

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

@@ -55,6 +55,13 @@ export interface SecondaryWindowService {
      */
     createSecondaryWindow(widget: ExtractableWidget, shell: ApplicationShell): SecondaryWindow | Window | undefined;
     readonly onWindowOpened: Event<Window>;
+    /**
+     * Emitted once a secondary window's final document has finished loading. Listeners can safely
+     * modify the window's document, unlike with {@link onWindowOpened}: at that point the window
+     * still shows the initial `about:blank` document, and anything added to it is discarded when
+     * the final document replaces it.
+     */
+    readonly onWindowLoaded: Event<Window>;
     readonly onWindowClosed: Event<Window>;
     readonly beforeWidgetRestore: Event<[Widget, Window]>;
 

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

@@ -56,7 +56,7 @@ export interface WindowService {
     focus(): void;
 
     /**
-     * Fires when the `window` unloads. The unload event is inevitable. On this event, the frontend application can save its state and release resource.
+     * Fires when the application is shutting down. On this event, the frontend application can save its state and release resource.
      * Saving the state and releasing any resources must be a synchronous call. Any asynchronous calls invoked after emitting this event might be ignored.
      */
     readonly onUnload: Event<void>;

package/src/electron-browser/menu/electron-menu-contribution.ts

@@ -139,7 +139,7 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
         const disposeHandler = window.electronTheiaCore.onWindowEvent('focus', () => {
             this.setMenu(app);
         });
-        window.addEventListener('unload', () => disposeHandler.dispose());
+        window.addEventListener('pagehide', () => disposeHandler.dispose());
     }
 
     protected attachMenuBarVisibilityListener(): void {

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

@@ -61,7 +61,7 @@ export class ElectronSecondaryWindowService extends DefaultSecondaryWindowServic
             for (let i = this.secondaryWindows.length - 1; i >= 0; i--) {
                 const windowClosed = new Deferred<void>();
                 const win = this.secondaryWindows[i];
-                win.addEventListener('unload', () => {
+                win.addEventListener('pagehide', () => {
                     windowClosed.resolve();
                 });
                 promises.push(windowClosed.promise);

package/src/electron-browser/window/electron-window-service.ts

@@ -89,9 +89,9 @@ export class ElectronWindowService extends DefaultWindowService {
             }
             return willShutDown;
         });
-        window.addEventListener('unload', () => {
-            this.onUnloadEmitter.fire();
-        });
+        // Intentionally not calling `super`: in Electron the close request handler above takes the role of
+        // `beforeunload`, and there is no back/forward cache, so only the `pagehide` listener is shared.
+        this.registerPageHideListener();
     }
 
     /**