Settings editor - show result count in TOC when searching

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

@@ -115,7 +115,7 @@
 }
 
 .search-mode .settings-toc-container {
-	display: none;
+	/* display: none; */
 }
 
 .settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry {
@@ -124,6 +124,10 @@
 	line-height: 22px;
 }
 
+.settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry.no-results {
+	opacity: 0.5;
+}
+
 .settings-editor > .settings-body .settings-tree-container {
 	flex: 1;
 	border-spacing: 0;

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

@@ -31,7 +31,7 @@ import { EditorOptions, IEditor } from 'vs/workbench/common/editor';
 import { SearchWidget, SettingsTarget, SettingsTargetsWidget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
 import { tocData, commonlyUsedData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
 import { ISettingsEditorViewState, SearchResultIdx, SearchResultModel, SettingsAccessibilityProvider, SettingsDataSource, SettingsRenderer, SettingsTreeController, SettingsTreeElement, SettingsTreeFilter, SettingsTreeModel, SettingsTreeSettingElement, SettingsTreeGroupElement, resolveSettingsTree, NonExpandableTree } from 'vs/workbench/parts/preferences/browser/settingsTree';
-import { TOCDataSource, TOCRenderer } from 'vs/workbench/parts/preferences/browser/tocTree';
+import { TOCDataSource, TOCRenderer, TOCTreeModel } from 'vs/workbench/parts/preferences/browser/tocTree';
 import { CONTEXT_SETTINGS_EDITOR, CONTEXT_SETTINGS_SEARCH_FOCUS, IPreferencesSearchService, ISearchProvider } from 'vs/workbench/parts/preferences/common/preferences';
 import { IPreferencesService, ISearchResult, ISettingsEditorModel } from 'vs/workbench/services/preferences/common/preferences';
 import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
@@ -55,6 +55,7 @@ export class SettingsEditor2 extends BaseEditor {
 	private settingsTreeContainer: HTMLElement;
 	private settingsTree: WorkbenchTree;
 	private treeDataSource: SettingsDataSource;
+	private tocTreeModel: TOCTreeModel;
 	private settingsTreeModel: SettingsTreeModel;
 
 	private tocTreeContainer: HTMLElement;
@@ -226,13 +227,14 @@ export class SettingsEditor2 extends BaseEditor {
 	private createTOC(parent: HTMLElement): void {
 		this.tocTreeContainer = DOM.append(parent, $('.settings-toc-container'));
 
-		const tocTreeDataSource = this.instantiationService.createInstance(TOCDataSource);
-		const renderer = this.instantiationService.createInstance(TOCRenderer);
+		const tocDataSource = this.instantiationService.createInstance(TOCDataSource);
+		const tocRenderer = this.instantiationService.createInstance(TOCRenderer);
+		this.tocTreeModel = new TOCTreeModel();
 
 		this.tocTree = this.instantiationService.createInstance(WorkbenchTree, this.tocTreeContainer,
 			<ITreeConfiguration>{
-				dataSource: tocTreeDataSource,
-				renderer,
+				dataSource: tocDataSource,
+				renderer: tocRenderer,
 				filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState)
 			},
 			{
@@ -480,7 +482,13 @@ export class SettingsEditor2 extends BaseEditor {
 		} else {
 			this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, resolvedSettingsRoot);
 			this.settingsTree.setInput(this.settingsTreeModel.root);
-			this.tocTree.setInput(this.settingsTreeModel.root);
+
+			this.tocTreeModel.settingsTreeRoot = this.settingsTreeModel.root as SettingsTreeGroupElement;
+			if (this.tocTree.getInput()) {
+				this.tocTree.refresh();
+			} else {
+				this.tocTree.setInput(this.tocTreeModel);
+			}
 		}
 
 		return this.refreshTreeAndMaintainFocus();
@@ -538,6 +546,8 @@ export class SettingsEditor2 extends BaseEditor {
 			}
 
 			this.searchResultModel = null;
+			this.tocTreeModel.currentSearchModel = null;
+			this.tocTree.refresh();
 			this.toggleSearchMode();
 			this.settingsTree.setInput(this.settingsTreeModel.root);
 
@@ -613,11 +623,13 @@ export class SettingsEditor2 extends BaseEditor {
 				const [result] = results;
 				if (!this.searchResultModel) {
 					this.searchResultModel = new SearchResultModel();
+					this.tocTreeModel.currentSearchModel = this.searchResultModel;
 					this.toggleSearchMode();
 					this.settingsTree.setInput(this.searchResultModel);
 				}
 
 				this.searchResultModel.setResult(type, result);
+				this.tocTreeModel.update();
 				resolve(this.refreshTreeAndMaintainFocus());
 			});
 		}, () => {

src/vs/workbench/parts/preferences/browser/tocTree.ts

@@ -6,25 +6,82 @@
 import * as DOM from 'vs/base/browser/dom';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IDataSource, IRenderer, ITree } from 'vs/base/parts/tree/browser/tree';
-import { SettingsTreeElement, SettingsTreeGroupElement } from 'vs/workbench/parts/preferences/browser/settingsTree';
+import { SearchResultModel, SettingsTreeElement, SettingsTreeGroupElement, SettingsTreeSettingElement } from 'vs/workbench/parts/preferences/browser/settingsTree';
+import { ISetting } from 'vs/workbench/services/preferences/common/preferences';
 
 const $ = DOM.$;
 
+export class TOCTreeModel {
+	private _currentSearchModel: SearchResultModel;
+	private _settingsTreeRoot: SettingsTreeGroupElement;
+
+	public set settingsTreeRoot(value: SettingsTreeGroupElement) {
+		this._settingsTreeRoot = value;
+		this.update();
+	}
+
+	public set currentSearchModel(model: SearchResultModel) {
+		this._currentSearchModel = model;
+		this.update();
+	}
+
+	public get children(): SettingsTreeElement[] {
+		return this._settingsTreeRoot.children;
+	}
+
+	public update(): void {
+		this.updateGroupCount(this._settingsTreeRoot);
+	}
+
+	private updateGroupCount(group: SettingsTreeGroupElement): void {
+		(<any>group).count = this._currentSearchModel ?
+			this.getSearchResultChildrenCount(group) :
+			undefined;
+
+		group.children.forEach(child => {
+			if (child instanceof SettingsTreeGroupElement) {
+				this.updateGroupCount(child);
+			}
+		});
+	}
+
+	private getSearchResultChildrenCount(group: SettingsTreeGroupElement): number {
+		return this._currentSearchModel.getFlatSettings().filter(s => {
+			return this.groupContainsSetting(group, s);
+		}).length;
+	}
+
+	private groupContainsSetting(group: SettingsTreeGroupElement, setting: ISetting): boolean {
+		return group.children.some(child => {
+			if (child instanceof SettingsTreeSettingElement) {
+				return child.setting.key === setting.key;
+			} else if (child instanceof SettingsTreeGroupElement) {
+				return this.groupContainsSetting(child, setting);
+			} else {
+				return false;
+			}
+		});
+	}
+}
+
+export type TOCTreeElement = SettingsTreeGroupElement | TOCTreeModel;
+
 export class TOCDataSource implements IDataSource {
 	getId(tree: ITree, element: SettingsTreeGroupElement): string {
 		return element.id;
 	}
 
-	hasChildren(tree: ITree, element: SettingsTreeElement): boolean {
-		return element instanceof SettingsTreeGroupElement && element.children && element.children.every(child => child instanceof SettingsTreeGroupElement);
+	hasChildren(tree: ITree, element: TOCTreeElement): boolean {
+		return element instanceof TOCTreeModel ||
+			(element instanceof SettingsTreeGroupElement && element.children && element.children.every(child => child instanceof SettingsTreeGroupElement));
 	}
 
-	getChildren(tree: ITree, element: SettingsTreeGroupElement): TPromise<SettingsTreeElement[], any> {
+	getChildren(tree: ITree, element: TOCTreeElement): TPromise<SettingsTreeElement[], any> {
 		return TPromise.as(<SettingsTreeElement[]>element.children);
 	}
 
-	getParent(tree: ITree, element: SettingsTreeElement): TPromise<any, any> {
-		return TPromise.wrap(element.parent);
+	getParent(tree: ITree, element: TOCTreeElement): TPromise<any, any> {
+		return TPromise.wrap(element instanceof SettingsTreeGroupElement && element.parent);
 	}
 
 	shouldAutoexpand() {
@@ -54,7 +111,12 @@ export class TOCRenderer implements IRenderer {
 	}
 
 	renderElement(tree: ITree, element: SettingsTreeGroupElement, templateId: string, template: ITOCEntryTemplate): void {
-		template.element.textContent = element.label;
+		const label = (<any>element).count ?
+			`${element.label} (${(<any>element).count})` :
+			element.label;
+
+		DOM.toggleClass(template.element, 'no-results', (<any>element).count === 0);
+		template.element.textContent = label;
 	}
 
 	disposeTemplate(tree: ITree, templateId: string, templateData: any): void {