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
eclipse-theia · Sep 26, 2023 · ea74d6c · ea74d6c
1 parent fcde5ea
commit ea74d6c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ## v1.42.0
 
 - [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] 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,15 @@ 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;
+                    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.