From cf72b93a7d33675568526b20691b0955be74887f Mon Sep 17 00:00:00 2001
From: Rob Lourens <roblourens@gmail.com>
Date: Wed, 27 Jun 2018 18:45:25 -0700
Subject: [PATCH] Settings editor - special-case "Commonly Used" settings
 height so it lines up with the top of the TOC

---
 .../preferences/browser/media/settingsEditor2.css     |  4 ++++
 .../parts/preferences/browser/settingsTree.ts         | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
index 5c553f38f89..e964523981f 100644
--- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
+++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
@@ -285,6 +285,10 @@
 	font-size: 20px;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .settings-group-level-1.settings-group-first {
+	padding-top: 7px;
+}
+
 .settings-editor > .settings-body .settings-feedback-button {
 	color: rgb(255, 255, 255);
 	background-color: rgb(14, 99, 156);
diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
index 5d7a01d3f17..e36ea4f0a58 100644
--- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts
+++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
@@ -70,6 +70,7 @@ export class SettingsTreeGroupElement extends SettingsTreeElement {
 	children: (SettingsTreeGroupElement | SettingsTreeSettingElement)[];
 	label: string;
 	level: number;
+	isFirstGroup: boolean;
 }
 
 export class SettingsTreeSettingElement extends SettingsTreeElement {
@@ -111,6 +112,8 @@ export class SettingsTreeModel {
 
 	update(newTocRoot = this._tocRoot): void {
 		const newRoot = this.createSettingsTreeGroupElement(newTocRoot);
+		(<SettingsTreeGroupElement>newRoot.children[0]).isFirstGroup = true;
+
 		if (this._root) {
 			this._root.children = newRoot.children;
 		} else {
@@ -451,6 +454,10 @@ export class SettingsRenderer implements IRenderer {
 
 	getHeight(tree: ITree, element: SettingsTreeElement): number {
 		if (element instanceof SettingsTreeGroupElement) {
+			if (element.isFirstGroup) {
+				return 31;
+			}
+
 			return 40 + (7 * element.level);
 		}
 
@@ -642,6 +649,10 @@ export class SettingsRenderer implements IRenderer {
 		const labelElement = DOM.append(template.parent, $('div.settings-group-title-label'));
 		labelElement.classList.add(`settings-group-level-${element.level}`);
 		labelElement.textContent = (<SettingsTreeGroupElement>element).label;
+
+		if (element.isFirstGroup) {
+			labelElement.classList.add('settings-group-first');
+		}
 	}
 
 	private elementIsSelected(tree: ITree, element: SettingsTreeElement): boolean {
-- 
GitLab