Settings editor ported to tree - first take, basically works

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

@@ -90,71 +90,65 @@
 	margin-left: 2px;
 }
 
-.settings-editor > .settings-body .settings-list-container .settings-list-offset-helper {
+.settings-editor > .settings-body .settings-tree-container .settings-list-offset-helper {
 	opacity: 0;
 	position: absolute;
 }
 
-.settings-editor > .settings-body .settings-list-container .monaco-list::before {
+.settings-editor > .settings-body .settings-tree-container .monaco-tree::before {
 	outline: none !important;
 }
 
-.settings-editor > .settings-body .settings-list-container {
+.settings-editor > .settings-body .settings-tree-container {
 	flex: 1;
 	border-spacing: 0;
 	border-collapse: separate;
 	position: relative;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row {
+.settings-editor > .settings-body > .settings-tree-container .setting-item {
 	cursor: default;
 	white-space: normal;
+	padding: 3px 0px;
+	display: flex;
+	height: 100%;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd:not(.focused):not(.selected):not(:hover),
-.settings-editor > .settings-body > .settings-list-container .monaco-list:not(:focus) .monaco-list-row.focused.odd:not(.selected):not(:hover),
-.settings-editor > .settings-body > .settings-list-container .monaco-list:not(.focused) .monaco-list-row.focused.odd:not(.selected):not(:hover) {
+.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) {
 	background-color: rgba(130, 130, 130, 0.04);
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item {
-	padding: 3px;
-}
-
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container {
-	display: flex;
-	height: 100%;
-}
-
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-left {
+.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
 	flex: 1;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-right {
+.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
 	min-width: 180px;
 	margin: 21px 10px;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-title {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
 	line-height: initial;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-title .setting-item-overrides {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
 	opacity: 0.5;
 	margin-left: 7px;
 	font-style: italic;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-label {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label {
 	font-weight: bold;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-category {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
 	font-weight: bold;
 	opacity: 0.7;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-key {
+.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%;
@@ -162,7 +156,7 @@
 	display: none;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-description {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
 	opacity: 0.7;
 	margin-top: 5px;
 	height: 36px;
@@ -170,52 +164,42 @@
 	white-space: pre-wrap;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expanded .setting-item-description,
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item-measure-helper .setting-item-description {
+/* .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
+.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-measure-helper .setting-item-description {
 	height: initial;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expandable .setting-item-description {
+.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expandable .setting-item-description {
 	cursor: pointer;
-}
+} */
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expandable:not(.is-expanded) .setting-item-description::after {
-	content: '…';
-	display: block;
-	height: 4px;
-	width: 8px;
-	position: absolute;
-	bottom: 16px;
-	right: 202px;
-}
-
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
 	display: flex;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button,
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button:hover,
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button:active {
+.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;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
 	display: none;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-select-box {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
 	width: 100%;
 	font: inherit;
 	height: 26px;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-value-checkbox {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-value-checkbox {
 	position: relative;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-configured .setting-value-checkbox::after {
+.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-value-checkbox::after {
 	content: ' ';
 	display: block;
 	height: 3px;
@@ -225,7 +209,7 @@
 	left: -3px;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .setting-reset-button.monaco-button {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
 	display: inline-block;
 	background: url("clean.svg") center center no-repeat;
 	width: 16px;
@@ -235,23 +219,23 @@
 	visibility: hidden;
 }
 
-.vs-dark .settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .setting-reset-button.monaco-button {
+.vs-dark .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
 	background: url("clean-dark.svg") center center no-repeat;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-configured .setting-item-value > .setting-reset-button.monaco-button {
+.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
 	visibility: visible;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings {
+.settings-editor > .settings-body > .settings-tree-container .all-settings {
 	display: flex;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings .all-settings-button {
+.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button {
 	margin: auto;
 }
 
-.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings .all-settings-button .monaco-button {
+.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
 	padding-left: 10px;
 	padding-right: 10px;
 }
@@ -264,48 +248,44 @@
 
 	This is risky, consider a different approach
 */
-.settings-editor .settings-list-container .monaco-list-row {
+.settings-editor .settings-tree-container .setting-item {
 	overflow: visible;
 }
 
-.settings-editor .settings-list-container .monaco-list-row {
-	margin-left: 15px;
-	width: calc(100% - 15px);
-}
-
 .settings-editor .settings-body {
 	margin-left: -15px;
 }
 
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-label {
-	margin: 5px 3px;
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
+	margin: 0px;
+	padding: 5px 0px;
 }
 
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded,
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed {
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-expanded,
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-collapsed {
 	cursor: pointer;
 }
 
-.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
+.vs-dark .settings-editor > .settings-body > .settings-tree-container .settings-group-title-collapsed::before {
 	background-image: url(collapsed-dark.svg);
 }
 
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-collapsed::before {
 	display: inline-block;
 	background-image: url(collapsed.svg);
 }
 
-.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+.vs-dark .settings-editor > .settings-body > .settings-tree-container .settings-group-title-expanded::before {
 	background-image: url(expanded-dark.svg);
 }
 
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-expanded::before {
 	display: inline-block;
 	background-image: url(expanded.svg);
 }
 
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before,
-.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-collapsed::before,
+.settings-editor > .settings-body > .settings-tree-container .settings-group-title-expanded::before {
 	background-size: 16px;
 	background-position: 50% 50%;
 	background-repeat: no-repeat;