Add full support: SourceControlResourceThemableDecorations.iconPath

packages/git/src/browser/git-scm-provider.ts

@@ -214,7 +214,8 @@ export class GitScmProvider implements ScmProvider {
             decorations: {
                 letter: GitFileStatus.toAbbreviation(change.status, change.staged),
                 color: GitFileStatus.getColor(change.status, change.staged),
-                tooltip: GitFileStatus.toString(change.status)
+                tooltip: GitFileStatus.toString(change.status),
+                strikeThrough: GitFileStatus.toStrikethrough(change.status)
             },
             open: async () => this.open(change, { mode: 'reveal' })
         });

packages/git/src/common/git-model.ts

@@ -150,6 +150,10 @@ export namespace GitFileStatus {
         }
     }
 
+    export function toStrikethrough(status: GitFileStatus): boolean {
+        return status === GitFileStatus.Deleted;
+    }
+
 }
 
 /**

packages/plugin-ext/src/common/plugin-api-rpc.ts

@@ -936,7 +936,7 @@ export interface SourceControlGroupFeatures {
 export interface ScmRawResource {
     handle: number,
     sourceUri: UriComponents,
-    icons: UriComponents[],
+    icons: [UriComponents | ThemeIcon | undefined, UriComponents | ThemeIcon | undefined],
     tooltip: string,
     strikeThrough: boolean,
     faded: boolean,

packages/plugin-ext/src/main/browser/scm-main.ts

@@ -40,6 +40,7 @@ import { URI as vscodeURI } from '@theia/core/shared/vscode-uri';
 import { Splice } from '../../common/arrays';
 import { UriComponents } from '../../common/uri-components';
 import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 export class PluginScmResourceGroup implements ScmResourceGroup {
 
@@ -222,13 +223,14 @@ export class PluginScmProvider implements ScmProvider {
                 const { start, deleteCount, rawResources } = groupSlice;
                 const resources = rawResources.map(rawResource => {
                     const { handle, sourceUri, icons, tooltip, strikeThrough, faded, contextValue, command } = rawResource;
-                    const icon = icons[0];
-                    const iconDark = icons[1] || icon;
+                    const [light, dark] = icons;
+                    const icon = ThemeIcon.isThemeIcon(light) ? light : vscodeURI.revive(light);
+                    const iconDark = (ThemeIcon.isThemeIcon(dark) ? dark : vscodeURI.revive(dark)) || icon;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const colorVariable = (rawResource as any).colorId && this.colors.toCssVariableName((rawResource as any).colorId);
                     const decorations = {
-                        icon: icon ? vscodeURI.revive(icon) : undefined,
-                        iconDark: iconDark ? vscodeURI.revive(iconDark) : undefined,
+                        icon: icon,
+                        iconDark: iconDark,
                         tooltip,
                         strikeThrough,
                         // TODO remove the letter and colorId fields when the FileDecorationProvider is applied, see https://github.com/eclipse-theia/theia/pull/8911

packages/plugin-ext/src/plugin/scm.ts

@@ -38,17 +38,22 @@ import { RPCProtocol } from '../common/rpc-protocol';
 import { URI } from './types-impl';
 import { ScmCommandArg } from '../common/plugin-api-rpc';
 import { sep } from '@theia/core/lib/common/paths';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 type ProviderHandle = number;
 type GroupHandle = number;
 type ResourceStateHandle = number;
 
-function getIconResource(decorations?: theia.SourceControlResourceThemableDecorations): theia.Uri | undefined {
+function getIconResource(decorations?: theia.SourceControlResourceThemableDecorations): UriComponents | ThemeIcon | undefined {
     if (!decorations) {
         return undefined;
     } else if (typeof decorations.iconPath === 'string') {
         return URI.file(decorations.iconPath);
-    } else {
+    } else if (URI.isUri(decorations.iconPath)) {
+        return decorations.iconPath;
+    } else if (ThemeIcon.isThemeIcon(decorations.iconPath)) {
         return decorations.iconPath;
+    } else {
+        return undefined;
     }
 }
 
@@ -111,8 +116,8 @@ function compareResourceThemableDecorations(a: theia.SourceControlResourceThemab
         return 1;
     }
 
-    const aPath = typeof a.iconPath === 'string' ? a.iconPath : a.iconPath.fsPath;
-    const bPath = typeof b.iconPath === 'string' ? b.iconPath : b.iconPath.fsPath;
+    const aPath = typeof a.iconPath === 'string' ? a.iconPath : URI.isUri(a.iconPath) ? a.iconPath.fsPath : (a.iconPath as ThemeIcon).id;
+    const bPath = typeof b.iconPath === 'string' ? b.iconPath : URI.isUri(b.iconPath) ? b.iconPath.fsPath : (b.iconPath as ThemeIcon).id;
     return comparePaths(aPath, bPath);
 }
 
@@ -435,7 +440,7 @@ class SsmResourceGroupImpl implements theia.SourceControlResourceGroup {
                 const iconUri = getIconResource(r.decorations);
                 const lightIconUri = r.decorations && getIconResource(r.decorations.light) || iconUri;
                 const darkIconUri = r.decorations && getIconResource(r.decorations.dark) || iconUri;
-                const icons: UriComponents[] = [];
+                const icons: ScmRawResource['icons'] = [lightIconUri, darkIconUri];
                 let command: Command | undefined;
 
                 if (r.command) {
@@ -467,7 +472,6 @@ class SsmResourceGroupImpl implements theia.SourceControlResourceGroup {
                     handle, sourceUri, letter: (r as any).letter, colorId: (r as any).color.id, icons,
                     tooltip, strikeThrough, faded, contextValue, command
                 } as ScmRawResource;
-
                 return { rawResource, handle };
             });
 

packages/plugin/src/theia.d.ts

@@ -10718,7 +10718,7 @@ export module '@theia/plugin' {
          * The icon path for a specific
          * {@link SourceControlResourceState source control resource state}.
          */
-        readonly iconPath?: string | Uri;
+        readonly iconPath?: string | Uri | ThemeIcon;
     }
 
     /**

packages/scm/src/browser/scm-provider.ts

@@ -18,6 +18,8 @@
 
 import { Disposable, Event } from '@theia/core/lib/common';
 import URI from '@theia/core/lib/common/uri';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 export interface ScmProvider extends Disposable {
     readonly id: string;
@@ -58,10 +60,13 @@ export interface ScmResource {
 }
 
 export interface ScmResourceDecorations {
+    icon?: URI | ThemeIcon;
+    iconDark?: URI | ThemeIcon;
     tooltip?: string;
     source?: string;
     letter?: string;
     color?: string;
+    strikeThrough?: boolean;
 }
 
 export interface ScmCommand {

packages/scm/src/browser/scm-tree-widget.tsx

@@ -536,6 +536,7 @@ export class ScmResourceComponent extends ScmElement<ScmResourceComponent.Props>
         const color = decoration && decoration.colorId ? `var(${colors.toCssVariableName(decoration.colorId)})` : '';
         const letter = decoration && decoration.letter || '';
         const tooltip = decoration && decoration.tooltip || '';
+        const textDecoration = treeNode.decorations?.strikeThrough === true ? 'line-through' : 'normal';
         const relativePath = parentPath.relative(resourceUri.parent);
         const path = relativePath ? relativePath.fsPath() : labelProvider.getLongName(resourceUri.parent);
         const title = tooltip.length !== 0
@@ -554,8 +555,8 @@ export class ScmResourceComponent extends ScmElement<ScmResourceComponent.Props>
             <span className={icon + ' file-icon'} />
             {this.props.renderExpansionToggle()}
             <div className={`noWrapInfo ${TREE_NODE_SEGMENT_GROW_CLASS}`} >
-                <span className='name'>{caption}</span>
-                <span className='path'>{path}</span>
+                <span className='name' style={{ textDecoration }}>{caption}</span>
+                <span className='path' style={{ textDecoration }}>{path}</span>
             </div>
             <ScmInlineActions {...{
                 hover,