Merge from vscode a5cf1da01d5db3d2557132be8d30f89c38019f6c (#8525)

* Merge from vscode a5cf1da01d5db3d2557132be8d30f89c38019f6c * remove files we don't want * fix hygiene * update distro * update distro * fix hygiene * fix strict nulls * distro * distro * fix tests * fix tests * add another edit * fix viewlet icon * fix azure dialog * fix some padding * fix more padding issues
2026-02-15 18:46:36 -05:00 · 2019-12-04 19:28:22 -08:00
parent a8818ab0df
commit f5ce7fb2a5
1507 changed files with 42813 additions and 27370 deletions
--- a/src/vs/base/browser/ui/iconLabel/iconLabel.ts
+++ b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -8,6 +8,7 @@ import * as dom from 'vs/base/browser/dom';
 import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
 import { IMatch } from 'vs/base/common/filters';
 import { Disposable } from 'vs/base/common/lifecycle';
+import { Range } from 'vs/base/common/range';

 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
@@ -24,6 +25,8 @@ export interface IIconLabelValueOptions {
 	matches?: IMatch[];
 	labelEscapeNewLines?: boolean;
 	descriptionMatches?: IMatch[];
+	readonly separator?: string;
+	readonly domId?: string;
 }

 class FastLabelNode {
@@ -86,9 +89,10 @@ class FastLabelNode {
 }

 export class IconLabel extends Disposable {
+
 	private domNode: FastLabelNode;
-	private labelDescriptionContainer: FastLabelNode;
-	private labelNode: FastLabelNode | HighlightedLabel;
+	private descriptionContainer: FastLabelNode;
+	private nameNode: Label | LabelWithHighlights;
 	private descriptionNode: FastLabelNode | HighlightedLabel | undefined;
 	private descriptionNodeFactory: () => FastLabelNode | HighlightedLabel;

@@ -97,18 +101,21 @@ export class IconLabel extends Disposable {

 		this.domNode = this._register(new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label'))));

-		this.labelDescriptionContainer = this._register(new FastLabelNode(dom.append(this.domNode.element, dom.$('.monaco-icon-label-description-container'))));
+		const labelContainer = dom.append(this.domNode.element, dom.$('.monaco-icon-label-container'));
+
+		const nameContainer = dom.append(labelContainer, dom.$('span.monaco-icon-name-container'));
+		this.descriptionContainer = this._register(new FastLabelNode(dom.append(labelContainer, dom.$('span.monaco-icon-description-container'))));

 		if (options?.supportHighlights) {
-			this.labelNode = new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name')), !!options.supportCodicons);
+			this.nameNode = new LabelWithHighlights(nameContainer, !!options.supportCodicons);
 		} else {
-			this.labelNode = this._register(new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('a.label-name'))));
+			this.nameNode = new Label(nameContainer);
 		}

 		if (options?.supportDescriptionHighlights) {
-			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description')), !!options.supportCodicons);
+			this.descriptionNodeFactory = () => new HighlightedLabel(dom.append(this.descriptionContainer.element, dom.$('span.label-description')), !!options.supportCodicons);
 		} else {
-			this.descriptionNodeFactory = () => this._register(new FastLabelNode(dom.append(this.labelDescriptionContainer.element, dom.$('span.label-description'))));
+			this.descriptionNodeFactory = () => this._register(new FastLabelNode(dom.append(this.descriptionContainer.element, dom.$('span.label-description'))));
 		}
 	}

@@ -116,7 +123,7 @@ export class IconLabel extends Disposable {
 		return this.domNode.element;
 	}

-	setLabel(label?: string, description?: string, options?: IIconLabelValueOptions): void {
+	setLabel(label: string | string[], description?: string, options?: IIconLabelValueOptions): void {
 		const classes = ['monaco-icon-label'];
 		if (options) {
 			if (options.extraClasses) {
@@ -131,11 +138,7 @@ export class IconLabel extends Disposable {
 		this.domNode.className = classes.join(' ');
 		this.domNode.title = options?.title || '';

-		if (this.labelNode instanceof HighlightedLabel) {
-			this.labelNode.set(label || '', options?.matches, options?.title, options?.labelEscapeNewLines);
-		} else {
-			this.labelNode.textContent = label || '';
-		}
+		this.nameNode.setLabel(label, options);

 		if (description || this.descriptionNode) {
 			if (!this.descriptionNode) {
@@ -157,3 +160,112 @@ export class IconLabel extends Disposable {
 		}
 	}
 }
+
+class Label {
+
+	private label: string | string[] | undefined = undefined;
+	private singleLabel: HTMLElement | undefined = undefined;
+
+	constructor(private container: HTMLElement) { }
+
+	setLabel(label: string | string[], options?: IIconLabelValueOptions): void {
+		if (this.label === label) {
+			return;
+		}
+
+		this.label = label;
+
+		if (typeof label === 'string') {
+			if (!this.singleLabel) {
+				this.container.innerHTML = '';
+				dom.removeClass(this.container, 'multiple');
+				this.singleLabel = dom.append(this.container, dom.$('a.label-name', { id: options?.domId }));
+			}
+
+			this.singleLabel.textContent = label;
+		} else {
+			this.container.innerHTML = '';
+			dom.addClass(this.container, 'multiple');
+			this.singleLabel = undefined;
+
+			for (let i = 0; i < label.length; i++) {
+				const l = label[i];
+				const id = options?.domId && `${options?.domId}_${i}`;
+
+				dom.append(this.container, dom.$('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i }, l));
+
+				if (i < label.length - 1) {
+					dom.append(this.container, dom.$('span.label-separator', undefined, options?.separator || '/'));
+				}
+			}
+		}
+	}
+}
+
+function splitMatches(labels: string[], separator: string, matches: IMatch[] | undefined): IMatch[][] | undefined {
+	if (!matches) {
+		return undefined;
+	}
+
+	let labelStart = 0;
+
+	return labels.map(label => {
+		const labelRange = { start: labelStart, end: labelStart + label.length };
+
+		const result = matches
+			.map(match => Range.intersect(labelRange, match))
+			.filter(range => !Range.isEmpty(range))
+			.map(({ start, end }) => ({ start: start - labelStart, end: end - labelStart }));
+
+		labelStart = labelRange.end + separator.length;
+		return result;
+	});
+}
+
+class LabelWithHighlights {
+
+	private label: string | string[] | undefined = undefined;
+	private singleLabel: HighlightedLabel | undefined = undefined;
+
+	constructor(private container: HTMLElement, private supportCodicons: boolean) { }
+
+	setLabel(label: string | string[], options?: IIconLabelValueOptions): void {
+		if (this.label === label) {
+			return;
+		}
+
+		this.label = label;
+
+		if (typeof label === 'string') {
+			if (!this.singleLabel) {
+				this.container.innerHTML = '';
+				dom.removeClass(this.container, 'multiple');
+				this.singleLabel = new HighlightedLabel(dom.append(this.container, dom.$('a.label-name', { id: options?.domId })), this.supportCodicons);
+			}
+
+			this.singleLabel.set(label, options?.matches, options?.title, options?.labelEscapeNewLines);
+		} else {
+
+			this.container.innerHTML = '';
+			dom.addClass(this.container, 'multiple');
+			this.singleLabel = undefined;
+
+			const separator = options?.separator || '/';
+			const matches = splitMatches(label, separator, options?.matches);
+
+			for (let i = 0; i < label.length; i++) {
+				const l = label[i];
+				const m = matches ? matches[i] : undefined;
+				const id = options?.domId && `${options?.domId}_${i}`;
+
+				const name = dom.$('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i });
+				const highlightedLabel = new HighlightedLabel(dom.append(this.container, name), this.supportCodicons);
+				highlightedLabel.set(l, m, options?.title, options?.labelEscapeNewLines);
+
+				if (i < label.length - 1) {
+					dom.append(name, dom.$('span.label-separator', undefined, separator));
+				}
+			}
+		}
+	}
+}
--- a/src/vs/base/browser/ui/iconLabel/iconlabel.css
+++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css
@@ -25,30 +25,38 @@

 	/* fonts icons */
 	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 	vertical-align: top;

 	flex-shrink: 0; /* fix for https://github.com/Microsoft/vscode/issues/13787 */
 }

-.monaco-icon-label > .monaco-icon-label-description-container {
-	overflow: hidden; /* this causes the label/description to shrink first if decorations are enabled */
+.monaco-icon-label > .monaco-icon-label-container {
+	min-width: 0;
+	overflow: hidden;
 	text-overflow: ellipsis;
+	flex: 1;
 }

-.monaco-icon-label > .monaco-icon-label-description-container > .label-name {
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
 	color: inherit;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }

-.monaco-icon-label > .monaco-icon-label-description-container > .label-description {
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
+	margin: 0 2px;
+	opacity: 0.5;
+}
+
+.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	opacity: .7;
 	margin-left: 0.5em;
 	font-size: 0.9em;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }

-.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-name,
-.monaco-icon-label.italic > .monaco-icon-label-description-container > .label-description {
+.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.italic > .monaco-icon-description-container > .label-description {
 	font-style: italic;
 }

@@ -57,7 +65,6 @@
 	font-size: 90%;
 	font-weight: 600;
 	padding: 0 16px 0 5px;
-	margin-left: auto;
 	text-align: center;
 }