more efficient iconlabel

src/vs/base/browser/ui/iconLabel/iconLabel.ts

@@ -12,6 +12,7 @@ import { IMatch } from 'vs/base/common/filters';
 import uri from 'vs/base/common/uri';
 import paths = require('vs/base/common/paths');
 import { IRootProvider, getPathLabel, IUserHomeProvider } from 'vs/base/common/labels';
+import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 
 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
@@ -24,56 +25,99 @@ export interface IIconLabelOptions {
 	matches?: IMatch[];
 }
 
+class FastLabelNode {
+	private disposed: boolean;
+	private _textContent: string;
+	private _className: string;
+	private _title: string;
+	private _empty: boolean;
+
+	constructor(private _element: HTMLElement) {
+	}
+
+	public get element(): HTMLElement {
+		return this._element;
+	}
+
+	public set textContent(content: string) {
+		if (this.disposed || content === this._textContent) {
+			return;
+		}
+
+		this._textContent = content;
+		this._element.textContent = content;
+	}
+
+	public set className(className: string) {
+		if (this.disposed || className === this._className) {
+			return;
+		}
+
+		this._className = className;
+		this._element.className = className;
+	}
+
+	public set title(title: string) {
+		if (this.disposed || title === this._title) {
+			return;
+		}
+
+		this._title = title;
+		this._element.title = title;
+	}
+
+	public set empty(empty: boolean) {
+		if (this.disposed || empty === this._empty) {
+			return;
+		}
+
+		this._empty = empty;
+		this._element.style.marginLeft = empty ? '0' : null;
+	}
+
+	public dispose(): void {
+		this.disposed = true;
+	}
+}
+
 export class IconLabel {
-	private domNode: HTMLElement;
-	private labelNode: HTMLElement | HighlightedLabel;
-	private descriptionNode: HTMLElement;
+	private domNode: FastLabelNode;
+	private labelNode: FastLabelNode | HighlightedLabel;
+	private descriptionNode: FastLabelNode;
 
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
-		this.domNode = dom.append(container, dom.$('.monaco-icon-label'));
+		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));
+
 		if (options && options.supportHighlights) {
-			this.labelNode = new HighlightedLabel(dom.append(this.domNode, dom.$('a.label-name')));
+			this.labelNode = new HighlightedLabel(dom.append(this.domNode.element, dom.$('a.label-name')));
 		} else {
-			this.labelNode = dom.append(this.domNode, dom.$('a.label-name'));
-		}
-		this.descriptionNode = dom.append(this.domNode, dom.$('span.label-description'));
+			this.labelNode = new FastLabelNode(dom.append(this.domNode.element, dom.$('a.label-name')));
 		}
 
-	public get element(): HTMLElement {
-		return this.domNode;
+		this.descriptionNode = new FastLabelNode(dom.append(this.domNode.element, dom.$('span.label-description')));
 	}
 
-	public get labelElement(): HTMLElement {
-		const labelNode = this.labelNode;
-		if (labelNode instanceof HighlightedLabel) {
-			return labelNode.element;
-		} else {
-			return labelNode;
-		}
+	public get element(): HTMLElement {
+		return this.domNode.element;
 	}
 
-	public get descriptionElement(): HTMLElement {
-		return this.descriptionNode;
+	public onClick(callback: (event: MouseEvent) => void): IDisposable {
+		return combinedDisposable([
+			dom.addDisposableListener(this.labelElement, dom.EventType.CLICK, (e: MouseEvent) => callback(e)),
+			dom.addDisposableListener(this.descriptionNode.element, dom.EventType.CLICK, (e: MouseEvent) => callback(e))
+		]);
 	}
 
-	public setValue(label?: string, description?: string, options?: IIconLabelOptions): void {
+	private get labelElement(): HTMLElement {
 		const labelNode = this.labelNode;
 		if (labelNode instanceof HighlightedLabel) {
-			labelNode.set(label || '', options ? options.matches : void 0);
-		} else {
-			labelNode.textContent = label || '';
+			return labelNode.element;
 		}
 
-		this.descriptionNode.textContent = description || '';
-
-		if (!description) {
-			dom.addClass(this.descriptionNode, 'empty');
-		} else {
-			dom.removeClass(this.descriptionNode, 'empty');
+		return labelNode.element;
 	}
 
-		this.domNode.title = options && options.title ? options.title : '';
-
+	public setValue(label?: string, description?: string, options?: IIconLabelOptions): void {
 		const classes = ['monaco-icon-label'];
 		if (options) {
 			if (options.extraClasses) {
@@ -86,13 +130,23 @@ export class IconLabel {
 		}
 
 		this.domNode.className = classes.join(' ');
-	}
+		this.domNode.title = options && options.title ? options.title : '';
 
-	public dispose(): void {
 		const labelNode = this.labelNode;
 		if (labelNode instanceof HighlightedLabel) {
-			labelNode.dispose();
+			labelNode.set(label || '', options ? options.matches : void 0);
+		} else {
+			labelNode.textContent = label || '';
 		}
+
+		this.descriptionNode.textContent = description || '';
+		this.descriptionNode.empty = !description;
+	}
+
+	public dispose(): void {
+		this.domNode.dispose();
+		this.labelNode.dispose();
+		this.descriptionNode.dispose();
 	}
 }
 

src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -39,10 +39,6 @@
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
 
-.monaco-icon-label > .label-description.empty {
-	margin-left: 0;
-}
-
 .monaco-icon-label.italic > .label-name,
 .monaco-icon-label.italic > .label-description {
 	font-style: italic;

src/vs/workbench/browser/labels.ts

@@ -73,8 +73,8 @@ export class ResourceLabel extends IconLabel {
 			return; // we need the resource to compare
 		}
 
-		if (e.oldModeId === PLAINTEXT_MODE_ID) {
-			return; // ignore transitions from no mode to specific mode because this happens each time a model is created
+		if (e.model.uri.scheme === Schemas.file && e.oldModeId === PLAINTEXT_MODE_ID) {
+			return; // ignore transitions in files from no mode to specific mode because this happens each time a model is created
 		}
 
 		if (e.model.uri.toString() === this.label.resource.toString()) {

src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts

@@ -38,8 +38,7 @@ export class NoTabsTitleControl extends TitleControl {
 		// Editor Label
 		this.editorLabel = this.instantiationService.createInstance(EditorLabel, this.titleContainer, void 0);
 		this.toUnbind.push(this.editorLabel);
-		this.toUnbind.push(DOM.addDisposableListener(this.editorLabel.labelElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
-		this.toUnbind.push(DOM.addDisposableListener(this.editorLabel.descriptionElement, DOM.EventType.CLICK, (e: MouseEvent) => this.onTitleLabelClick(e)));
+		this.toUnbind.push(this.editorLabel.onClick(e => this.onTitleLabelClick(e)));
 
 		// Right Actions Container
 		const actionsContainer = document.createElement('div');