Add a clear button to settings editor search bar

Resolves #66141

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -44,7 +44,16 @@
 	padding: 0px 8px;
 	border-radius: 2px;
 	position: absolute;
-	right: 10px;
+	right: 35px;
+	top: 0;
+}
+
+.settings-editor > .settings-header > .search-container > .settings-clear-widget {
+	margin: 6px 0px;
+	padding: 0px 8px;
+	border-radius: 2px;
+	position: absolute;
+	right: 0px;
 	top: 0;
 }
 

src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts

@@ -41,6 +41,9 @@ import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editor
 import { IPreferencesService, ISearchResult, ISettingsEditorModel, ISettingsEditorOptions, SettingsEditorOptions, SettingValueType } from 'vs/workbench/services/preferences/common/preferences';
 import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
 import { Settings2EditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
+import { SETTINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS } from 'vs/workbench/contrib/preferences/common/preferences';
+import { Action } from 'vs/base/common/actions';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 
 function createGroupIterator(group: SettingsTreeGroupElement): Iterator<ITreeElement<SettingsTreeGroupChild>> {
 	const groupsIt = Iterator.fromArray(group.children);
@@ -129,6 +132,9 @@ export class SettingsEditor2 extends BaseEditor {
 	private scheduledRefreshes: Map<string, DOM.IFocusTracker>;
 	private lastFocusedSettingElement: string | null = null;
 
+	private actionBar: ActionBar;
+	private actionsContainer: HTMLElement;
+
 	/** Don't spam warnings */
 	private hasWarnedMissingSettings = false;
 
@@ -377,11 +383,18 @@ export class SettingsEditor2 extends BaseEditor {
 		this.searchWidget.setValue(query.trim());
 	}
 
+	clearSearch(): void {
+		this.clearSearchResults();
+		this.focusSearch();
+	}
+
 	private createHeader(parent: HTMLElement): void {
 		this.headerContainer = DOM.append(parent, $('.settings-header'));
 
 		const searchContainer = DOM.append(this.headerContainer, $('.search-container'));
 
+		const clearInputAction = new Action(SETTINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, localize('clearInput', "Clear Settings Search Input"), 'codicon-clear-all', false, () => { this.clearSearch(); return Promise.resolve(null); });
+
 		const searchBoxLabel = localize('SearchSettings.AriaLabel', "Search settings");
 		this.searchWidget = this._register(this.instantiationService.createInstance(SuggestEnabledInput, `${SettingsEditor2.ID}.searchbox`, searchContainer, {
 			triggerCharacters: ['@'],
@@ -417,13 +430,26 @@ export class SettingsEditor2 extends BaseEditor {
 			this.countElement.style.borderColor = border;
 		}));
 
-		this._register(this.searchWidget.onInputDidChange(() => this.onSearchInputChanged()));
+		this._register(this.searchWidget.onInputDidChange(() => {
+			const searchVal = this.searchWidget.getValue();
+			clearInputAction.enabled = !!searchVal;
+			this.onSearchInputChanged()
+		}));
 
 		const headerControlsContainer = DOM.append(this.headerContainer, $('.settings-header-controls'));
 		const targetWidgetContainer = DOM.append(headerControlsContainer, $('.settings-target-container'));
 		this.settingsTargetsWidget = this._register(this.instantiationService.createInstance(SettingsTargetsWidget, targetWidgetContainer, { enableRemoteSettings: true }));
 		this.settingsTargetsWidget.settingsTarget = ConfigurationTarget.USER_LOCAL;
 		this.settingsTargetsWidget.onDidTargetChange(target => this.onDidSettingsTargetChange(target));
+
+		this.actionsContainer = DOM.append(searchContainer, DOM.$('.settings-clear-widget'));
+
+		this.actionBar = this._register(new ActionBar(this.actionsContainer, {
+			animated: false,
+			actionViewItemProvider: (action: Action) => { return undefined; }
+		}));
+
+		this.actionBar.push([clearInputAction], { label: false, icon: true });
 	}
 
 	private onDidSettingsTargetChange(target: SettingsTarget): void {