Quick open shows weird truncation when highlighting matches (fixes #4…

…2501)
microsoft · Feb 5, 2018 · 73e6193 · 73e6193
1 parent d2fd388
commit 73e6193
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 39 deletions.
diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -16,13 +16,15 @@ import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 
 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
+	supportDescriptionHighlights?: boolean;
 }
 
 export interface IIconLabelOptions {
 	title?: string;
 	extraClasses?: string[];
 	italic?: boolean;
 	matches?: IMatch[];
+	descriptionMatches?: IMatch[];
 }
 
 class FastLabelNode {
@@ -83,7 +85,7 @@ class FastLabelNode {
 export class IconLabel {
 	private domNode: FastLabelNode;
 	private labelNode: FastLabelNode | HighlightedLabel;
-	private descriptionNode: FastLabelNode;
+	private descriptionNode: FastLabelNode | HighlightedLabel;
 
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
 		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));
@@ -96,7 +98,11 @@ export class IconLabel {
 			this.labelNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('a.label-name')));
 		}
 
-		this.descriptionNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('span.label-description')));
+		if (options && options.supportDescriptionHighlights) {
+			this.descriptionNode = new HighlightedLabel(dom.append(labelDescriptionContainer.element, dom.$('span.label-description')));
+		} else {
+			this.descriptionNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('span.label-description')));
+		}
 	}
 
 	public get element(): HTMLElement {
@@ -105,20 +111,11 @@ export class IconLabel {
 
 	public onClick(callback: (event: MouseEvent) => void): IDisposable {
 		return combinedDisposable([
-			dom.addDisposableListener(this.labelElement, dom.EventType.CLICK, (e: MouseEvent) => callback(e)),
+			dom.addDisposableListener(this.labelNode.element, dom.EventType.CLICK, (e: MouseEvent) => callback(e)),
 			dom.addDisposableListener(this.descriptionNode.element, dom.EventType.CLICK, (e: MouseEvent) => callback(e))
 		]);
 	}
 
-	private get labelElement(): HTMLElement {
-		const labelNode = this.labelNode;
-		if (labelNode instanceof HighlightedLabel) {
-			return labelNode.element;
-		}
-
-		return labelNode.element;
-	}
-
 	public setValue(label?: string, description?: string, options?: IIconLabelOptions): void {
 		const classes = ['monaco-icon-label'];
 		if (options) {
@@ -141,8 +138,13 @@ export class IconLabel {
 			labelNode.textContent = label || '';
 		}
 
-		this.descriptionNode.textContent = description || '';
-		this.descriptionNode.empty = !description;
+		const descriptionNode = this.descriptionNode;
+		if (descriptionNode instanceof HighlightedLabel) {
+			descriptionNode.set(description || '', options ? options.descriptionMatches : void 0);
+		} else {
+			descriptionNode.textContent = description || '';
+			descriptionNode.empty = !description;
+		}
 	}
 
 	public dispose(): void {

diff --git a/src/vs/base/parts/quickopen/browser/quickOpenModel.ts b/src/vs/base/parts/quickopen/browser/quickOpenModel.ts
@@ -298,7 +298,6 @@ export interface IQuickOpenEntryTemplateData {
 	icon: HTMLSpanElement;
 	label: IconLabel;
 	detail: HighlightedLabel;
-	description: HighlightedLabel;
 	keybinding: KeybindingLabel;
 	actionBar: ActionBar;
 }
@@ -352,13 +351,7 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 		row1.appendChild(icon);
 
 		// Label
-		const label = new IconLabel(row1, { supportHighlights: true });
-
-		// Description
-		const descriptionContainer = document.createElement('span');
-		row1.appendChild(descriptionContainer);
-		DOM.addClass(descriptionContainer, 'quick-open-entry-description');
-		const description = new HighlightedLabel(descriptionContainer);
+		const label = new IconLabel(row1, { supportHighlights: true, supportDescriptionHighlights: true });
 
 		// Keybinding
 		const keybindingContainer = document.createElement('span');
@@ -397,7 +390,6 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 			icon,
 			label,
 			detail,
-			description,
 			keybinding,
 			group,
 			actionBar
@@ -462,15 +454,12 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 			// Label
 			const options: IIconLabelOptions = entry.getLabelOptions() || Object.create(null);
 			options.matches = labelHighlights || [];
-			data.label.setValue(entry.getLabel(), null, options);
+			options.descriptionMatches = descriptionHighlights || [];
+			data.label.setValue(entry.getLabel(), entry.getDescription(), options);
 
 			// Meta
 			data.detail.set(entry.getDetail(), detailHighlights);
 
-			// Description
-			data.description.set(entry.getDescription(), descriptionHighlights || []);
-			data.description.element.title = entry.getDescription();
-
 			// Keybinding
 			data.keybinding.set(entry.getKeybinding(), null);
 		}
@@ -482,8 +471,6 @@ class Renderer implements IRenderer<QuickOpenEntry> {
 		data.actionBar = null;
 		data.container = null;
 		data.entry = null;
-		data.description.dispose();
-		data.description = null;
 		data.keybinding.dispose();
 		data.keybinding = null;
 		data.detail.dispose();

diff --git a/src/vs/base/parts/quickopen/browser/quickopen.css b/src/vs/base/parts/quickopen/browser/quickopen.css
@@ -70,6 +70,11 @@
 	flex-shrink: 0;
 }
 
+.quick-open-widget .quick-open-tree .monaco-icon-label,
+.quick-open-widget .quick-open-tree .monaco-icon-label .monaco-icon-label-description-container {
+	flex: 1; /* make sure the icon label grows within the row */
+}
+
 .quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span {
 	opacity: 1;
 }
@@ -79,15 +84,6 @@
 	line-height: normal;
 }
 
-.quick-open-widget .quick-open-tree .quick-open-entry-description {
-	opacity: 0.7;
-	margin-left: 0.5em;
-	font-size: 0.9em;
-	overflow: hidden;
-	flex: 1;
-	text-overflow: ellipsis;
-}
-
 .quick-open-widget .quick-open-tree .content.has-group-label .quick-open-entry-keybinding {
 	margin-right: 8px;
 }