Support ThemeIcon's color property of the VS Code API

[lucas-koehler]

What it does

Fixes #11128

• Add optional color property to ThemeIcon of the VS Code API
• Hand over the ThemeIcon instead of just its id from plugin Ext to Main
• Apply the color in the PluginTree
• Adapt TreeViewNode.is to also recognize sub types such as CompositeTreeViewNode

Contributed on behalf of STMicroelectronics

Signed-off-by: Lucas Koehler lkoehler@eclipsesource.com

How to test

• Download the test extension. Source for reference.

• Launch and open the `TEST VIEW' in the Explorer:
  

• Expand the tree nodes. See that the tree nodes use file icons in the editor's warning color (usually some kind of yellow or orange)

• See that file icons in other views (e.g. the File Explorer) still have their original color

• Switch themes to see that the icons in the Test View use the warning color of the selected theme (select high contrast theme to see a noticeable difference)

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[lucas-koehler]

@vince-fugnitto Thank you very much for the fast review. I added the documentation and explicitly added the id and color properties to ThemeIcon. With this, the class is now defined the same as in the VS Code API.

[vince-fugnitto]

I confirm that the color is working well with the sample extension.

I made a comment about actually properly supporting all options for icons however that we can possibly tackle later if you don't want to update.

[vince-fugnitto]

I just wanted to highlight that this only allows us a subset of icons to be used which is different than the API actually allows. VS Code allows all icons listed here (https://code.visualstudio.com/api/references/icons-in-labels#icon-listing) which is documented in id:

/**
 * The id of the icon. The available icons are listed in https://code.visualstudio.com/api/references/icons-in-labels#icon-listing.
 */
readonly id: string;

With some modifications to the extension provided in VS Code I can see (while in Theia it does not work):

Code;

function getTreeItem(key: string): vscode.TreeItem {
	const treeElement = getTreeElement(key);
	// An example of how to use codicons in a MarkdownString in a tree item tooltip.
	const tooltip = new vscode.MarkdownString(`$(zap) Tooltip for ${key}`, true);
	const iconPath = new vscode.ThemeIcon('accounts-view-bar-icon', new vscode.ThemeColor('editorWarning.foreground'));
	return {
		label: /**vscode.TreeItemLabel**/<any>{ label: key, highlights: key.length > 1 ? [[key.length - 2, key.length - 1]] : void 0 },
		tooltip,
		iconPath,
		collapsibleState: treeElement && Object.keys(treeElement).length ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None
	};
}

[lucas-koehler]

@vince-fugnitto

I made a comment about actually properly supporting all options for icons however that we can possibly tackle later if you don't want to update.

I would prefer to have that as a separate issue because it does not seem trivial to support all these icons. For instance, I investigated a bit with the example you provided. The accounts-view-bar-icon theme icon is contributed in VSCode as part of its ActivitybarPart. It basically maps this identifier to the account codicon. I guess this is not even known to Theia (and possibly many other icons made available in such a way in the VS Code workbench).

[vince-fugnitto]

The changes look good to me, I confirmed that the color is properly applied 👍
I did not notice any regressions.