Fix plugin icon URLs in electron & Fix custom icon themes

Signed-off-by: Luca Jaeger <owl.jaeger@gmail.com>

CHANGELOG.md

@@ -2,10 +2,12 @@
 
 ## v1.1.0
 
+- [plugin-ext] fixed custom Icon Themes & plugin Icons [#7583](https://github.com/eclipse-theia/theia/pull/7583)
 - [task] fixed presentation.reveal & focus for detected tasks [#7548](https://github.com/eclipse-theia/theia/pull/7548)
 
 Breaking changes:
 
+- [plugin-ext] `PluginModel.packagePath` deprecated. `PluginModel.packageUri` should be used instead.
 - [core] `CommandRegistry.registerHandler` registers a new handler with a higher priority than previous [#7539](https://github.com/eclipse-theia/theia/pull/7539)
 - [plugin] removed `configStorage` argument from `PluginManager.registerPlugin`.
 Use `PluginManager.configStorage` property instead. [#7265](https://github.com/eclipse-theia/theia/pull/7265#discussion_r399956070)

packages/plugin-ext-vscode/src/node/scanner-vscode.ts

@@ -17,6 +17,7 @@
 import { injectable } from 'inversify';
 import { PluginScanner, PluginEngine, PluginPackage, PluginModel, PluginLifecycle } from '@theia/plugin-ext';
 import { TheiaPluginScanner } from '@theia/plugin-ext/lib/hosted/node/scanners/scanner-theia';
+import { FileUri } from '@theia/core/lib/node/file-uri';
 
 @injectable()
 export class VsCodePluginScanner extends TheiaPluginScanner implements PluginScanner {
@@ -30,6 +31,7 @@ export class VsCodePluginScanner extends TheiaPluginScanner implements PluginSca
     getModel(plugin: PluginPackage): PluginModel {
         const result: PluginModel = {
             packagePath: plugin.packagePath,
+            packageUri: FileUri.create(plugin.packagePath).toString(),
             // see id definition: https://github.com/microsoft/vscode/blob/15916055fe0cb9411a5f36119b3b012458fe0a1d/src/vs/platform/extensions/common/extensions.ts#L167-L169
             id: `${plugin.publisher.toLowerCase()}.${plugin.name.toLowerCase()}`,
             name: plugin.name,

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

@@ -139,6 +139,7 @@ export const emptyPlugin: Plugin = {
             version: 'empty'
         },
         packagePath: 'empty',
+        packageUri: 'empty',
         entryPoint: {
 
         }

packages/plugin-ext/src/common/plugin-protocol.ts

@@ -442,6 +442,11 @@ export interface PluginModel {
         version: string;
     };
     entryPoint: PluginEntryPoint;
+    packageUri: string;
+/**
+ * @deprecated since 1.1.0 - because it lead to problems with getting a relative path
+ * needed by Icon Themes to correcty load Fonts, use packageUri instead.
+ */
     packagePath: string;
     iconUrl?: string;
     readmeUrl?: string;

packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts

@@ -90,6 +90,7 @@ export class TheiaPluginScanner implements PluginScanner {
     getModel(plugin: PluginPackage): PluginModel {
         const result: PluginModel = {
             packagePath: plugin.packagePath,
+            packageUri: FileUri.create(plugin.packagePath).toString(),
             // see id definition: https://github.com/microsoft/vscode/blob/15916055fe0cb9411a5f36119b3b012458fe0a1d/src/vs/platform/extensions/common/extensions.ts#L167-L169
             id: `${plugin.publisher.toLowerCase()}.${plugin.name.toLowerCase()}`,
             name: plugin.name,

packages/plugin-ext/src/main/browser/plugin-icon-theme-service.ts

@@ -34,6 +34,7 @@ import { LabelProviderContribution, DidChangeLabelEvent, LabelProvider, URIIconR
 import { ThemeType } from '@theia/core/lib/browser/theming';
 import { FileStatNode, DirNode, FileSystemWatcher, FileChangeEvent } from '@theia/filesystem/lib/browser';
 import { WorkspaceRootNode } from '@theia/navigator/lib/browser/navigator-tree';
+import { Endpoint } from '@theia/core/lib/browser/endpoint';
 
 export interface PluginIconDefinition {
     iconPath: string;
@@ -87,7 +88,7 @@ export class PluginIconThemeDefinition implements IconThemeDefinition, IconTheme
     uri: string;
     uiTheme?: UiTheme;
     pluginId: string;
-    packagePath: string;
+    packageUri: string;
     hasFileIcons?: boolean;
     hasFolderIcons?: boolean;
     hidesExplorerArrows?: boolean;
@@ -118,7 +119,7 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
         this.toDeactivate, this.toDisposeStyleElement, this.toUnload, this.onDidChangeEmitter
     );
 
-    protected packageUri: URI;
+    protected packageRootUri: URI;
     protected locationUri: URI;
 
     protected styleSheetContent: string | undefined;
@@ -127,7 +128,7 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
     @postConstruct()
     protected init(): void {
         Object.assign(this, this.definition);
-        this.packageUri = new URI(this.packagePath);
+        this.packageRootUri = new URI(this.packageUri);
         this.locationUri = new URI(this.uri).parent;
     }
 
@@ -329,8 +330,10 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
             return undefined;
         }
         const iconUri = this.locationUri.resolve(iconPath);
-        const relativePath = this.packageUri.path.relative(iconUri.path.normalize());
-        return relativePath && `url('hostedPlugin/${this.pluginId}/${encodeURIComponent(relativePath.normalize().toString())}')`;
+        const relativePath = this.packageRootUri.path.relative(iconUri.path.normalize());
+        return relativePath && `url('${new Endpoint({
+            path: `hostedPlugin/${this.pluginId}/${encodeURIComponent(relativePath.normalize().toString())}`
+        }).getRestUrl().toString()}')`;
     }
 
     protected escapeCSS(value: string): string {
@@ -539,15 +542,15 @@ export class PluginIconThemeService implements LabelProviderContribution {
 
     register(contribution: IconThemeContribution, plugin: DeployedPlugin): Disposable {
         const pluginId = getPluginId(plugin.metadata.model);
-        const packagePath = plugin.metadata.model.packagePath;
+        const packageUri = plugin.metadata.model.packageUri;
         const iconTheme = this.iconThemeFactory({
             id: contribution.id,
             label: contribution.label || new URI(contribution.uri).path.base,
             description: contribution.description,
             uri: contribution.uri,
             uiTheme: contribution.uiTheme,
             pluginId,
-            packagePath
+            packageUri
         });
         return new DisposableCollection(
             iconTheme,

packages/plugin-ext/src/main/browser/plugin-shared-style.ts

@@ -19,6 +19,7 @@ import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposa
 import { ThemeService, Theme } from '@theia/core/lib/browser/theming';
 import { IconUrl } from '../../common/plugin-protocol';
 import { Reference, SyncReferenceCollection } from '@theia/core/lib/common/reference';
+import { Endpoint } from '@theia/core/lib/browser/endpoint';
 
 export interface PluginIconKey {
     url: IconUrl
@@ -101,8 +102,8 @@ export class PluginSharedStyle {
     protected createPluginIcon(key: PluginIconKey): PluginIcon {
         const iconUrl = key.url;
         const size = key.size;
-        const darkIconUrl = typeof iconUrl === 'object' ? iconUrl.dark : iconUrl;
-        const lightIconUrl = typeof iconUrl === 'object' ? iconUrl.light : iconUrl;
+        const darkIconUrl = new Endpoint({ path: `${typeof iconUrl === 'object' ? iconUrl.dark : iconUrl}` }).getRestUrl().toString();
+        const lightIconUrl = new Endpoint({ path: `${typeof iconUrl === 'object' ? iconUrl.light : iconUrl}` }).getRestUrl().toString();
         const iconClass = 'plugin-icon-' + this.iconSequence++;
         const toDispose = new DisposableCollection();
         toDispose.push(this.insertRule('.' + iconClass, theme => `

packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts

@@ -18,7 +18,7 @@ import { injectable, inject, postConstruct } from 'inversify';
 import {
     ApplicationShell, ViewContainer as ViewContainerWidget, WidgetManager,
     ViewContainerIdentifier, ViewContainerTitleOptions, Widget, FrontendApplicationContribution,
-    StatefulWidget, CommonMenus, BaseWidget
+    StatefulWidget, CommonMenus, BaseWidget, Endpoint
 } from '@theia/core/lib/browser';
 import { ViewContainer, View } from '../../../common';
 import { PluginSharedStyle } from '../plugin-shared-style';
@@ -189,9 +189,10 @@ export class PluginViewRegistry implements FrontendApplicationContribution {
         }
         const toDispose = new DisposableCollection();
         const iconClass = 'plugin-view-container-icon-' + viewContainer.id;
+        const iconUrl = new Endpoint({ path: viewContainer.iconUrl }).getRestUrl().toString();
         toDispose.push(this.style.insertRule('.' + iconClass, () => `
-                mask: url('${viewContainer.iconUrl}') no-repeat 50% 50%;
-                -webkit-mask: url('${viewContainer.iconUrl}') no-repeat 50% 50%;
+                mask: url('${iconUrl}') no-repeat 50% 50%;
+                -webkit-mask: url('${iconUrl}') no-repeat 50% 50%;
             `));
         toDispose.push(this.doRegisterViewContainer(viewContainer.id, location, {
             label: viewContainer.title,