Feature/107183 add ability to right align tree items description

src/vs/workbench/api/common/extHost.api.impl.ts

@@ -1763,6 +1763,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
 			TextDocumentChangeReason: extHostTypes.TextDocumentChangeReason,
 			ThemeColor: extHostTypes.ThemeColor,
 			ThemeIcon: extHostTypes.ThemeIcon,
+			TreeItemAlignment: extHostTypes.TreeItemAlignment,
 			TreeItem: extHostTypes.TreeItem,
 			TreeItemCheckboxState: extHostTypes.TreeItemCheckboxState,
 			TreeItemCollapsibleState: extHostTypes.TreeItemCollapsibleState,

src/vs/workbench/api/common/extHostTreeViews.ts

@@ -843,6 +843,7 @@ class ExtHostTreeView<T> extends Disposable {
 			parentHandle: parent ? parent.item.handle : undefined,
 			label: toTreeItemLabel(extensionTreeItem.label, this._extension),
 			description: extensionTreeItem.description,
+			alignment: extensionTreeItem.alignment,
 			resourceUri: extensionTreeItem.resourceUri,
 			tooltip: this._getTooltip(extensionTreeItem.tooltip),
 			command: this._getCommand(disposableStore, extensionTreeItem.command),

src/vs/workbench/api/common/extHostTypes.ts

@@ -1571,6 +1571,11 @@ export namespace ViewBadge {
 	}
 }
 
+export enum TreeItemAlignment {
+	Left = 'left',
+	Right = 'right'
+}
+
 @es5ClassCompat
 export class TreeItem {
 
@@ -1618,6 +1623,10 @@ export class TreeItem {
 			console.log('INVALID tree item, invalid description', treeItemThing.description);
 			return false;
 		}
+		if ((treeItemThing.alignment !== undefined) && (treeItemThing.alignment !== 'left') && (treeItemThing.alignment !== 'right')) {
+			console.log('INVALID tree item, invalid alignment', treeItemThing.alignment);
+			return false;
+		}
 		if ((treeItemThing.resourceUri !== undefined) && !URI.isUri(treeItemThing.resourceUri)) {
 			console.log('INVALID tree item, invalid resourceUri', treeItemThing.resourceUri);
 			return false;

src/vs/workbench/browser/parts/views/media/views.css

@@ -217,10 +217,29 @@
 	color: currentColor !important;
 }
 
+.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel .monaco-icon-label-container {
+	display: flex;
+}
+
 .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel .monaco-icon-label-container > .monaco-icon-name-container {
 	flex: 1;
 }
 
+.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-name-container {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container {
+	float: right;
+}
+
+.customview-tree .monaco-list .monaco-list-row:hover .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container,
+.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container,
+.customview-tree .monaco-list .monaco-list-row.focused .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container {
+	display: none;
+}
+
 .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel::after {
 	padding-right: 0px;
 	margin-right: 4px;

src/vs/workbench/browser/parts/views/treeView.ts

@@ -1330,6 +1330,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 		const resource = node.resourceUri ? URI.revive(node.resourceUri) : null;
 		const treeItemLabel: ITreeItemLabel | undefined = node.label ? node.label : (resource ? { label: basename(resource) } : undefined);
 		const description = isString(node.description) ? node.description : resource && node.description === true ? this.labelService.getUriLabel(dirname(resource), { relative: true }) : undefined;
+		const alignment = node.alignment === 'right' ? node.alignment : 'left';
 		const label = treeItemLabel ? treeItemLabel.label : undefined;
 		const matches = (treeItemLabel && treeItemLabel.highlights && label) ? treeItemLabel.highlights.map(([start, end]) => {
 			if (start < 0) {
@@ -1363,6 +1364,12 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 
 		this.renderCheckbox(node, templateData);
 
+		const extraClasses = ['custom-view-tree-node-item-resourceLabel'];
+
+		if (alignment === 'right') {
+			extraClasses.push('custom-view-tree-node-item-right');
+		}
+
 		if (resource) {
 			const fileDecorations = this.configurationService.getValue<{ colors: boolean; badges: boolean }>('explorer.decorations');
 			const labelResource = resource ? resource : URI.parse('missing:_icon_resource');
@@ -1371,7 +1378,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 				title,
 				hideIcon: this.shouldHideResourceLabelIcon(iconUrl, node.themeIcon),
 				fileDecorations,
-				extraClasses: ['custom-view-tree-node-item-resourceLabel'],
+				extraClasses,
 				matches: matches ? matches : createMatches(element.filterData),
 				strikethrough: treeItemLabel?.strikethrough,
 				disabledCommand: !commandEnabled,
@@ -1382,7 +1389,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 			templateData.resourceLabel.setResource({ name: label, description }, {
 				title,
 				hideIcon: true,
-				extraClasses: ['custom-view-tree-node-item-resourceLabel'],
+				extraClasses,
 				matches: matches ? matches : createMatches(element.filterData),
 				strikethrough: treeItemLabel?.strikethrough,
 				disabledCommand: !commandEnabled,

src/vs/workbench/common/views.ts

@@ -749,6 +749,8 @@ export interface ITreeItem {
 
 	description?: string | boolean;
 
+	alignment?: 'left' | 'right';
+
 	icon?: UriComponents;
 
 	iconDark?: UriComponents;

src/vscode-dts/vscode.d.ts

@@ -12228,6 +12228,22 @@ declare module 'vscode' {
 		resolveTreeItem?(item: TreeItem, element: T, token: CancellationToken): ProviderResult<TreeItem>;
 	}
 
+	/**
+	 * Represents the alignment of TreeView items.
+	 */
+	export enum TreeItemAlignment {
+
+		/**
+		 * Aligned to the left side.
+		 */
+		Left = 'left',
+
+		/**
+		 * Aligned to the right side.
+		 */
+		Right = 'right'
+	}
+
 	/**
 	 * A tree item is an UI element of the tree. Tree items are created by the {@link TreeDataProvider data provider}.
 	 */
@@ -12257,6 +12273,13 @@ declare module 'vscode' {
 		 */
 		description?: string | boolean;
 
+		/**
+		 * The horizontal alignment of the {@link TreeItem.description description} text.
+		 * When `right`, the text with be right-aligned and when `left`, it is left-aligned.
+		 * Defaults to `Left`
+		 */
+		alignment?: TreeItemAlignment;
+
 		/**
 		 * The {@link Uri} of the resource representing this item.
 		 *