Settings editor - tweak padding and spacing

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

@@ -113,6 +113,10 @@
 	margin-right: 5px;
 }
 
+.settings-editor > .settings-body .settings-toc-container {
+	padding-top: 5px;
+}
+
 .search-mode .settings-toc-container {
 	display: none;
 }
@@ -135,7 +139,9 @@
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item {
-	padding-top: 5px;
+	padding-top: 9px;
+	padding-bottom: 13px;
+	box-sizing: border-box;
 	cursor: default;
 	white-space: normal;
 	height: 100%;
@@ -186,6 +192,11 @@
 	height: 18px;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
+	position: absolute;
+	visibility: hidden;
+}
+
 .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
 .settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
 	height: initial;
@@ -194,7 +205,6 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
 	margin-top: 5px;
-	margin-bottom: 7px; /* Needed when measuring an expanded row */
 	display: flex;
 }
 
@@ -215,9 +225,9 @@
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button,
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button:hover,
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button:active {
-	margin: auto;
 	text-align: left;
 	text-decoration: underline;
+	padding-left: 0px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
@@ -243,35 +253,27 @@
 	visibility: visible;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .all-settings {
-	display: flex;
-}
-
-.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button {
-	margin: auto;
-}
-
-.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
+.settings-editor > .settings-body > .settings-tree-container .group-title,
+.settings-editor > .settings-body > .settings-tree-container .setting-item {
 	padding-left: 10px;
-	padding-right: 10px;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .group-title,
-.settings-editor > .settings-body > .settings-tree-container .setting-item {
-	padding-left: 5px;
+.settings-editor > .settings-body > .settings-tree-container .group-title {
+	cursor: default;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
 	margin: 0px;
+	font-weight: bold;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .settings-group-level-1 {
-	padding-top: 16px;
+	padding-top: 23px;
 	font-size: 24px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .settings-group-level-2 {
-	padding-top: 16px;
+	padding-top: 27px;
 	font-size: 20px;
 }
 

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

@@ -672,8 +672,10 @@ export class SettingsEditor2 extends BaseEditor {
 	private layoutSettingsList(dimension: DOM.Dimension): void {
 		const listHeight = dimension.height - (DOM.getDomNodePagePosition(this.headerContainer).height + 12 /*padding*/);
 		this.settingsTreeContainer.style.height = `${listHeight}px`;
-		this.tocTreeContainer.style.height = `${listHeight}px`;
 		this.settingsTree.layout(listHeight, 800);
-		this.tocTree.layout(listHeight, 200);
+
+		const tocHeight = listHeight - 5; // padding
+		this.tocTreeContainer.style.height = `${tocHeight}px`;
+		this.tocTree.layout(tocHeight, 175);
 	}
 }

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

@@ -320,8 +320,6 @@ function wordifyKey(key: string): string {
 }
 
 function trimCategoryForGroup(category: string, groupId: string): string {
-	// const categoryWithoutSpaces = category.replace(/ /g, '');
-
 	const doTrim = forward => {
 		const parts = groupId.split('.');
 		while (parts.length) {
@@ -330,10 +328,6 @@ function trimCategoryForGroup(category: string, groupId: string): string {
 				return category.replace(reg, '');
 			}
 
-			// if (reg.test(categoryWithoutSpaces)) {
-			// 	return categoryWithoutSpaces.replace(reg, '');
-			// }
-
 			if (forward) {
 				parts.pop();
 			} else {
@@ -394,7 +388,7 @@ export interface ISettingChangeEvent {
 
 export class SettingsRenderer implements IRenderer {
 
-	private static readonly SETTING_ROW_HEIGHT = 82;
+	private static readonly SETTING_ROW_HEIGHT = 92;
 
 	private readonly _onDidChangeSetting: Emitter<ISettingChangeEvent> = new Emitter<ISettingChangeEvent>();
 	public readonly onDidChangeSetting: Event<ISettingChangeEvent> = this._onDidChangeSetting.event;
@@ -414,7 +408,7 @@ export class SettingsRenderer implements IRenderer {
 
 	getHeight(tree: ITree, element: SettingsTreeElement): number {
 		if (element instanceof SettingsTreeGroupElement) {
-			return 40 + (4 * element.level);
+			return 40 + (7 * element.level);
 		}
 
 		if (element instanceof SettingsTreeSettingElement) {
@@ -435,7 +429,7 @@ export class SettingsRenderer implements IRenderer {
 		const template = this.renderSettingTemplate(tree, measureHelper);
 		this.renderSettingElement(tree, element, template);
 
-		const height = measureHelper.offsetHeight;
+		const height = this.measureContainer.offsetHeight;
 		this.measureContainer.removeChild(this.measureContainer.firstChild);
 		return Math.max(height, SettingsRenderer.SETTING_ROW_HEIGHT);
 	}
@@ -527,7 +521,7 @@ export class SettingsRenderer implements IRenderer {
 
 	private renderGroupElement(element: SettingsTreeGroupElement, template: IGroupTitleTemplate): void {
 		template.parent.innerHTML = '';
-		const labelElement = DOM.append(template.parent, $('h3.settings-group-title-label'));
+		const labelElement = DOM.append(template.parent, $('div.settings-group-title-label'));
 		labelElement.classList.add(`settings-group-level-${element.level}`);
 		labelElement.textContent = (<SettingsTreeGroupElement>element).label;
 	}