[vscode] fix #7634: support theme icons

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>
eclipse-theia · Jul 30, 2020 · d7b98f0 · d7b98f0
1 parent db34c98
commit d7b98f0
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 13 deletions.
diff --git a/packages/monaco/src/browser/monaco-loader.ts b/packages/monaco/src/browser/monaco-loader.ts
@@ -59,6 +59,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                 'vs/base/parts/quickopen/browser/quickOpenWidget',
                 'vs/base/parts/quickopen/browser/quickOpenModel',
                 'vs/base/common/filters',
+                'vs/platform/theme/common/themeService',
                 'vs/platform/theme/common/styler',
                 'vs/platform/theme/common/colorRegistry',
                 'vs/base/common/color',
@@ -81,7 +82,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                 keybindingsRegistry: any, keybindingResolver: any, resolvedKeybinding: any, keybindingLabels: any,
                 keyCodes: any, mime: any, editorExtensions: any, simpleServices: any,
                 standaloneServices: any, standaloneLanguages: any, quickOpenWidget: any, quickOpenModel: any,
-                filters: any, styler: any, colorRegistry: any, color: any,
+                filters: any, themeService: any, styler: any, colorRegistry: any, color: any,
                 platform: any, modes: any, suggest: any, snippetParser: any,
                 configuration: any, configurationModels: any,
                 resolverService: any,
@@ -99,7 +100,7 @@ export function loadMonaco(vsRequire: any): Promise<void> {
                     resolverService, codeEditorService, codeEditorServiceImpl, markerService, openerService);
                 global.monaco.quickOpen = Object.assign({}, quickOpenWidget, quickOpenModel);
                 global.monaco.filters = filters;
-                global.monaco.theme = styler;
+                global.monaco.theme = Object.assign({}, themeService, styler);
                 global.monaco.color = Object.assign({}, colorRegistry, color);
                 global.monaco.platform = platform;
                 global.monaco.editorExtensions = editorExtensions;

diff --git a/packages/monaco/src/typings/monaco/index.d.ts b/packages/monaco/src/typings/monaco/index.d.ts
@@ -748,6 +748,10 @@ declare module monaco.theme {
     export interface ThemeIcon {
         readonly id: string;
     }
+    export namespace ThemeIcon {
+        export function fromString(value: string): ThemeIcon | undefined;
+        export function asClassName(icon: ThemeIcon): string | undefined;
+    }
 }
 
 declare module monaco.color {

diff --git a/packages/plugin-ext/src/common/plugin-api-rpc.ts b/packages/plugin-ext/src/common/plugin-api-rpc.ts
@@ -591,7 +591,7 @@ export interface TreeViewItem {
     icon?: string;
     iconUrl?: IconUrl;
 
-    themeIconId?: 'folder' | 'file';
+    themeIconId?: string;
 
     resourceUri?: UriComponents;
 

diff --git a/packages/plugin-ext/src/common/plugin-protocol.ts b/packages/plugin-ext/src/common/plugin-protocol.ts
@@ -616,6 +616,7 @@ export interface PluginCommand {
     title: string;
     category?: string;
     iconUrl?: IconUrl;
+    themeIcon?: string;
 }
 
 export type IconUrl = string | { light: string; dark: string; };

diff --git a/packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts b/packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts
@@ -299,18 +299,23 @@ export class TheiaPluginScanner implements PluginScanner {
     }
 
     protected readCommand({ command, title, category, icon }: PluginPackageCommand, pck: PluginPackage): PluginCommand {
+        let themeIcon: string | undefined;
         let iconUrl: IconUrl | undefined;
         if (icon) {
             if (typeof icon === 'string') {
-                iconUrl = this.toPluginUrl(pck, icon);
+                if (icon.startsWith('$(')) {
+                    themeIcon = icon;
+                } else {
+                    iconUrl = this.toPluginUrl(pck, icon);
+                }
             } else {
                 iconUrl = {
                     light: this.toPluginUrl(pck, icon.light),
                     dark: this.toPluginUrl(pck, icon.dark)
                 };
             }
         }
-        return { command, title, category, iconUrl };
+        return { command, title, category, iconUrl, themeIcon };
     }
 
     protected toPluginUrl(pck: PluginPackage, relativePath: string): string {

diff --git a/packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts b/packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts
@@ -313,12 +313,15 @@ export class PluginContributionHandler {
             return Disposable.NULL;
         }
         const toDispose = new DisposableCollection();
-        for (const { iconUrl, command, category, title } of contribution.commands) {
+        for (const { iconUrl, themeIcon, command, category, title } of contribution.commands) {
             const reference = iconUrl && this.style.toIconClass(iconUrl);
+            const icon = themeIcon && monaco.theme.ThemeIcon.fromString(themeIcon);
             let iconClass;
             if (reference) {
                 toDispose.push(reference);
                 iconClass = reference.object.iconClass;
+            } else if (icon) {
+                iconClass = monaco.theme.ThemeIcon.asClassName(icon);
             }
             toDispose.push(this.registerCommand({ id: command, category, label: title, iconClass }));
         }

diff --git a/packages/plugin-ext/src/main/browser/quick-open-main.ts b/packages/plugin-ext/src/main/browser/quick-open-main.ts
@@ -171,7 +171,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
     protected convertQuickInputButton(quickInputButton: QuickInputButton, index: number, toDispose: DisposableCollection): QuickInputTitleButtonHandle {
         const currentIconPath = quickInputButton.iconPath;
         let newIcon = '';
-        let newIconClass = '';
+        let newIconClass: string | undefined;
         if ('id' in currentIconPath || currentIconPath instanceof ThemeIcon) {
             newIconClass = this.resolveIconClassFromThemeIcon(currentIconPath);
         } else if (currentIconPath instanceof URI) {
@@ -197,8 +197,8 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
         };
     }
 
-    private resolveIconClassFromThemeIcon(themeIconID: ThemeIcon): string {
-        switch (themeIconID.id) {
+    private resolveIconClassFromThemeIcon(themeIcon: ThemeIcon): string | undefined {
+        switch (themeIcon.id) {
             case 'folder': {
                 return this.labelProvider.folderIcon;
             }
@@ -209,7 +209,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
                 return 'fa fa-arrow-left';
             }
             default: {
-                return '';
+                return monaco.theme.ThemeIcon.asClassName(themeIcon);
             }
         }
     }

diff --git a/packages/plugin-ext/src/main/browser/view/plugin-tree-view-node-label-provider.ts b/packages/plugin-ext/src/main/browser/view/plugin-tree-view-node-label-provider.ts
@@ -43,8 +43,11 @@ export class PluginTreeViewNodeLabelProvider implements LabelProviderContributio
             return node.icon;
         }
         if (node.themeIconId) {
-            const uri = node.resourceUri && new URI(node.resourceUri) || undefined;
-            return this.labelProvider.getIcon(URIIconReference.create(node.themeIconId, uri));
+            if (node.themeIconId === 'file' || node.themeIconId === 'folder') {
+                const uri = node.resourceUri && new URI(node.resourceUri) || undefined;
+                return this.labelProvider.getIcon(URIIconReference.create(node.themeIconId, uri));
+            }
+            return monaco.theme.ThemeIcon.asClassName({ id: node.themeIconId });
         }
         if (node.resourceUri) {
             return this.labelProvider.getIcon(new URI(node.resourceUri));

diff --git a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
@@ -56,7 +56,7 @@ export interface TreeViewNode extends SelectableTreeNode {
     contextValue?: string;
     command?: Command;
     resourceUri?: string;
-    themeIconId?: 'folder' | 'file';
+    themeIconId?: string | 'folder' | 'file';
     tooltip?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     description?: string | boolean | any;