Show matches count in find widget

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

@@ -33,6 +33,25 @@
 	right: 2px;
 }
 
+.monaco-findInput > .controls > .matchCount {
+	margin-left: 2px;
+	float: left;
+	overflow: hidden;
+	max-width: 30px;
+	min-width: 20px;
+	text-align: center;
+
+	background: #ddd;
+	border-radius: 5px;
+	padding: 0 4px;
+
+	-webkit-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-moz-box-sizing:	border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+}
+
 .vs .monaco-findInput > .controls > .custom-checkbox.case-sensitive {
 	background: url('case-sensitive.svg') center center no-repeat;
 }

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

@@ -14,6 +14,7 @@ import {IContextViewProvider} from 'vs/base/browser/ui/contextview/contextview';
 import {Widget} from 'vs/base/browser/ui/widget';
 import Event, {Emitter} from 'vs/base/common/event';
 import {StandardKeyboardEvent} from 'vs/base/browser/keyboardEvent';
+import {StandardMouseEvent} from 'vs/base/browser/mouseEvent';
 
 export interface IFindInputOptions {
 	placeholder?:string;
@@ -26,6 +27,12 @@ export interface IFindInputOptions {
 	appendRegexLabel?: string;
 }
 
+export interface IMatchCountState {
+	count: string;
+	isVisible: boolean;
+	title: string;
+}
+
 const NLS_REGEX_CHECKBOX_LABEL = nls.localize('regexDescription', "Use Regular Expression");
 const NLS_WHOLE_WORD_CHECKBOX_LABEL = nls.localize('wordsDescription', "Match Whole Word");
 const NLS_CASE_SENSITIVE_CHECKBOX_LABEL = nls.localize('caseDescription', "Match Case");
@@ -44,6 +51,7 @@ export class FindInput extends Widget {
 	private regex:Checkbox;
 	private wholeWords:Checkbox;
 	private caseSensitive:Checkbox;
+	private matchCount: MatchCount;
 	public domNode: HTMLElement;
 	public inputBox:InputBox;
 
@@ -122,6 +130,11 @@ export class FindInput extends Widget {
 		}
 	}
 
+	public setMatchCountState(state:IMatchCountState): void {
+		this.matchCount.setState(state);
+		this.setInputWidth();
+	}
+
 	public select(): void {
 		this.inputBox.select();
 	}
@@ -162,7 +175,7 @@ export class FindInput extends Widget {
 	}
 
 	private setInputWidth(): void {
-		let w = this.width - this.caseSensitive.width() - this.wholeWords.width() - this.regex.width();
+		let w = this.width - this.matchCount.width() - this.caseSensitive.width() - this.wholeWords.width() - this.regex.width();
 		this.inputBox.width = w;
 	}
 
@@ -216,10 +229,18 @@ export class FindInput extends Widget {
 				this._onCaseSensitiveKeyDown.fire(e);
 			}
 		}));
+		this.matchCount = this._register(new MatchCount({
+			onClick: (e) => {
+				this.inputBox.focus();
+				e.preventDefault();
+			}
+		}));
+
 		this.setInputWidth();
 
 		let controls = document.createElement('div');
 		controls.className = 'controls';
+		controls.appendChild(this.matchCount.domNode);
 		controls.appendChild(this.caseSensitive.domNode);
 		controls.appendChild(this.wholeWords.domNode);
 		controls.appendChild(this.regex.domNode);
@@ -243,3 +264,43 @@ export class FindInput extends Widget {
 		this.inputBox.hideMessage();
 	}
 }
+
+interface IMatchCountOpts {
+	onClick: (e:StandardMouseEvent) => void;
+}
+
+class MatchCount extends Widget {
+
+	public domNode: HTMLElement;
+	private isVisible: boolean;
+
+	constructor(opts:IMatchCountOpts) {
+		super();
+		this.domNode = document.createElement('div');
+		this.domNode.className = 'matchCount';
+
+		this.setState({
+			isVisible: false,
+			count: '0',
+			title: ''
+		});
+		this.onclick(this.domNode, opts.onClick);
+	}
+
+	public width(): number {
+		return this.isVisible ? 30 : 0;
+	}
+
+	public setState(state:IMatchCountState): void {
+		dom.clearNode(this.domNode);
+		this.domNode.appendChild(document.createTextNode(state.count));
+		this.domNode.title = state.title;
+
+		this.isVisible = state.isVisible;
+		if (this.isVisible) {
+			this.domNode.style.display = 'block';
+		} else {
+			this.domNode.style.display = 'none';
+		}
+	}
+}