From 077b08ccc6dba298d173d3c59097f0ad379ff932 Mon Sep 17 00:00:00 2001 From: Remi Schnekenburger Date: Tue, 12 Sep 2023 10:56:01 +0200 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + packages/core/src/common/quick-pick-service.ts | 1 + .../src/browser/monaco-quick-input-service.ts | 15 ++++++++++++++- packages/plugin-ext/src/plugin/quick-open.ts | 1 + packages/plugin-ext/src/plugin/type-converters.ts | 3 ++- packages/plugin/src/theia.d.ts | 5 +++++ 6 files changed, 24 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52a80ad7394df..4940d003374e8 100644 --- 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 index 847e1b16de583..f87b6bfb27797 100644 --- 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 index 0fddf71d686c8..408d3c09aafb8 100644 --- 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[]> = 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 index ad2975571403d..82a564107a404 100644 --- 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 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 index 8dc7b11def8be..a109a68f489f2 100644 --- 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 index 0a2e5130eb1a2..146981c847d52 100644 --- 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 `$()`-syntax.