add find count to the terminal (microsoft#146358)

Author: meganrogge

src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts

@@ -15,7 +15,7 @@ import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBo
 import { SimpleButton, findPreviousMatchIcon, findNextMatchIcon } from 'vs/editor/contrib/find/browser/findWidget';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
-import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
+import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground, errorForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IColorTheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ContextScopedFindInput } from 'vs/platform/history/browser/contextScopedHistoryWidget';
 import { widgetClose } from 'vs/platform/theme/common/iconRegistry';
@@ -26,6 +26,12 @@ const NLS_PREVIOUS_MATCH_BTN_LABEL = nls.localize('label.previousMatchButton', "
 const NLS_NEXT_MATCH_BTN_LABEL = nls.localize('label.nextMatchButton', "Next Match");
 const NLS_CLOSE_BTN_LABEL = nls.localize('label.closeButton', "Close");
 
+interface IFindOptions {
+	showOptionButtons?: boolean;
+	checkImeCompletionState?: boolean;
+	showResultCount?: boolean;
+}
+
 export abstract class SimpleFindWidget extends Widget {
 	private readonly _findInput: FindInput;
 	private readonly _domNode: HTMLElement;
@@ -35,16 +41,16 @@ export abstract class SimpleFindWidget extends Widget {
 	private readonly _updateHistoryDelayer: Delayer<void>;
 	private readonly prevBtn: SimpleButton;
 	private readonly nextBtn: SimpleButton;
+	private _matchesCount: HTMLElement | undefined;
 
 	private _isVisible: boolean = false;
-	private foundMatch: boolean = false;
+	private _foundMatch: boolean = false;
 
 	constructor(
 		@IContextViewService private readonly _contextViewService: IContextViewService,
 		@IContextKeyService contextKeyService: IContextKeyService,
 		private readonly _state: FindReplaceState = new FindReplaceState(),
-		showOptionButtons?: boolean,
-		checkImeCompletionState?: boolean
+		private readonly _options: IFindOptions
 	) {
 		super();
 
@@ -59,20 +65,23 @@ export abstract class SimpleFindWidget extends Widget {
 					new RegExp(value);
 					return null;
 				} catch (e) {
-					this.foundMatch = false;
-					this.updateButtons(this.foundMatch);
+					this._foundMatch = false;
+					this.updateButtons(this._foundMatch);
 					return { content: e.message };
 				}
 			}
-		}, contextKeyService, showOptionButtons));
+		}, contextKeyService, _options.showOptionButtons));
 
 		// Find History with update delayer
 		this._updateHistoryDelayer = new Delayer<void>(500);
 
-		this._register(this._findInput.onInput((e) => {
-			if (!checkImeCompletionState || !this._findInput.isImeSessionInProgress) {
-				this.foundMatch = this._onInputChanged();
-				this.updateButtons(this.foundMatch);
+		this._register(this._findInput.onInput(async (e) => {
+			if (!_options.checkImeCompletionState || !this._findInput.isImeSessionInProgress) {
+				this._foundMatch = this._onInputChanged();
+				if (this._options.showResultCount) {
+					await this.updateResultCount();
+				}
+				this.updateButtons(this._foundMatch);
 				this.focusFindBox();
 				this._delayedUpdateHistory();
 			}
@@ -152,6 +161,14 @@ export abstract class SimpleFindWidget extends Widget {
 		this._register(dom.addDisposableListener(this._innerDomNode, 'click', (event) => {
 			event.stopPropagation();
 		}));
+
+		if (_options?.showResultCount) {
+			this._domNode.classList.add('result-count');
+			this._register(this._findInput.onDidChange(() => {
+				this.updateResultCount();
+				this.updateButtons(this._foundMatch);
+			}));
+		}
 	}
 
 	protected abstract _onInputChanged(): boolean;
@@ -161,6 +178,7 @@ export abstract class SimpleFindWidget extends Widget {
 	protected abstract _onFocusTrackerBlur(): void;
 	protected abstract _onFindInputFocusTrackerFocus(): void;
 	protected abstract _onFindInputFocusTrackerBlur(): void;
+	protected abstract _getResultCount(): Promise<{ resultIndex: number; resultCount: number } | undefined>;
 
 	protected get inputValue() {
 		return this._findInput.getValue();
@@ -214,7 +232,7 @@ export abstract class SimpleFindWidget extends Widget {
 		}
 
 		this._isVisible = true;
-		this.updateButtons(this.foundMatch);
+		this.updateButtons(this._foundMatch);
 
 		setTimeout(() => {
 			this._innerDomNode.classList.add('visible', 'visible-transition');
@@ -243,7 +261,7 @@ export abstract class SimpleFindWidget extends Widget {
 			// Need to delay toggling visibility until after Transition, then visibility hidden - removes from tabIndex list
 			setTimeout(() => {
 				this._isVisible = false;
-				this.updateButtons(this.foundMatch);
+				this.updateButtons(this._foundMatch);
 				this._innerDomNode.classList.remove('visible');
 			}, 200);
 		}
@@ -281,6 +299,20 @@ export abstract class SimpleFindWidget extends Widget {
 		this.nextBtn.focus();
 		this._findInput.inputBox.focus();
 	}
+
+	async updateResultCount(): Promise<void> {
+		const count = await this._getResultCount();
+		if (!this._matchesCount) {
+			this._matchesCount = document.createElement('div');
+			this._matchesCount.className = 'matchesCount';
+		}
+		this._matchesCount.innerText = '';
+		const label = count === undefined || count.resultCount === 0 ? `No Results` : `${count.resultIndex + 1} of ${count.resultCount}`;
+		this._matchesCount.appendChild(document.createTextNode(label));
+		this._matchesCount.classList.toggle('no-results', !count || count.resultCount === 0);
+		this._findInput?.domNode.insertAdjacentElement('afterend', this._matchesCount);
+		this._foundMatch = !!count && count.resultCount > 0;
+	}
 }
 
 // theming
@@ -299,4 +331,9 @@ registerThemingParticipant((theme, collector) => {
 	if (widgetShadowColor) {
 		collector.addRule(`.monaco-workbench .simple-find-part { box-shadow: 0 0 8px 2px ${widgetShadowColor}; }`);
 	}
+
+	const error = theme.getColor(errorForeground);
+	if (error) {
+		collector.addRule(`.no-results.matchesCount { color: ${error}; }`);
+	}
 });

src/vs/workbench/contrib/terminal/browser/media/terminal.css

@@ -81,12 +81,26 @@
 	z-index: 31;
 }
 
-.monaco-workbench .simple-find-part-wrapper {
+.xterm .xterm-screen {
+	cursor: text;
+}
+
+.monaco-workbench .simple-find-part-wrapper.result-count {
 	z-index: 33 !important;
+	padding-right: 80px;
 }
 
-.xterm .xterm-screen {
-	cursor: text;
+.result-count .simple-find-part {
+	width: 280px;
+	max-width: 280px;
+	min-width: 280px;
+}
+
+.result-count .matchesCount {
+	width: 68px;
+	max-width: 68px;
+	min-width: 68px;
+	padding-left: 5px;
 }
 
 .xterm .xterm-accessibility {

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

@@ -554,6 +554,8 @@ export interface ITerminalInstance {
 	 */
 	onExit: Event<number | ITerminalLaunchError | undefined>;
 
+	onDidChangeFindResults: Event<{ resultIndex: number; resultCount: number } | undefined>;
+
 	readonly exitCode: number | undefined;
 
 	readonly areLinksReady: boolean;
@@ -864,6 +866,8 @@ export interface IXtermTerminal {
 	 */
 	target?: TerminalLocation;
 
+	findResult?: { resultIndex: number; resultCount: number };
+
 	/**
 	 * Find the next instance of the term
 	*/

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

@@ -91,6 +91,7 @@ export class TerminalEditor extends EditorPane {
 			// panel and the editors, this is needed so that the active instance gets set
 			// when focus changes between them.
 			this._register(this._editorInput.terminalInstance.onDidFocus(() => this._setActiveInstance()));
+			this._register(this._editorInput.terminalInstance.onDidChangeFindResults(() => this._findWidget.updateResultCount()));
 			this._editorInput.setCopyLaunchConfig(this._editorInput.terminalInstance.shellLaunchConfig);
 		}
 	}

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

@@ -23,7 +23,8 @@ export class TerminalFindWidget extends SimpleFindWidget {
 		@ITerminalService private readonly _terminalService: ITerminalService,
 		@ITerminalGroupService private readonly _terminalGroupService: ITerminalGroupService
 	) {
-		super(_contextViewService, _contextKeyService, findState, true);
+		super(_contextViewService, _contextKeyService, findState, { showOptionButtons: true, showResultCount: true });
+
 		this._register(findState.onFindReplaceStateChange(() => {
 			this.show();
 		}));
@@ -82,6 +83,14 @@ export class TerminalFindWidget extends SimpleFindWidget {
 		}
 	}
 
+	protected async _getResultCount(): Promise<{ resultIndex: number; resultCount: number } | undefined> {
+		const instance = this._terminalService.activeInstance;
+		if (instance) {
+			return instance.xterm?.findResult;
+		}
+		return undefined;
+	}
+
 	protected _onInputChanged() {
 		// Ignore input changes for now
 		const instance = this._terminalService.activeInstance;

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

@@ -329,6 +329,8 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 	readonly onRequestAddInstanceToGroup = this._onRequestAddInstanceToGroup.event;
 	private readonly _onDidChangeHasChildProcesses = this._register(new Emitter<boolean>());
 	readonly onDidChangeHasChildProcesses = this._onDidChangeHasChildProcesses.event;
+	private readonly _onDidChangeFindResults = new Emitter<{ resultIndex: number; resultCount: number } | undefined>();
+	readonly onDidChangeFindResults = this._onDidChangeFindResults.event;
 
 	constructor(
 		private readonly _terminalFocusContextKey: IContextKey<boolean>,
@@ -975,6 +977,8 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 
 		const screenElement = xterm.attachToElement(xtermElement);
 
+		xterm.onDidChangeFindResults((results) => this._onDidChangeFindResults.fire(results));
+
 		if (!xterm.raw.element || !xterm.raw.textarea) {
 			throw new Error('xterm elements not set after open');
 		}

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

@@ -150,7 +150,11 @@ export class TerminalTabbedView extends Disposable {
 		});
 
 		this._splitView = new SplitView(parentElement, { orientation: Orientation.HORIZONTAL, proportionalLayout: false });
-
+		this._terminalService.onDidCreateInstance(instance => {
+			instance.onDidChangeFindResults(() => {
+				this._findWidget.updateResultCount();
+			});
+		});
 		this._setupSplitView(terminalOuterContainer);
 	}
 

src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts

@@ -68,9 +68,15 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
 	private _webglAddon?: WebglAddonType;
 	private _serializeAddon?: SerializeAddonType;
 
+	private _lastFindResult: { resultIndex: number; resultCount: number } | undefined;
+	get findResult(): { resultIndex: number; resultCount: number } | undefined { return this._lastFindResult; }
+
 	private readonly _onDidRequestRunCommand = new Emitter<string>();
 	readonly onDidRequestRunCommand = this._onDidRequestRunCommand.event;
 
+	private readonly _onDidChangeFindResults = new Emitter<{ resultIndex: number; resultCount: number } | undefined>();
+	readonly onDidChangeFindResults = this._onDidChangeFindResults.event;
+
 	get commandTracker(): ICommandTracker { return this._commandNavigationAddon; }
 	get shellIntegration(): IShellIntegration { return this._shellIntegrationAddon; }
 
@@ -292,6 +298,10 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
 		const AddonCtor = await this._getSearchAddonConstructor();
 		this._searchAddon = new AddonCtor();
 		this.raw.loadAddon(this._searchAddon);
+		this._searchAddon.onDidChangeResults((results: { resultIndex: number; resultCount: number } | undefined) => {
+			this._lastFindResult = results;
+			this._onDidChangeFindResults.fire(results);
+		});
 		return this._searchAddon;
 	}
 

src/vs/workbench/contrib/webview/browser/webviewFindWidget.ts

@@ -20,6 +20,9 @@ export interface WebviewFindDelegate {
 }
 
 export class WebviewFindWidget extends SimpleFindWidget {
+	protected async _getResultCount(dataChanged?: boolean): Promise<{ resultIndex: number; resultCount: number } | undefined> {
+		return undefined;
+	}
 
 	protected readonly _findWidgetFocused: IContextKey<boolean>;
 
@@ -28,7 +31,7 @@ export class WebviewFindWidget extends SimpleFindWidget {
 		@IContextViewService contextViewService: IContextViewService,
 		@IContextKeyService contextKeyService: IContextKeyService
 	) {
-		super(contextViewService, contextKeyService, undefined, false, _delegate.checkImeCompletionState);
+		super(contextViewService, contextKeyService, undefined, { showOptionButtons: false, checkImeCompletionState: _delegate.checkImeCompletionState });
 		this._findWidgetFocused = KEYBINDING_CONTEXT_WEBVIEW_FIND_WIDGET_FOCUSED.bindTo(contextKeyService);
 
 		this._register(_delegate.hasFindResult(hasResult => {