Fix plugin icon URLs in electron & Fix custom icon themesSigned-off-b…

…y: Luca Jaeger <owl.jaeger@gmail.com>
eclipse-theia · Apr 16, 2020 · fafcb51 · fafcb51
1 parent f691918
commit fafcb51
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 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/core/src/common/path.ts b/packages/core/src/common/path.ts
@@ -53,7 +53,7 @@ export class Path {
         } else if (path.length >= 2 && path.charCodeAt(1) === 58 /* ':' */) {
             const code = path.charCodeAt(0);
             if (code >= 65 /* A */ && code <= 90 /* Z */) {
-                path = `${String.fromCharCode(code + 32)}:${path.substr(2)}`; // "/c:".length === 3
+                path = `/${String.fromCharCode(code + 32)}:${path.substr(2)}`; // "/c:".length === 3
             }
         }
         return path;

diff --git a/packages/core/src/common/uri.ts b/packages/core/src/common/uri.ts
@@ -15,6 +15,7 @@
  ********************************************************************************/
 
 import { URI as Uri } from 'vscode-uri';
+import { isWindows } from './os';
 import { Path } from './path';
 
 export default class URI {
@@ -26,7 +27,11 @@ export default class URI {
         if (uri instanceof Uri) {
             this.codeUri = uri;
         } else {
-            this.codeUri = Uri.parse(uri);
+            if (isWindows) {
+                this.codeUri = Uri.parse(new Path(uri.replace(/\\/g, '/')).toString());
+            } else {
+                this.codeUri = Uri.parse(new Path(uri).toString());
+            }
         }
     }
 
@@ -212,5 +217,4 @@ export default class URI {
         });
         return result;
     }
-
 }
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,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;
@@ -330,7 +331,9 @@ export class PluginIconTheme extends PluginIconThemeDefinition implements IconTh
         }
         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())}')`;
+        return relativePath && `url('${new Endpoint({
+            path: `hostedPlugin/${this.pluginId}/${encodeURIComponent(relativePath.normalize().toString())}`
+        }).getRestUrl().toString()}')`;
     }
 
     protected escapeCSS(value: string): string {

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,