Defer creation of monaco-icon-description-container (#164659)

We don't need to create the `monaco-icon-description-container` container until the description is actually needed. In many cases it is never filled in, so we can skip creating this empty node
microsoft · Oct 28, 2022 · 220efdc · 220efdc
1 parent 3007d54
commit 220efdc
Showing 1 changed file with 23 additions and 20 deletions.
diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -82,13 +82,12 @@ class FastLabelNode {
 
 export class IconLabel extends Disposable {
 
-	private readonly domNode: FastLabelNode;
+	private readonly creationOptions?: IIconLabelCreationOptions;
 
+	private readonly domNode: FastLabelNode;
 	private readonly nameNode: Label | LabelWithHighlights;
 
-	private readonly descriptionContainer: FastLabelNode;
 	private descriptionNode: FastLabelNode | HighlightedLabel | undefined;
-	private readonly descriptionNodeFactory: () => FastLabelNode | HighlightedLabel;
 
 	private readonly labelContainer: HTMLElement;
 
@@ -97,26 +96,20 @@ export class IconLabel extends Disposable {
 
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
 		super();
+		this.creationOptions = options;
 
 		this.domNode = this._register(new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label'))));
 
 		this.labelContainer = dom.append(this.domNode.element, dom.$('.monaco-icon-label-container'));
 
 		const nameContainer = dom.append(this.labelContainer, dom.$('span.monaco-icon-name-container'));
-		this.descriptionContainer = this._register(new FastLabelNode(dom.append(this.labelContainer, dom.$('span.monaco-icon-description-container'))));
 
 		if (options?.supportHighlights || options?.supportIcons) {
 			this.nameNode = new LabelWithHighlights(nameContainer, !!options.supportIcons);
 		} else {
 			this.nameNode = new Label(nameContainer);
 		}
 
-		if (options?.supportDescriptionHighlights) {
-			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.descriptionContainer.element, dom.$('span.label-description')), { supportIcons: !!options.supportIcons });
-		} else {
-			this.descriptionNodeFactory = () => this._register(new FastLabelNode(dom.append(this.descriptionContainer.element, dom.$('span.label-description'))));
-		}
-
 		this.hoverDelegate = options?.hoverDelegate;
 	}
 
@@ -152,17 +145,14 @@ export class IconLabel extends Disposable {
 		this.nameNode.setLabel(label, options);
 
 		if (description || this.descriptionNode) {
-			if (!this.descriptionNode) {
-				this.descriptionNode = this.descriptionNodeFactory(); // description node is created lazily on demand
-			}
-
-			if (this.descriptionNode instanceof HighlightedLabel) {
-				this.descriptionNode.set(description || '', options ? options.descriptionMatches : undefined);
-				this.setupHover(this.descriptionNode.element, options?.descriptionTitle);
+			const descriptionNode = this.getOrCreateDescriptionNode();
+			if (descriptionNode instanceof HighlightedLabel) {
+				descriptionNode.set(description || '', options ? options.descriptionMatches : undefined);
+				this.setupHover(descriptionNode.element, options?.descriptionTitle);
 			} else {
-				this.descriptionNode.textContent = description || '';
-				this.setupHover(this.descriptionNode.element, options?.descriptionTitle || '');
-				this.descriptionNode.empty = !description;
+				descriptionNode.textContent = description || '';
+				this.setupHover(descriptionNode.element, options?.descriptionTitle || '');
+				descriptionNode.empty = !description;
 			}
 		}
 	}
@@ -196,6 +186,19 @@ export class IconLabel extends Disposable {
 		}
 		this.customHovers.clear();
 	}
+
+	private getOrCreateDescriptionNode() {
+		if (!this.descriptionNode) {
+			const descriptionContainer = this._register(new FastLabelNode(dom.append(this.labelContainer, dom.$('span.monaco-icon-description-container'))));
+			if (this.creationOptions?.supportDescriptionHighlights) {
+				this.descriptionNode = new HighlightedLabel(dom.append(descriptionContainer.element, dom.$('span.label-description')), { supportIcons: !!this.creationOptions.supportIcons });
+			} else {
+				this.descriptionNode = this._register(new FastLabelNode(dom.append(descriptionContainer.element, dom.$('span.label-description'))));
+			}
+		}
+
+		return this.descriptionNode;
+	}
 }
 
 class Label {