Implement asynchronous tooltip provision (#16364)

Author: colin-grant-work

packages/core/src/browser/hover-service.ts

@@ -75,6 +75,10 @@ export interface HoverRequest {
      * When true, the hover will register a click handler to allow interaction with elements in the hover area.
      */
     interactive?: boolean;
+    /**
+     * If implemented, this method will be called when the hover is no longer shown or no longer scheduled to be shown.
+     */
+    onHide?(): void;
 }
 
 @injectable()
@@ -122,7 +126,10 @@ export class HoverService {
     protected async renderHover(request: HoverRequest): Promise<void> {
         const host = this.hoverHost;
         let firstChild: HTMLElement | undefined;
-        const { target, content, position, cssClasses, interactive } = request;
+        const { target, content, position, cssClasses, interactive, onHide } = request;
+        if (onHide) {
+            this.disposeOnHide.push({ dispose: onHide.bind(request) });
+        }
         if (cssClasses) {
             host.classList.add(...cssClasses);
         }

packages/core/src/browser/status-bar/status-bar-types.ts

@@ -16,6 +16,7 @@
 
 import { MarkdownString } from '../../common/markdown-rendering/markdown-string';
 import { AccessibilityInformation } from '../../common/accessibility';
+import { CancellationToken, MaybePromise } from '../../common';
 
 export interface StatusBarEntry {
     /**
@@ -40,7 +41,7 @@ export interface StatusBarEntry {
     color?: string;
     backgroundColor?: string;
     className?: string;
-    tooltip?: string | MarkdownString | HTMLElement;
+    tooltip?: string | MarkdownString | HTMLElement | ((token: CancellationToken) => MaybePromise<string | MarkdownString | HTMLElement | undefined | null>);
     command?: string;
     arguments?: unknown[];
     priority?: number;

packages/core/src/browser/status-bar/status-bar.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import { injectable, inject } from 'inversify';
 import debounce = require('lodash.debounce');
-import { CommandService } from '../../common';
+import { CancellationTokenSource, CommandService, nls } from '../../common';
 import { ReactWidget } from '../widgets/react-widget';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { LabelParser, LabelIcon } from '../label-parser';
@@ -119,11 +119,25 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     }
 
     protected requestHover(e: React.MouseEvent<HTMLElement, MouseEvent>, entry: StatusBarEntry): void {
+        const target = e.currentTarget;
+        if (typeof entry.tooltip === 'function') {
+            const cancellationSource = new CancellationTokenSource();
+            this.doRequestHover(target, nls.localizeByDefault('Loading...'), () => cancellationSource.dispose());
+            Promise.resolve(entry.tooltip(cancellationSource.token))
+                .catch(() => undefined)
+                .then(res => res && !cancellationSource.token.isCancellationRequested && this.doRequestHover(target, res));
+        } else {
+            this.doRequestHover(target, entry.tooltip!);
+        }
+    }
+
+    protected doRequestHover(target: HTMLElement, content: string | HTMLElement | MarkdownString, onHide?: () => void): void {
         this.hoverService.requestHover({
-            content: entry.tooltip!,
-            target: e.currentTarget,
+            content,
+            target,
             position: 'top',
-            interactive: entry.tooltip instanceof HTMLElement || MarkdownString.is(entry.tooltip),
+            interactive: content instanceof HTMLElement || MarkdownString.is(content),
+            onHide
         });
     }
 

packages/plugin-ext/src/common/plugin-api-rpc.ts

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { createProxyIdentifier, ProxyIdentifier, RPCProtocol } from './rpc-protocol';
+import { createProxyIdentifier, RPCProtocol } from './rpc-protocol';
 import * as theia from '@theia/plugin';
 import { PluginLifecycle, PluginModel, PluginMetadata, PluginPackage, IconUrl, PluginJsonValidationContribution } from './plugin-protocol';
 import { QueryParameters } from './env';
@@ -513,13 +513,18 @@ export interface StatusBarMessageRegistryMain {
         alignment: theia.StatusBarAlignment,
         color: string | undefined,
         backgroundColor: string | undefined,
-        tooltip: string | theia.MarkdownString | undefined,
+        /** Value true indicates that the tooltip can be retrieved asynchronously */
+        tooltip: string | theia.MarkdownString | true | undefined,
         command: string | undefined,
         accessibilityInformation: theia.AccessibilityInformation,
         args: any[] | undefined): PromiseLike<void>;
     $dispose(id: string): void;
 }
 
+export interface StatusBarMessageRegistryExt {
+    $getMessage(id: string, cancellation: CancellationToken): theia.ProviderResult<string | MarkdownString>;
+}
+
 export interface QuickOpenExt {
     $onItemSelected(handle: number): void;
     $validateInput(input: string): Promise<string | { content: string; severity: Severity; } | null | undefined>;
@@ -2314,7 +2319,7 @@ export const PLUGIN_RPC_CONTEXT = {
     QUICK_OPEN_MAIN: createProxyIdentifier<QuickOpenMain>('QuickOpenMain'),
     DIALOGS_MAIN: createProxyIdentifier<DialogsMain>('DialogsMain'),
     WORKSPACE_MAIN: createProxyIdentifier<WorkspaceMain>('WorkspaceMain'),
-    MESSAGE_REGISTRY_MAIN: <ProxyIdentifier<MessageRegistryMain>>createProxyIdentifier<MessageRegistryMain>('MessageRegistryMain'),
+    MESSAGE_REGISTRY_MAIN: createProxyIdentifier<MessageRegistryMain>('MessageRegistryMain'),
     TEXT_EDITORS_MAIN: createProxyIdentifier<TextEditorsMain>('TextEditorsMain'),
     DOCUMENTS_MAIN: createProxyIdentifier<DocumentsMain>('DocumentsMain'),
     NOTEBOOKS_MAIN: createProxyIdentifier<NotebooksMain>('NotebooksMain'),
@@ -2323,13 +2328,13 @@ export const PLUGIN_RPC_CONTEXT = {
     NOTEBOOK_DOCUMENTS_AND_EDITORS_MAIN: createProxyIdentifier<NotebookDocumentsAndEditorsMain>('NotebooksAndEditorsMain'),
     NOTEBOOK_RENDERERS_MAIN: createProxyIdentifier<NotebookRenderersMain>('NotebookRenderersMain'),
     NOTEBOOK_KERNELS_MAIN: createProxyIdentifier<NotebookKernelsMain>('NotebookKernelsMain'),
-    STATUS_BAR_MESSAGE_REGISTRY_MAIN: <ProxyIdentifier<StatusBarMessageRegistryMain>>createProxyIdentifier<StatusBarMessageRegistryMain>('StatusBarMessageRegistryMain'),
+    STATUS_BAR_MESSAGE_REGISTRY_MAIN: createProxyIdentifier<StatusBarMessageRegistryMain>('StatusBarMessageRegistryMain'),
     ENV_MAIN: createProxyIdentifier<EnvMain>('EnvMain'),
     NOTIFICATION_MAIN: createProxyIdentifier<NotificationMain>('NotificationMain'),
     TERMINAL_MAIN: createProxyIdentifier<TerminalServiceMain>('TerminalServiceMain'),
     TREE_VIEWS_MAIN: createProxyIdentifier<TreeViewsMain>('TreeViewsMain'),
     PREFERENCE_REGISTRY_MAIN: createProxyIdentifier<PreferenceRegistryMain>('PreferenceRegistryMain'),
-    OUTPUT_CHANNEL_REGISTRY_MAIN: <ProxyIdentifier<OutputChannelRegistryMain>>createProxyIdentifier<OutputChannelRegistryMain>('OutputChannelRegistryMain'),
+    OUTPUT_CHANNEL_REGISTRY_MAIN: createProxyIdentifier<OutputChannelRegistryMain>('OutputChannelRegistryMain'),
     LANGUAGES_MAIN: createProxyIdentifier<LanguagesMain>('LanguagesMain'),
     CONNECTION_MAIN: createProxyIdentifier<ConnectionMain>('ConnectionMain'),
     WEBVIEWS_MAIN: createProxyIdentifier<WebviewsMain>('WebviewsMain'),
@@ -2390,6 +2395,7 @@ export const MAIN_RPC_CONTEXT = {
     SECRETS_EXT: createProxyIdentifier<SecretsExt>('SecretsExt'),
     DECORATIONS_EXT: createProxyIdentifier<DecorationsExt>('DecorationsExt'),
     LABEL_SERVICE_EXT: createProxyIdentifier<LabelServiceExt>('LabelServiceExt'),
+    STATUS_BAR_MESSAGE_REGISTRY_EXT: createProxyIdentifier<StatusBarMessageRegistryExt>('StatusBarMessageRegistryExt'),
     TIMELINE_EXT: createProxyIdentifier<TimelineExt>('TimeLineExt'),
     THEMING_EXT: createProxyIdentifier<ThemingExt>('ThemingExt'),
     COMMENTS_EXT: createProxyIdentifier<CommentsExt>('CommentsExt'),

packages/plugin-ext/src/main/browser/main-context.ts

@@ -123,7 +123,7 @@ export function setUpPluginApi(rpc: RPCProtocol, container: interfaces.Container
     // start listening only after all clients are subscribed to events
     editorsAndDocuments.listen();
 
-    const statusBarMessageRegistryMain = new StatusBarMessageRegistryMainImpl(container);
+    const statusBarMessageRegistryMain = new StatusBarMessageRegistryMainImpl(container, rpc);
     rpc.set(PLUGIN_RPC_CONTEXT.STATUS_BAR_MESSAGE_REGISTRY_MAIN, statusBarMessageRegistryMain);
 
     const envMain = new EnvMainImpl(rpc, container);

packages/plugin-ext/src/main/browser/status-bar-message-registry-main.ts

@@ -16,23 +16,27 @@
 import { interfaces } from '@theia/core/shared/inversify';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
 import * as types from '../../plugin/types-impl';
-import { StatusBarMessageRegistryMain } from '../../common/plugin-api-rpc';
+import { StatusBarMessageRegistryMain, StatusBarMessageRegistryExt, MAIN_RPC_CONTEXT } from '../../common/plugin-api-rpc';
 import { StatusBar, StatusBarAlignment, StatusBarEntry } from '@theia/core/lib/browser/status-bar/status-bar';
 import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
 import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+import { RPCProtocol } from '../../common/rpc-protocol';
+import { CancellationToken } from '@theia/core';
 
 export class StatusBarMessageRegistryMainImpl implements StatusBarMessageRegistryMain, Disposable {
     private readonly delegate: StatusBar;
     private readonly entries = new Map<string, StatusBarEntry>();
+    private readonly proxy: StatusBarMessageRegistryExt;
     private readonly toDispose = new DisposableCollection(
         Disposable.create(() => { /* mark as not disposed */ })
     );
 
     protected readonly colorRegistry: ColorRegistry;
 
-    constructor(container: interfaces.Container) {
+    constructor(container: interfaces.Container, rpc: RPCProtocol) {
         this.delegate = container.get(StatusBar);
         this.colorRegistry = container.get(ColorRegistry);
+        this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.STATUS_BAR_MESSAGE_REGISTRY_EXT);
     }
 
     dispose(): void {
@@ -46,7 +50,7 @@ export class StatusBarMessageRegistryMainImpl implements StatusBarMessageRegistr
         alignment: number,
         color: string | undefined,
         backgroundColor: string | undefined,
-        tooltip: string | MarkdownString | undefined,
+        tooltip: string | MarkdownString | true | undefined,
         command: string | undefined,
         accessibilityInformation: types.AccessibilityInformation,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,7 +68,8 @@ export class StatusBarMessageRegistryMainImpl implements StatusBarMessageRegistr
             color: color && (this.colorRegistry.getCurrentColor(color) || color),
             // In contrast to color, the backgroundColor must be a theme color. Thus, do not hand in the plain string if it cannot be resolved.
             backgroundColor: backgroundColor && (this.colorRegistry.getCurrentColor(backgroundColor)),
-            tooltip,
+            // true is used as a serializable sentinel value to indicate that the tooltip can be retrieved asynchronously
+            tooltip: tooltip === true ? (token: CancellationToken) => this.proxy.$getMessage(id, token) : tooltip,
             command,
             accessibilityInformation,
             args

packages/plugin-ext/src/plugin/plugin-context.ts

@@ -33,7 +33,7 @@ import {
 } from '../common/plugin-api-rpc';
 import { RPCProtocol } from '../common/rpc-protocol';
 import { MessageRegistryExt } from './message-registry';
-import { StatusBarMessageRegistryExt } from './status-bar-message-registry';
+import { StatusBarMessageRegistryExtImpl } from './status-bar-message-registry';
 import { WindowStateExtImpl } from './window-state';
 import { WorkspaceExtImpl } from './workspace';
 import { EnvExtImpl } from './env';
@@ -335,7 +335,7 @@ export function createAPIFactory(
     const notebookRenderers = rpc.set(MAIN_RPC_CONTEXT.NOTEBOOK_RENDERERS_EXT, new NotebookRenderersExtImpl(rpc, notebooksExt));
     const notebookKernels = rpc.set(MAIN_RPC_CONTEXT.NOTEBOOK_KERNELS_EXT, new NotebookKernelsExtImpl(rpc, notebooksExt, commandRegistry, webviewExt, workspaceExt));
     const notebookDocuments = rpc.set(MAIN_RPC_CONTEXT.NOTEBOOK_DOCUMENTS_EXT, new NotebookDocumentsExtImpl(notebooksExt));
-    const statusBarMessageRegistryExt = new StatusBarMessageRegistryExt(rpc, commandRegistry);
+    const statusBarMessageRegistryExt = rpc.set(MAIN_RPC_CONTEXT.STATUS_BAR_MESSAGE_REGISTRY_EXT, new StatusBarMessageRegistryExtImpl(rpc, commandRegistry));
     const terminalExt = rpc.set(MAIN_RPC_CONTEXT.TERMINAL_EXT, new TerminalServiceExtImpl(rpc));
     const outputChannelRegistryExt = rpc.set(MAIN_RPC_CONTEXT.OUTPUT_CHANNEL_REGISTRY_EXT, new OutputChannelRegistryExtImpl(rpc));
     const treeViewsExt = rpc.set(MAIN_RPC_CONTEXT.TREE_VIEWS_EXT, new TreeViewsExtImpl(rpc, commandRegistry));

packages/plugin-ext/src/plugin/status-bar-message-registry.ts

@@ -14,20 +14,23 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import { Disposable, StatusBarAlignment } from './types-impl';
-import { StatusBarItem } from '@theia/plugin';
+import { CancellationToken, ProviderResult, StatusBarItem } from '@theia/plugin';
 import {
-    PLUGIN_RPC_CONTEXT as Ext, StatusBarMessageRegistryMain
+    PLUGIN_RPC_CONTEXT as Ext, StatusBarMessageRegistryMain,
+    StatusBarMessageRegistryExt
 } from '../common/plugin-api-rpc';
 import { RPCProtocol } from '../common/rpc-protocol';
 import { StatusBarItemImpl } from './status-bar/status-bar-item';
 import { CommandRegistryImpl } from './command-registry';
+import { MarkdownString } from '../common/plugin-api-rpc-model';
 
 /*---------------------------------------------------------------------------------------------
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-export class StatusBarMessageRegistryExt {
+export class StatusBarMessageRegistryExtImpl implements StatusBarMessageRegistryExt {
+    private readonly items = new Map<string, StatusBarItemImpl>();
 
     proxy: StatusBarMessageRegistryMain;
 
@@ -38,6 +41,15 @@ export class StatusBarMessageRegistryExt {
         this.statusMessage = new StatusBarMessage(this);
     }
 
+    $getMessage(id: string, cancellation: CancellationToken): ProviderResult<string | MarkdownString> {
+        const item = this.items.get(id);
+        if (!item) { return undefined; }
+        if (typeof item.tooltip2 === 'function') {
+            return item.tooltip2(cancellation);
+        }
+        return item.tooltip2 ?? item.tooltip;
+    }
+
     // copied from https://github.com/Microsoft/vscode/blob/6c8f02b41db9ae5c4d15df767d47755e5c73b9d5/src/vs/workbench/api/node/extHostStatusBar.ts#L174
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setStatusBarMessage(text: string, timeoutOrThenable?: number | PromiseLike<any>): Disposable {
@@ -59,7 +71,9 @@ export class StatusBarMessageRegistryExt {
     }
 
     createStatusBarItem(alignment?: StatusBarAlignment, priority?: number, id?: string): StatusBarItem {
-        return new StatusBarItemImpl(this.proxy, this.commandRegistry, alignment, priority, id);
+        const item: StatusBarItemImpl = new StatusBarItemImpl(this.proxy, this.commandRegistry, alignment, priority, id, () => this.items.delete(item.id));
+        this.items.set(item.id, item);
+        return item;
     }
 
 }
@@ -70,7 +84,7 @@ class StatusBarMessage {
     private _item: StatusBarItem;
     private _messages: { message: string }[] = [];
 
-    constructor(statusBar: StatusBarMessageRegistryExt) {
+    constructor(statusBar: StatusBarMessageRegistryExtImpl) {
         this._item = statusBar.createStatusBarItem(StatusBarAlignment.Left, Number.MIN_VALUE);
     }