Disabled toolbar icons are no longer dimmed in 1.67

[gareth-rees]

Summary

In Visual Studio Code 1.65 and earlier, icons added by extensions to the debug toolbar were dimmed when disabled:

But in Visual Studio Code 1.67.0, icons added by extensions to the debug toolbar are no longer dimmed when disabled:

Details

I am working on an extension which adds icons to the debug toolbar, using the "commands" contribution point. The icons are disabled while the program is running, and enabled when it is stopped. A typical icon definition looks like this:

"commands": [
    {
        "command": "udb.reverseStepOver",
        "enablement": "debugState == 'stopped' && udbActive",
        "title": "Reverse Step Over",
        "icon": {
            "dark": "media/stepover-reverse-tb-dark.svg",
            "light": "media/stepover-reverse-tb-light.svg"
        }
    },
],

with a corresponding definition in the "menus" contribution point:

"menus": {
    "debug/toolBar": [
        {
            "command": "udb.reverseStepOver",
            "when": "debugType == 'cppdbg' && udbActive",
            "group": "navigation@6"
        },
    ]
},

Discussion

It seems that Visual Studio Code 1.67 no longer provides a way for extensions to vary the colour of toolbar icons when they are disabled.

Looking at the Visual Studio Code source, it seems that the built-in toolbar icons are created like this:

https://github.com/microsoft/vscode/blob/3d7135a49f5afbadc6849cce343666eaa446ea66/src/vs/workbench/contrib/debug/browser/debugIcons.ts#L65

and then styled like this:

https://github.com/microsoft/vscode/blob/3d7135a49f5afbadc6849cce343666eaa446ea66/src/vs/workbench/contrib/debug/browser/debugColors.ts#L104-L109

https://github.com/microsoft/vscode/blob/3d7135a49f5afbadc6849cce343666eaa446ea66/src/vs/workbench/contrib/debug/browser/debugColors.ts#L340-L343

but I cannot see any way for extensions to access this functionality.

[roblourens]

I see this, hey @daviddossett this is from eec956770ef6bb6fe904460a912233b93accd609. Seems like this will work for codicons but not svgs. Any idea how to deal with that?

We could add a new class to svg icons so we can keep the opacity rule, if that helps. This probably applies to all toolbars, besides the debug one.

[gareth-rees]

In the short term, restoring the opacity rule for SVG icons makes the most sense.

But in the medium term, it would be nice if extensions had a way to access codicon-like behaviour, perhaps via the "icons" contributions point. At the moment there is no way for extensions to vary the colour for icons defined via this contribution point, but built-in icons use fill="currentColor" in their SVG, with the colour being specified via CSS.

[daviddossett]

Thanks for catching. Raised a PR to revert back to a slightly updated opacity rule for the moment. @gareth-rees can you clarify what you're hoping to achieve re: codicon-like behavior? Are you hoping to use theme tokens in your contributed SVGs?

[roblourens]

Let's take this as a candidate. Could you also prepare a PR against the release branch?

[gareth-rees]

@daviddossett Thanks for the super-quick fix! Look forward to trying it out in 1.67.2 (I assume).

can you clarify what you're hoping to achieve re: codicon-like behavior? Are you hoping to use theme tokens in your contributed SVGs?

Concretely, what I would like to achieve is to be able to put icons in the debug toolbar that look like this when the program is stopped:

and like this when the program is running (where grayed-out icons represent commands that are temporarily disabled):

In these screenshots, six of the commands are using bulit-in icons (Continue/Pause, Step Over, Step Into, Step Out, Restart and Stop), and the other eleven commands are using icons defined by the extension. I would like the two sets of icons to match in style if possible. If I can choose colours from the user's theme, that would be perfect, but I don't mind exactly how the functionality is provided: you know better than me what implementation would make the most sense.