@theia/plugin-ext 1.45.1 → 1.46.0-next.137

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

@@ -58,6 +58,16 @@ export interface PreloadContext {
     readonly isWorkspaceTrusted: boolean;
     readonly rendererData: readonly webviewCommunication.RendererMetadata[];
     readonly renderOptions: RenderOptions;
+    readonly staticPreloadsData: readonly string[];
+}
+
+interface KernelPreloadContext {
+    readonly onDidReceiveKernelMessage: Event<unknown>;
+    postKernelMessage(data: unknown): void;
+}
+
+interface KernelPreloadModule {
+    activate(ctx: KernelPreloadContext): Promise<void> | void;
 }
 
 export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
@@ -98,6 +108,36 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     const settingChange: EmitterLike<RenderOptions> = createEmitter<RenderOptions>();
 
+    const onDidReceiveKernelMessage = createEmitter<unknown>();
+
+    function createKernelContext(): KernelPreloadContext {
+        return Object.freeze({
+            onDidReceiveKernelMessage: onDidReceiveKernelMessage.event,
+            postKernelMessage: (data: unknown) => {
+                theia.postMessage({ type: 'customKernelMessage', message: data });
+            }
+        });
+    }
+
+    async function runKernelPreload(url: string): Promise<void> {
+        try {
+            return activateModuleKernelPreload(url);
+        } catch (e) {
+            console.error(e);
+            throw e;
+        }
+    }
+
+    async function activateModuleKernelPreload(url: string): Promise<void> {
+        const baseUri = window.location.href.replace(/\/webview\/index\.html.*/, '');
+        const module: KernelPreloadModule = (await __import(`${baseUri}/${url}`)) as KernelPreloadModule;
+        if (!module.activate) {
+            console.error(`Notebook preload '${url}' was expected to be a module but it does not export an 'activate' function`);
+            return;
+        }
+        return module.activate(createKernelContext());
+    }
+
     class Output {
         readonly outputId: string;
         renderedItem?: rendererApi.OutputItem;
@@ -114,7 +154,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             this.element.style.paddingRight = '10px';
             this.element.id = output.id;
             document.body.appendChild(this.element);
-
+            this.outputId = output.id;
             this.allItems = items;
         }
 
@@ -134,7 +174,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
     }
 
-    const outputs = new Map</* outputId */string, Output>();
+    const outputs: Output[] = [];
 
     class Renderer {
 
@@ -160,6 +200,10 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             if (this.rendererApi) {
                 return this.rendererApi;
             }
+
+            // Preloads need to be loaded before loading renderers.
+            await kernelPreloads.waitForAllCurrent();
+
             const baseUri = window.location.href.replace(/\/webview\/index\.html.*/, '');
             const rendererModule = await __import(`${baseUri}/${this.data.entrypoint.uri}`) as { activate: rendererApi.ActivationFunction };
             this.rendererApi = await rendererModule.activate(this.createRendererContext());
@@ -196,7 +240,9 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
             if (this.data.requiresMessaging) {
                 context.onDidReceiveMessage = this.onMessageEvent.event;
-                context.postMessage = message => theia.postMessage({ type: 'customRendererMessage', rendererId: this.data.id, message });
+                context.postMessage = message => {
+                    theia.postMessage({ type: 'customRendererMessage', rendererId: this.data.id, message });
+                };
             }
 
             return Object.freeze(context);
@@ -314,10 +360,17 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<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 }));
+                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);
+                });
             } 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);
             }
 
         }
@@ -378,15 +431,50 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         }
     }();
 
-    function clearOutput(outputId: string): void {
-        outputs.get(outputId)?.clear();
-        outputs.delete(outputId);
-        document.getElementById(outputId)?.remove();
+    const kernelPreloads = new class {
+        private readonly preloads = new Map<string /* uri */, Promise<unknown>>();
+
+        /**
+         * Returns a promise that resolves when the given preload is activated.
+         */
+        public waitFor(uri: string): Promise<unknown> {
+            return this.preloads.get(uri) || Promise.resolve(new Error(`Preload not ready: ${uri}`));
+        }
+
+        /**
+         * Loads a preload.
+         * @param uri URI to load from
+         * @param originalUri URI to show in an error message if the preload is invalid.
+         */
+        public load(uri: string): Promise<unknown> {
+            const promise = Promise.all([
+                runKernelPreload(uri),
+                this.waitForAllCurrent(),
+            ]);
+
+            this.preloads.set(uri, promise);
+            return promise;
+        }
+
+        /**
+         * Returns a promise that waits for all currently-registered preloads to
+         * activate before resolving.
+         */
+        public waitForAllCurrent(): Promise<unknown[]> {
+            return Promise.all([...this.preloads.values()].map(p => p.catch(err => err)));
+        }
+    };
+
+    await Promise.all(ctx.staticPreloadsData.map(preload => kernelPreloads.load(preload)));
+
+    function clearOutput(output: Output): void {
+        output.clear();
+        output.element.remove();
     }
 
     function outputsChanged(changedEvent: webviewCommunication.OutputChangedMessage): void {
-        for (const outputId of changedEvent.deletedOutputIds ?? []) {
-            clearOutput(outputId);
+        for (const output of outputs.splice(changedEvent.deleteStart ?? 0, changedEvent.deleteCount ?? 0)) {
+            clearOutput(output);
         }
 
         for (const outputData of changedEvent.newOutputs ?? []) {
@@ -410,7 +498,7 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
             }));
 
             const output = new Output(outputData, apiItems);
-            outputs.set(outputData.id, output);
+            outputs.push(output);
 
             renderers.render(output, undefined, undefined, new AbortController().signal);
         }
@@ -454,7 +542,6 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
 
     window.addEventListener('message', async rawEvent => {
         const event = rawEvent as ({ data: webviewCommunication.ToWebviewMessage });
-
         switch (event.data.type) {
             case 'updateRenderers':
                 renderers.updateRendererData(event.data.rendererData);
@@ -466,12 +553,33 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                 renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
                 break;
             case 'changePreferredMimetype':
-                clearOutput(event.data.outputId);
-                renderers.render(outputs.get(event.data.outputId)!, event.data.mimeType, undefined, new AbortController().signal);
+                const outputId = event.data.outputId;
+                const index = outputs.findIndex(output => output.outputId === outputId);
+                outputs.splice(index, 1);
+                clearOutput(outputs.splice(index, 1)[0]);
+                renderers.render(outputs[index], event.data.mimeType, undefined, new AbortController().signal);
+                break;
+            case 'customKernelMessage':
+                onDidReceiveKernelMessage.fire(event.data.message);
+                break;
+            case 'preload': {
+                const resources = event.data.resources;
+                for (const uri of resources) {
+                    kernelPreloads.load(uri);
+                }
                 break;
+            }
         }
     });
     window.addEventListener('wheel', handleWheel);
 
+    (document.head as HTMLHeadElement & { originalAppendChild: typeof document.head.appendChild }).originalAppendChild = document.head.appendChild;
+    (document.head as HTMLHeadElement & { originalAppendChild: typeof document.head.appendChild }).appendChild = function appendChild<T extends Node>(node: T): T {
+        if (node instanceof HTMLScriptElement && node.src.includes('webviewuuid')) {
+            node.src = node.src.replace('webviewuuid', location.hostname.split('.')[0]);
+        }
+        return this.originalAppendChild(node);
+    };
+
     theia.postMessage(<webviewCommunication.WebviewInitialized>{ type: 'initialized' });
 }

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

@@ -39,7 +39,8 @@ export interface UpdateRenderersMessage {
 export interface OutputChangedMessage {
     readonly type: 'outputChanged';
     readonly newOutputs?: Output[];
-    readonly deletedOutputIds?: string[];
+    readonly deleteStart?: number;
+    readonly deleteCount?: number;
 }
 
 export interface ChangePreferredMimetypeMessage {
@@ -48,7 +49,17 @@ export interface ChangePreferredMimetypeMessage {
     readonly mimeType: string;
 }
 
-export type ToWebviewMessage = UpdateRenderersMessage | OutputChangedMessage | ChangePreferredMimetypeMessage | CustomRendererMessage;
+export interface KernelMessage {
+    readonly type: 'customKernelMessage';
+    readonly message: unknown;
+}
+
+export interface PreloadMessage {
+    readonly type: 'preload';
+    readonly resources: string[];
+}
+
+export type ToWebviewMessage = UpdateRenderersMessage | OutputChangedMessage | ChangePreferredMimetypeMessage | CustomRendererMessage | KernelMessage | PreloadMessage;
 
 export interface WebviewInitialized {
     readonly type: 'initialized';
@@ -65,7 +76,7 @@ export interface WheelMessage {
     readonly deltaX: number;
 }
 
-export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage;
+export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage | KernelMessage;
 
 export interface Output {
     id: string

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

@@ -14,73 +14,13 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { NotificationExt, NotificationMain, MAIN_RPC_CONTEXT } from '../../common';
-import { ProgressService, Progress, ProgressMessage } from '@theia/core/lib/common';
+import { MAIN_RPC_CONTEXT } from '../../common';
 import { interfaces } from '@theia/core/shared/inversify';
 import { RPCProtocol } from '../../common/rpc-protocol';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-
-export class NotificationMainImpl implements NotificationMain, Disposable {
-    private readonly progressService: ProgressService;
-    private readonly progressMap = new Map<string, Progress>();
-    private readonly progress2Work = new Map<string, number>();
-    private readonly proxy: NotificationExt;
-
-    protected readonly toDispose = new DisposableCollection(
-        Disposable.create(() => { /* mark as not disposed */ })
-    );
+import { BasicNotificationMainImpl } from '../common/basic-notification-main';
 
+export class NotificationMainImpl extends BasicNotificationMainImpl {
     constructor(rpc: RPCProtocol, container: interfaces.Container) {
-        this.progressService = container.get(ProgressService);
-        this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.NOTIFICATION_EXT);
-    }
-
-    dispose(): void {
-        this.toDispose.dispose();
-    }
-
-    async $startProgress(options: NotificationMain.StartProgressOptions): Promise<string> {
-        const onDidCancel = () => {
-            // If the map does not contain current id, it has already stopped and should not be cancelled
-            if (this.progressMap.has(id)) {
-                this.proxy.$acceptProgressCanceled(id);
-            }
-        };
-
-        const progressMessage = this.mapOptions(options);
-        const progress = await this.progressService.showProgress(progressMessage, onDidCancel);
-        const id = progress.id;
-        this.progressMap.set(id, progress);
-        this.progress2Work.set(id, 0);
-        if (this.toDispose.disposed) {
-            this.$stopProgress(id);
-        } else {
-            this.toDispose.push(Disposable.create(() => this.$stopProgress(id)));
-        }
-        return id;
-    }
-    protected mapOptions(options: NotificationMain.StartProgressOptions): ProgressMessage {
-        const { title, location, cancellable } = options;
-        return { text: title, options: { location, cancelable: cancellable } };
-    }
-
-    $stopProgress(id: string): void {
-        const progress = this.progressMap.get(id);
-
-        if (progress) {
-            this.progressMap.delete(id);
-            this.progress2Work.delete(id);
-            progress.cancel();
-        }
-    }
-
-    $updateProgress(id: string, item: NotificationMain.ProgressReport): void {
-        const progress = this.progressMap.get(id);
-        if (!progress) {
-            return;
-        }
-        const done = Math.min((this.progress2Work.get(id) || 0) + (item.increment || 0), 100);
-        this.progress2Work.set(id, done);
-        progress.report({ message: item.message, work: done ? { done, total: 100 } : undefined });
+        super(rpc, container, MAIN_RPC_CONTEXT.NOTIFICATION_EXT);
     }
 }

package/src/main/browser/plugin-contribution-handler.ts

@@ -47,13 +47,13 @@ import { PluginIconService } from './plugin-icon-service';
 import { PluginIconThemeService } from './plugin-icon-theme-service';
 import { ContributionProvider } from '@theia/core/lib/common';
 import * as monaco from '@theia/monaco-editor-core';
-import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 import { ContributedTerminalProfileStore, TerminalProfileStore } from '@theia/terminal/lib/browser/terminal-profile-service';
 import { TerminalWidget } from '@theia/terminal/lib/browser/base/terminal-widget';
 import { TerminalService } from '@theia/terminal/lib/browser/base/terminal-service';
 import { PluginTerminalRegistry } from './plugin-terminal-registry';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { LanguageService } from '@theia/core/lib/browser/language-service';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/base/common/themables';
 
 @injectable()
 export class PluginContributionHandler {
@@ -447,6 +447,14 @@ export class PluginContributionHandler {
             }
         }
 
+        if (contributions.notebookPreload) {
+            for (const preload of contributions.notebookPreload) {
+                pushContribution(`notebookPreloads.${preload.type}:${preload.entrypoint}`,
+                    () => this.notebookRendererRegistry.registerStaticNotebookPreload(preload.type, preload.entrypoint, PluginPackage.toPluginUrl(plugin.metadata.model, ''))
+                );
+            }
+        }
+
         return toDispose;
     }
 

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

@@ -88,6 +88,9 @@ import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar
 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';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
@@ -185,6 +188,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(WebviewWidgetFactory).toDynamicValue(ctx => new WebviewWidgetFactory(ctx.container)).inSingletonScope();
     bind(WidgetFactory).toService(WebviewWidgetFactory);
     bind(WebviewContextKeys).toSelf().inSingletonScope();
+    bind(WebviewSecondaryWindowSupport).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(WebviewSecondaryWindowSupport);
     bind(FrontendApplicationContribution).toService(WebviewContextKeys);
 
     bind(CustomEditorContribution).toSelf().inSingletonScope();
@@ -262,7 +267,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
         return provider.createProxy<LanguagePackService>(languagePackServicePath);
     }).inSingletonScope();
 
-    bind(CellOutputWebviewFactory).toFactory(ctx => async (cell: NotebookCellModel) =>
-        createCellOutputWebviewContainer(ctx.container, cell).getAsync(CellOutputWebviewImpl)
+    bind(CellOutputWebviewFactory).toFactory(ctx => async (cell: NotebookCellModel, notebook: NotebookModel) =>
+        createCellOutputWebviewContainer(ctx.container, cell, notebook).getAsync(CellOutputWebviewImpl)
     );
+
+    bindContributionProvider(bind, ArgumentProcessorContribution);
 });

package/src/main/browser/plugin-icon-service.ts

@@ -14,18 +14,13 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { asCSSPropertyValue } from '@theia/monaco-editor-core/esm/vs/base/browser/dom';
 import { Endpoint } from '@theia/core/lib/browser';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { getIconRegistry } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/iconRegistry';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { URI } from '@theia/core/shared/vscode-uri';
-import { IconFontDefinition, IconContribution as Icon } from '@theia/core/lib/browser/icon-registry';
 import { MonacoIconRegistry } from '@theia/monaco/lib/browser/monaco-icon-registry';
 import * as path from 'path';
 import { IconContribution, DeployedPlugin, IconDefinition } from '../../common/plugin-protocol';
-import { IThemeService } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
-import { UnthemedProductIconTheme } from '@theia/monaco-editor-core/esm/vs/platform/theme/browser/iconsStyleSheet';
 
 @injectable()
 export class PluginIconService implements Disposable {
@@ -45,29 +40,19 @@ export class PluginIconService implements Disposable {
         } else {
             this.registerRegularIcon(contribution, defaultIcon.id);
         }
-        this.updateStyle(contribution);
         return Disposable.NULL;
     }
 
-    updateStyle(contribution: IconContribution): void {
-        this.updateStyleElement();
-        const css = this.getCSS(contribution);
-        if (css) {
-            this.styleElement.innerText = css;
-        }
-        const toRemoveStyleElement = Disposable.create(() => this.styleElement.remove());
-        this.toDispose.push(toRemoveStyleElement);
-    }
-
     dispose(): void {
         this.toDispose.dispose();
     }
 
     protected registerFontIcon(contribution: IconContribution, defaultIcon: IconDefinition): void {
-        const location = defaultIcon.location;
-        const format = getFileExtension(location);
-        const fontId = getFontId(contribution.extensionId, location);
-        const definition = this.iconRegistry.registerIconFont(fontId, { src: [{ location: URI.file(location), format }] });
+        const location = this.toPluginUrl(contribution.extensionId, getIconRelativePath(URI.parse(defaultIcon.location).path));
+        const format = getFileExtension(location.path);
+        const fontId = getFontId(contribution.extensionId, location.path);
+
+        const definition = this.iconRegistry.registerIconFont(fontId, { src: [{ location: location, format }] });
         this.iconRegistry.registerIcon(contribution.id, {
             fontCharacter: defaultIcon.fontCharacter,
             font: {
@@ -81,59 +66,10 @@ export class PluginIconService implements Disposable {
         this.iconRegistry.registerIcon(contribution.id, { id: defaultIconId }, contribution.description);
     }
 
-    protected updateStyleElement(): void {
-        if (!this.styleElement) {
-            const styleElement = document.createElement('style');
-            styleElement.type = 'text/css';
-            styleElement.media = 'screen';
-            styleElement.id = 'contributedIconsStyles';
-            document.head.appendChild(styleElement);
-            this.styleElement = styleElement;
-        }
-    }
-    protected getCSS(iconContribution: IconContribution, themeService?: IThemeService): string | undefined {
-        const iconRegistry = getIconRegistry();
-        const productIconTheme = themeService ? themeService.getProductIconTheme() : new UnthemedProductIconTheme();
-        const usedFontIds: { [id: string]: IconFontDefinition } = {};
-        const formatIconRule = (contribution: Icon): string | undefined => {
-            const definition = productIconTheme.getIcon(contribution);
-            if (!definition) {
-                return undefined;
-            }
-            const fontContribution = definition.font;
-            if (fontContribution) {
-                usedFontIds[fontContribution.id] = fontContribution.definition;
-                return `.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; font-family: ${asCSSPropertyValue(iconContribution.extensionId)}; }`;
-            }
-            // default font (codicon)
-            return `.codicon-${contribution.id}:before { content: '${definition.fontCharacter}'; }`;
-        };
-
-        const rules = [];
-        for (const contribution of iconRegistry.getIcons()) {
-            const rule = formatIconRule(contribution);
-            if (rule) {
-                rules.push(rule);
-            }
-        }
-        for (const id in usedFontIds) {
-            if (id) {
-                const definition = usedFontIds[id];
-                const fontWeight = definition.weight ? `font-weight: ${definition.weight};` : '';
-                const fontStyle = definition.style ? `font-style: ${definition.style};` : '';
-                const src = definition.src.map(icon =>
-                    `${this.toPluginUrl(iconContribution.extensionId, getIconRelativePath(icon.location.path))} format('${icon.format}')`)
-                    .join(', ');
-                rules.push(`@font-face { src: ${src}; font-family: ${asCSSPropertyValue(iconContribution.extensionId)};${fontWeight}${fontStyle} font-display: block; }`);
-            }
-        }
-        return rules.join('\n');
-    }
-
-    protected toPluginUrl(id: string, relativePath: string): string {
-        return `url('${new Endpoint({
+    protected toPluginUrl(id: string, relativePath: string): URI {
+        return URI.from(new Endpoint({
             path: `hostedPlugin/${this.formatExtensionId(id)}/${encodeURIComponent(relativePath)}`
-        }).getRestUrl().toString()}')`;
+        }).getRestUrl().toComponents());
     }
 
     protected formatExtensionId(id: string): string {