Settings editor - implement collapsible group titles

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

@@ -237,7 +237,7 @@
 	- Make up for that space with a negative margin on the settings-body
 
 	This is risky, consider a different approach
-	 */
+*/
 .settings-editor .settings-list-container .monaco-list-row {
 	overflow: visible;
 }
@@ -251,6 +251,38 @@
 	margin-left: -15px;
 }
 
-/* .settings-editor .settings-list-container .monaco-scrollable-element > .shadow.top {
-	width: calc(100% - 3px);
-} */
\ No newline at end of file
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded,
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed {
+	cursor: pointer;
+}
+
+.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
+	background-image: url(collapsed-dark.svg);
+}
+
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
+	display: inline-block;
+	background-image: url(collapsed.svg);
+}
+
+.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+	background-image: url(expanded-dark.svg);
+}
+
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+	display: inline-block;
+	background-image: url(expanded.svg);
+}
+
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before,
+.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+	background-size: 16px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	width: 16px;
+	height: 22px;
+	position: absolute;
+	content: ' ';
+	left: -19px;
+	top: 14px;
+}
\ No newline at end of file

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

@@ -61,8 +61,15 @@ interface ISettingItemEntry extends IListEntry {
 	enum?: string[];
 }
 
+enum ExpandState {
+	Expanded,
+	Collapsed,
+	NA
+}
+
 interface IGroupTitleEntry extends IListEntry {
 	title: string;
+	expandState: ExpandState;
 }
 
 interface IButtonRowEntry extends IListEntry {
@@ -113,6 +120,8 @@ export class SettingsEditor2 extends BaseEditor {
 	private searchResultModel: SearchResultModel;
 	private pendingSettingModifiedReport: { key: string, value: any };
 
+	private groupExpanded = new Map<string, boolean>();
+
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IConfigurationService private configurationService: IConfigurationService,
@@ -250,11 +259,18 @@ export class SettingsEditor2 extends BaseEditor {
 		const buttonItemRenderer = new ButtonRowRenderer();
 		this._register(buttonItemRenderer.onDidClick(e => this.onShowAllSettingsClicked()));
 
+		const groupTitleRenderer = new GroupTitleRenderer();
+		this._register(groupTitleRenderer.onDidClickGroup(e => {
+			const isExpanded = !!this.groupExpanded.get(e);
+			this.groupExpanded.set(e, !isExpanded);
+			this.renderEntries();
+		}));
+
 		this.settingsList = this._register(this.instantiationService.createInstance(
 			WorkbenchList,
 			this.settingsListContainer,
 			new SettingItemDelegate(),
-			[settingItemRenderer, new GroupTitleRenderer(), buttonItemRenderer],
+			[settingItemRenderer, groupTitleRenderer, buttonItemRenderer],
 			{
 				identityProvider: e => e.id,
 				ariaLabel: localize('settingsListLabel', "Settings"),
@@ -530,21 +546,30 @@ export class SettingsEditor2 extends BaseEditor {
 			}
 
 			const group = this.defaultSettingsEditorModel.settingsGroups[groupIdx];
+			const isExpanded = groupIdx === 0 || this.groupExpanded.get(group.id);
+
 			const groupEntries = [];
-			for (const section of group.sections) {
-				for (const setting of section.settings) {
-					const entry = this.settingToEntry(setting);
-					if (!this.showConfiguredSettingsOnly || entry.isConfigured) {
-						groupEntries.push(entry);
+			if (isExpanded) {
+				for (const section of group.sections) {
+					for (const setting of section.settings) {
+						const entry = this.settingToEntry(setting);
+						if (!this.showConfiguredSettingsOnly || entry.isConfigured) {
+							groupEntries.push(entry);
+						}
 					}
 				}
 			}
 
-			if (groupEntries.length) {
+			if (!isExpanded || groupEntries.length) {
+				const expandState = groupIdx === 0 ? ExpandState.NA :
+					isExpanded ? ExpandState.Expanded :
+						ExpandState.Collapsed;
+
 				entries.push(<IGroupTitleEntry>{
 					id: group.id,
 					templateId: SETTINGS_GROUP_ENTRY_TEMPLATE_ID,
-					title: group.title
+					title: group.title,
+					expandState
 				});
 
 				entries.push(...groupEntries);
@@ -623,9 +648,12 @@ class SettingItemDelegate implements IDelegate<IListEntry> {
 	}
 }
 
-interface ISettingItemTemplate {
-	parent: HTMLElement;
+interface IDisposableTemplate {
 	toDispose: IDisposable[];
+}
+
+interface ISettingItemTemplate extends IDisposableTemplate {
+	parent: HTMLElement;
 
 	containerElement: HTMLElement;
 	categoryElement: HTMLElement;
@@ -635,14 +663,14 @@ interface ISettingItemTemplate {
 	overridesElement: HTMLElement;
 }
 
-interface IGroupTitleTemplate {
+interface IGroupTitleTemplate extends IDisposableTemplate {
+	context?: IGroupTitleEntry;
 	parent: HTMLElement;
 	labelElement: HTMLElement;
 }
 
-interface IButtonRowTemplate {
+interface IButtonRowTemplate extends IDisposableTemplate {
 	parent: HTMLElement;
-	toDispose: IDisposable[];
 
 	button: Button;
 	entry?: IButtonRowEntry;
@@ -800,23 +828,51 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
 class GroupTitleRenderer implements IRenderer<IGroupTitleEntry, IGroupTitleTemplate> {
 
+	private static readonly EXPANDED_CLASS = 'settings-group-title-expanded';
+	private static readonly COLLAPSED_CLASS = 'settings-group-title-collapsed';
+
+	private readonly _onDidClickGroup: Emitter<string> = new Emitter<string>();
+	public readonly onDidClickGroup: Event<string> = this._onDidClickGroup.event;
+
 	get templateId(): string { return SETTINGS_GROUP_ENTRY_TEMPLATE_ID; }
 
 	renderTemplate(parent: HTMLElement): IGroupTitleTemplate {
 		DOM.addClass(parent, 'group-title');
 
-		const labelElement = DOM.append(parent, $('h2.group-title-label'));
-		return {
+		const labelElement = DOM.append(parent, $('h2.settings-group-title-label'));
+
+		const toDispose = [];
+		const template: IGroupTitleTemplate = {
 			parent: parent,
-			labelElement
+			labelElement,
+			toDispose
 		};
+
+		toDispose.push(DOM.addDisposableListener(labelElement, 'click', () => {
+			if (template.context) {
+				this._onDidClickGroup.fire(template.context.id);
+			}
+		}));
+
+		return template;
 	}
 
 	renderElement(entry: IGroupTitleEntry, index: number, template: IGroupTitleTemplate): void {
+		template.context = entry;
 		template.labelElement.textContent = entry.title;
+
+		template.labelElement.classList.remove(GroupTitleRenderer.EXPANDED_CLASS);
+		template.labelElement.classList.remove(GroupTitleRenderer.COLLAPSED_CLASS);
+
+		if (entry.expandState === ExpandState.Expanded) {
+			template.labelElement.classList.add(GroupTitleRenderer.EXPANDED_CLASS);
+		} else if (entry.expandState === ExpandState.Collapsed) {
+			template.labelElement.classList.add(GroupTitleRenderer.COLLAPSED_CLASS);
+		}
 	}
 
 	disposeTemplate(template: IGroupTitleTemplate): void {
+		dispose(template.toDispose);
 	}
 }