Enable codicon decorations (microsoft#166358)

* Enable codicon decorations
Part of microsoft#135591

* Fix test compile error

* Add proposal reference

* Address feedback

Author: alexr00

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

@@ -742,7 +742,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
 				return extHostCustomEditors.registerCustomEditorProvider(extension, viewType, provider, options);
 			},
 			registerFileDecorationProvider(provider: vscode.FileDecorationProvider) {
-				return extHostDecorations.registerFileDecorationProvider(provider, extension.identifier);
+				return extHostDecorations.registerFileDecorationProvider(provider, extension);
 			},
 			registerUriHandler(handler: vscode.UriHandler) {
 				return extHostUrls.registerUriHandler(extension.identifier, handler);
@@ -1252,6 +1252,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
 			ExternalUriOpenerPriority: extHostTypes.ExternalUriOpenerPriority,
 			FileChangeType: extHostTypes.FileChangeType,
 			FileDecoration: extHostTypes.FileDecoration,
+			FileDecoration2: extHostTypes.FileDecoration,
 			FileSystemError: extHostTypes.FileSystemError,
 			FileType: files.FileType,
 			FilePermission: files.FilePermission,

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

@@ -1943,7 +1943,7 @@ export interface DecorationRequest {
 	readonly uri: UriComponents;
 }
 
-export type DecorationData = [boolean, string, string, ThemeColor];
+export type DecorationData = [boolean, string, string | ThemeIcon, ThemeColor];
 export type DecorationReply = { [id: number]: DecorationData };
 
 export interface ExtHostDecorationsShape {

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

@@ -8,17 +8,18 @@ import { URI } from 'vs/base/common/uri';
 import { MainContext, ExtHostDecorationsShape, MainThreadDecorationsShape, DecorationData, DecorationRequest, DecorationReply } from 'vs/workbench/api/common/extHost.protocol';
 import { Disposable, FileDecoration } from 'vs/workbench/api/common/extHostTypes';
 import { CancellationToken } from 'vs/base/common/cancellation';
-import { ExtensionIdentifier } from 'vs/platform/extensions/common/extensions';
+import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { IExtHostRpcService } from 'vs/workbench/api/common/extHostRpcService';
 import { ILogService } from 'vs/platform/log/common/log';
 import { asArray, groupBy } from 'vs/base/common/arrays';
 import { compare, count } from 'vs/base/common/strings';
 import { dirname } from 'vs/base/common/path';
+import { checkProposedApiEnabled } from 'vs/workbench/services/extensions/common/extensions';
 
 interface ProviderData {
 	provider: vscode.FileDecorationProvider;
-	extensionId: ExtensionIdentifier;
+	extensionDescription: IExtensionDescription;
 }
 
 export class ExtHostDecorations implements ExtHostDecorationsShape {
@@ -37,10 +38,10 @@ export class ExtHostDecorations implements ExtHostDecorationsShape {
 		this._proxy = extHostRpc.getProxy(MainContext.MainThreadDecorations);
 	}
 
-	registerFileDecorationProvider(provider: vscode.FileDecorationProvider, extensionId: ExtensionIdentifier): vscode.Disposable {
+	registerFileDecorationProvider(provider: vscode.FileDecorationProvider, extensionDescription: IExtensionDescription): vscode.Disposable {
 		const handle = ExtHostDecorations._handlePool++;
-		this._provider.set(handle, { provider, extensionId });
-		this._proxy.$registerDecorationProvider(handle, extensionId.value);
+		this._provider.set(handle, { provider, extensionDescription });
+		this._proxy.$registerDecorationProvider(handle, extensionDescription.identifier.value);
 
 		const listener = provider.onDidChangeFileDecorations && provider.onDidChangeFileDecorations(e => {
 			if (!e) {
@@ -55,7 +56,7 @@ export class ExtHostDecorations implements ExtHostDecorationsShape {
 
 			// too many resources per event. pick one resource per folder, starting
 			// with parent folders
-			this._logService.warn('[Decorations] CAPPING events from decorations provider', extensionId.value, array.length);
+			this._logService.warn('[Decorations] CAPPING events from decorations provider', extensionDescription.identifier.value, array.length);
 			const mapped = array.map(uri => ({ uri, rank: count(uri.path, '/') }));
 			const groups = groupBy(mapped, (a, b) => a.rank - b.rank || compare(a.uri.path, b.uri.path));
 			const picked: URI[] = [];
@@ -89,7 +90,7 @@ export class ExtHostDecorations implements ExtHostDecorationsShape {
 		}
 
 		const result: DecorationReply = Object.create(null);
-		const { provider, extensionId } = this._provider.get(handle)!;
+		const { provider, extensionDescription: extensionId } = this._provider.get(handle)!;
 
 		await Promise.all(requests.map(async request => {
 			try {
@@ -100,9 +101,12 @@ export class ExtHostDecorations implements ExtHostDecorationsShape {
 				}
 				try {
 					FileDecoration.validate(data);
+					if (data.badge && typeof data.badge !== 'string') {
+						checkProposedApiEnabled(extensionId, 'codiconDecoration');
+					}
 					result[id] = <DecorationData>[data.propagate, data.tooltip, data.badge, data.color];
 				} catch (e) {
-					this._logService.warn(`INVALID decoration from extension '${extensionId.value}': ${e}`);
+					this._logService.warn(`INVALID decoration from extension '${extensionId}': ${e}`);
 				}
 			} catch (err) {
 				this._logService.error(err);

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

@@ -2654,6 +2654,14 @@ export class ThemeIcon {
 		this.id = id;
 		this.color = color;
 	}
+
+	static isThemeIcon(thing: any) {
+		if (typeof thing.id !== 'string') {
+			console.log('INVALID ThemeIcon, invalid id', thing.id);
+			return false;
+		}
+		return true;
+	}
 }
 ThemeIcon.File = new ThemeIcon('file');
 ThemeIcon.Folder = new ThemeIcon('folder');
@@ -3278,27 +3286,31 @@ export enum ExtensionKind {
 export class FileDecoration {
 
 	static validate(d: FileDecoration): boolean {
-		if (d.badge) {
+		if (typeof d.badge === 'string') {
 			let len = nextCharLength(d.badge, 0);
 			if (len < d.badge.length) {
 				len += nextCharLength(d.badge, len);
 			}
 			if (d.badge.length > len) {
 				throw new Error(`The 'badge'-property must be undefined or a short character`);
 			}
+		} else if (d.badge) {
+			if (!ThemeIcon.isThemeIcon(d.badge)) {
+				throw new Error(`The 'badge'-property is not a valid ThemeIcon`);
+			}
 		}
 		if (!d.color && !d.badge && !d.tooltip) {
 			throw new Error(`The decoration is empty`);
 		}
 		return true;
 	}
 
-	badge?: string;
+	badge?: string | vscode.ThemeIcon;
 	tooltip?: string;
 	color?: vscode.ThemeColor;
 	propagate?: boolean;
 
-	constructor(badge?: string, tooltip?: string, color?: ThemeColor) {
+	constructor(badge?: string | ThemeIcon, tooltip?: string, color?: ThemeColor) {
 		this.badge = badge;
 		this.tooltip = tooltip;
 		this.color = color;

src/vs/workbench/api/test/browser/extHostDecorations.test.ts

@@ -52,7 +52,7 @@ suite('ExtHostDecorations', function () {
 				calledA = true;
 				return new Promise(() => { });
 			}
-		}, nullExtensionDescription.identifier);
+		}, nullExtensionDescription);
 
 		// always returns
 		extHostDecorations.registerFileDecorationProvider({
@@ -61,7 +61,7 @@ suite('ExtHostDecorations', function () {
 				calledB = true;
 				return new Promise(resolve => resolve({ badge: 'H', tooltip: 'Hello' }));
 			}
-		}, nullExtensionDescription.identifier);
+		}, nullExtensionDescription);
 
 
 		const requests = [...providers.values()].map((handle, idx) => {

src/vs/workbench/services/decorations/browser/decorationsService.ts

@@ -136,7 +136,7 @@ class DecorationRule {
 		createCSSRule(
 			`.${this.iconBadgeClassName}::after`,
 			`content: '${definition.fontCharacter}';
-			color: ${getColor(color)};
+			color: ${icon.color ? getColor(icon.color.id) : getColor(color)};
 			font-family: ${asCSSPropertyValue(definition.font?.id ?? 'codicon')};
 			font-size: 16px;
 			margin-right: 14px;

src/vs/workbench/services/extensions/common/extensionsApiProposals.ts

@@ -7,6 +7,7 @@
 
 export const allApiProposals = Object.freeze({
 	authSession: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.authSession.d.ts',
+	codiconDecoration: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.codiconDecoration.d.ts',
 	commentsResolvedState: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.commentsResolvedState.d.ts',
 	contribCommentPeekContext: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.contribCommentPeekContext.d.ts',
 	contribEditSessions: 'https://raw.githubusercontent.com/microsoft/vscode/main/src/vscode-dts/vscode.proposed.contribEditSessions.d.ts',

src/vscode-dts/vscode.proposed.codiconDecoration.d.ts

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+declare module 'vscode' {
+
+	// https://github.com/microsoft/vscode/issues/135591 @alexr00
+
+	// export interface FileDecorationProvider {
+	// 	provideFileDecoration(uri: Uri, token: CancellationToken): ProviderResult<FileDecoration | FileDecoration1>;
+	// }
+
+	/**
+	 * A file decoration represents metadata that can be rendered with a file.
+	 */
+	export class FileDecoration2 {
+		/**
+		 * A very short string that represents this decoration.
+		 */
+		badge?: string | ThemeIcon;
+
+		/**
+		 * A human-readable tooltip for this decoration.
+		 */
+		tooltip?: string;
+
+		/**
+		 * The color of this decoration.
+		 */
+		color?: ThemeColor;
+
+		/**
+		 * A flag expressing that this decoration should be
+		 * propagated to its parents.
+		 */
+		propagate?: boolean;
+
+		/**
+		 * Creates a new decoration.
+		 *
+		 * @param badge A letter that represents the decoration.
+		 * @param tooltip The tooltip of the decoration.
+		 * @param color The color of the decoration.
+		 */
+		constructor(badge?: string | ThemeIcon, tooltip?: string, color?: ThemeColor);
+	}
+}