Settings editor - start fixing up to match new mockups

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

@@ -72,9 +72,9 @@
 }
 
 .settings-editor > .settings-header > .settings-header-controls {
-	margin-top: 8px;
-	height: 30px;
+	height: 27px;
 	display: flex;
+	border-bottom: solid #3c3c3c 1px;
 }
 
 .settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
@@ -103,6 +103,20 @@
 	opacity: 0.7;
 }
 
+.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item {
+	padding: 0px; /* padding must be on action-label because it has the bottom-border, because that's where the .checked class is */
+}
+
+.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
+	text-transform: none;
+	font-size: 13px;
+
+	padding-bottom: 3px;
+	padding-top: 6px;
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
 .settings-editor > .settings-body {
 	display: flex;
 	margin: auto;
@@ -124,6 +138,8 @@
 .settings-editor > .settings-body .settings-toc-container {
 	width: 175px;
 	margin-right: 5px;
+	padding-top: 4px;
+	box-sizing: border-box;
 }
 
 .settings-editor > .settings-body .settings-toc-container.hidden {
@@ -142,6 +158,10 @@
 	display: none;
 }
 
+.settings-editor > .settings-body .settings-toc-container .monaco-scrollable-element > .shadow {
+	display: none;
+}
+
 .settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -156,6 +176,8 @@
 	flex: 1;
 	max-width: 875px;
 	margin-right: 1px; /* So the item doesn't blend into the edge of the view container  */
+	padding-top: 8px;
+	box-sizing: border-box;
 	border-spacing: 0;
 	border-collapse: separate;
 	position: relative;
@@ -309,7 +331,7 @@
 }
 
 .settings-editor > .settings-body > .settings-tree-container .settings-group-level-1.settings-group-first {
-	padding-top: 4px;
+	padding-top: 7px;
 }
 
 .settings-editor > .settings-body .settings-feedback-button {

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

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

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

@@ -508,7 +508,7 @@ export class SettingsRenderer implements IRenderer {
 	getHeight(tree: ITree, element: SettingsTreeElement): number {
 		if (element instanceof SettingsTreeGroupElement) {
 			if (element.isFirstGroup) {
-				return 28;
+				return 31;
 			}
 
 			return 40 + (7 * element.level);