Refresh master with initial release/0.24 snapshot (#332)

* Initial port of release/0.24 source code

* Fix additional headers

* Fix a typo in launch.json

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

@@ -11,12 +11,18 @@ import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlighte
 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 { IWorkspaceFolderProvider, getPathLabel, IUserHomeProvider } from 'vs/base/common/labels';
+import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 
 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
 }
 
+export interface ILabelBadgeOptions {
+	title: string;
+	className: string;
+}
+
 export interface IIconLabelOptions {
 	title?: string;
 	extraClasses?: string[];
@@ -24,56 +30,101 @@ export interface IIconLabelOptions {
 	matches?: IMatch[];
 }
 
-export class IconLabel {
-	private domNode: HTMLElement;
-	private labelNode: HTMLElement | HighlightedLabel;
-	private descriptionNode: HTMLElement;
+class FastLabelNode {
+	private disposed: boolean;
+	private _textContent: string;
+	private _className: string;
+	private _title: string;
+	private _empty: boolean;
 
-	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
-		this.domNode = dom.append(container, dom.$('.monaco-icon-label'));
-		if (options && options.supportHighlights) {
-			this.labelNode = new HighlightedLabel(dom.append(this.domNode, 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'));
+	constructor(private _element: HTMLElement) {
 	}
 
 	public get element(): HTMLElement {
-		return this.domNode;
+		return this._element;
 	}
 
-	public get labelElement(): HTMLElement {
+	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: FastLabelNode;
+	private labelNode: FastLabelNode | HighlightedLabel;
+	private descriptionNode: FastLabelNode;
+
+	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
+		this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label')));
+
+		const labelDescriptionContainer = new FastLabelNode(dom.append(this.domNode.element, dom.$('.monaco-icon-label-description-container')));
+
+		if (options && options.supportHighlights) {
+			this.labelNode = new HighlightedLabel(dom.append(labelDescriptionContainer.element, dom.$('a.label-name')));
+		} else {
+			this.labelNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('a.label-name')));
+		}
+
+		this.descriptionNode = new FastLabelNode(dom.append(labelDescriptionContainer.element, dom.$('span.label-description')));
+	}
+
+	public get element(): HTMLElement {
+		return this.domNode.element;
+	}
+
+	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))
+		]);
+	}
+
+	private get labelElement(): HTMLElement {
 		const labelNode = this.labelNode;
 		if (labelNode instanceof HighlightedLabel) {
 			return labelNode.element;
-		} else {
-			return labelNode;
 		}
-	}
 
-	public get descriptionElement(): HTMLElement {
-		return this.descriptionNode;
+		return labelNode.element;
 	}
 
 	public setValue(label?: string, description?: string, options?: IIconLabelOptions): void {
-		const labelNode = this.labelNode;
-		if (labelNode instanceof HighlightedLabel) {
-			labelNode.set(label || '', options ? options.matches : void 0);
-		} else {
-			labelNode.textContent = label || '';
-		}
-
-		this.descriptionNode.textContent = description || '';
-
-		if (!description) {
-			dom.addClass(this.descriptionNode, 'empty');
-		} else {
-			dom.removeClass(this.descriptionNode, 'empty');
-		}
-
-		this.domNode.title = options && options.title ? options.title : '';
-
 		const classes = ['monaco-icon-label'];
 		if (options) {
 			if (options.extraClasses) {
@@ -86,27 +137,37 @@ export class IconLabel {
 		}
 
 		this.domNode.className = classes.join(' ');
+		this.domNode.title = options && options.title ? options.title : '';
+
+		const labelNode = this.labelNode;
+		if (labelNode instanceof HighlightedLabel) {
+			labelNode.set(label || '', options ? options.matches : void 0);
+		} else {
+			labelNode.textContent = label || '';
+		}
+
+		this.descriptionNode.textContent = description || '';
+		this.descriptionNode.empty = !description;
 	}
 
 	public dispose(): void {
-		const labelNode = this.labelNode;
-		if (labelNode instanceof HighlightedLabel) {
-			labelNode.dispose();
-		}
+		this.domNode.dispose();
+		this.labelNode.dispose();
+		this.descriptionNode.dispose();
 	}
 }
 
 export class FileLabel extends IconLabel {
 
-	constructor(container: HTMLElement, file: uri, provider: IRootProvider, userHome?: IUserHomeProvider) {
+	constructor(container: HTMLElement, file: uri, provider: IWorkspaceFolderProvider, userHome?: IUserHomeProvider) {
 		super(container);
 
 		this.setFile(file, provider, userHome);
 	}
 
-	public setFile(file: uri, provider: IRootProvider, userHome: IUserHomeProvider): void {
+	public setFile(file: uri, provider: IWorkspaceFolderProvider, userHome: IUserHomeProvider): void {
 		const parent = paths.dirname(file.fsPath);
 
 		this.setValue(paths.basename(file.fsPath), parent && parent !== '.' ? getPathLabel(parent, provider, userHome) : '', { title: file.fsPath });
 	}
-}
+}

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

@@ -6,7 +6,7 @@
 /* ---------- Icon label ---------- */
 
 .monaco-icon-label {
-	display: inline-block; /* required for icons support :before rule */
+	display: flex; /* required for icons support :before rule */
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -25,25 +25,46 @@
 	/* fonts icons */
 	-webkit-font-smoothing: antialiased;
 	vertical-align: top;
+
+	flex-shrink: 0; /* fix for https://github.com/Microsoft/vscode/issues/13787 */
 }
 
-.monaco-icon-label > .label-name {
+.monaco-icon-label > .monaco-icon-label-description-container {
+	overflow: hidden; /* this causes the label/description to shrink first if decorations are enabled */
+	text-overflow: ellipsis;
+}
+
+.monaco-icon-label > .monaco-icon-label-description-container > .label-name {
 	color: inherit;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
 
-.monaco-icon-label > .label-description {
+.monaco-icon-label > .monaco-icon-label-description-container > .label-description {
 	opacity: 0.7;
 	margin-left: 0.5em;
 	font-size: 0.9em;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
 
-.monaco-icon-label > .label-description.empty {
-	margin-left: 0;
+.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-name,
+.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-description {
+	font-style: italic;
 }
 
-.monaco-icon-label.italic > .label-name,
-.monaco-icon-label.italic > .label-description {
-	font-style: italic;
-}
+.monaco-icon-label::after {
+	opacity: 0.75;
+	font-size: 90%;
+	font-weight: 600;
+	padding: 0 12px 0 5px;
+	margin-left: auto;
+	text-align: center;
+}
+
+/* make sure selection color wins when a label is being selected */
+.monaco-tree.focused .selected .monaco-icon-label, /* tree */
+.monaco-tree.focused .selected .monaco-icon-label::after,
+.monaco-list:focus .focused.selected .monaco-icon-label, /* list */
+.monaco-list:focus .focused.selected .monaco-icon-label::after
+{
+	color: inherit !important;
+}