@theia/plugin-ext 1.24.0-next.5 → 1.24.0-next.52

package/src/main/browser/quick-open-main.ts

@@ -25,7 +25,8 @@ import {
     TransferInputBox,
     TransferQuickPickItems,
     TransferQuickInput,
-    TransferQuickInputButton
+    TransferQuickInputButton,
+    TransferQuickPickItemValue
 } from '../../common/plugin-api-rpc';
 import {
     InputOptions,
@@ -37,12 +38,14 @@ import {
 import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
 import { MonacoQuickInputService } from '@theia/monaco/lib/browser/monaco-quick-input-service';
-import * as theia from '@theia/plugin';
 import { QuickInputButtons } from '../../plugin/types-impl';
 import { getIconUris } from '../../plugin/quick-open';
+import * as monaco from '@theia/monaco-editor-core';
+import { IQuickPickItem, IQuickInput } from '@theia/monaco-editor-core/esm/vs/base/parts/quickinput/common/quickInput';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 export interface QuickInputSession {
-    input: monaco.quickInput.IQuickInput;
+    input: IQuickInput;
     handlesToItems: Map<number, TransferQuickPickItems>;
 }
 
@@ -68,7 +71,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
         this.toDispose.dispose();
     }
 
-    async $show(instance: number, options: PickOptions<TransferQuickPickItems>, token: CancellationToken): Promise<number | number[] | undefined> {
+    async $show(instance: number, options: PickOptions<TransferQuickPickItemValue>, token: CancellationToken): Promise<number | number[] | undefined> {
         const contents = new Promise<TransferQuickPickItems[]>((resolve, reject) => {
             this.items[instance] = { resolve, reject };
         });
@@ -82,21 +85,14 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
             }
         };
 
-        if (options.canPickMany) {
-            return this.delegate.pick(contents, options as { canPickMany: true }, token).then(items => {
-                if (items) {
-                    return items.map(item => item.handle);
-                }
-                return undefined;
-            });
-        } else {
-            return this.delegate.pick(contents, options, token).then(item => {
-                if (item) {
-                    return item.handle;
-                }
-                return undefined;
-            });
+        const result = await this.delegate.pick<TransferQuickPickItemValue>(contents, options, token);
+
+        if (Array.isArray(result)) {
+            return result.map(({ handle }) => handle);
+        } else if (result) {
+            return result.handle;
         }
+        return undefined;
     }
 
     $setItems(instance: number, items: TransferQuickPickItems[]): Promise<any> {
@@ -194,19 +190,20 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
 
     private sessions = new Map<number, QuickInputSession>();
 
-    $createOrUpdate<T extends theia.QuickPickItem>(params: TransferQuickInput): Promise<void> {
+    $createOrUpdate(params: TransferQuickInput): Promise<void> {
         const sessionId = params.id;
-        let session = this.sessions.get(sessionId);
-        if (!session) {
+        let session: QuickInputSession;
+        const candidate = this.sessions.get(sessionId);
+        if (!candidate) {
             if (params.type === 'quickPick') {
                 const quickPick = this.quickInputService.createQuickPick();
                 quickPick.onDidAccept(() => {
                     this.proxy.$acceptOnDidAccept(sessionId);
                 });
-                quickPick.onDidChangeActive((items: Array<monaco.quickInput.IQuickPickItem>) => {
+                quickPick.onDidChangeActive((items: Array<IQuickPickItem>) => {
                     this.proxy.$onDidChangeActive(sessionId, items.map(item => (item as TransferQuickPickItems).handle));
                 });
-                quickPick.onDidChangeSelection((items: Array<monaco.quickInput.IQuickPickItem>) => {
+                quickPick.onDidChangeSelection((items: Array<IQuickPickItem>) => {
                     this.proxy.$onDidChangeSelection(sessionId, items.map(item => (item as TransferQuickPickItems).handle));
                 });
                 quickPick.onDidTriggerButton((button: QuickInputButtonHandle) => {
@@ -242,6 +239,8 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
                 };
             }
             this.sessions.set(sessionId, session);
+        } else {
+            session = candidate;
         }
         if (session) {
             const { input, handlesToItems } = session;
@@ -273,7 +272,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
                         const { iconPath, tooltip, handle } = button;
                         if ('id' in iconPath) {
                             return {
-                                iconClass: monaco.theme.ThemeIcon.asClassName(iconPath),
+                                iconClass: ThemeIcon.asClassName(iconPath),
                                 tooltip,
                                 handle
                             };

package/src/main/browser/style/tree.css

@@ -44,3 +44,7 @@
 .theia-tree-view .theia-TreeNode:not(:hover):not(.theia-mod-selected) .theia-tree-view-inline-action {
     display: none;
 }
+
+.codicon.icon-inline {
+    font-size: var(--theia-ui-font-size1);
+}

package/src/main/browser/text-editor-main.ts

@@ -14,6 +14,8 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import * as monaco from '@theia/monaco-editor-core';
+import { StandaloneCodeEditor } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneCodeEditor';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import {
@@ -84,23 +86,23 @@ export class TextEditorMain implements Disposable {
         this.toDisposeOnEditor.push(Disposable.create(() => this.editor = undefined));
 
         if (this.editor) {
-            const monaco = this.editor.getControl();
+            const monacoEditor = this.editor.getControl();
             this.toDisposeOnEditor.push(this.editor.onSelectionChanged(_ => {
                 this.updateProperties();
             }));
-            this.toDisposeOnEditor.push(monaco.onDidChangeModel(() => {
+            this.toDisposeOnEditor.push(monacoEditor.onDidChangeModel(() => {
                 this.setEditor(undefined);
             }));
-            this.toDisposeOnEditor.push(monaco.onDidChangeCursorSelection(e => {
+            this.toDisposeOnEditor.push(monacoEditor.onDidChangeCursorSelection(e => {
                 this.updateProperties(e.source);
             }));
-            this.toDisposeOnEditor.push(monaco.onDidChangeConfiguration(() => {
+            this.toDisposeOnEditor.push(monacoEditor.onDidChangeConfiguration(() => {
                 this.updateProperties();
             }));
-            this.toDisposeOnEditor.push(monaco.onDidLayoutChange(() => {
+            this.toDisposeOnEditor.push(monacoEditor.onDidLayoutChange(() => {
                 this.updateProperties();
             }));
-            this.toDisposeOnEditor.push(monaco.onDidScrollChange(() => {
+            this.toDisposeOnEditor.push(monacoEditor.onDidScrollChange(() => {
                 this.updateProperties();
             }));
 
@@ -263,12 +265,9 @@ export class TextEditorMain implements Disposable {
     }
 
     insertSnippet(template: string, ranges: Range[], opts: UndoStopOptions): boolean {
+        const snippetController: SnippetController2 | null | undefined = this.editor?.getControl().getContribution('snippetController2');
 
-        if (!this.editor) {
-            return false;
-        }
-
-        const snippetController: SnippetController2 = this.editor!.getControl().getContribution('snippetController2');
+        if (!snippetController || !this.editor) { return false; }
 
         const selections = ranges.map(r => new monaco.Selection(r.startLineNumber, r.startColumn, r.endLineNumber, r.endColumn));
         this.editor.getControl().setSelections(selections);
@@ -283,7 +282,7 @@ export class TextEditorMain implements Disposable {
         if (!this.editor) {
             return;
         }
-        this.editor.getControl().setDecorations(key, ranges.map(option => Object.assign(option, { color: undefined })));
+        (this.editor.getControl() as unknown as StandaloneCodeEditor).setDecorations('Plugin decorations', key, ranges.map(option => Object.assign(option, { color: undefined })));
     }
 
     setDecorationsFast(key: string, _ranges: number[]): void {
@@ -295,8 +294,7 @@ export class TextEditorMain implements Disposable {
         for (let i = 0; i < len; i++) {
             ranges[i] = new monaco.Range(_ranges[4 * i], _ranges[4 * i + 1], _ranges[4 * i + 2], _ranges[4 * i + 3]);
         }
-
-        this.editor.getControl().setDecorationsFast(key, ranges);
+        (this.editor.getControl() as unknown as StandaloneCodeEditor).setDecorationsFast(key, ranges);
     }
 
     private static toMonacoSelections(selection: Selection): monaco.Selection {

package/src/main/browser/text-editors-main.ts

@@ -41,6 +41,9 @@ import { MonacoBulkEditService } from '@theia/monaco/lib/browser/monaco-bulk-edi
 import { MonacoEditorService } from '@theia/monaco/lib/browser/monaco-editor-service';
 import { theiaUritoUriComponents, UriComponents } from '../../common/uri-components';
 import { Endpoint } from '@theia/core/lib/browser/endpoint';
+import * as monaco from '@theia/monaco-editor-core';
+import { ResourceEdit } from '@theia/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
+import { IDecorationRenderOptions } from '@theia/monaco-editor-core/esm/vs/editor/common/editorCommon';
 
 export class TextEditorsMainImpl implements TextEditorsMain, Disposable {
 
@@ -120,7 +123,7 @@ export class TextEditorsMainImpl implements TextEditorsMain, Disposable {
     async $tryApplyWorkspaceEdit(dto: WorkspaceEditDto): Promise<boolean> {
         const workspaceEdit = toMonacoWorkspaceEdit(dto);
         try {
-            const edits = monaco.editor.ResourceEdit.convert(workspaceEdit);
+            const edits = ResourceEdit.convert(workspaceEdit);
             const { success } = await this.bulkEditService.apply(edits);
             return success;
         } catch {
@@ -135,9 +138,9 @@ export class TextEditorsMainImpl implements TextEditorsMain, Disposable {
         return Promise.resolve(this.editorsAndDocuments.getEditor(id)!.insertSnippet(template, ranges, opts));
     }
 
-    $registerTextEditorDecorationType(key: string, options: DecorationRenderOptions): void {
+    $registerTextEditorDecorationType(key: string, options: DecorationRenderOptions | IDecorationRenderOptions): void {
         this.injectRemoteUris(options);
-        this.monacoEditorService.registerDecorationType(key, options);
+        this.monacoEditorService.registerDecorationType('Plugin decoration', key, options as IDecorationRenderOptions);
         this.toDispose.push(Disposable.create(() => this.$removeTextEditorDecorationType(key)));
     }
 

package/src/main/browser/view/plugin-tree-view-node-label-provider.ts

@@ -20,6 +20,7 @@ import { LabelProviderContribution, LabelProvider, URIIconReference } from '@the
 import { TreeLabelProvider } from '@theia/core/lib/browser/tree/tree-label-provider';
 import { TreeViewNode } from './tree-view-widget';
 import { TreeNode } from '@theia/core/lib/browser/tree/tree';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 @injectable()
 export class PluginTreeViewNodeLabelProvider implements LabelProviderContribution {
@@ -47,7 +48,7 @@ export class PluginTreeViewNodeLabelProvider implements LabelProviderContributio
                 const uri = node.resourceUri && new URI(node.resourceUri) || undefined;
                 return this.labelProvider.getIcon(URIIconReference.create(node.themeIconId, uri));
             }
-            return monaco.theme.ThemeIcon.asClassName({ id: node.themeIconId });
+            return ThemeIcon.asClassName({ id: node.themeIconId });
         }
         if (node.resourceUri) {
             return this.labelProvider.getIcon(new URI(node.resourceUri));

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

@@ -40,7 +40,7 @@ import { DebugConsoleContribution } from '@theia/debug/lib/browser/console/debug
 import { TERMINAL_WIDGET_FACTORY_ID } from '@theia/terminal/lib/browser/terminal-widget-impl';
 import { TreeViewWidget } from './tree-view-widget';
 import { SEARCH_VIEW_CONTAINER_ID } from '@theia/search-in-workspace/lib/browser/search-in-workspace-factory';
-
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 import { WebviewView, WebviewViewResolver } from '../webview-views/webview-views';
 import { WebviewWidget, WebviewWidgetIdentifier } from '../webview/webview';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
@@ -229,9 +229,9 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         const iconClass = 'plugin-view-container-icon-' + viewContainer.id;
 
         if (viewContainer.themeIcon) {
-            const icon = monaco.theme.ThemeIcon.fromString(viewContainer.themeIcon);
+            const icon = ThemeIcon.fromString(viewContainer.themeIcon);
             if (icon) {
-                themeIconClass = monaco.theme.ThemeIcon.asClassName(icon) ?? '';
+                themeIconClass = ThemeIcon.asClassName(icon) ?? '';
             }
         }
 

package/src/main/browser/view/tree-view-widget.tsx

@@ -36,7 +36,7 @@ import {
 import { MenuPath, MenuModelRegistry, ActionMenuNode } from '@theia/core/lib/common/menu';
 import * as React from '@theia/core/shared/react';
 import { PluginSharedStyle } from '../plugin-shared-style';
-import { ACTION_ITEM, Widget } from '@theia/core/lib/browser/widgets/widget';
+import { ACTION_ITEM, codicon, Widget } from '@theia/core/lib/browser/widgets/widget';
 import { Emitter, Event } from '@theia/core/lib/common/event';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { View } from '../../../common/plugin-protocol';
@@ -44,6 +44,7 @@ import CoreURI from '@theia/core/lib/common/uri';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import * as markdownit from '@theia/core/shared/markdown-it';
 import { isMarkdownString } from '../../../plugin/markdown-string';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
 
 export const TREE_NODE_HYPERLINK = 'theia-TreeNodeHyperlink';
 export const VIEW_ITEM_CONTEXT_MENU: MenuPath = ['view-item-context-menu'];
@@ -250,18 +251,35 @@ export class TreeViewWidget extends TreeViewWelcomeWidget {
     @inject(TooltipService)
     protected readonly tooltipService: TooltipService;
 
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
+    protected readonly markdownIt = markdownit();
+
     @postConstruct()
     protected override init(): void {
         super.init();
         this.id = this.identifier.id;
         this.addClass('theia-tree-view');
         this.node.style.height = '100%';
-
+        this.markdownItPlugin();
         this.model.onDidChangeWelcomeState(this.update, this);
         this.toDispose.push(this.model.onDidChangeWelcomeState(this.update, this));
         this.toDispose.push(this.onDidChangeVisibilityEmitter);
     }
 
+    protected markdownItPlugin(): void {
+        this.markdownIt.renderer.rules.text = (tokens, idx) => {
+            const content = tokens[idx].content;
+            return this.labelParser.parse(content).map(chunk => {
+                if (typeof chunk === 'string') {
+                    return chunk;
+                }
+                return `<i class="${codicon(chunk.name)} ${chunk.animation ? `fa-${chunk.animation}` : ''} icon-inline"></i>`;
+            }).join('');
+        };
+    }
+
     protected override renderIcon(node: TreeNode, props: NodeProps): React.ReactNode {
         const icon = this.toNodeIcon(node);
         if (icon) {
@@ -285,7 +303,7 @@ export class TreeViewWidget extends TreeViewWelcomeWidget {
 
         if (node.tooltip && isMarkdownString(node.tooltip)) {
             // Render markdown in custom tooltip
-            const tooltip = markdownit().render(node.tooltip.value);
+            const tooltip = this.markdownIt.render(node.tooltip.value);
 
             attrs = {
                 ...attrs,

package/src/main/browser/webview/webview-environment.ts

@@ -60,8 +60,14 @@ export class WebviewEnvironment {
         return (await this.externalEndpointUrl()).toString(true);
     }
 
-    async resourceRoot(): Promise<string> {
-        return (await this.externalEndpointUrl()).resolve('theia-resource/{{resource}}').toString(true);
+    async resourceRoot(host: string): Promise<string> {
+        if (host === 'frontend') {
+            return (await this.externalEndpointUrl()).withPath('{{path}}').toString(true);
+        }
+
+        // Make sure we preserve the scheme of the resource but convert it into a normal path segment
+        // The scheme is important as we need to know if we are requesting a local or a remote resource.
+        return (await this.externalEndpointUrl()).resolve('theia-resource/{{scheme}}//{{authority}}/{{path}}').toString(true);
     }
 
     async cspSource(): Promise<string> {

package/src/main/browser/webview/webview.ts

@@ -44,6 +44,7 @@ import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import { WebviewPreferences } from './webview-preferences';
 import { WebviewResourceCache } from './webview-resource-cache';
 import { Endpoint } from '@theia/core/lib/browser/endpoint';
+import { isFirefox } from '@theia/core/lib/browser/browser';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { FileOperationError, FileOperationResult } from '@theia/filesystem/lib/common/files';
 import { BinaryBufferReadableStream } from '@theia/core/lib/common/buffer';
@@ -250,6 +251,9 @@ export class WebviewWidget extends BaseWidget implements StatefulWidget {
         const element = document.createElement('iframe');
         element.className = 'webview';
         element.sandbox.add('allow-scripts', 'allow-forms', 'allow-same-origin', 'allow-downloads');
+        if (!isFirefox) {
+            element.setAttribute('allow', 'clipboard-read; clipboard-write; usb; serial; hid;');
+        }
         element.setAttribute('src', `${this.externalEndpoint}/index.html?id=${this.identifier.id}`);
         element.style.border = 'none';
         element.style.width = '100%';

package/src/plugin/languages/selection-range.ts

@@ -26,6 +26,7 @@ import { URI } from '@theia/core/shared/vscode-uri';
 import * as model from '../../common/plugin-api-rpc-model';
 import * as Converter from '../type-converters';
 import * as types from '../types-impl';
+import { Position } from '../../common/plugin-api-rpc';
 
 export class SelectionRangeProviderAdapter {
 
@@ -34,7 +35,7 @@ export class SelectionRangeProviderAdapter {
         private readonly documents: DocumentsExtImpl
     ) { }
 
-    provideSelectionRanges(resource: URI, position: monaco.IPosition[], token: theia.CancellationToken): Promise<model.SelectionRange[][]> {
+    provideSelectionRanges(resource: URI, position: Position[], token: theia.CancellationToken): Promise<model.SelectionRange[][]> {
         const documentData = this.documents.getDocumentData(resource);
 
         if (!documentData) {

package/src/plugin/languages.ts

@@ -531,9 +531,11 @@ export class LanguagesExtImpl implements LanguagesExt {
     // ### Code Reference Provider end
 
     // ### Document Symbol Provider begin
-    registerDocumentSymbolProvider(selector: theia.DocumentSelector, provider: theia.DocumentSymbolProvider, pluginInfo: PluginInfo): theia.Disposable {
+    registerDocumentSymbolProvider(selector: theia.DocumentSelector, provider: theia.DocumentSymbolProvider, pluginInfo: PluginInfo,
+        metadata?: theia.DocumentSymbolProviderMetadata): theia.Disposable {
         const callId = this.addNewAdapter(new OutlineAdapter(this.documents, provider));
-        this.proxy.$registerOutlineSupport(callId, pluginInfo, this.transformDocumentSelector(selector));
+        const displayName = (metadata && metadata.label) || getPluginLabel(pluginInfo);
+        this.proxy.$registerOutlineSupport(callId, pluginInfo, this.transformDocumentSelector(selector), displayName);
         return this.createDisposable(callId);
     }
 
@@ -700,3 +702,7 @@ function serializeIndentation(indentationRules?: theia.IndentationRule): Seriali
         unIndentedLinePattern: serializeRegExp(indentationRules.unIndentedLinePattern)
     };
 }
+
+function getPluginLabel(pluginInfo: PluginInfo): string {
+    return pluginInfo.displayName || pluginInfo.name;
+}

package/src/plugin/node/debug/debug.ts

@@ -132,7 +132,7 @@ export class DebugExtImpl implements DebugExt {
         return this.onDidChangeBreakpointsEmitter.event;
     }
 
-    addBreakpoints(breakpoints: theia.Breakpoint[]): void {
+    addBreakpoints(breakpoints: readonly theia.Breakpoint[]): void {
         const added: theia.Breakpoint[] = [];
         for (const b of breakpoints) {
             if (this._breakpoints.has(b.id)) {
@@ -147,7 +147,7 @@ export class DebugExtImpl implements DebugExt {
         }
     }
 
-    removeBreakpoints(breakpoints: theia.Breakpoint[]): void {
+    removeBreakpoints(breakpoints: readonly theia.Breakpoint[]): void {
         const removed: theia.Breakpoint[] = [];
         const removedIds: string[] = [];
         for (const b of breakpoints) {

package/src/plugin/output-channel/output-channel-item.ts

@@ -41,6 +41,12 @@ export class OutputChannelImpl implements theia.OutputChannel {
         this.append(value + '\n');
     }
 
+    replace(value: string): void {
+        this.validate();
+        this.clear();
+        this.append(value);
+    }
+
     clear(): void {
         this.validate();
         this.proxy.$clear(this.name);

package/src/plugin/plugin-context.ts

@@ -752,8 +752,9 @@ export function createAPIFactory(
             registerReferenceProvider(selector: theia.DocumentSelector, provider: theia.ReferenceProvider): theia.Disposable {
                 return languagesExt.registerReferenceProvider(selector, provider, pluginToPluginInfo(plugin));
             },
-            registerDocumentSymbolProvider(selector: theia.DocumentSelector, provider: theia.DocumentSymbolProvider): theia.Disposable {
-                return languagesExt.registerDocumentSymbolProvider(selector, provider, pluginToPluginInfo(plugin));
+            registerDocumentSymbolProvider(selector: theia.DocumentSelector, provider: theia.DocumentSymbolProvider,
+                metadata?: theia.DocumentSymbolProviderMetadata): theia.Disposable {
+                return languagesExt.registerDocumentSymbolProvider(selector, provider, pluginToPluginInfo(plugin), metadata);
             },
             registerColorProvider(selector: theia.DocumentSelector, provider: theia.DocumentColorProvider): theia.Disposable {
                 return languagesExt.registerColorProvider(selector, provider, pluginToPluginInfo(plugin));
@@ -852,10 +853,10 @@ export function createAPIFactory(
             stopDebugging(session?: theia.DebugSession): Thenable<void> {
                 return debugExt.stopDebugging(session);
             },
-            addBreakpoints(breakpoints: theia.Breakpoint[]): void {
+            addBreakpoints(breakpoints: readonly theia.Breakpoint[]): void {
                 debugExt.addBreakpoints(breakpoints);
             },
-            removeBreakpoints(breakpoints: theia.Breakpoint[]): void {
+            removeBreakpoints(breakpoints: readonly theia.Breakpoint[]): void {
                 debugExt.removeBreakpoints(breakpoints);
             }
         };

package/src/plugin/quick-open.ts

@@ -19,7 +19,7 @@ import {
     Item, TransferQuickInputButton, TransferQuickPickItems, TransferQuickInput
 } from '../common/plugin-api-rpc';
 import * as theia from '@theia/plugin';
-import { QuickPickItem, InputBoxOptions, InputBox, QuickPick, QuickInput } from '@theia/plugin';
+import { QuickPickItem, InputBoxOptions, InputBox, QuickPick, QuickInput, QuickPickItemValue } from '@theia/plugin';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
 import { RPCProtocol } from '../common/rpc-protocol';
 import { Emitter, Event } from '@theia/core/lib/common/event';
@@ -74,7 +74,7 @@ export class QuickOpenExtImpl implements QuickOpenExt {
     }
 
     /* eslint-disable max-len */
-    showQuickPick(itemsOrItemsPromise: Array<QuickPickItem> | Promise<Array<QuickPickItem>>, options: theia.QuickPickOptions & { canPickMany: true; }, token?: theia.CancellationToken): Promise<Array<QuickPickItem> | undefined>;
+    showQuickPick(itemsOrItemsPromise: Array<QuickPickItem> | Promise<Array<QuickPickItem>>, options: theia.QuickPickOptions & { canPickMany: true; }, token?: theia.CancellationToken): Promise<Array<QuickPickItemValue> | undefined>;
     showQuickPick(itemsOrItemsPromise: string[] | Promise<string[]>, options?: theia.QuickPickOptions, token?: theia.CancellationToken): Promise<string | undefined>;
     showQuickPick(itemsOrItemsPromise: Array<QuickPickItem> | Promise<Array<QuickPickItem>>, options?: theia.QuickPickOptions, token?: theia.CancellationToken): Promise<QuickPickItem | undefined>;
     showQuickPick(itemsOrItemsPromise: Item[] | Promise<Item[]>, options?: theia.QuickPickOptions, token: theia.CancellationToken = CancellationToken.None): Promise<Item | Item[] | undefined> {
@@ -420,10 +420,10 @@ export class QuickInputExt implements QuickInput {
         this.dispose();
     }
 
-    protected convertURL(iconPath: monaco.Uri | { light: string | monaco.Uri; dark: string | monaco.Uri } | monaco.theme.ThemeIcon):
+    protected convertURL(iconPath: URI | { light: string | URI; dark: string | URI } | ThemeIcon):
         URI | { light: string | URI; dark: string | URI } | ThemeIcon {
-        const toUrl = (arg: string | monaco.Uri) => {
-            arg = arg instanceof monaco.Uri && arg.scheme === 'file' ? arg.fsPath : arg;
+        const toUrl = (arg: string | URI) => {
+            arg = arg instanceof URI && arg.scheme === 'file' ? arg.fsPath : arg;
             if (typeof arg !== 'string') {
                 return arg.toString(true);
             }
@@ -435,10 +435,10 @@ export class QuickInputExt implements QuickInput {
         };
         if (ThemeIcon.is(iconPath)) {
             return iconPath;
-        } else if (typeof iconPath === 'string' || iconPath instanceof monaco.Uri) {
+        } else if (typeof iconPath === 'string' || iconPath instanceof URI) {
             return URI.parse(toUrl(iconPath));
         } else {
-            const { light, dark } = iconPath as { light: string | monaco.Uri, dark: string | monaco.Uri };
+            const { light, dark } = iconPath as { light: string | URI, dark: string | URI };
             return {
                 light: toUrl(light),
                 dark: toUrl(dark)
@@ -613,15 +613,20 @@ export class QuickPickExt<T extends theia.QuickPickItem> extends QuickInputExt i
             this._itemsToHandles.set(item, i);
         });
         this.update({
-            items: items.map((item, i) => ({
-                type: item.type,
-                label: item.label,
-                description: item.description,
-                handle: i,
-                detail: item.detail,
-                picked: item.picked,
-                alwaysShow: item.alwaysShow
-            }))
+            items: items.map((item, i) => {
+                if (item.type === 'separator') {
+                    return { type: item.type, label: item.label };
+                }
+                return {
+                    type: item.type,
+                    label: item.label,
+                    description: item.description,
+                    handle: i,
+                    detail: item.detail,
+                    picked: item.picked,
+                    alwaysShow: item.alwaysShow
+                };
+            })
         });
     }
 

package/src/plugin/type-converters.ts

@@ -735,7 +735,7 @@ export function fromTask(task: theia.Task): TaskDto | undefined {
         taskDto.problemMatcher = task.problemMatchers;
     }
     if ('detail' in task) {
-        taskDto.detail = (task as theia.Task2).detail;
+        taskDto.detail = task.detail;
     }
     if (typeof task.scope === 'object') {
         taskDto.scope = task.scope.uri.toString();
@@ -797,7 +797,7 @@ export function toTask(taskDto: TaskDto): theia.Task {
     result.name = label;
     result.source = source;
     if (detail) {
-        (result as theia.Task2).detail = detail;
+        result.detail = detail;
     }
     if (typeof scope === 'string') {
         const uri = URI.parse(scope);
@@ -1067,31 +1067,24 @@ export function fromColorPresentation(colorPresentation: theia.ColorPresentation
 }
 
 export function convertToTransferQuickPickItems(items: rpc.Item[]): rpc.TransferQuickPickItems[] {
-    const pickItems: rpc.TransferQuickPickItems[] = [];
-    for (let handle = 0; handle < items.length; handle++) {
-        const item = items[handle];
-        let label: string;
-        let description: string | undefined;
-        let detail: string | undefined;
-        let picked: boolean | undefined;
-        let alwaysShow: boolean | undefined;
-
+    return items.map<rpc.TransferQuickPickItems>((item, index) => {
         if (typeof item === 'string') {
-            label = item;
+            return { type: 'item', label: item, handle: index };
+        } else if (item.type === 'separator') {
+            return { ...item, handle: index };
         } else {
-            ({ label, description, detail, picked, alwaysShow } = item);
+            const { label, description, detail, picked, alwaysShow } = item;
+            return {
+                type: 'item',
+                label,
+                description,
+                detail,
+                picked,
+                alwaysShow,
+                handle: index,
+            };
         }
-
-        pickItems.push({
-            label,
-            description,
-            handle,
-            detail,
-            picked,
-            alwaysShow
-        });
-    }
-    return pickItems;
+    });
 }
 
 export namespace DecorationRenderOptions {
@@ -1217,6 +1210,7 @@ export function pathOrURIToURI(value: string | URI): URI {
 export function pluginToPluginInfo(plugin: Plugin): rpc.PluginInfo {
     return {
         id: plugin.model.id,
-        name: plugin.model.name
+        name: plugin.model.name,
+        displayName: plugin.model.displayName
     };
 }

package/src/plugin/types-impl.ts

@@ -2086,9 +2086,7 @@ export class Task {
 }
 
 @es5ClassCompat
-export class Task2 extends Task {
-    detail?: string;
-}
+export class Task2 extends Task { }
 
 @es5ClassCompat
 export class DebugAdapterExecutable {

package/src/plugin/webviews.ts

@@ -216,9 +216,9 @@ export class WebviewImpl implements theia.Webview {
 
     asWebviewUri(resource: theia.Uri): theia.Uri {
         const uri = this.initData.webviewResourceRoot
-            // Make sure we preserve the scheme of the resource but convert it into a normal path segment
-            // The scheme is important as we need to know if we are requesting a local or a remote resource.
-            .replace('{{resource}}', resource.scheme + resource.toString().replace(/^\S+?:/, ''))
+            .replace('{{scheme}}', resource.scheme)
+            .replace('{{authority}}', resource.authority)
+            .replace('{{path}}', resource.path.replace(/^\//, ''))
             .replace('{{uuid}}', this.viewId);
         return URI.parse(uri);
     }