@theia/plugin-ext 1.22.1 → 1.23.0-next.26

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

@@ -21,21 +21,21 @@
 // code copied and modified from https://github.com/microsoft/vscode/blob/1.47.3/src/vs/workbench/api/browser/mainThreadAuthentication.ts
 
 import { interfaces } from '@theia/core/shared/inversify';
-import { AuthenticationExt, AuthenticationMain, MAIN_RPC_CONTEXT } from '../../common/plugin-api-rpc';
+import { AuthenticationExt, AuthenticationMain, PluginManagerExt, MAIN_RPC_CONTEXT } from '../../common/plugin-api-rpc';
 import { RPCProtocol } from '../../common/rpc-protocol';
 import { MessageService } from '@theia/core/lib/common/message-service';
-import { StorageService } from '@theia/core/lib/browser';
+import { Dialog, StorageService } from '@theia/core/lib/browser';
 import {
     AuthenticationProvider,
     AuthenticationService,
     readAllowedExtensions
 } from '@theia/core/lib/browser/authentication-service';
 import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
-import {
-    AuthenticationSession,
-    AuthenticationSessionsChangeEvent
-} from '../../common/plugin-api-rpc-model';
+import * as theia from '@theia/plugin';
 import { QuickPickValue } from '@theia/core/lib/browser/quick-input/quick-input-service';
+import { nls } from '@theia/core/lib/common/nls';
+
+export function getAuthenticationProviderActivationEvent(id: string): string { return `onAuthenticationRequest:${id}`; }
 
 export class AuthenticationMainImpl implements AuthenticationMain {
     private readonly proxy: AuthenticationExt;
@@ -43,15 +43,17 @@ export class AuthenticationMainImpl implements AuthenticationMain {
     private readonly storageService: StorageService;
     private readonly authenticationService: AuthenticationService;
     private readonly quickPickService: QuickPickService;
+    private readonly extensionService: PluginManagerExt;
     constructor(rpc: RPCProtocol, container: interfaces.Container) {
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.AUTHENTICATION_EXT);
         this.messageService = container.get(MessageService);
         this.storageService = container.get(StorageService);
         this.authenticationService = container.get(AuthenticationService);
         this.quickPickService = container.get(QuickPickService);
+        this.extensionService = rpc.getProxy(MAIN_RPC_CONTEXT.HOSTED_PLUGIN_MANAGER_EXT);
 
         this.authenticationService.onDidChangeSessions(e => {
-            this.proxy.$onDidChangeAuthenticationSessions(e.providerId, e.label, e.event);
+            this.proxy.$onDidChangeAuthenticationSessions(e.providerId, e.label);
         });
         this.authenticationService.onDidRegisterAuthenticationProvider(info => {
             this.proxy.$onDidChangeAuthenticationProviders([info], []);
@@ -73,7 +75,7 @@ export class AuthenticationMainImpl implements AuthenticationMain {
         this.authenticationService.unregisterAuthenticationProvider(id);
     }
 
-    async $updateSessions(id: string, event: AuthenticationSessionsChangeEvent): Promise<void> {
+    async $updateSessions(id: string, event: theia.AuthenticationProviderAuthenticationSessionsChangeEvent): Promise<void> {
         this.authenticationService.updateSessions(id, event);
     }
 
@@ -86,75 +88,85 @@ export class AuthenticationMainImpl implements AuthenticationMain {
     }
 
     async $getSession(providerId: string, scopes: string[], extensionId: string, extensionName: string,
-        options: { createIfNone: boolean, clearSessionPreference: boolean }): Promise<AuthenticationSession | undefined> {
-        const orderedScopes = scopes.sort().join(' ');
-        const sessions = (await this.authenticationService.getSessions(providerId)).filter(session => session.scopes.slice().sort().join(' ') === orderedScopes);
-        const label = this.authenticationService.getLabel(providerId);
-
-        if (sessions.length) {
-            if (!this.authenticationService.supportsMultipleAccounts(providerId)) {
-                const session = sessions[0];
-                const allowed = await this.getSessionsPrompt(providerId, session.account.label, label, extensionId, extensionName);
-                if (allowed) {
-                    return session;
+        options: theia.AuthenticationGetSessionOptions): Promise<theia.AuthenticationSession | undefined> {
+        const sessions = await this.authenticationService.getSessions(providerId, scopes);
+
+        // Error cases
+        if (options.forceNewSession && !sessions.length) {
+            throw new Error('No existing sessions found.');
+        }
+        if (options.forceNewSession && options.createIfNone) {
+            throw new Error('Invalid combination of options. Please remove one of the following: forceNewSession, createIfNone');
+        }
+        if (options.forceNewSession && options.silent) {
+            throw new Error('Invalid combination of options. Please remove one of the following: forceNewSession, silent');
+        }
+        if (options.createIfNone && options.silent) {
+            throw new Error('Invalid combination of options. Please remove one of the following: createIfNone, silent');
+        }
+
+        const supportsMultipleAccounts = this.authenticationService.supportsMultipleAccounts(providerId);
+        // Check if the sessions we have are valid
+        if (!options.forceNewSession && sessions.length) {
+            if (supportsMultipleAccounts) {
+                if (options.clearSessionPreference) {
+                    await this.storageService.setData(`authentication-session-${extensionName}-${providerId}`, undefined);
                 } else {
-                    throw new Error('User did not consent to login.');
+                    const existingSessionPreference = await this.storageService.getData(`authentication-session-${extensionName}-${providerId}`);
+                    if (existingSessionPreference) {
+                        const matchingSession = sessions.find(session => session.id === existingSessionPreference);
+                        if (matchingSession && await this.isAccessAllowed(providerId, matchingSession.account.label, extensionId)) {
+                            return matchingSession;
+                        }
+                    }
                 }
+            } else if (await this.isAccessAllowed(providerId, sessions[0].account.label, extensionId)) {
+                return sessions[0];
             }
+        }
 
-            // On renderer side, confirm consent, ask user to choose between accounts if multiple sessions are valid
-            const selected = await this.selectSession(providerId, label, extensionId, extensionName, sessions, scopes, !!options.clearSessionPreference);
-            return sessions.find(session => session.id === selected.id);
-        } else {
-            if (options.createIfNone) {
-                const isAllowed = await this.loginPrompt(label, extensionName);
-                if (!isAllowed) {
-                    throw new Error('User did not consent to login.');
-                }
-
-                const session = await this.authenticationService.login(providerId, scopes);
-                await this.setTrustedExtensionAndAccountPreference(providerId, session.account.label, extensionId, extensionName, session.id);
-                return session;
-            } else {
-                await this.requestNewSession(providerId, scopes, extensionId, extensionName);
-                return undefined;
+        // We may need to prompt because we don't have a valid session modal flows
+        if (options.createIfNone || options.forceNewSession) {
+            const providerName = this.authenticationService.getLabel(providerId);
+            const detail = (typeof options.forceNewSession === 'object') ? options.forceNewSession!.detail : undefined;
+            const isAllowed = await this.loginPrompt(providerName, extensionName, !!options.forceNewSession, detail);
+            if (!isAllowed) {
+                throw new Error('User did not consent to login.');
             }
+
+            const session = sessions?.length && !options.forceNewSession && supportsMultipleAccounts
+                ? await this.selectSession(providerId, providerName, extensionId, extensionName, sessions, scopes, !!options.clearSessionPreference)
+                : await this.authenticationService.login(providerId, scopes);
+            await this.setTrustedExtensionAndAccountPreference(providerId, session.account.label, extensionId, extensionName, session.id);
+            return session;
+        }
+
+        // passive flows (silent or default)
+        const validSession = sessions.find(s => this.isAccessAllowed(providerId, s.account.label, extensionId));
+        if (!options.silent && !validSession) {
+            this.authenticationService.requestNewSession(providerId, scopes, extensionId, extensionName);
         }
+        return validSession;
     }
 
     protected async selectSession(providerId: string, providerName: string, extensionId: string, extensionName: string,
-        potentialSessions: AuthenticationSession[], scopes: string[], clearSessionPreference: boolean): Promise<AuthenticationSession> {
+        potentialSessions: Readonly<theia.AuthenticationSession[]>, scopes: string[], clearSessionPreference: boolean): Promise<theia.AuthenticationSession> {
         if (!potentialSessions.length) {
             throw new Error('No potential sessions found');
         }
 
-        if (clearSessionPreference) {
-            await this.storageService.setData(`authentication-session-${extensionName}-${providerId}`, undefined);
-        } else {
-            const existingSessionPreference = await this.storageService.getData(`authentication-session-${extensionName}-${providerId}`);
-            if (existingSessionPreference) {
-                const matchingSession = potentialSessions.find(session => session.id === existingSessionPreference);
-                if (matchingSession) {
-                    const allowed = await this.getSessionsPrompt(providerId, matchingSession.account.label, providerName, extensionId, extensionName);
-                    if (allowed) {
-                        return matchingSession;
-                    }
-                }
-            }
-        }
-
         return new Promise(async (resolve, reject) => {
-            const items: QuickPickValue<{ session?: AuthenticationSession }>[] = potentialSessions.map(session => ({
+            const items: QuickPickValue<{ session?: theia.AuthenticationSession }>[] = potentialSessions.map(session => ({
                 label: session.account.label,
                 value: { session }
             }));
             items.push({
-                label: 'Sign in to another account',
+                label: nls.localizeByDefault('Sign in to another account'),
                 value: { session: undefined }
             });
             const selected = await this.quickPickService.show(items,
                 {
-                    title: `The extension '${extensionName}' wants to access a ${providerName} account`,
+                    title: nls.localizeByDefault("The extension '{0}' wants to access a {1} account", extensionName, providerName),
                     ignoreFocusOut: true
                 });
             if (selected) {
@@ -196,20 +208,39 @@ export class AuthenticationMainImpl implements AuthenticationMain {
         return allow;
     }
 
-    protected async loginPrompt(providerName: string, extensionName: string): Promise<boolean> {
-        const choice = await this.messageService.info(`The extension '${extensionName}' wants to sign in using ${providerName}.`, 'Allow', 'Cancel');
+    protected async loginPrompt(providerName: string, extensionName: string, recreatingSession: boolean, _detail?: string): Promise<boolean> {
+        const message = recreatingSession
+            ? nls.localizeByDefault("The extension '{0}' wants you to sign in again using {1}.", extensionName, providerName)
+            : nls.localizeByDefault("The extension '{0}' wants to sign in using {1}.", extensionName, providerName);
+        const choice = await this.messageService.info(message, 'Allow', 'Cancel');
         return choice === 'Allow';
     }
 
+    protected async isAccessAllowed(providerId: string, accountName: string, extensionId: string): Promise<boolean> {
+        const allowList = await readAllowedExtensions(this.storageService, providerId, accountName);
+        return !!allowList.find(allowed => allowed.id === extensionId);
+    }
+
     protected async setTrustedExtensionAndAccountPreference(providerId: string, accountName: string, extensionId: string, extensionName: string, sessionId: string): Promise<void> {
         const allowList = await readAllowedExtensions(this.storageService, providerId, accountName);
         if (!allowList.find(allowed => allowed.id === extensionId)) {
             allowList.push({ id: extensionId, name: extensionName });
             this.storageService.setData(`authentication-trusted-extensions-${providerId}-${accountName}`, JSON.stringify(allowList));
         }
-
         this.storageService.setData(`authentication-session-${extensionName}-${providerId}`, sessionId);
     }
+
+    $ensureProvider(id: string): Promise<void> {
+        return this.extensionService.$activateByEvent(getAuthenticationProviderActivationEvent(id));
+    }
+
+    $removeSession(providerId: string, sessionId: string): Promise<void> {
+        return this.authenticationService.logout(providerId, sessionId);
+    }
+
+    $sendDidChangeSessions(providerId: string, event: theia.AuthenticationProviderAuthenticationSessionsChangeEvent): void {
+        this.authenticationService.updateSessions(providerId, event);
+    }
 }
 
 async function addAccountUsage(storageService: StorageService, providerId: string, accountName: string, extensionId: string, extensionName: string): Promise<void> {
@@ -244,6 +275,8 @@ export class AuthenticationProviderImpl implements AuthenticationProvider {
     private accounts = new Map<string, string[]>(); // Map account name to session ids
     private sessions = new Map<string, string>(); // Map account id to name
 
+    readonly onDidChangeSessions: theia.Event<theia.AuthenticationProviderAuthenticationSessionsChangeEvent>;
+
     constructor(
         private readonly proxy: AuthenticationExt,
         public readonly id: string,
@@ -257,7 +290,7 @@ export class AuthenticationProviderImpl implements AuthenticationProvider {
         return !!this.sessions.size;
     }
 
-    private registerSession(session: AuthenticationSession): void {
+    private registerSession(session: theia.AuthenticationSession): void {
         this.sessions.set(session.id, session.account.label);
 
         const existingSessionsForAccount = this.accounts.get(session.account.label);
@@ -272,34 +305,41 @@ export class AuthenticationProviderImpl implements AuthenticationProvider {
     async signOut(accountName: string): Promise<void> {
         const accountUsages = await readAccountUsages(this.storageService, this.id, accountName);
         const sessionsForAccount = this.accounts.get(accountName);
-        const result = await this.messageService.info(accountUsages.length ? `The account ${accountName} has been used by:
-        ${accountUsages.map(usage => usage.extensionName).join(', ')}. Sign out of these features?` : `Sign out of ${accountName}?`, 'Yes');
-
-        if (result && result === 'Yes' && sessionsForAccount) {
+        const result = await this.messageService.info(accountUsages.length
+            ? nls.localizeByDefault("The account '{0}' has been used by: \n\n{1}\n\n Sign out from these extensions?", accountName,
+                accountUsages.map(usage => usage.extensionName).join(', '))
+            : nls.localizeByDefault("Sign out of '{0}'?", accountName),
+            nls.localizeByDefault('Sign Out'),
+            Dialog.CANCEL);
+
+        if (result && result === nls.localizeByDefault('Sign Out') && sessionsForAccount) {
             sessionsForAccount.forEach(sessionId => this.logout(sessionId));
             removeAccountUsage(this.storageService, this.id, accountName);
         }
     }
 
-    async getSessions(): Promise<ReadonlyArray<AuthenticationSession>> {
-        return this.proxy.$getSessions(this.id);
+    async getSessions(scopes?: string[]): Promise<ReadonlyArray<theia.AuthenticationSession>> {
+        return this.proxy.$getSessions(this.id, scopes);
     }
 
-    async updateSessionItems(event: AuthenticationSessionsChangeEvent): Promise<void> {
+    async updateSessionItems(event: theia.AuthenticationProviderAuthenticationSessionsChangeEvent): Promise<void> {
         const { added, removed } = event;
         const session = await this.proxy.$getSessions(this.id);
-        const addedSessions = session.filter(s => added.some(id => id === s.id));
-
-        removed.forEach(sessionId => {
-            const accountName = this.sessions.get(sessionId);
-            if (accountName) {
-                this.sessions.delete(sessionId);
-                const sessionsForAccount = this.accounts.get(accountName) || [];
-                const sessionIndex = sessionsForAccount.indexOf(sessionId);
-                sessionsForAccount.splice(sessionIndex);
-
-                if (!sessionsForAccount.length) {
-                    this.accounts.delete(accountName);
+        const addedSessions = session.filter(s => added.some(addedSession => this.getSessionId(addedSession) === s.id));
+
+        removed.forEach(removedSession => {
+            const sessionId = this.getSessionId(removedSession);
+            if (sessionId) {
+                const accountName = this.sessions.get(sessionId);
+                if (accountName) {
+                    this.sessions.delete(sessionId);
+                    const sessionsForAccount = this.accounts.get(accountName) || [];
+                    const sessionIndex = sessionsForAccount.indexOf(sessionId);
+                    sessionsForAccount.splice(sessionIndex);
+
+                    if (!sessionsForAccount.length) {
+                        this.accounts.delete(accountName);
+                    }
                 }
             }
         });
@@ -307,14 +347,30 @@ export class AuthenticationProviderImpl implements AuthenticationProvider {
         addedSessions.forEach(s => this.registerSession(s));
     }
 
-    login(scopes: string[]): Promise<AuthenticationSession> {
-        return this.proxy.$login(this.id, scopes);
+    login(scopes: string[]): Promise<theia.AuthenticationSession> {
+        return this.proxy.$createSession(this.id, scopes);
     }
 
     async logout(sessionId: string): Promise<void> {
-        await this.proxy.$logout(this.id, sessionId);
+        await this.proxy.$removeSession(this.id, sessionId);
         this.messageService.info('Successfully signed out.');
     }
+
+    createSession(scopes: string[]): Thenable<theia.AuthenticationSession> {
+        return this.login(scopes);
+    }
+
+    removeSession(sessionId: string): Thenable<void> {
+        return this.logout(sessionId);
+    }
+
+    // utility method to be backwards compatible with the old AuthenticationProviderAuthenticationSessionsChangeEvent containing only the session id string
+    private getSessionId(obj: string | theia.AuthenticationSession | undefined): string | undefined {
+        if (!obj || typeof obj === 'string') {
+            return obj;
+        }
+        return obj.id;
+    }
 }
 
 async function readAccountUsages(storageService: StorageService, providerId: string, accountName: string): Promise<AccountUsage[]> {

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

@@ -56,6 +56,7 @@ import { ThemingMainImpl } from './theming-main';
 import { CommentsMainImp } from './comments/comments-main';
 import { CustomEditorsMainImpl } from './custom-editors/custom-editors-main';
 import { SecretsMainImpl } from './secrets-main';
+import { WebviewViewsMainImpl } from './webview-views/webview-views-main';
 
 export function setUpPluginApi(rpc: RPCProtocol, container: interfaces.Container): void {
     const authenticationMain = new AuthenticationMainImpl(rpc, container);
@@ -127,6 +128,9 @@ export function setUpPluginApi(rpc: RPCProtocol, container: interfaces.Container
     const customEditorsMain = new CustomEditorsMainImpl(rpc, container, webviewsMain);
     rpc.set(PLUGIN_RPC_CONTEXT.CUSTOM_EDITORS_MAIN, customEditorsMain);
 
+    const webviewViewsMain = new WebviewViewsMainImpl(rpc, container, webviewsMain);
+    rpc.set(PLUGIN_RPC_CONTEXT.WEBVIEW_VIEWS_MAIN, webviewViewsMain);
+
     const storageMain = new StorageMainImpl(container);
     rpc.set(PLUGIN_RPC_CONTEXT.STORAGE_MAIN, storageMain);
 

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

@@ -0,0 +1,71 @@
+/********************************************************************************
+ * Copyright (C) 2022 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { AuthenticationProvider, AuthenticationService, AuthenticationServiceImpl, AuthenticationSession } from '@theia/core/lib/browser/authentication-service';
+import { inject } from '@theia/core/shared/inversify';
+import { Deferred, timeoutReject } from '@theia/core/lib/common/promise-util';
+import { HostedPluginSupport } from '../../hosted/browser/hosted-plugin';
+
+export function getAuthenticationProviderActivationEvent(id: string): string { return `onAuthenticationRequest:${id}`; }
+
+/**
+ * Plugin authentiction service that aims to activate additional plugins if sessions are created or queried.
+ */
+export class PluginAuthenticationServiceImpl extends AuthenticationServiceImpl implements AuthenticationService {
+    @inject(HostedPluginSupport) protected readonly pluginService: HostedPluginSupport;
+
+    async getSessions(id: string, scopes?: string[]): Promise<ReadonlyArray<AuthenticationSession>> {
+        await this.tryActivateProvider(id);
+        return super.getSessions(id, scopes);
+    }
+
+    async login(id: string, scopes: string[]): Promise<AuthenticationSession> {
+        await this.tryActivateProvider(id);
+        return super.login(id, scopes);
+    }
+
+    protected async tryActivateProvider(providerId: string): Promise<AuthenticationProvider> {
+        this.pluginService.activateByEvent(getAuthenticationProviderActivationEvent(providerId));
+
+        const provider = this.authenticationProviders.get(providerId);
+        if (provider) {
+            return provider;
+        }
+
+        // When activate has completed, the extension has made the call to `registerAuthenticationProvider`.
+        // However, activate cannot block on this, so the renderer may not have gotten the event yet.
+        return Promise.race([
+            this.waitForProviderRegistration(providerId),
+            timeoutReject<AuthenticationProvider>(5000, 'Timed out waiting for authentication provider to register')
+        ]);
+    }
+
+    protected async waitForProviderRegistration(providerId: string): Promise<AuthenticationProvider> {
+        const waitForRegistration = new Deferred<AuthenticationProvider>();
+        const registration = this.onDidRegisterAuthenticationProvider(info => {
+            if (info.id === providerId) {
+                registration.dispose();
+                const provider = this.authenticationProviders.get(providerId);
+                if (provider) {
+                    waitForRegistration.resolve(provider);
+                } else {
+                    waitForRegistration.reject(new Error(`No authentication provider '${providerId}' is currently registered.`));
+                }
+            }
+        });
+        return waitForRegistration.promise;
+    }
+}

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

@@ -21,7 +21,7 @@ import '../../../src/main/browser/style/comments.css';
 import { ContainerModule } from '@theia/core/shared/inversify';
 import {
     FrontendApplicationContribution, WidgetFactory, bindViewContribution,
-    ViewContainerIdentifier, ViewContainer, createTreeContainer, TreeImpl, TreeWidget, TreeModelImpl, LabelProviderContribution
+    ViewContainerIdentifier, ViewContainer, createTreeContainer, TreeWidget, LabelProviderContribution
 } from '@theia/core/lib/browser';
 import { MaybePromise, CommandContribution, ResourceResolver, bindContributionProvider } from '@theia/core/lib/common';
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging';
@@ -76,6 +76,8 @@ import { CustomEditorWidget } from './custom-editors/custom-editor-widget';
 import { CustomEditorService } from './custom-editors/custom-editor-service';
 import { UndoRedoService } from './custom-editors/undo-redo-service';
 import { WebviewFrontendSecurityWarnings } from './webview/webview-frontend-security-warnings';
+import { PluginAuthenticationServiceImpl } from './plugin-authentication-service';
+import { AuthenticationService } from '@theia/core/lib/browser/authentication-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
@@ -145,21 +147,21 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(WidgetFactory).toDynamicValue(({ container }) => ({
         id: PLUGIN_VIEW_DATA_FACTORY_ID,
         createWidget: (identifier: TreeViewWidgetIdentifier) => {
-            const child = createTreeContainer(container, {
+            const props = {
                 contextMenuPath: VIEW_ITEM_CONTEXT_MENU,
                 expandOnlyOnExpansionToggleClick: true,
                 expansionTogglePadding: 22,
                 globalSelection: true,
                 leftPadding: 8,
                 search: true
+            };
+            const child = createTreeContainer(container, {
+                props,
+                tree: PluginTree,
+                model: PluginTreeModel,
+                widget: TreeViewWidget,
             });
             child.bind(TreeViewWidgetIdentifier).toConstantValue(identifier);
-            child.bind(PluginTree).toSelf();
-            child.rebind(TreeImpl).toService(PluginTree);
-            child.bind(PluginTreeModel).toSelf();
-            child.rebind(TreeModelImpl).toService(PluginTreeModel);
-            child.bind(TreeViewWidget).toSelf();
-            child.rebind(TreeWidget).toService(TreeViewWidget);
             return child.get(TreeWidget);
         }
     })).inSingletonScope();
@@ -234,4 +236,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
     bind(WebviewFrontendSecurityWarnings).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(WebviewFrontendSecurityWarnings);
+
+    bind(PluginAuthenticationServiceImpl).toSelf().inSingletonScope();
+    rebind(AuthenticationService).toService(PluginAuthenticationServiceImpl);
 });

package/src/main/browser/view/plugin-view-registry.ts

@@ -20,7 +20,7 @@ import {
     ViewContainerIdentifier, ViewContainerTitleOptions, Widget, FrontendApplicationContribution,
     StatefulWidget, CommonMenus, BaseWidget, TreeViewWelcomeWidget, codicon, ViewContainerPart
 } from '@theia/core/lib/browser';
-import { ViewContainer, View, ViewWelcome } from '../../../common';
+import { ViewContainer, View, ViewWelcome, PluginViewType } from '../../../common';
 import { PluginSharedStyle } from '../plugin-shared-style';
 import { DebugWidget } from '@theia/debug/lib/browser/view/debug-widget';
 import { PluginViewWidget, PluginViewWidgetIdentifier } from './plugin-view-widget';
@@ -31,7 +31,7 @@ import { DebugFrontendApplicationContribution } from '@theia/debug/lib/browser/d
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
 import { CommandRegistry } from '@theia/core/lib/common/command';
 import { MenuModelRegistry } from '@theia/core/lib/common/menu';
-import { Emitter } from '@theia/core/lib/common/event';
+import { Emitter, Event } from '@theia/core/lib/common/event';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { ViewContextKeyService } from './view-context-key-service';
 import { PROBLEMS_WIDGET_ID } from '@theia/markers/lib/browser/problem/problem-widget';
@@ -41,6 +41,11 @@ import { TERMINAL_WIDGET_FACTORY_ID } from '@theia/terminal/lib/browser/terminal
 import { TreeViewWidget } from './tree-view-widget';
 import { SEARCH_VIEW_CONTAINER_ID } from '@theia/search-in-workspace/lib/browser/search-in-workspace-factory';
 
+import { WebviewView, WebviewViewResolver } from '../webview-views/webview-views';
+import { WebviewWidget, WebviewWidgetIdentifier } from '../webview/webview';
+import { CancellationToken } from '@theia/core/lib/common/cancellation';
+import { v4 } from 'uuid';
+
 export const PLUGIN_VIEW_FACTORY_ID = 'plugin-view';
 export const PLUGIN_VIEW_CONTAINER_FACTORY_ID = 'plugin-view-container';
 export const PLUGIN_VIEW_DATA_FACTORY_ID = 'plugin-view-data';
@@ -95,6 +100,8 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
     private readonly viewDataProviders = new Map<string, ViewDataProvider>();
     private readonly viewDataState = new Map<string, object>();
 
+    private readonly webviewViewResolvers = new Map<string, WebviewViewResolver>();
+
     @postConstruct()
     protected init(): void {
         // VS Code Viewlets
@@ -333,6 +340,63 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         return toDispose;
     }
 
+    async registerWebviewView(viewId: string, resolver: WebviewViewResolver): Promise<Disposable> {
+        if (this.webviewViewResolvers.has(viewId)) {
+            throw new Error(`View resolver already registered for ${viewId}`);
+        }
+        this.webviewViewResolvers.set(viewId, resolver);
+
+        const webviewView = await this.createNewWebviewView();
+        const token = CancellationToken.None;
+        this.getView(viewId).then(async view => {
+            if (view) {
+                if (view.isVisible) {
+                    await this.prepareView(view, webviewView.webview.identifier.id);
+                } else {
+                    const toDisposeOnDidExpandView = new DisposableCollection(this.onDidExpandView(async id => {
+                        if (id === viewId) {
+                            dispose();
+                            await this.prepareView(view, webviewView.webview.identifier.id);
+                        }
+                    }));
+                    const dispose = () => toDisposeOnDidExpandView.dispose();
+                    view.disposed.connect(dispose);
+                    toDisposeOnDidExpandView.push(Disposable.create(() => view.disposed.disconnect(dispose)));
+                }
+            }
+        });
+
+        resolver.resolve(webviewView, token);
+
+        return Disposable.create(() => {
+            this.webviewViewResolvers.delete(viewId);
+        });
+    }
+
+    async createNewWebviewView(): Promise<WebviewView> {
+        const webview = await this.widgetManager.getOrCreateWidget<WebviewWidget>(
+            WebviewWidget.FACTORY_ID, <WebviewWidgetIdentifier>{ id: v4() });
+        webview.setContentOptions({ allowScripts: true });
+
+        let _description: string | undefined;
+
+        return {
+            webview,
+
+            get onDidChangeVisibility(): Event<boolean> { return webview.onDidChangeVisibility; },
+            get onDidDispose(): Event<void> { return webview.onDidDispose; },
+
+            get title(): string | undefined { return webview.title.label; },
+            set title(value: string | undefined) { webview.title.label = value || ''; },
+
+            get description(): string | undefined { return _description; },
+            set description(value: string | undefined) { _description = value; },
+
+            dispose: webview.dispose,
+            show: webview.show
+        };
+    }
+
     registerViewWelcome(viewWelcome: ViewWelcome): Disposable {
         const toDispose = new DisposableCollection();
 
@@ -409,7 +473,7 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         return this.getView(viewId);
     }
 
-    protected async prepareView(widget: PluginViewWidget): Promise<void> {
+    protected async prepareView(widget: PluginViewWidget, webviewId?: string): Promise<void> {
         const data = this.views.get(widget.options.viewId);
         if (!data) {
             return;
@@ -419,7 +483,7 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
             widget.title.label = view.name;
         }
         const currentDataWidget = widget.widgets[0];
-        const viewDataWidget = await this.createViewDataWidget(view.id);
+        const viewDataWidget = await this.createViewDataWidget(view.id, webviewId);
         if (widget.isDisposed) {
             // eslint-disable-next-line no-unused-expressions
             viewDataWidget?.dispose();
@@ -701,8 +765,12 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         return toDispose;
     }
 
-    protected async createViewDataWidget(viewId: string): Promise<Widget | undefined> {
+    protected async createViewDataWidget(viewId: string, webviewId?: string): Promise<Widget | undefined> {
         const view = this.views.get(viewId);
+        if (view?.[1]?.type === PluginViewType.Webview) {
+            const webviewWidget = this.widgetManager.getWidget(WebviewWidget.FACTORY_ID, <WebviewWidgetIdentifier>{ id: webviewId });
+            return webviewWidget;
+        }
         const provider = this.viewDataProviders.get(viewId);
         if (!view || !provider) {
             return undefined;

package/src/main/browser/view-column-service.ts

@@ -32,7 +32,7 @@ export class ViewColumnService {
     ) {
         let oldColumnValues = new Map<string, number>();
         const update = async () => {
-            await new Promise((resolve => setTimeout(() => resolve())));
+            await new Promise<void>((resolve => setTimeout(resolve)));
             this.updateViewColumns();
             this.viewColumnIds.forEach((ids: string[], viewColumn: number) => {
                 ids.forEach((id: string) => {