Add 'Cancel Search' button, #30336

src/vs/workbench/parts/search/browser/media/searchviewlet.css

@@ -310,6 +310,15 @@
 	background: url('clear-search-results-dark.svg') center center no-repeat;
 }
 
+.monaco-workbench .search-action.cancel-search {
+	background: url('stop.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-workbench .search-action.cancel-search,
+.hc-black .monaco-workbench .search-action.cancel-search {
+	background: url('stop-inverse.svg') center center no-repeat;
+}
+
 .vs .monaco-workbench .search-viewlet .query-details .file-types .controls > .custom-checkbox.pattern {
 	background: url('pattern.svg') center center no-repeat;
 }

src/vs/workbench/parts/search/browser/media/stop-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><path fill="#F6F6F6" d="M13 13h-10v-10h10v10z"/><path fill="#C5C5C5" d="M12 12h-8v-8h8v8z"/></svg>
\ No newline at end of file

src/vs/workbench/parts/search/browser/media/stop.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><path fill="#F6F6F6" d="M13 13h-10v-10h10v10z"/><path fill="#424242" d="M12 12h-8v-8h8v8z"/></svg>
\ No newline at end of file

src/vs/workbench/parts/search/browser/searchActions.ts

@@ -379,6 +379,32 @@ export class ClearSearchResultsAction extends SearchAction {
 	}
 }
 
+export class CancelSearchAction extends SearchAction {
+
+	static ID: string = 'search.action.cancelSearch';
+	static LABEL: string = nls.localize('CancelSearchAction.label', "Cancel Search");
+
+	constructor(id: string, label: string, @IViewletService viewletService: IViewletService) {
+		super(id, label, viewletService);
+		this.class = 'search-action cancel-search';
+		this.update();
+	}
+
+	update(): void {
+		const searchViewlet = this.getSearchViewlet();
+		this.enabled = searchViewlet && searchViewlet.isSearching();
+	}
+
+	public run(): TPromise<void> {
+		const searchViewlet = this.getSearchViewlet();
+		if (searchViewlet) {
+			searchViewlet.cancelSearch();
+		}
+
+		return TPromise.as(null);
+	}
+}
+
 export class FocusNextSearchResultAction extends Action {
 	public static readonly ID = 'search.action.focusNextSearchResult';
 	public static readonly LABEL = nls.localize('FocusNextSearchResult.label', "Focus Next Search Result");

src/vs/workbench/parts/search/browser/searchViewlet.ts

@@ -45,7 +45,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { PatternInputWidget, ExcludePatternInputWidget } from 'vs/workbench/parts/search/browser/patternInputWidget';
 import { SearchRenderer, SearchDataSource, SearchSorter, SearchAccessibilityProvider, SearchFilter } from 'vs/workbench/parts/search/browser/searchResultsView';
 import { SearchWidget, ISearchWidgetOptions } from 'vs/workbench/parts/search/browser/searchWidget';
-import { RefreshAction, CollapseDeepestExpandedLevelAction, ClearSearchResultsAction, SearchAction } from 'vs/workbench/parts/search/browser/searchActions';
+import { RefreshAction, CollapseDeepestExpandedLevelAction, ClearSearchResultsAction, SearchAction, CancelSearchAction } from 'vs/workbench/parts/search/browser/searchActions';
 import { IReplaceService } from 'vs/workbench/parts/search/common/replace';
 import Severity from 'vs/base/common/severity';
 import { IUntitledEditorService } from 'vs/workbench/services/untitled/common/untitledEditorService';
@@ -81,6 +81,7 @@ export class SearchViewlet extends Viewlet {
 	private folderMatchFocused: IContextKey<boolean>;
 	private matchFocused: IContextKey<boolean>;
 	private searchSubmitted: boolean;
+	private searching: boolean;
 
 	private actions: SearchAction[] = [];
 	private tree: ITree;
@@ -785,6 +786,10 @@ export class SearchViewlet extends Viewlet {
 		return this.searchSubmitted;
 	}
 
+	public isSearching(): boolean {
+		return this.searching;
+	}
+
 	public hasSearchResults(): boolean {
 		return !this.viewModel.searchResult.isEmpty();
 	}
@@ -1066,11 +1071,17 @@ export class SearchViewlet extends Viewlet {
 			this.progressService.show(progressTotal);
 
 		this.searchWidget.searchInput.clearMessage();
+		this.searching = true;
+		setTimeout(() => {
+			if (this.searching) {
+				this.changeActionAtPosition(0, this.instantiationService.createInstance(CancelSearchAction, CancelSearchAction.ID, CancelSearchAction.LABEL));
+			}
+		}, 2000);
 		this.showEmptyStage();
 
-		let isDone = false;
 		let onComplete = (completed?: ISearchComplete) => {
-			isDone = true;
+			this.searching = false;
+			this.changeActionAtPosition(0, this.instantiationService.createInstance(RefreshAction, RefreshAction.ID, RefreshAction.LABEL));
 
 			// Complete up to 100% as needed
 			if (completed && !query.useRipgrep) {
@@ -1201,7 +1212,8 @@ export class SearchViewlet extends Viewlet {
 			if (errors.isPromiseCanceledError(e)) {
 				onComplete(null);
 			} else {
-				isDone = true;
+				this.searching = false;
+				this.changeActionAtPosition(0, this.instantiationService.createInstance(RefreshAction, RefreshAction.ID, RefreshAction.LABEL));
 				progressRunner.done();
 				this.searchWidget.searchInput.showMessage({ content: e.message, type: MessageType.ERROR });
 				this.viewModel.searchResult.clear();
@@ -1223,7 +1235,7 @@ export class SearchViewlet extends Viewlet {
 
 		// Handle UI updates in an interval to show frequent progress and results
 		let uiRefreshHandle = setInterval(() => {
-			if (isDone) {
+			if (!this.searching) {
 				window.clearInterval(uiRefreshHandle);
 				return;
 			}
@@ -1424,6 +1436,11 @@ export class SearchViewlet extends Viewlet {
 		return this.actions;
 	}
 
+	private changeActionAtPosition(index: number, newAction: SearchAction): void {
+		this.actions.splice(index, 1, newAction);
+		this.updateTitleArea();
+	}
+
 	public shutdown(): void {
 		const isRegex = this.searchWidget.searchInput.getRegex();
 		const isWholeWords = this.searchWidget.searchInput.getWholeWords();