Support codicons in file decorations

[miguelsolorio]

Refs https://github.com/microsoft/vscode-pull-request-github/issues/3054

Right now we have to resort to using unicode characters, emojis, or copying codicon glyphs (which does not scale and can break when they change) so it would be great to have support for our ThemeIcon in the decorator api:

@bpasero @jrieken not sure which one of you owns this area

[jrieken]

This isn't easy because codicons require the special font. All decorations are ::after content and I don't know if you can have multiple styled spans there

[hermannloose]

When multiple file decoration providers return decorations for the same URI, a ThemeIcon appears to currently win over any string badges for display. Normally the latter would be rendered comma-separated.

https://github.com/microsoft/vscode/blob/2bc7f1dc153b8e9e21bb9a2f6a7b294eeebdf637/src/vs/workbench/services/decorations/browser/decorationsService.ts#L98

When multiple providers return a ThemeIcon for the same URI, the final result unfortunately also appears to depend on the registration order of providers, since all decorations get the same weight here: https://github.com/microsoft/vscode/blob/2bc7f1dc153b8e9e21bb9a2f6a7b294eeebdf637/src/vs/workbench/api/browser/mainThreadDecorations.ts#L97

[alexr00]

@hermannloose this is why we held off until now on having codicons in the file decoration badge. When (no plan to do this at the moment) we finalize the API we will need to solve this. If you have a solution then a PR would be welcome!

[hermannloose]

@alexr00 I can have a look.

I also noticed that when file names in tab headers are italicized, this font style extends to the codicons, which looks quite weird. From the UX side, would it be reasonable to always render codicons normally, @miguelsolorio?

[alexr00]

@daviddossett for the italicization question.

[daviddossett]

Agreed that codicons should not be italicized.

[hermannloose]

At a glance, the caveat mentioned by @jrieken above indeed makes this really tricky, assuming that keeping all decorations in ::after is a hard requirement for the time being.

For multiple codicons with different colors, I found a possible hack using --webkit-background-clip: text and a background gradient with hard stops, however that's likely asking for trouble regarding portability?

content: "a b c d";
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: linear-gradient(90deg, var(--color-one) 0 25%, var(--color-two) 25% 50%, var(--color-three) 50% 75%, var(--color-four) 75% 100%;

This assumes all codicons will have a fixed width.

I have no idea how to combine non-codicon text with this approach though, so this doesn't solve our original problem.

[alexr00]

Tentatively adding for investigation in May.

[eamodio]

@alexr00 Any chance this could get finalized soon?

[alexr00]

@eamodio we still have the same issue with only showing one decoration if there's a codicon decoration.

[eamodio]

Ah, can it be something like use ::before for codicon decorations and ::after for text (or vice versa)? And then @hermannloose's hack could be applied to allow multiple codicons?