Support additional toggles in quick pick, adopt in terminal

Author: Tyriar

src/vs/base/browser/ui/findinput/findInput.ts

@@ -16,6 +16,7 @@ import { Emitter, Event } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import 'vs/css!./findInput';
 import * as nls from 'vs/nls';
+import { DisposableStore } from 'vs/base/common/lifecycle';
 
 
 export interface IFindInputOptions extends IFindInputStyles {
@@ -52,6 +53,7 @@ export class FindInput extends Widget {
 	private label: string;
 	private fixFocusOnOptionClickEnabled = true;
 	private imeSessionInProgress = false;
+	private additionalTogglesDisposables: DisposableStore = new DisposableStore();
 
 	protected inputActiveOptionBorder?: Color;
 	protected inputActiveOptionForeground?: Color;
@@ -252,27 +254,7 @@ export class FindInput extends Widget {
 			this.regex.domNode.style.display = 'none';
 		}
 
-		for (const toggle of options?.additionalToggles ?? []) {
-			this._register(toggle);
-			this.controls.appendChild(toggle.domNode);
-
-			this._register(toggle.onChange(viaKeyboard => {
-				this._onDidOptionChange.fire(viaKeyboard);
-				if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
-					this.inputBox.focus();
-				}
-			}));
-
-			this.additionalToggles.push(toggle);
-		}
-
-		if (this.additionalToggles.length > 0) {
-			this.controls.style.display = 'block';
-		}
-
-		this.inputBox.paddingRight =
-			(this._showOptionButtons ? this.caseSensitive.width() + this.wholeWords.width() + this.regex.width() : 0)
-			+ this.additionalToggles.reduce((r, t) => r + t.width(), 0);
+		this.setAdditionalToggles(options?.additionalToggles);
 
 		this.domNode.appendChild(this.controls);
 
@@ -336,6 +318,37 @@ export class FindInput extends Widget {
 		}
 	}
 
+	public setAdditionalToggles(toggles: Toggle[] | undefined): void {
+		for (const currentToggle of this.additionalToggles) {
+			currentToggle.domNode.remove();
+		}
+		this.additionalToggles = [];
+		this.additionalTogglesDisposables.dispose();
+		this.additionalTogglesDisposables = new DisposableStore();
+
+		for (const toggle of toggles ?? []) {
+			this.additionalTogglesDisposables.add(toggle);
+			this.controls.appendChild(toggle.domNode);
+
+			this.additionalTogglesDisposables.add(toggle.onChange(viaKeyboard => {
+				this._onDidOptionChange.fire(viaKeyboard);
+				if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
+					this.inputBox.focus();
+				}
+			}));
+
+			this.additionalToggles.push(toggle);
+		}
+
+		if (this.additionalToggles.length > 0) {
+			this.controls.style.display = 'block';
+		}
+
+		this.inputBox.paddingRight =
+			(this._showOptionButtons ? this.caseSensitive.width() + this.wholeWords.width() + this.regex.width() : 0)
+			+ this.additionalToggles.reduce((r, t) => r + t.width(), 0);
+	}
+
 	public clear(): void {
 		this.clearValidation();
 		this.setValue('');

src/vs/base/parts/quickinput/browser/quickInput.ts

@@ -15,6 +15,7 @@ import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybi
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IListOptions, IListStyles, List } from 'vs/base/browser/ui/list/listWidget';
 import { IProgressBarStyles, ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
+import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 import { Action } from 'vs/base/common/actions';
 import { equals } from 'vs/base/common/arrays';
 import { TimeoutTimer } from 'vs/base/common/async';
@@ -740,6 +741,10 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		this.update();
 	}
 
+	set additionalToggles(toggles: Toggle[] | undefined) {
+		this.ui.inputBox.additionalToggles = toggles;
+	}
+
 	onDidChangeSelection = this.onDidChangeSelectionEmitter.event;
 
 	onDidTriggerItemButton = this.onDidTriggerItemButtonEmitter.event;

src/vs/base/parts/quickinput/browser/quickInputBox.ts

@@ -8,6 +8,7 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { FindInput } from 'vs/base/browser/ui/findinput/findInput';
 import { IInputBoxStyles, IRange, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import Severity from 'vs/base/common/severity';
 import 'vs/css!./media/quickInput';
@@ -24,9 +25,7 @@ export class QuickInputBox extends Disposable {
 	) {
 		super();
 		this.container = dom.append(this.parent, $('.quick-input-box'));
-		this.findInput = this._register(new FindInput(this.container, undefined, false, {
-			label: ''
-		}));
+		this.findInput = this._register(new FindInput(this.container, undefined, false, { label: '' }));
 	}
 
 	onKeyDown = (handler: (event: StandardKeyboardEvent) => void): IDisposable => {
@@ -93,6 +92,10 @@ export class QuickInputBox extends Disposable {
 		this.findInput.setEnabled(enabled);
 	}
 
+	set additionalToggles(toggles: Toggle[] | undefined) {
+		this.findInput.setAdditionalToggles(toggles);
+	}
+
 	hasFocus(): boolean {
 		return this.findInput.inputBox.hasFocus();
 	}

src/vs/base/parts/quickinput/common/quickInput.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 import { Event } from 'vs/base/common/event';
 import { IMatch } from 'vs/base/common/filters';
 import { IItemAccessor } from 'vs/base/common/fuzzyScorer';
@@ -340,6 +341,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
 	hideInput: boolean;
 
 	hideCheckAll: boolean;
+
+	additionalToggles: Toggle[] | undefined;
 }
 
 export interface IInputBox extends IQuickInput {

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

@@ -48,7 +48,7 @@ import { ITerminalCommand, TerminalCapability } from 'vs/platform/terminal/commo
 import { TerminalCapabilityStoreMultiplexer } from 'vs/platform/terminal/common/capabilities/terminalCapabilityStore';
 import { IProcessDataEvent, IProcessPropertyMap, IReconnectionProperties, IShellLaunchConfig, ITerminalDimensionsOverride, ITerminalLaunchError, PosixShellType, ProcessPropertyType, ShellIntegrationStatus, TerminalExitReason, TerminalIcon, TerminalLocation, TerminalSettingId, TerminalShellType, TitleEventSource, WindowsShellType } from 'vs/platform/terminal/common/terminal';
 import { escapeNonWindowsPath, collapseTildePath } from 'vs/platform/terminal/common/terminalEnvironment';
-import { activeContrastBorder, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
+import { activeContrastBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { IWorkspaceContextService, IWorkspaceFolder } from 'vs/platform/workspace/common/workspace';
 import { IWorkspaceTrustRequestService } from 'vs/platform/workspace/common/workspaceTrust';
@@ -90,6 +90,7 @@ import { getIconRegistry } from 'vs/platform/theme/common/iconRegistry';
 import { TaskSettingId } from 'vs/workbench/contrib/tasks/common/tasks';
 import { TerminalStorageKeys } from 'vs/workbench/contrib/terminal/common/terminalStorageKeys';
 import { showWithPinnedItems } from 'vs/platform/quickinput/browser/quickPickPin';
+import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 
 const enum Constants {
 	/**
@@ -1010,27 +1011,32 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		if (items.length === 0) {
 			return;
 		}
+		// TODO: Toggling fuzzy shows pinned again
+		const fuzzySearchToggle = new Toggle({
+			title: 'Fuzzy search',
+			icon: Codicon.searchFuzzy,
+			isChecked: filterMode === 'fuzzy',
+			inputActiveOptionBorder: this._themeService.getColorTheme().getColor(inputActiveOptionBorder),
+			inputActiveOptionForeground: this._themeService.getColorTheme().getColor(inputActiveOptionForeground),
+			inputActiveOptionBackground: this._themeService.getColorTheme().getColor(inputActiveOptionBackground)
+		});
+		fuzzySearchToggle.onChange(() => {
+			if (fuzzySearchToggle.checked) {
+				quickPick.hide();
+				this.runRecent(type, 'fuzzy', quickPick.value);
+			} else {
+				quickPick.hide();
+				this.runRecent(type, 'contiguous', quickPick.value);
+			}
+		});
 		const outputProvider = this._instantiationService.createInstance(TerminalOutputProvider);
 		const quickPick = this._quickInputService.createQuickPick<IQuickPickItem & { rawLabel: string }>();
 		const originalItems = items;
 		quickPick.items = [...originalItems];
 		quickPick.sortByLabel = false;
 		quickPick.placeholder = placeholder;
-		quickPick.customButton = true;
 		quickPick.matchOnLabelMode = filterMode || 'contiguous';
-		if (filterMode === 'fuzzy') {
-			quickPick.customLabel = nls.localize('terminal.contiguousSearch', 'Use Contiguous Search');
-			quickPick.onDidCustom(() => {
-				quickPick.hide();
-				this.runRecent(type, 'contiguous', quickPick.value);
-			});
-		} else {
-			quickPick.customLabel = nls.localize('terminal.fuzzySearch', 'Use Fuzzy Search');
-			quickPick.onDidCustom(() => {
-				quickPick.hide();
-				this.runRecent(type, 'fuzzy', quickPick.value);
-			});
-		}
+		quickPick.additionalToggles = [fuzzySearchToggle];
 		quickPick.onDidTriggerItemButton(async e => {
 			if (e.button === removeFromCommandHistoryButton) {
 				if (type === 'command') {