API proposal for icons in quick pick (microsoft#184729)

Part of microsoft#184726

Author: alexr00

src/vs/platform/quickinput/browser/media/quickInput.css

@@ -206,6 +206,18 @@
 	margin: 0;
 }
 
+.quick-input-list .quick-input-list-icon {
+	background-size: 16px;
+	background-position: left center;
+	background-repeat: no-repeat;
+	padding-right: 6px;
+	width: 16px;
+	height: 22px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .quick-input-list .quick-input-list-rows {
 	overflow: hidden;
 	text-overflow: ellipsis;

src/vs/platform/quickinput/browser/quickInput.ts

@@ -35,6 +35,7 @@ import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickIn
 import { QuickInputBox } from './quickInputBox';
 import { QuickInputList, QuickInputListFocus } from './quickInputList';
 import { getIconClass, renderQuickInputDescription } from './quickInputUtils';
+import { ColorScheme } from 'vs/platform/theme/common/theme';
 
 export interface IQuickInputOptions {
 	idPrefix: string;
@@ -65,6 +66,7 @@ export interface IQuickInputStyles {
 	readonly keybindingLabel: IKeybindingLabelStyles;
 	readonly list: IListStyles;
 	readonly pickerGroup: { pickerGroupBorder: string | undefined; pickerGroupForeground: string | undefined };
+	readonly colorScheme: ColorScheme;
 }
 
 export interface IQuickInputWidgetStyles {

src/vs/platform/quickinput/browser/quickInputList.ts

@@ -34,6 +34,8 @@ import { IQuickInputOptions } from 'vs/platform/quickinput/browser/quickInput';
 import { getIconClass } from 'vs/platform/quickinput/browser/quickInputUtils';
 import { IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, IQuickPickSeparatorButtonEvent, QuickPickItem } from 'vs/platform/quickinput/common/quickInput';
 import { Lazy } from 'vs/base/common/lazy';
+import { URI } from 'vs/base/common/uri';
+import { ColorScheme, isDark } from 'vs/platform/theme/common/theme';
 
 const $ = dom.$;
 
@@ -218,6 +220,7 @@ class ListElement implements IListElement {
 interface IListElementTemplateData {
 	entry: HTMLDivElement;
 	checkbox: HTMLInputElement;
+	icon: HTMLDivElement;
 	label: IconLabel;
 	keybinding: KeybindingLabel;
 	detail: IconLabel;
@@ -232,6 +235,8 @@ class ListElementRenderer implements IListRenderer<IListElement, IListElementTem
 
 	static readonly ID = 'listelement';
 
+	constructor(private readonly colorScheme: ColorScheme) { }
+
 	get templateId() {
 		return ListElementRenderer.ID;
 	}
@@ -263,6 +268,7 @@ class ListElementRenderer implements IListRenderer<IListElement, IListElementTem
 
 		// Label
 		data.label = new IconLabel(row1, { supportHighlights: true, supportDescriptionHighlights: true, supportIcons: true });
+		data.icon = <HTMLInputElement>dom.prepend(data.label.element, $('.quick-input-list-icon'));
 
 		// Keybinding
 		const keybindingContainer = dom.append(row1, $('.quick-input-list-entry-keybinding'));
@@ -293,6 +299,16 @@ class ListElementRenderer implements IListRenderer<IListElement, IListElementTem
 
 		const { labelHighlights, descriptionHighlights, detailHighlights } = element;
 
+		if (element.item?.iconPath) {
+			const icon = isDark(this.colorScheme) ? element.item.iconPath.dark : (element.item.iconPath.light ?? element.item.iconPath.dark);
+			const iconUrl = URI.revive(icon);
+			data.icon.className = 'quick-input-list-icon';
+			data.icon.style.backgroundImage = dom.asCSSUrl(iconUrl);
+		} else {
+			data.icon.style.backgroundImage = '';
+			data.icon.className = element.item?.iconClass ? `quick-input-list-icon ${element.item.iconClass}` : '';
+		}
+
 		// Label
 		const options: IIconLabelValueOptions = {
 			matches: labelHighlights || [],
@@ -449,7 +465,7 @@ export class QuickInputList {
 		this.container = dom.append(this.parent, $('.quick-input-list'));
 		const delegate = new ListElementDelegate();
 		const accessibilityProvider = new QuickInputAccessibilityProvider();
-		this.list = options.createList('QuickInput', this.container, delegate, [new ListElementRenderer()], {
+		this.list = options.createList('QuickInput', this.container, delegate, [new ListElementRenderer(this.options.styles.colorScheme)], {
 			identityProvider: { getId: element => element.saneLabel },
 			setRowLineHeight: false,
 			multipleSelectionSupport: false,

src/vs/platform/quickinput/browser/quickInputService.ts

@@ -221,7 +221,8 @@ export class QuickInputService extends Themable implements IQuickInputService {
 			pickerGroup: {
 				pickerGroupBorder: asCssVariable(pickerGroupBorder),
 				pickerGroupForeground: asCssVariable(pickerGroupForeground),
-			}
+			},
+			colorScheme: this.themeService.getColorTheme().type
 		};
 	}
 }

src/vs/platform/quickinput/common/quickInput.ts

@@ -39,6 +39,8 @@ export interface IQuickPickItem {
 	 */
 	keybinding?: ResolvedKeybinding;
 	iconClasses?: readonly string[];
+	iconPath?: { dark: URI; light?: URI };
+	iconClass?: string;
 	italic?: boolean;
 	strikethrough?: boolean;
 	highlights?: IQuickPickItemHighlights;

src/vs/platform/quickinput/test/browser/quickinput.test.ts

@@ -15,6 +15,7 @@ import { unthemedKeybindingLabelOptions } from 'vs/base/browser/ui/keybindingLab
 import { unthemedProgressBarOptions } from 'vs/base/browser/ui/progressbar/progressbar';
 import { QuickInputController } from 'vs/platform/quickinput/browser/quickInput';
 import { IQuickPick, IQuickPickItem } from 'vs/platform/quickinput/common/quickInput';
+import { ColorScheme } from 'vs/platform/theme/common/theme';
 
 // Sets up an `onShow` listener to allow us to wait until the quick pick is shown (useful when triggering an `accept()` right after launching a quick pick)
 // kick this off before you launch the picker and then await the promise returned after you launch the picker.
@@ -82,6 +83,7 @@ suite('QuickInput', () => { // https://github.com/microsoft/vscode/issues/147543
 					pickerGroupBorder: undefined,
 					pickerGroupForeground: undefined,
 				},
+				colorScheme: ColorScheme.DARK
 			}
 		});
 

src/vs/workbench/api/common/extHost.protocol.ts

@@ -518,6 +518,8 @@ export interface TransferQuickPickItem {
 	// shared properties from IQuickPickItem
 	type?: 'item';
 	label: string;
+	iconPath?: { light?: URI; dark: URI };
+	iconClass?: string;
 	description?: string;
 	detail?: string;
 	picked?: boolean;

src/vs/workbench/api/common/extHostQuickOpen.ts

@@ -86,6 +86,7 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 				}
 
 				const allowedTooltips = isProposedApiEnabled(extension, 'quickPickItemTooltip');
+				const allowedIcons = isProposedApiEnabled(extension, 'quickPickItemIcon');
 
 				return itemsPromise.then(items => {
 
@@ -100,8 +101,14 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 							if (item.tooltip && !allowedTooltips) {
 								console.warn(`Extension '${extension.identifier.value}' uses a tooltip which is proposed API that is only available when running out of dev or with the following command line switch: --enable-proposed-api ${extension.identifier.value}`);
 							}
+							if (item.iconPath && !allowedIcons) {
+								console.warn(`Extension '${extension.identifier.value}' uses an icon which is proposed API that is only available when running out of dev or with the following command line switch: --enable-proposed-api ${extension.identifier.value}`);
+							}
+							const icon = (item.iconPath && allowedIcons) ? getIconPathOrClass(item.iconPath) : undefined;
 							pickItems.push({
 								label: item.label,
+								iconPath: icon?.iconPath,
+								iconClass: icon?.iconClass,
 								description: item.description,
 								detail: item.detail,
 								picked: item.picked,
@@ -390,7 +397,7 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 			this.update({
 				buttons: buttons.map<TransferQuickInputButton>((button, i) => {
 					return {
-						...getIconPathOrClass(button),
+						...getIconPathOrClass(button.iconPath),
 						tooltip: button.tooltip,
 						handle: button === QuickInputButtons.Back ? -1 : i,
 					};
@@ -510,8 +517,8 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 		return typeof iconPath === 'object' && 'dark' in iconPath ? iconPath.dark : iconPath;
 	}
 
-	function getIconPathOrClass(button: QuickInputButton) {
-		const iconPathOrIconClass = getIconUris(button.iconPath);
+	function getIconPathOrClass(icon: QuickInputButton['iconPath']) {
+		const iconPathOrIconClass = getIconUris(icon);
 		let iconPath: { dark: URI; light?: URI | undefined } | undefined;
 		let iconClass: string | undefined;
 		if ('id' in iconPathOrIconClass) {
@@ -566,6 +573,8 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 			});
 
 			const allowedTooltips = isProposedApiEnabled(this.extension, 'quickPickItemTooltip');
+			const allowedIcons = isProposedApiEnabled(this.extension, 'quickPickItemIcon');
+
 			const pickItems: TransferQuickPickItemOrSeparator[] = [];
 			for (let handle = 0; handle < items.length; handle++) {
 				const item = items[handle];
@@ -575,17 +584,23 @@ export function createExtHostQuickOpen(mainContext: IMainContext, workspace: IEx
 					if (item.tooltip && !allowedTooltips) {
 						console.warn(`Extension '${this.extension.identifier.value}' uses a tooltip which is proposed API that is only available when running out of dev or with the following command line switch: --enable-proposed-api ${this.extension.identifier.value}`);
 					}
+					if (item.iconPath && !allowedIcons) {
+						console.warn(`Extension '${this.extension.identifier.value}' uses an icon which is proposed API that is only available when running out of dev or with the following command line switch: --enable-proposed-api ${this.extension.identifier.value}`);
+					}
+					const icon = (item.iconPath && allowedIcons) ? getIconPathOrClass(item.iconPath) : undefined;
 					pickItems.push({
 						handle,
 						label: item.label,
+						iconPath: icon?.iconPath,
+						iconClass: icon?.iconClass,
 						description: item.description,
 						detail: item.detail,
 						picked: item.picked,
 						alwaysShow: item.alwaysShow,
 						tooltip: allowedTooltips ? MarkdownString.fromStrict(item.tooltip) : undefined,
 						buttons: item.buttons?.map<TransferQuickInputButton>((button, i) => {
 							return {
-								...getIconPathOrClass(button),
+								...getIconPathOrClass(button.iconPath),
 								tooltip: button.tooltip,
 								handle: i
 							};

src/vs/workbench/services/extensions/common/extensionsApiProposals.ts

@@ -66,6 +66,7 @@ export const allApiProposals = Object.freeze({
 	portsAttributes: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.portsAttributes.d.ts',
 	profileContentHandlers: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.profileContentHandlers.d.ts',
 	quickDiffProvider: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.quickDiffProvider.d.ts',
+	quickPickItemIcon: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.quickPickItemIcon.d.ts',
 	quickPickItemTooltip: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.quickPickItemTooltip.d.ts',
 	quickPickSortByLabel: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.quickPickSortByLabel.d.ts',
 	resolvers: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.resolvers.d.ts',

src/vscode-dts/vscode.proposed.quickPickItemIcon.d.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+declare module 'vscode' {
+	/**
+	 * Represents an item that can be selected from
+	 * a list of items.
+	 */
+	export interface QuickPickItem {
+		/**
+		 * The icon path or {@link ThemeIcon} for the QuickPickItem.
+		 */
+		iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
+	}
+}