VS Code Decorations with gutterIconPath do not work because they reference filesystem paths

[DanTup]

In the Flutter extension we use getterIconPath in Decorations to render coloured icons in the editor gutter. Because we can't do dynamic images but we don't want to ship an image for every possible hex code, we generate them the first time they're seen and write them into a folder (we use path.join(context.globalStoragePath, "flutterColors")). We then use a file URI for the gutter icon:

vs.window.createTextEditorDecorationType({
	gutterIconPath: vs.Uri.file(filePath),
	gutterIconSize: "50%",
});

However these paths are not transformed in any way when being rendered in GitPod, so they don't show up and you see these errors in the dev console:

I don't know if this belongs in GitPod of theia, but I think gutterIconPaths should be transformed to some URL that is able to pass through files (at least those that have been explicitly added as gutterIconPaths or similar).

[geropl]

@akosyakov Can maybe you can help here?

[akosyakov]

I think we have to translate file paths to urls to fetch files from our endpoints.

[svenefftinge]

In production now

[DanTup]

Thanks! Though the fix seems to work for some (our colours) but not others (icons). I think the difference is that one comes from the extensions globalStorage whereas the other one comes from the extensions own folder (eg. shipped inside the extension - extensions.getExtension(dartCodeExtensionIdentifier)!.extensionPath).

[DanTup]

If you need a test case, you can use this:

vscode:
  extensions:
    - Dart-Code.dart-code@3.7.0-beta.1:/xEXAh68CXrAM+0euRznVA==

Or the vsix from:

https://github.com/Dart-Code/Dart-Code/releases/tag/v3.7.0-beta.2

And there's an example repo here (you'll need to click "Get Packages" on the notification that pops up):

https://gitpod.io/#https://github.com/DanTup/gitpod-flutter-web

The colours are already in the file, and you can trigger the icon by including this in lib/main.dart:

var a = Icons.ac_unit;