vscode support iconPath in QuickPickItem

fixes #12883 VS Code 1.81 finalized the support for the iconPath in QuickPickItem. This is a partial support: full API support and the display of the ThemeIcon, but the display of the URI based icons is not yet available. This last part requires an update in monaco editor core Contributed on behalf of STMicroelectronics Update monaco-quick-input-service.ts Add @monaco-uplift as requested by review
eclipse-theia · Sep 27, 2023 · 077b08c · 077b08c
1 parent 4564a4b
commit 077b08c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - [core] fixed logger level propagation when log config file changes at runtime [#12566](https://github.com/eclipse-theia/theia/pull/12566) - Contributed on behalf of STMicroelectronics
 - [vscode] stub TestController invalidateTestResults [#12944](https://github.com/eclipse-theia/theia/pull/12944) - Contributed by STMicroelectronics
+- [vscode] support iconPath in QuickPickItem [#12945](https://github.com/eclipse-theia/theia/pull/12945) - Contributed by STMicroelectronics
 - [vsx-registry] added a hint to extension fetching ENOTFOUND errors [#12858](https://github.com/eclipse-theia/theia/pull/12858) - Contributed by STMicroelectronics
 
 ## v1.41.0 - 08/31/2023

diff --git a/packages/core/src/common/quick-pick-service.ts b/packages/core/src/common/quick-pick-service.ts
@@ -54,6 +54,7 @@ export interface QuickPickItem {
     description?: string;
     detail?: string;
     keySequence?: KeySequence;
+    iconPath?: URI | Uri | { light?: URI | Uri; dark: URI | Uri } | { id: string };
     iconClasses?: string[];
     alwaysShow?: boolean;
     highlights?: QuickPickItemHighlights;

diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts
@@ -18,7 +18,7 @@ import {
     ApplicationShell,
     InputBox, InputOptions, KeybindingRegistry, NormalizedQuickInputButton, PickOptions,
     QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem,
-    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator
+    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator, codiconArray
 } from '@theia/core/lib/browser';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
@@ -42,6 +42,7 @@ import { Event } from '@theia/core';
 import { MonacoColorRegistry } from './monaco-color-registry';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 // Copied from @vscode/src/vs/base/parts/quickInput/browser/quickInputList.ts
 export interface IListElement {
@@ -316,6 +317,18 @@ export class MonacoQuickInputService implements QuickInputService {
         const monacoPicks: Promise<QuickPickInput<IQuickPickItem>[]> = new Promise(async resolve => {
             const updatedPicks = (await picks).map(pick => {
                 if (pick.type !== 'separator') {
+                    const icon = pick.iconPath;
+                    // @monaco-uplift
+                    // Other kind of icons (URI and URI dark/light) shall be supported once monaco editor has been upgraded to at least 1.81.
+                    // see https://github.com/eclipse-theia/theia/pull/12945#issue-1913645228
+                    if (ThemeIcon.isThemeIcon(icon)) {
+                        const codicon = codiconArray(icon.id);
+                        if (pick.iconClasses) {
+                            pick.iconClasses.push(...codicon);
+                        } else {
+                            pick.iconClasses = codicon;
+                        }
+                    }
                     pick.buttons &&= pick.buttons.map(QuickInputButton.normalize);
                 }
                 return pick as M;

diff --git a/packages/plugin-ext/src/plugin/quick-open.ts b/packages/plugin-ext/src/plugin/quick-open.ts
@@ -655,6 +655,7 @@ export class QuickPickExt<T extends theia.QuickPickItem> extends QuickInputExt i
                 pickItems.push({
                     kind: item.kind,
                     label: item.label,
+                    iconPath: item.iconPath ? getIconUris(item.iconPath) : undefined,
                     description: item.description,
                     handle,
                     detail: item.detail,

diff --git a/packages/plugin-ext/src/plugin/type-converters.ts b/packages/plugin-ext/src/plugin/type-converters.ts
@@ -1212,11 +1212,12 @@ export function convertToTransferQuickPickItems(items: rpc.Item[]): rpc.Transfer
         } else if (item.kind === QuickPickItemKind.Separator) {
             return { type: 'separator', label: item.label, handle: index };
         } else {
-            const { label, description, detail, picked, alwaysShow, buttons } = item;
+            const { label, description, iconPath, detail, picked, alwaysShow, buttons } = item;
             return {
                 type: 'item',
                 label,
                 description,
+                iconPath,
                 detail,
                 picked,
                 alwaysShow,

diff --git a/packages/plugin/src/theia.d.ts b/packages/plugin/src/theia.d.ts
@@ -2140,6 +2140,11 @@ export module '@theia/plugin' {
          */
         kind?: QuickPickItemKind;
 
+        /**
+         * The icon path or {@link ThemeIcon} for the QuickPickItem.
+         */
+        iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
+
         /**
          * A human-readable string which is rendered less prominent in the same line. Supports rendering of
          * {@link ThemeIcon theme icons} via the `$(<name>)`-syntax.