From e26ef4c2cceaf1da74e0d772dd28651e711e6bb1 Mon Sep 17 00:00:00 2001
From: Rob Lourens <roblourens@gmail.com>
Date: Wed, 23 May 2018 10:35:54 -0700
Subject: [PATCH] Settings editor as tree - fix expand sizing and padding

---
 .../preferences/browser/media/settingsEditor2.css  | 14 +++++++++-----
 .../parts/preferences/browser/settingsTree.ts      |  7 ++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
index ef8fd34457d..89e5e43dfe4 100644
--- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
+++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
@@ -111,6 +111,7 @@
 	white-space: normal;
 	display: flex;
 	height: 100%;
+	min-height: 75px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
@@ -121,11 +122,13 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
 	flex: 1;
+	padding-top: 3px;
+	padding-bottom: 12px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
 	min-width: 180px;
-	margin: 21px 10px;
+	margin: 21px 10px 0px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
@@ -138,12 +141,13 @@
 	font-style: italic;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
 	font-weight: bold;
+	font-size: 14px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
-	font-weight: bold;
 	opacity: 0.7;
 }
 
@@ -157,7 +161,7 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
 	opacity: 0.7;
-	margin-top: 5px;
+	margin-top: 3px;
 	height: 36px;
 	overflow: hidden;
 	white-space: pre-wrap;
@@ -225,7 +229,7 @@
 .settings-editor > .settings-body > .settings-tree-container .setting-item .expand-indicator {
 	visibility: hidden;
 	position: absolute;
-	bottom: 3px;
+	bottom: -1px;
 	width: calc(100% - 190px);
 	text-align: center;
 	opacity: .5;
diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
index 2dc88bf13a0..d1a7ba413df 100644
--- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts
+++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
@@ -242,6 +242,8 @@ export interface ISettingChangeEvent {
 
 export class SettingsRenderer implements IRenderer {
 
+	private static readonly SETTING_ROW_HEIGHT = 75;
+
 	private readonly _onDidClickButton: Emitter<string> = new Emitter<string>();
 	public readonly onDidClickButton: Event<string> = this._onDidClickButton.event;
 
@@ -272,7 +274,7 @@ export class SettingsRenderer implements IRenderer {
 			if (isSelected) {
 				return this.measureSettingElementHeight(tree, element);
 			} else {
-				return 68;
+				return SettingsRenderer.SETTING_ROW_HEIGHT;
 			}
 		}
 
@@ -431,11 +433,10 @@ export class SettingsRenderer implements IRenderer {
 		template.labelElement.textContent = settingKeyDisplay.label;
 		template.labelElement.title = titleTooltip;
 		template.descriptionElement.textContent = element.description;
-		template.descriptionElement.title = element.description;
 
 		if (!measuring) {
 			const expandedHeight = this.measureSettingElementHeight(tree, element);
-			const isExpandable = expandedHeight > 68;
+			const isExpandable = expandedHeight > SettingsRenderer.SETTING_ROW_HEIGHT;
 			DOM.toggleClass(template.parent, 'is-expandable', isExpandable);
 
 			if (isSelected) {
-- 
GitLab