Settings Editor - tweak setting update/refresh behavior

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

@@ -45,6 +45,7 @@ export class SettingsEditor2 extends BaseEditor {
 
 	private defaultSettingsEditorModel: DefaultSettingsEditorModel;
 
+	private rootElement: HTMLElement;
 	private headerContainer: HTMLElement;
 	private searchWidget: SearchWidget;
 	private settingsTargetsWidget: SettingsTargetsWidget;
@@ -100,10 +101,10 @@ export class SettingsEditor2 extends BaseEditor {
 	}
 
 	createEditor(parent: HTMLElement): void {
-		const settingsEditorElement = DOM.append(parent, $('.settings-editor'));
-		this.createTOC(settingsEditorElement);
+		this.rootElement = DOM.append(parent, $('.settings-editor'));
+		this.createTOC(this.rootElement);
 
-		const settingsEditorRightElement = DOM.append(settingsEditorElement, $('.settings-editor-right'));
+		const settingsEditorRightElement = DOM.append(this.rootElement, $('.settings-editor-right'));
 		this.createHeader(settingsEditorRightElement);
 		this.createBody(settingsEditorRightElement);
 	}
@@ -465,7 +466,7 @@ export class SettingsEditor2 extends BaseEditor {
 	}
 
 	private toggleSearchMode(): void {
-		DOM.toggleClass(this.getContainer(), 'search-mode', !!this.searchResultModel);
+		DOM.toggleClass(this.rootElement, 'search-mode', !!this.searchResultModel);
 	}
 
 	private onConfigUpdate(): TPromise<void> {
@@ -474,9 +475,10 @@ export class SettingsEditor2 extends BaseEditor {
 		const commonlyUsed = resolveSettingsTree(commonlyUsedData, groups);
 		resolvedSettingsRoot.children.unshift(commonlyUsed);
 
-		this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, resolvedSettingsRoot);
-
-		if (!this.searchResultModel) {
+		if (this.settingsTreeModel) {
+			this.settingsTreeModel.update(resolvedSettingsRoot);
+		} else {
+			this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, resolvedSettingsRoot);
 			this.settingsTree.setInput(this.settingsTreeModel.root);
 			this.tocTree.setInput(this.settingsTreeModel.root);
 		}
@@ -492,18 +494,22 @@ export class SettingsEditor2 extends BaseEditor {
 			(<HTMLInputElement>document.activeElement).selectionStart :
 			null;
 
-		return this.settingsTree.refresh().then(() => {
-			if (focusedRowId) {
-				const rowSelector = `.setting-item#${focusedRowId}`;
-				const inputElementToFocus: HTMLElement = this.settingsTreeContainer.querySelector(`${rowSelector} input, ${rowSelector} select, ${rowSelector} a`);
-				if (inputElementToFocus) {
-					inputElementToFocus.focus();
-					if (typeof selection === 'number') {
-						(<HTMLInputElement>inputElementToFocus).setSelectionRange(selection, selection);
+		return this.settingsTree.refresh()
+			.then(() => {
+				if (focusedRowId) {
+					const rowSelector = `.setting-item#${focusedRowId}`;
+					const inputElementToFocus: HTMLElement = this.settingsTreeContainer.querySelector(`${rowSelector} input, ${rowSelector} select, ${rowSelector} a`);
+					if (inputElementToFocus) {
+						inputElementToFocus.focus();
+						if (typeof selection === 'number') {
+							(<HTMLInputElement>inputElementToFocus).setSelectionRange(selection, selection);
+						}
 					}
 				}
-			}
-		});
+			})
+			.then(() => {
+				return this.tocTree.refresh();
+			});
 	}
 
 	private onSearchInputChanged(): void {

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

@@ -77,7 +77,7 @@ export interface ITOCEntry {
 }
 
 export class SettingsTreeModel {
-	private _root: SettingsTreeElement;
+	private _root: SettingsTreeGroupElement;
 	private _treeElementsById = new Map<string, SettingsTreeElement>();
 
 	constructor(
@@ -85,13 +85,22 @@ export class SettingsTreeModel {
 		tocRoot: ITOCEntry,
 		@IConfigurationService private configurationService: IConfigurationService
 	) {
-		this._root = this.createSettingsTreeGroupElement(tocRoot);
+		this.update(tocRoot);
 	}
 
 	get root(): SettingsTreeElement {
 		return this._root;
 	}
 
+	update(newTocRoot: ITOCEntry): void {
+		const newRoot = this.createSettingsTreeGroupElement(newTocRoot);
+		if (this._root) {
+			this._root.children = newRoot.children;
+		} else {
+			this._root = newRoot;
+		}
+	}
+
 	getElementById(id: string): SettingsTreeElement {
 		return this._treeElementsById.get(id);
 	}
@@ -119,9 +128,13 @@ export class SettingsTreeModel {
 	}
 }
 
+function sanitizeId(id: string): string {
+	return id.replace(/[\.\/]/, '_');
+}
+
 function createSettingsTreeSettingElement(setting: ISetting, parent: any, settingsTarget: SettingsTarget, configurationService: IConfigurationService): SettingsTreeSettingElement {
 	const element = new SettingsTreeSettingElement();
-	element.id = parent.id + '_' + setting.key;
+	element.id = sanitizeId(parent.id + '_' + setting.key);
 	element.parent = parent;
 
 	const { isConfigured, inspected, targetSelector } = inspectSetting(setting.key, settingsTarget, configurationService);
@@ -522,7 +535,6 @@ export class SettingsRenderer implements IRenderer {
 		template.descriptionElement.textContent = element.description;
 
 		this.renderValue(element, isSelected, template);
-
 		const resetButton = new Button(template.valueElement);
 		const resetText = localize('resetButtonTitle', "reset");
 		resetButton.label = resetText;