Settings editor - restore Commonly Used group

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

@@ -29,8 +29,8 @@ import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant }
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { EditorOptions, IEditor } from 'vs/workbench/common/editor';
 import { SearchWidget, SettingsTarget, SettingsTargetsWidget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
-import { tocData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
-import { ISettingsEditorViewState, SearchResultIdx, SearchResultModel, SettingsAccessibilityProvider, SettingsDataSource, SettingsRenderer, SettingsTreeController, SettingsTreeElement, SettingsTreeFilter, SettingsTreeModel, SettingsTreeSettingElement, SettingsTreeGroupElement } from 'vs/workbench/parts/preferences/browser/settingsTree';
+import { tocData, commonlyUsedData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
+import { ISettingsEditorViewState, SearchResultIdx, SearchResultModel, SettingsAccessibilityProvider, SettingsDataSource, SettingsRenderer, SettingsTreeController, SettingsTreeElement, SettingsTreeFilter, SettingsTreeModel, SettingsTreeSettingElement, SettingsTreeGroupElement, resolveSettingsTree } from 'vs/workbench/parts/preferences/browser/settingsTree';
 import { TOCDataSource, TOCRenderer } 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';
@@ -469,7 +469,12 @@ export class SettingsEditor2 extends BaseEditor {
 	}
 
 	private onConfigUpdate(): TPromise<void> {
-		this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, tocData, this.defaultSettingsEditorModel.settingsGroups.slice(1));
+		const groups = this.defaultSettingsEditorModel.settingsGroups.slice(1); // Without commonlyUsed
+		const resolvedSettingsRoot = resolveSettingsTree(tocData, groups);
+		const commonlyUsed = resolveSettingsTree(commonlyUsedData, groups);
+		resolvedSettingsRoot.children.unshift(commonlyUsed);
+
+		this.settingsTreeModel = this.instantiationService.createInstance(SettingsTreeModel, this.viewState, resolvedSettingsRoot);
 
 		if (!this.searchResultModel) {
 			this.settingsTree.setInput(this.settingsTreeModel.root);

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

@@ -13,6 +13,12 @@ export interface ITOCEntry {
 	settings?: (string | ISetting)[];
 }
 
+export const commonlyUsedData: ITOCEntry = {
+	id: 'commonlyUsed',
+	label: 'Commonly Used',
+	settings: ['files.autoSave', 'editor.fontSize', 'editor.fontFamily', 'editor.tabSize', 'editor.renderWhitespace', 'editor.cursorStyle', 'editor.multiCursorModifier', 'editor.insertSpaces', 'editor.wordWrap', 'files.exclude', 'files.associations']
+};
+
 export const tocData: ITOCEntry = {
 	id: 'root',
 	label: 'root',

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

@@ -69,6 +69,13 @@ export class SettingsTreeSettingElement extends SettingsTreeElement {
 	enum?: string[];
 }
 
+export interface ITOCEntry {
+	id: string;
+	label: string;
+	children?: ITOCEntry[];
+	settings?: (string | ISetting)[];
+}
+
 export class SettingsTreeModel {
 	private _root: SettingsTreeElement;
 	private _treeElementsById = new Map<string, SettingsTreeElement>();
@@ -76,11 +83,9 @@ export class SettingsTreeModel {
 	constructor(
 		private viewState: ISettingsEditorViewState,
 		tocRoot: ITOCEntry,
-		allSettings: ISettingsGroup[],
 		@IConfigurationService private configurationService: IConfigurationService
 	) {
-		const resolvedTOC = resolveSettingsTree(tocRoot, allSettings);
-		this._root = this.createSettingsTreeGroupElement(resolvedTOC);
+		this._root = this.createSettingsTreeGroupElement(tocRoot);
 	}
 
 	get root(): SettingsTreeElement {
@@ -116,7 +121,7 @@ export class SettingsTreeModel {
 
 function createSettingsTreeSettingElement(setting: ISetting, parent: any, settingsTarget: SettingsTarget, configurationService: IConfigurationService): SettingsTreeSettingElement {
 	const element = new SettingsTreeSettingElement();
-	element.id = setting.key;
+	element.id = parent.id + '_' + setting.key;
 	element.parent = parent;
 
 	const { isConfigured, inspected, targetSelector } = inspectSetting(setting.key, settingsTarget, configurationService);
@@ -158,7 +163,7 @@ function inspectSetting(key: string, target: SettingsTarget, configurationServic
 	return { isConfigured, inspected, targetSelector };
 }
 
-function resolveSettingsTree(tocData: ITOCEntry, settingsGroups: ISettingsGroup[]): ITOCEntry {
+export function resolveSettingsTree(tocData: ITOCEntry, settingsGroups: ISettingsGroup[]): ITOCEntry {
 	return _resolveSettingsTree(tocData, getFlatSettings(settingsGroups));
 }
 
@@ -550,6 +555,7 @@ export class SettingsRenderer implements IRenderer {
 	private renderValue(element: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate): void {
 		const onChange = value => this._onDidChangeSetting.fire({ key: element.setting.key, value });
 		template.valueElement.innerHTML = '';
+
 		const valueControlElement = DOM.append(template.valueElement, $('.setting-item-control'));
 		if (element.enum && (element.valueType === 'string' || !element.valueType)) {
 			valueControlElement.classList.add('setting-type-enum');