Fix plugin icon URLs in electron & Fix custom icon themes

Signed-off-by: Luca Jaeger <owl.jaeger@gmail.com>
eclipse-theia · Apr 17, 2020 · 4f382c1 · 4f382c1
1 parent 2c244ad
commit 4f382c1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 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:

diff --git a/packages/plugin-ext/src/main/browser/plugin-icon-theme-service.ts b/packages/plugin-ext/src/main/browser/plugin-icon-theme-service.ts
@@ -34,6 +34,8 @@ 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';
+import { isWindows } from '@theia/core/lib/common/os';
 
 export interface PluginIconDefinition {
     iconPath: string;
@@ -88,6 +90,7 @@ export class PluginIconThemeDefinition implements IconThemeDefinition, IconTheme
     uiTheme?: UiTheme;
     pluginId: string;
     packagePath: string;
+    packageUri: URI;
     hasFileIcons?: boolean;
     hasFolderIcons?: boolean;
     hidesExplorerArrows?: boolean;
@@ -118,7 +121,7 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
         this.toDeactivate, this.toDisposeStyleElement, this.toUnload, this.onDidChangeEmitter
     );
 
-    protected packageUri: URI;
+    protected packageUriFromPath: URI;
     protected locationUri: URI;
 
     protected styleSheetContent: string | undefined;
@@ -127,7 +130,7 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
     @postConstruct()
     protected init(): void {
         Object.assign(this, this.definition);
-        this.packageUri = new URI(this.packagePath);
+        this.packageUriFromPath = new URI(this.packagePath);
         this.locationUri = new URI(this.uri).parent;
     }
 
@@ -329,8 +332,11 @@ 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.packageUriFromPath.path.relative(iconUri.path.normalize()) ||
+            this.packageUri.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 {
@@ -540,14 +546,26 @@ 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 = (() => {
+            if (isWindows) {
+                if (packagePath.charAt(0) !== '/' && packagePath.charAt(1) === ':') {
+                    return new URI(`/${packagePath.replace(/\\/g, '/')}`);
+                } else {
+                    return new URI(packagePath.replace(/\\/g, '/'));
+                }
+            } else {
+                return new URI(packagePath);
+            }
+        })();
         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
+            packagePath,
+            packageUri
         });
         return new DisposableCollection(
             iconTheme,

diff --git a/packages/plugin-ext/src/main/browser/plugin-shared-style.ts b/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 => `

diff --git a/packages/plugin-ext/src/main/browser/view/plugin-view-registry.ts b/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,