Settings editor - replace selection indicator bar with outline. Also fix header margin

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

@@ -4,15 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 
 .settings-editor {
-	padding: 11px 0px 0px 27px;
+	padding-top: 11px;
 	margin: auto;
 }
 
 /* header styling */
-
 .settings-editor > .settings-header {
-	padding: 0px 10px 0px 0px;
+	padding-left: 15px;
+	padding-right: 5px;
 	max-width: 800px;
+	box-sizing: border-box;
 	margin: auto;
 }
 
@@ -94,6 +95,7 @@
 	white-space: nowrap;
 	margin-right: 10px;
 	margin-left: 2px;
+	opacity: 0.7;
 }
 
 .settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper {
@@ -129,16 +131,6 @@
 	min-height: 75px;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .monaco-tree-row .content::before {
-	content: ' ';
-	display: inline-block;
-	position: absolute;
-	width: 5px;
-	left: -9px;
-	top: 2px;
-	bottom: 10px;
-}
-
 .settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
 .settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover),
 .settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) {
@@ -153,7 +145,7 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
 	min-width: 180px;
-	margin: 21px 10px 0px;
+	margin: 21px 10px 0px 5px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
@@ -184,14 +176,6 @@
 	opacity: 0.7;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-key {
-	margin-left: 10px;
-	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
-	font-size: 90%;
-	opacity: 0.8;
-	display: none;
-}
-
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
 	opacity: 0.7;
 	margin-top: 3px;
@@ -229,20 +213,6 @@
 	height: 26px;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-value-checkbox {
-	position: relative;
-}
-
-.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-value-checkbox::after {
-	content: ' ';
-	display: block;
-	height: 3px;
-	width: 18px;
-	position: absolute;
-	top: 15px;
-	left: -3px;
-}
-
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
 	text-align: left;
 	display: block;
@@ -293,10 +263,6 @@
 	overflow: visible;
 }
 
-.settings-editor .settings-body {
-	margin-left: -15px;
-}
-
 .settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
 	margin: 0px;
 	padding: 5px 0px;

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

@@ -21,7 +21,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { WorkbenchTree } from 'vs/platform/list/browser/listService';
 import { ILogService } from 'vs/platform/log/common/log';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { editorBackground, foreground } from 'vs/platform/theme/common/colorRegistry';
+import { editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry';
 import { attachButtonStyler, attachStyler } from 'vs/platform/theme/common/styler';
 import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
@@ -215,14 +215,14 @@ export class SettingsEditor2 extends BaseEditor {
 			});
 
 		this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
-			const activeListBackground = theme.getColor('list.activeSelectionBackground');
-			if (activeListBackground) {
-				collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree.focused .monaco-tree-row.focused .content::before { background-color: ${activeListBackground}; }`);
+			const activeBorderColor = theme.getColor(listActiveSelectionBackground);
+			if (activeBorderColor) {
+				collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`);
 			}
 
-			const inactiveListBackground = theme.getColor('list.inactiveSelectionBackground');
-			if (inactiveListBackground) {
-				collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused .content::before { background-color: ${inactiveListBackground}; }`);
+			const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground);
+			if (inactiveBorderColor) {
+				collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`);
 			}
 		}));