Settings editor - hide TOC on search

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

@@ -126,6 +126,10 @@
 	width: 200px;
 }
 
+.search-mode .settings-toc-container .monaco-tree {
+	display: none;
+}
+
 .settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry {
 	overflow: hidden;
 	text-overflow: ellipsis;

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

@@ -50,7 +50,6 @@ export class SettingsEditor2 extends BaseEditor {
 	private settingsTargetsWidget: SettingsTargetsWidget;
 
 	private showConfiguredSettingsOnlyCheckbox: HTMLInputElement;
-	private savedExpandedGroups: any[];
 
 	private settingsTreeContainer: HTMLElement;
 	private settingsTree: WorkbenchTree;
@@ -329,25 +328,7 @@ export class SettingsEditor2 extends BaseEditor {
 	private onShowConfiguredOnlyClicked(): void {
 		this.viewState.showConfiguredOnly = this.showConfiguredSettingsOnlyCheckbox.checked;
 		this.refreshTreeAndMaintainFocus();
-
-		// TODO@roblou - This is slow
-		if (this.viewState.showConfiguredOnly) {
-			this.savedExpandedGroups = this.settingsTree.getExpandedElements();
-			const nav = this.settingsTree.getNavigator();
-			let element;
-			while (element = nav.next()) {
-				this.settingsTree.expand(element);
-			}
-		} else if (this.savedExpandedGroups) {
-			const nav = this.settingsTree.getNavigator();
-			let element;
-			while (element = nav.next()) {
-				this.settingsTree.collapse(element);
-			}
-
-			this.settingsTree.expandAll(this.savedExpandedGroups);
-			this.savedExpandedGroups = null;
-		}
+		this.expandAll(this.settingsTree);
 	}
 
 	private onDidChangeSetting(key: string, value: any): void {
@@ -446,19 +427,19 @@ export class SettingsEditor2 extends BaseEditor {
 					}
 
 					this.defaultSettingsEditorModel = model;
-					// if (!this.settingsTree.getInput()) {
 					this.tocTree.setInput(getTOCElement(tocData));
 
 					this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, tocData, this.defaultSettingsEditorModel.settingsGroups.slice(1));
 					this.settingsTree.setInput(this.settingsTreeModel.root);
-					this.expandAll(this.settingsTree);
-					this.expandAll(this.tocTree);
-					// }
 				});
 		}
 		return TPromise.as(null);
 	}
 
+	private toggleSearchMode(): void {
+		DOM.toggleClass(this.getContainer(), 'search-mode', !!this.searchResultModel);
+	}
+
 	private refreshTreeAndMaintainFocus(): TPromise<any> {
 		// Sort of a hack to maintain focus on the focused control across a refresh
 		const focusedRowItem = DOM.findParentWithClass(<HTMLElement>document.activeElement, 'setting-item');
@@ -507,25 +488,14 @@ export class SettingsEditor2 extends BaseEditor {
 			}
 
 			this.searchResultModel = null;
+			this.toggleSearchMode();
 			this.settingsTree.setInput(this.settingsTreeModel.root);
-			this.expandAll(this.settingsTree);
-			this.expandAll(this.tocTree);
 
 			return TPromise.wrap(null);
 		}
 	}
 
 	private expandAll(tree: ITree): void {
-		// const expandSubtree = (element: IResolvedTOCEntry) => {
-		// 	const nav = tree.getNavigator();
-		// 	while (nav.)
-		// 	if (element.children) {
-		// 		element.children.forEach(expandSubtree);
-		// 	}
-		// };
-
-		// expandSubtree(this.resolvedTocData);
-
 		const nav = tree.getNavigator();
 		let cur;
 		while (cur = nav.next()) {
@@ -593,6 +563,7 @@ export class SettingsEditor2 extends BaseEditor {
 				const [result] = results;
 				if (!this.searchResultModel) {
 					this.searchResultModel = new SearchResultModel();
+					this.toggleSearchMode();
 					this.settingsTree.setInput(this.searchResultModel);
 				}
 

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

@@ -222,8 +222,7 @@ export class SettingsDataSource implements IDataSource {
 	constructor(
 		private viewState: ISettingsEditorViewState,
 		@IConfigurationService private configurationService: IConfigurationService
-	) {
-	}
+	) { }
 
 	getId(tree: ITree, element: SettingsTreeElement): string {
 		return element.id;
@@ -260,6 +259,7 @@ export class SettingsDataSource implements IDataSource {
 			return null;
 		}
 	}
+
 	private getGroupChildren(groupElement: SettingsTreeGroupElement): SettingsTreeElement[] {
 		return groupElement.children;
 	}
@@ -267,6 +267,10 @@ export class SettingsDataSource implements IDataSource {
 	getParent(tree: ITree, element: SettingsTreeElement): TPromise<any, any> {
 		return TPromise.wrap(element.parent);
 	}
+
+	shouldAutoexpand(): boolean {
+		return true;
+	}
 }
 
 export function settingKeyToDisplayFormat(key: string, groupId: string): { category: string, label: string } {
@@ -358,7 +362,7 @@ export interface ISettingChangeEvent {
 
 export class SettingsRenderer implements IRenderer {
 
-	private static readonly SETTING_ROW_HEIGHT = 85;
+	private static readonly SETTING_ROW_HEIGHT = 82;
 
 	private readonly _onDidChangeSetting: Emitter<ISettingChangeEvent> = new Emitter<ISettingChangeEvent>();
 	public readonly onDidChangeSetting: Event<ISettingChangeEvent> = this._onDidChangeSetting.event;

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

@@ -54,6 +54,10 @@ export class TOCDataSource implements IDataSource {
 	getParent(tree: ITree, element: TOCElement): TPromise<any, any> {
 		return TPromise.wrap(element.parent);
 	}
+
+	shouldAutoexpand() {
+		return true;
+	}
 }
 
 const TOC_ENTRY_TEMPLATE_ID = 'settings.toc.entry';