Merge pull request #209118 from microsoft/tyriar/199964

Use IconSelectBox to change terminal icon, remove dupes

src/vs/workbench/contrib/terminal/browser/terminalIconPicker.ts

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Dimension, getActiveDocument } from 'vs/base/browser/dom';
+import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget';
+import { Lazy } from 'vs/base/common/lazy';
+import { Disposable } from 'vs/base/common/lifecycle';
+import type { ThemeIcon } from 'vs/base/common/themables';
+import { IHoverService } from 'vs/platform/hover/browser/hover';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { getIconRegistry, IconContribution } from 'vs/platform/theme/common/iconRegistry';
+import { WorkbenchIconSelectBox } from 'vs/workbench/services/userDataProfile/browser/iconSelectBox';
+
+const icons = new Lazy<IconContribution[]>(() => {
+	const iconDefinitions = getIconRegistry().getIcons();
+	const includedChars = new Set<string>();
+	const dedupedIcons = iconDefinitions.filter(e => {
+		if (!('fontCharacter' in e.defaults)) {
+			return false;
+		}
+		if (includedChars.has(e.defaults.fontCharacter)) {
+			return false;
+		}
+		includedChars.add(e.defaults.fontCharacter);
+		return true;
+	});
+	return dedupedIcons;
+});
+
+export class TerminalIconPicker extends Disposable {
+	private readonly _iconSelectBox: WorkbenchIconSelectBox;
+
+	constructor(
+		@IInstantiationService instantiationService: IInstantiationService,
+		@IHoverService private readonly _hoverService: IHoverService
+	) {
+		super();
+
+		this._iconSelectBox = instantiationService.createInstance(WorkbenchIconSelectBox, {
+			icons: icons.value,
+			inputBoxStyles: defaultInputBoxStyles,
+			showIconInfo: true
+		});
+	}
+
+	async pickIcons(): Promise<ThemeIcon | undefined> {
+		const dimension = new Dimension(486, 260);
+		return new Promise<ThemeIcon | undefined>(resolve => {
+			this._register(this._iconSelectBox.onDidSelect(e => {
+				resolve(e);
+				this._iconSelectBox.dispose();
+			}));
+			this._iconSelectBox.clearInput();
+			const hoverWidget = this._hoverService.showHover({
+				content: this._iconSelectBox.domNode,
+				target: getActiveDocument().body,
+				position: {
+					hoverPosition: HoverPosition.BELOW,
+				},
+				persistence: {
+					sticky: true,
+				},
+				appearance: {
+					showPointer: true
+				}
+			}, true);
+			if (hoverWidget) {
+				this._register(hoverWidget);
+			}
+			this._iconSelectBox.layout(dimension);
+			this._iconSelectBox.focus();
+		});
+	}
+}

src/vs/workbench/contrib/terminal/browser/terminalInstance.ts

@@ -11,7 +11,7 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Orientation } from 'vs/base/browser/ui/sash/sash';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { AutoOpenBarrier, Promises, disposableTimeout, timeout } from 'vs/base/common/async';
-import { Codicon, getAllCodicons } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
 import { debounce } from 'vs/base/common/decorators';
 import { ErrorNoTelemetry, onUnexpectedError } from 'vs/base/common/errors';
 import { Emitter, Event } from 'vs/base/common/event';
@@ -88,6 +88,7 @@ import type { IMarker, Terminal as XTermTerminal } from '@xterm/xterm';
 import { AccessibilityCommandId } from 'vs/workbench/contrib/accessibility/common/accessibilityCommands';
 import { terminalStrings } from 'vs/workbench/contrib/terminal/common/terminalStrings';
 import { shouldPasteTerminalText } from 'vs/workbench/contrib/terminal/common/terminalClipboard';
+import { TerminalIconPicker } from 'vs/workbench/contrib/terminal/browser/terminalIconPicker';
 
 const enum Constants {
 	/**
@@ -365,7 +366,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		@IOpenerService private readonly _openerService: IOpenerService,
 		@ICommandService private readonly _commandService: ICommandService,
 		@IAccessibilitySignalService private readonly _accessibilitySignalService: IAccessibilitySignalService,
-		@IViewDescriptorService private readonly _viewDescriptorService: IViewDescriptorService
+		@IViewDescriptorService private readonly _viewDescriptorService: IViewDescriptorService,
 	) {
 		super();
 
@@ -2171,21 +2172,15 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 			this._onIconChanged.fire({ instance: this, userInitiated: true });
 			return icon;
 		}
-		type Item = IQuickPickItem & { icon: TerminalIcon };
-		const items: Item[] = [];
-		for (const icon of getAllCodicons()) {
-			items.push({ label: `$(${icon.id})`, description: `${icon.id}`, icon });
-		}
-		const result = await this._quickInputService.pick(items, {
-			matchOnDescription: true,
-			placeHolder: nls.localize('changeIcon', 'Select an icon for the terminal')
-		});
-		if (result) {
-			this._icon = result.icon;
-			this._onIconChanged.fire({ instance: this, userInitiated: true });
-			return this._icon;
+		const iconPicker = this._scopedInstantiationService.createInstance(TerminalIconPicker);
+		const pickedIcon = await iconPicker.pickIcons();
+		iconPicker.dispose();
+		if (!pickedIcon) {
+			return undefined;
 		}
-		return;
+		this._icon = pickedIcon;
+		this._onIconChanged.fire({ instance: this, userInitiated: true });
+		return pickedIcon;
 	}
 
 	async changeColor(color?: string, skipQuickPick?: boolean): Promise<string | undefined> {

test/smoke/src/areas/terminal/terminal-editors.test.ts

@@ -31,13 +31,6 @@ export function setup() {
 			await terminal.assertSingleTab({ color }, true);
 		});
 
-		it('should update icon of the tab', async () => {
-			await terminal.runCommand(TerminalCommandId.CreateNewEditor);
-			const icon = 'symbol-method';
-			await terminal.runCommandWithValue(TerminalCommandIdWithValue.ChangeIcon, icon);
-			await terminal.assertSingleTab({ icon }, true);
-		});
-
 		it('should rename the tab', async () => {
 			await terminal.runCommand(TerminalCommandId.CreateNewEditor);
 			const name = 'my terminal name';

test/smoke/src/areas/terminal/terminal-tabs.test.ts

@@ -29,38 +29,6 @@ export function setup() {
 			await terminal.assertTerminalGroups([[{}], [{}]]);
 		});
 
-		it('should update color of the single tab', async () => {
-			await terminal.createTerminal();
-			const color = 'Cyan';
-			await terminal.runCommandWithValue(TerminalCommandIdWithValue.ChangeColor, color);
-			await terminal.assertSingleTab({ color });
-		});
-
-		it('should update color of the tab in the tabs list', async () => {
-			await terminal.createTerminal();
-			await terminal.runCommand(TerminalCommandId.Split);
-			await terminal.waitForTerminalText(lines => lines.some(line => line.length > 0), undefined, 1);
-			const color = 'Cyan';
-			await terminal.runCommandWithValue(TerminalCommandIdWithValue.ChangeColor, color);
-			await terminal.assertTerminalGroups([[{}, { color }]]);
-		});
-
-		it('should update icon of the single tab', async () => {
-			await terminal.createTerminal();
-			const icon = 'symbol-method';
-			await terminal.runCommandWithValue(TerminalCommandIdWithValue.ChangeIcon, icon);
-			await terminal.assertSingleTab({ icon });
-		});
-
-		it('should update icon of the tab in the tabs list', async () => {
-			await terminal.createTerminal();
-			await terminal.runCommand(TerminalCommandId.Split);
-			await terminal.waitForTerminalText(lines => lines.some(line => line.length > 0), undefined, 1);
-			const icon = 'symbol-method';
-			await terminal.runCommandWithValue(TerminalCommandIdWithValue.ChangeIcon, icon);
-			await terminal.assertTerminalGroups([[{}, { icon }]]);
-		});
-
 		it('should rename the single tab', async () => {
 			await terminal.createTerminal();
 			const name = 'my terminal name';