Combined refactor microsoft#58922, option decorator/default microsoft#58724

cleidigh · cleidigh · commit d72436010113 · 2018-12-02T23:21:30.000-05:00
diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.css b/src/vs/base/browser/ui/selectBox/selectBoxCustom.css
@@ -80,8 +80,18 @@
 	overflow: hidden;
 	padding-left: 3.5px;
 	white-space: nowrap;
+	float: left;
 }
 
+.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decoration-right {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-right: 10px;
+	white-space: nowrap;
+	float: right;
+}
+
+
 /* Accepted CSS hiding technique for accessibility reader text  */
 /* https://webaim.org/techniques/css/invisiblecontent/ */
 
diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -28,6 +28,7 @@ interface ISelectListTemplateData {
 	root: HTMLElement;
 	text: HTMLElement;
 	itemDescription: HTMLElement;
+	decorationRight: HTMLElement;
 	disposables: IDisposable[];
 }
 
@@ -42,6 +43,7 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
 		data.disposables = [];
 		data.root = container;
 		data.text = dom.append(container, $('.option-text'));
+		data.decorationRight = dom.append(container, $('.option-decoration-right'));
 		data.itemDescription = dom.append(container, $('.option-text-description'));
 		dom.addClass(data.itemDescription, 'visually-hidden');
 
@@ -51,9 +53,11 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
 	renderElement(element: ISelectOptionItem, index: number, templateData: ISelectListTemplateData): void {
 		const data = <ISelectListTemplateData>templateData;
 		const text = (<ISelectOptionItem>element).text;
+		const decorationRight = (<ISelectOptionItem>element).decorationRight;
 		const isDisabled = (<ISelectOptionItem>element).isDisabled;
 
 		data.text.textContent = text;
+		data.decorationRight.innerText = (!!decorationRight ? decorationRight : '');
 
 		if (typeof element.description === 'string') {
 			const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
@@ -687,14 +691,18 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
 
 		if (container && !!this.options) {
 			let longest = 0;
+			let longestLength = 0;
 
-			for (let index = 0; index < this.options.length; index++) {
-				if (this.options[index].text.length > this.options[longest].text.length) {
+			this.options.forEach((option, index) => {
+				const len = option.text.length + (!!option.decorationRight ? option.decorationRight.length : 0);
+				if (len > longestLength) {
 					longest = index;
+					longestLength = len;
 				}
-			}
+			});
 
-			container.innerHTML = this.options[longest].text;
+
+			container.innerHTML = this.options[longest].text + (!!this.options[longest].decorationRight ? (this.options[longest].decorationRight + ' ') : '');
 			elementWidth = dom.getTotalWidth(container);
 		}
 
@@ -770,11 +778,12 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
 		dom.EventHelper.stop(e);
 
 		// Check our mouse event is on an option (not scrollbar)
-		if (!e.toElement.classList.contains('option-text')) {
+		if (!!e.toElement.classList.contains('slider')) {
 			return;
 		}
 
-		const listRowElement = e.toElement.parentElement;
+		const listRowElement = e.toElement.closest('.monaco-list-row');
+
 		if (!listRowElement) {
 			return;
 		}
diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
@@ -1173,7 +1173,8 @@ export class SettingsRenderer implements ITreeRenderer {
 			.map((data, index) => <ISelectOptionItem>{
 				text: data,
 				description: (enumDescriptions && enumDescriptions[index] && (enumDescriptionsAreMarkdown ? fixSettingLinks(enumDescriptions[index], false) : enumDescriptions[index])),
-				descriptionIsMarkdown: enumDescriptionsAreMarkdown
+				descriptionIsMarkdown: enumDescriptionsAreMarkdown,
+				decorationRight: (data === dataElement.defaultValue ? localize('settings.Default', "({0})", 'default') : '')
 			});
 
 		template.selectBox.setOptions(displayOptions);
