Fix plugin icon URLs in electron & Fix custom icon themes

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

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## v1.1.1
+
+- [core] added static function to fix Windows filepaths that are using `\` instead of `/`
+- [plugin-ext] fixed custom Icon Themes not working
+- [plugin-ext] fixed sidebar icons from external extensions not showing (electron)
+- [plugin-ext] fixed plugin icons not showing, for example the run button for scripts in the npm extension (electron)
+
 ## v1.1.0
 
 - [task] fixed presentation.reveal & focus for detected tasks [#7548](https://github.com/eclipse-theia/theia/pull/7548)

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 {
@@ -213,4 +214,11 @@ export default class URI {
         return result;
     }
 
+    static file(path: string): URI {
+        if (isWindows) {
+            return new URI(Uri.file(path.replace(/\\/g, '/')));
+        } else {
+            return new URI(Uri.file(path));
+        }
+    }
 }

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;
@@ -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.packageUri = URI.file(this.packagePath);
         this.locationUri = new URI(this.uri).parent;
     }
 
@@ -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 {

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,