@theia/plugin-ext 1.53.2 → 1.55.0-next.14

package/src/main/browser/notebooks/renderers/output-webview-internal.ts

@@ -74,6 +74,12 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
     const theia = acquireVsCodeApi();
     const renderFallbackErrorName = 'vscode.fallbackToNextRenderer';
 
+    document.body.style.overflow = 'hidden';
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.classList.add('widgetarea');
+    document.body.appendChild(container);
+
     function createEmitter<T>(listenerChange: (listeners: Set<Listener<T>>) => void = () => undefined): EmitterLike<T> {
         const listeners = new Set<Listener<T>>();
         return {
@@ -138,19 +144,124 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         return module.activate(createKernelContext());
     }
 
-    class Output {
+    class OutputCell {
+        readonly element: HTMLElement;
+        readonly outputElements: OutputContainer[] = [];
+
+        constructor(public cellHandle: number, cellIndex?: number) {
+            this.element = document.createElement('div');
+            this.element.style.outline = '0';
+
+            this.element.id = `cellHandle${cellHandle}`;
+            this.element.classList.add('cell_container');
+
+            this.element.addEventListener('focusin', e => {
+                theia.postMessage({ type: 'cellFocusChanged', cellHandle: cellHandle });
+            });
+
+            if (cellIndex && cellIndex < container.children.length) {
+                container.insertBefore(this.element, container.children[cellIndex]);
+            } else {
+                container.appendChild(this.element);
+            }
+            this.element = this.element;
+
+            theia.postMessage({ type: 'cellHeightRequest', cellHandle: cellHandle });
+        }
+
+        public dispose(): void {
+            this.element.remove();
+        }
+
+        calcTotalOutputHeight(): number {
+            return this.outputElements.reduce((acc, output) => acc + output.element.clientHeight, 0) + 5;
+        }
+
+        createOutputElement(index: number, output: webviewCommunication.Output, items: rendererApi.OutputItem[]): OutputContainer {
+            let outputContainer = this.outputElements.find(o => o.outputId === output.id);
+            if (!outputContainer) {
+                outputContainer = new OutputContainer(output, items, this);
+                this.element.appendChild(outputContainer.containerElement);
+                this.outputElements.splice(index, 0, outputContainer);
+            }
+
+            return outputContainer;
+        }
+
+        public clearOutputs(start: number, deleteCount: number): void {
+            for (const output of this.outputElements.splice(start, deleteCount)) {
+                output?.clear();
+                output.containerElement.remove();
+            }
+        }
+
+        public show(outputId: string, top: number): void {
+            const outputContainer = this.outputElements.find(o => o.outputId === outputId);
+            if (!outputContainer) {
+                return;
+            }
+        }
+
+        public hide(): void {
+            this.element.style.visibility = 'hidden';
+        }
+
+        public updateCellHeight(cellKind: number, height: number): void {
+            let additionalHeight = 54.5;
+            additionalHeight -= cells[0] === this ? 2.5 : 0; // first cell
+            additionalHeight -= this.outputElements.length ? 0 : 5.5; // no outputs
+            this.element.style.paddingTop = `${height + additionalHeight}px`;
+        }
+
+        public outputVisibilityChanged(visible: boolean): void {
+            this.outputElements.forEach(output => {
+                output.element.style.display = visible ? 'initial' : 'none';
+            });
+            if (visible) {
+                this.element.getElementsByClassName('output-hidden')?.[0].remove();
+            } else {
+                const outputHiddenElement = document.createElement('div');
+                outputHiddenElement.classList.add('output-hidden');
+                outputHiddenElement.style.height = '16px';
+                this.element.appendChild(outputHiddenElement);
+            }
+        }
+
+        // public updateScroll(request: webviewCommunication.IContentWidgetTopRequest): void {
+        //     this.element.style.top = `${request.cellTop}px`;
+
+        //     const outputElement = this.outputElements.get(request.outputId);
+        //     if (outputElement) {
+        //         outputElement.updateScroll(request.outputOffset);
+
+        //         if (request.forceDisplay && outputElement.element) {
+        //             // TODO @rebornix @mjbvz, there is a misalignment here.
+        //             // We set output visibility on cell container, other than output container or output node itself.
+        //             outputElement.element.style.visibility = '';
+        //         }
+        //     }
+
+        //     if (request.forceDisplay) {
+        //         this.element.style.visibility = '';
+        //     }
+    }
+
+    const cells: OutputCell[] = [];
+
+    class OutputContainer {
         readonly outputId: string;
+        readonly cellId: string;
         renderedItem?: rendererApi.OutputItem;
         allItems: rendererApi.OutputItem[];
 
         renderer: Renderer;
 
         element: HTMLElement;
-        container: HTMLElement;
+        containerElement: HTMLElement;
 
-        constructor(output: webviewCommunication.Output, items: rendererApi.OutputItem[]) {
-            this.createHtmlElement(output.id);
+        constructor(output: webviewCommunication.Output, items: rendererApi.OutputItem[], private cell: OutputCell) {
             this.outputId = output.id;
+            this.createHtmlElement();
             this.allItems = items;
         }
 
@@ -169,27 +280,23 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             this.element.innerHTML = '';
         }
 
-        private createHtmlElement(id: string): void {
-            // Recreates the output container structure used in VS Code
-            this.container = document.createElement('div');
-            this.container.id = 'container';
-            this.container.classList.add('widgetarea');
-            const cellContainer = document.createElement('div');
-            cellContainer.classList.add('cell_container');
-            cellContainer.id = id;
-            this.container.appendChild(cellContainer);
-            const outputContainer = document.createElement('div');
-            outputContainer.classList.add('output-container');
-            cellContainer.appendChild(outputContainer);
+        preferredMimeTypeChange(mimeType: string): void {
+            this.containerElement.remove();
+            this.createHtmlElement();
+            this.cell.element.appendChild(this.containerElement);
+            renderers.render(this.cell, this, mimeType, undefined, new AbortController().signal);
+        }
+
+        private createHtmlElement(): void {
+            this.containerElement = document.createElement('div');
+            this.containerElement.classList.add('output-container');
             this.element = document.createElement('div');
-            this.element.id = id;
+            this.element.id = this.outputId;
             this.element.classList.add('output');
-            outputContainer.appendChild(this.element);
-            document.body.appendChild(this.container);
+            this.containerElement.appendChild(this.element);
         }
-    }
 
-    const outputs: Output[] = [];
+    }
 
     class Renderer {
 
@@ -330,7 +437,8 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             this.renderers.get(rendererId)?.disposeOutputItem(outputId);
         }
 
-        public async render(output: Output, preferredMimeType: string | undefined, preferredRendererId: string | undefined, signal: AbortSignal): Promise<void> {
+        public async render(cell: OutputCell, output: OutputContainer, preferredMimeType: string | undefined,
+            preferredRendererId: string | undefined, signal: AbortSignal): Promise<void> {
             const item = output.findItemToRender(preferredMimeType);
             const primaryRenderer = this.findRenderer(preferredRendererId, item);
             if (!primaryRenderer) {
@@ -341,7 +449,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             // Try primary renderer first
             if (!(await this.doRender(item, output.element, primaryRenderer, signal)).continue) {
                 output.renderer = primaryRenderer;
-                this.onRenderCompleted();
+                this.onRenderCompleted(cell, output);
                 return;
             }
 
@@ -360,7 +468,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                     if (renderer) {
                         if (!(await this.doRender(additionalItem, output.element, renderer, signal)).continue) {
                             output.renderer = renderer;
-                            this.onRenderCompleted();
+                            this.onRenderCompleted(cell, output);
                             return; // We rendered successfully
                         }
                     }
@@ -371,28 +479,39 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             this.showRenderError(item, output.element, 'No fallback renderers found or all fallback renderers failed.');
         }
 
-        private onRenderCompleted(): void {
+        private onRenderCompleted(cell: OutputCell, output: OutputContainer): void {
             // we need to check for all images are loaded. Otherwise we can't determine the correct height of the output
             const images = Array.from(document.images);
             if (images.length > 0) {
-                Promise.all(images.filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => {
-                    theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight });
-                    new ResizeObserver(() =>
-                        theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight }))
-                        .observe(document.body);
-                });
+                Promise.all(images
+                    .filter(img => !img.complete && !img.dataset.waiting)
+                    .map(img => {
+                        img.dataset.waiting = 'true'; // mark to avoid overriding onload a second time
+                        return new Promise(resolve => { img.onload = img.onerror = resolve; });
+                    })).then(() => {
+                        this.sendDidRenderMessage(cell, output);
+                        new ResizeObserver(() => this.sendDidRenderMessage(cell, output)).observe(cell.element);
+                    });
             } else {
-                theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight });
-                new ResizeObserver(() =>
-                    theia.postMessage(<webviewCommunication.OnDidRenderOutput>{ type: 'didRenderOutput', contentHeight: document.body.clientHeight }))
-                    .observe(document.body);
+                this.sendDidRenderMessage(cell, output);
+                new ResizeObserver(() => this.sendDidRenderMessage(cell, output)).observe(cell.element);
             }
 
         }
 
+        private sendDidRenderMessage(cell: OutputCell, output: OutputContainer): void {
+            theia.postMessage(<webviewCommunication.OnDidRenderOutput>{
+                type: 'didRenderOutput',
+                cellHandle: cell.cellHandle,
+                outputId: output.outputId,
+                outputHeight: cell.calcTotalOutputHeight(),
+                bodyHeight: document.body.clientHeight
+            });
+        }
+
         private async doRender(item: rendererApi.OutputItem, element: HTMLElement, renderer: Renderer, signal: AbortSignal): Promise<{ continue: boolean }> {
             try {
-                (await renderer.getOrLoad())?.renderOutputItem(item, element, signal);
+                await (await renderer.getOrLoad())?.renderOutputItem(item, element, signal);
                 return { continue: false }; // We rendered successfully
             } catch (e) {
                 if (signal.aborted) {
@@ -482,40 +601,66 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     await Promise.all(ctx.staticPreloadsData.map(preload => kernelPreloads.load(preload)));
 
-    function clearOutput(output: Output): void {
-        output.clear();
-        output.container.remove();
-    }
+    async function outputsChanged(changedEvent: webviewCommunication.OutputChangedMessage): Promise<void> {
+        for (const cellChange of changedEvent.changes) {
+            let cell = cells.find(c => c.cellHandle === cellChange.cellHandle);
+            if (!cell) {
+                cell = new OutputCell(cellChange.cellHandle);
+                cells.push(cell);
+            }
 
-    function outputsChanged(changedEvent: webviewCommunication.OutputChangedMessage): void {
-        for (const output of outputs.splice(changedEvent.deleteStart ?? 0, changedEvent.deleteCount ?? 0)) {
-            clearOutput(output);
-        }
+            cell.clearOutputs(cellChange.start, cellChange.deleteCount);
 
-        for (const outputData of changedEvent.newOutputs ?? []) {
-            const apiItems: rendererApi.OutputItem[] = outputData.items.map((item, index) => ({
-                id: `${outputData.id}-${index}`,
-                mime: item.mime,
-                metadata: outputData.metadata,
-                data(): Uint8Array {
-                    return item.data;
-                },
-                text(): string {
-                    return new TextDecoder().decode(this.data());
-                },
-                json(): unknown {
-                    return JSON.parse(this.text());
-                },
-                blob(): Blob {
-                    return new Blob([this.data()], { type: this.mime });
-                },
+            for (const outputData of cellChange.newOutputs ?? []) {
+                const apiItems: rendererApi.OutputItem[] = outputData.items.map((item, index) => ({
+                    id: `${outputData.id}-${index}`,
+                    mime: item.mime,
+                    metadata: outputData.metadata,
+                    data(): Uint8Array {
+                        return item.data;
+                    },
+                    text(): string {
+                        return new TextDecoder().decode(this.data());
+                    },
+                    json(): unknown {
+                        return JSON.parse(this.text());
+                    },
+                    blob(): Blob {
+                        return new Blob([this.data()], { type: this.mime });
+                    },
+
+                }));
+                const output = cell.createOutputElement(cellChange.start, outputData, apiItems);
 
-            }));
+                await renderers.render(cell, output, undefined, undefined, new AbortController().signal);
 
-            const output = new Output(outputData, apiItems);
-            outputs.push(output);
+                theia.postMessage(<webviewCommunication.OnDidRenderOutput>{
+                    type: 'didRenderOutput',
+                    cellHandle: cell.cellHandle,
+                    outputId: outputData.id,
+                    outputHeight: document.getElementById(output.outputId)?.clientHeight ?? 0,
+                    bodyHeight: document.body.clientHeight
+                });
+
+            }
+        }
+    }
 
-            renderers.render(output, undefined, undefined, new AbortController().signal);
+    function cellsChanged(changes: (webviewCommunication.CellsMoved | webviewCommunication.CellsSpliced)[]): void {
+        for (const change of changes) {
+            if (change.type === 'cellMoved') {
+                const currentIndex = cells.findIndex(c => c.cellHandle === change.cellHandle);
+                const cell = cells[currentIndex];
+                cells.splice(change.toIndex, 0, cells.splice(currentIndex, 1)[0]);
+                if (change.toIndex < cells.length - 1) {
+                    container.insertBefore(cell.element, container.children[change.toIndex + (change.toIndex > currentIndex ? 1 : 0)]);
+                } else {
+                    container.appendChild(cell.element);
+                }
+            } else if (change.type === 'cellsSpliced') {
+                const deltedCells = cells.splice(change.start, change.deleteCount, ...change.newCells.map((cellHandle, i) => new OutputCell(cellHandle, change.start + i)));
+                deltedCells.forEach(cell => cell.dispose());
+            }
         }
     }
 
@@ -565,6 +710,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     window.addEventListener('message', async rawEvent => {
         const event = rawEvent as ({ data: webviewCommunication.ToWebviewMessage });
+        let cellHandle: number | undefined;
         switch (event.data.type) {
             case 'updateRenderers':
                 renderers.updateRendererData(event.data.rendererData);
@@ -572,27 +718,28 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             case 'outputChanged':
                 outputsChanged(event.data);
                 break;
+            case 'cellsChanged':
+                cellsChanged(event.data.changes);
+                break;
             case 'customRendererMessage':
                 renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
                 break;
             case 'changePreferredMimetype':
+                cellHandle = event.data.cellHandle;
                 const mimeType = event.data.mimeType;
-                outputs.forEach(output => {
-                    output.element.innerHTML = '';
-                    renderers.render(output, mimeType, undefined, new AbortController().signal);
-                });
+                cells.find(c => c.cellHandle === cellHandle)
+                    ?.outputElements.forEach(o => o.preferredMimeTypeChange(mimeType));
                 break;
             case 'customKernelMessage':
                 onDidReceiveKernelMessage.fire(event.data.message);
                 break;
-            case 'preload': {
+            case 'preload':
                 const resources = event.data.resources;
                 for (const uri of resources) {
                     kernelPreloads.load(uri);
                 }
                 break;
-            }
-            case 'notebookStyles': {
+            case 'notebookStyles':
                 const documentStyle = window.document.documentElement.style;
 
                 for (let i = documentStyle.length - 1; i >= 0; i--) {
@@ -609,7 +756,17 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                     documentStyle.setProperty(`--${name}`, value);
                 }
                 break;
-            }
+            case 'cellHeightUpdate':
+                cellHandle = event.data.cellHandle;
+                const cell = cells.find(c => c.cellHandle === cellHandle);
+                if (cell) {
+                    cell.updateCellHeight(event.data.cellKind, event.data.height);
+                }
+                break;
+            case 'outputVisibilityChanged':
+                cellHandle = event.data.cellHandle;
+                cells.find(c => c.cellHandle === cellHandle)?.outputVisibilityChanged(event.data.visible);
+                break;
         }
     });
     window.addEventListener('wheel', handleWheel);
@@ -632,5 +789,12 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     window.addEventListener('focusout', (event: FocusEvent) => focusChange(event, false));
 
+    new ResizeObserver(() => {
+        theia.postMessage({
+            type: 'bodyHeightChange',
+            height: document.body.clientHeight
+        } as webviewCommunication.BodyHeightChange);
+    }).observe(document.body);
+
     theia.postMessage(<webviewCommunication.WebviewInitialized>{ type: 'initialized' });
 }

package/src/main/browser/notebooks/renderers/webview-communication.ts

@@ -36,15 +36,21 @@ export interface UpdateRenderersMessage {
     readonly rendererData: readonly RendererMetadata[];
 }
 
+export interface CellOutputChange {
+    readonly cellHandle: number;
+    readonly newOutputs?: Output[];
+    readonly start: number;
+    readonly deleteCount: number;
+}
+
 export interface OutputChangedMessage {
     readonly type: 'outputChanged';
-    readonly newOutputs?: Output[];
-    readonly deleteStart?: number;
-    readonly deleteCount?: number;
+    changes: CellOutputChange[];
 }
 
 export interface ChangePreferredMimetypeMessage {
     readonly type: 'changePreferredMimetype';
+    readonly cellHandle: number;
     readonly outputId: string;
     readonly mimeType: string;
 }
@@ -64,13 +70,53 @@ export interface notebookStylesMessage {
     styles: Record<string, string>;
 }
 
+export interface CellHeigthsMessage {
+    type: 'cellHeigths';
+    cellHeigths: Record<number, number>;
+}
+
+export interface CellsMoved {
+    type: 'cellMoved';
+    cellHandle: number;
+    toIndex: number;
+}
+
+export interface CellsSpliced {
+    type: 'cellsSpliced';
+    start: number;
+    deleteCount: number;
+    newCells: number[];
+}
+
+export interface CellsChangedMessage {
+    type: 'cellsChanged';
+    changes: Array<CellsMoved | CellsSpliced>;
+}
+
+export interface CellHeightUpdateMessage {
+    type: 'cellHeightUpdate';
+    cellKind: number;
+    cellHandle: number;
+    height: number;
+}
+
+export interface OutputVisibilityChangedMessage {
+    type: 'outputVisibilityChanged';
+    cellHandle: number;
+    visible: boolean;
+}
+
 export type ToWebviewMessage = UpdateRenderersMessage
     | OutputChangedMessage
     | ChangePreferredMimetypeMessage
     | CustomRendererMessage
     | KernelMessage
     | PreloadMessage
-    | notebookStylesMessage;
+    | notebookStylesMessage
+    | CellHeigthsMessage
+    | CellHeightUpdateMessage
+    | CellsChangedMessage
+    | OutputVisibilityChangedMessage;
 
 export interface WebviewInitialized {
     readonly type: 'initialized';
@@ -78,7 +124,10 @@ export interface WebviewInitialized {
 
 export interface OnDidRenderOutput {
     readonly type: 'didRenderOutput';
-    contentHeight: number;
+    cellHandle: number;
+    outputId: string;
+    outputHeight: number;
+    bodyHeight: number;
 }
 
 export interface WheelMessage {
@@ -92,7 +141,30 @@ export interface InputFocusChange {
     readonly focused: boolean;
 }
 
-export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage | KernelMessage | InputFocusChange;
+export interface CellOuputFocus {
+    readonly type: 'cellFocusChanged';
+    readonly cellHandle: number;
+}
+
+export interface CellHeightRequest {
+    readonly type: 'cellHeightRequest';
+    readonly cellHandle: number;
+}
+
+export interface BodyHeightChange {
+    readonly type: 'bodyHeightChange';
+    readonly height: number;
+}
+
+export type FromWebviewMessage = WebviewInitialized
+    | OnDidRenderOutput
+    | WheelMessage
+    | CustomRendererMessage
+    | KernelMessage
+    | InputFocusChange
+    | CellOuputFocus
+    | CellHeightRequest
+    | BodyHeightChange;
 
 export interface Output {
     id: string
@@ -104,4 +176,3 @@ export interface OutputItem {
     readonly mime: string;
     readonly data: Uint8Array;
 }
-

package/src/main/browser/plugin-ext-frontend-module.ts

@@ -22,7 +22,9 @@ import { ContainerModule } from '@theia/core/shared/inversify';
 import {
     FrontendApplicationContribution, WidgetFactory, bindViewContribution,
     ViewContainerIdentifier, ViewContainer, createTreeContainer, TreeWidget, LabelProviderContribution, LabelProvider,
-    UndoRedoHandler, DiffUris, Navigatable, SplitWidget
+    UndoRedoHandler, DiffUris, Navigatable, SplitWidget,
+    noopWidgetStatusBarContribution,
+    WidgetStatusBarContribution
 } from '@theia/core/lib/browser';
 import { MaybePromise, CommandContribution, ResourceResolver, bindContributionProvider, URI, generateUuid } from '@theia/core/lib/common';
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging';
@@ -86,8 +88,6 @@ import { LanguagePackService, languagePackServicePath } from '../../common/langu
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { CellOutputWebviewFactory } from '@theia/notebook/lib/browser';
 import { CellOutputWebviewImpl, createCellOutputWebviewContainer } from './notebooks/renderers/cell-output-webview';
-import { NotebookCellModel } from '@theia/notebook/lib/browser/view-model/notebook-cell-model';
-import { NotebookModel } from '@theia/notebook/lib/browser/view-model/notebook-model';
 import { ArgumentProcessorContribution } from './command-registry-main';
 import { WebviewSecondaryWindowSupport } from './webview/webview-secondary-window-support';
 import { CustomEditorUndoRedoHandler } from './custom-editors/custom-editor-undo-redo-handler';
@@ -191,6 +191,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(WebviewSecondaryWindowSupport).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(WebviewSecondaryWindowSupport);
     bind(FrontendApplicationContribution).toService(WebviewContextKeys);
+    bind(WidgetStatusBarContribution).toConstantValue(noopWidgetStatusBarContribution(WebviewWidget));
 
     bind(PluginCustomEditorRegistry).toSelf().inSingletonScope();
     bind(CustomEditorService).toSelf().inSingletonScope();
@@ -283,8 +284,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
         return provider.createProxy<LanguagePackService>(languagePackServicePath);
     }).inSingletonScope();
 
-    bind(CellOutputWebviewFactory).toFactory(ctx => async (cell: NotebookCellModel, notebook: NotebookModel) =>
-        createCellOutputWebviewContainer(ctx.container, cell, notebook).getAsync(CellOutputWebviewImpl)
+    bind(CellOutputWebviewFactory).toFactory(ctx => () =>
+        createCellOutputWebviewContainer(ctx.container).get(CellOutputWebviewImpl)
     );
     bindContributionProvider(bind, ArgumentProcessorContribution);
 

package/src/main/browser/tabs/tabs-main.ts

@@ -231,9 +231,13 @@ export class TabsMainImpl implements TabsMain, Disposable {
         return { kind: TabInputKind.UnknownInput };
     }
 
-    protected connectToSignal<T>(disposableList: DisposableCollection, signal: { connect(listener: T, context: unknown): void, disconnect(listener: T): void }, listener: T): void {
+    protected connectToSignal<T>(disposableList: DisposableCollection,
+        signal: {
+            connect(listener: T, context: unknown): void,
+            disconnect(listener: T, context: unknown): void
+        }, listener: T): void {
         signal.connect(listener, this);
-        disposableList.push(Disposable.create(() => signal.disconnect(listener)));
+        disposableList.push(Disposable.create(() => signal.disconnect(listener, this)));
     }
 
     protected tabDtosEqual(a: TabDto, b: TabDto): boolean {

package/src/main/browser/test-main.ts

@@ -27,7 +27,10 @@ import { CancellationToken, Disposable, Event, URI } from '@theia/core';
 import { MAIN_RPC_CONTEXT, TestControllerUpdate, TestingExt, TestingMain } from '../../common';
 import { RPCProtocol } from '../../common/rpc-protocol';
 import { interfaces } from '@theia/core/shared/inversify';
-import { TestExecutionState, TestItemDTO, TestItemReference, TestOutputDTO, TestRunDTO, TestRunProfileDTO, TestStateChangeDTO } from '../../common/test-types';
+import {
+    TestExecutionState, TestItemDTO, TestItemReference, TestOutputDTO,
+    TestRunDTO, TestRunProfileDTO, TestStateChangeDTO
+} from '../../common/test-types';
 import { TestRunProfileKind } from '../../plugin/types-impl';
 import { CommandRegistryMainImpl } from './command-registry-main';