Settings editor - make enum and string type controls full width. Also lots of pixel pushing

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

@@ -124,10 +124,10 @@
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item {
+	padding-top: 5px;
 	cursor: default;
 	white-space: normal;
 	height: 100%;
-	min-height: 75px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
@@ -148,7 +148,6 @@
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
-	margin-top: 2px;
 	line-height: initial;
 }
 
@@ -176,18 +175,19 @@
 	opacity: 0.7;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
+	padding-left: 15px;
+	opacity: 0;
+	max-width: 800px;
+}
+
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
 	opacity: 0.7;
 	margin-top: 3px;
 	overflow: hidden;
-	white-space: nowrap;
+	white-space: pre;
 	text-overflow: ellipsis;
-}
-
-.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
-	padding-left: 15px;
-	opacity: 0;
-	max-width: 800px;
+	height: 18px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
@@ -196,15 +196,24 @@
 	white-space: pre-wrap;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > *:first-child {
-	min-width: 250px;
-	display: inline-block;
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
+	margin-top: 5px;
+	margin-bottom: 9px; /* Needed when measuring an expanded row */
+	display: flex;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
-	margin-top: 10px;
-	margin-bottom: 8px;
-	display: inline-block;
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number {
+	min-width: 200px;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum,
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string {
+	flex: 1;
+	min-width: initial;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child {
+	width: 100%;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
@@ -231,7 +240,7 @@
 	visibility: hidden;
 	width: initial;
 
-	padding-top: 0px; /* So focus outline doesn't overlap the control above */
+	padding-top: 2px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {

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

@@ -298,7 +298,7 @@ export class SettingsRenderer implements IRenderer {
 		this.renderSettingElement(tree, element, template);
 
 		const height = measureHelper.offsetHeight;
-		this.measureContainer.removeChild(measureHelper);
+		this.measureContainer.removeChild(this.measureContainer.firstChild);
 		return Math.max(height, SettingsRenderer.SETTING_ROW_HEIGHT);
 	}
 
@@ -448,56 +448,61 @@ export class SettingsRenderer implements IRenderer {
 	private renderValue(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate): void {
 		const onChange = value => this._onDidChangeSetting.fire({ key: element.setting.key, value });
 		template.valueElement.innerHTML = '';
+		const valueControlElement = DOM.append(template.valueElement, $('.setting-item-control'));
 		if (element.enum && (element.valueType === 'string' || !element.valueType)) {
-			this.renderEnum(element, isSelected, template, onChange);
+			valueControlElement.classList.add('setting-type-enum');
+			this.renderEnum(element, isSelected, template, valueControlElement, onChange);
 		} else if (element.valueType === 'boolean') {
-			this.renderBool(element, isSelected, template, onChange);
+			valueControlElement.classList.add('setting-type-boolean');
+			this.renderBool(element, isSelected, template, valueControlElement, onChange);
 		} else if (element.valueType === 'string') {
-			this.renderText(element, isSelected, template, onChange);
+			valueControlElement.classList.add('setting-type-string');
+			this.renderText(element, isSelected, template, valueControlElement, onChange);
 		} else if (element.valueType === 'number' || element.valueType === 'integer') {
-			this.renderText(element, isSelected, template, value => onChange(parseInt(value)));
+			valueControlElement.classList.add('setting-type-number');
+			this.renderText(element, isSelected, template, valueControlElement, value => onChange(parseInt(value)));
 		} else {
-			this.renderEditInSettingsJson(element, isSelected, template);
+			valueControlElement.classList.add('setting-type-complex');
+			this.renderEditInSettingsJson(element, isSelected, template, valueControlElement);
 		}
 	}
 
-	private renderBool(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: boolean) => void): void {
-		const checkboxElement = <HTMLInputElement>DOM.append(template.valueElement, $('input.setting-value-checkbox.setting-value-input'));
+	private renderBool(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: boolean) => void): void {
+		const checkboxElement = <HTMLInputElement>DOM.append(element, $('input.setting-value-checkbox.setting-value-input'));
 		checkboxElement.type = 'checkbox';
-		checkboxElement.checked = element.value;
+		checkboxElement.checked = dataElement.value;
 		checkboxElement.tabIndex = isSelected ? 0 : -1;
 
 		template.toDispose.push(DOM.addDisposableListener(checkboxElement, 'change', e => onChange(checkboxElement.checked)));
 	}
 
-	private renderEnum(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: string) => void): void {
-		const idx = element.enum.indexOf(element.value);
-		const displayOptions = element.enum.map(escapeInvisibleChars);
+	private renderEnum(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
+		const idx = dataElement.enum.indexOf(dataElement.value);
+		const displayOptions = dataElement.enum.map(escapeInvisibleChars);
 		const selectBox = new SelectBox(displayOptions, idx, this.contextViewService);
-		template.toDispose.push(selectBox);
 		template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService));
-		selectBox.render(template.valueElement);
-		if (template.valueElement.firstElementChild) {
-			template.valueElement.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
+		selectBox.render(element);
+		if (element.firstElementChild) {
+			element.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
 		}
 
 		template.toDispose.push(
-			selectBox.onDidSelect(e => onChange(element.enum[e.index])));
+			selectBox.onDidSelect(e => onChange(dataElement.enum[e.index])));
 	}
 
-	private renderText(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: string) => void): void {
-		const inputBox = new InputBox(template.valueElement, this.contextViewService);
+	private renderText(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
+		const inputBox = new InputBox(element, this.contextViewService);
 		template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService));
 		template.toDispose.push(inputBox);
-		inputBox.value = element.value;
+		inputBox.value = dataElement.value;
 		inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
 
 		template.toDispose.push(
 			inputBox.onDidChange(e => onChange(e)));
 	}
 
-	private renderEditInSettingsJson(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate): void {
-		const openSettingsButton = new Button(template.valueElement, { title: true, buttonBackground: null, buttonHoverBackground: null });
+	private renderEditInSettingsJson(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement): void {
+		const openSettingsButton = new Button(element, { title: true, buttonBackground: null, buttonHoverBackground: null });
 		openSettingsButton.onDidClick(() => this._onDidOpenSettings.fire());
 		openSettingsButton.label = localize('editInSettingsJson', "Edit in settings.json");
 		openSettingsButton.element.classList.add('edit-in-settings-button');