Vscode: Allow customisation of debug toolbar (eg. additional buttons)

[DanTup]

In Flutter (a framework for developing mobile apps) we have two different types of restart during debugging:

1. Stateful Hot Reload
2. Full Restart

Since stateful hot reload is awesome, we've wired that up to the Restart button on the toolbar. In the case where this fails (eg. because you modified something that makes your state invalid) we have a status bar notification and an action in the command palette for a "Full Restart".

This has been a little confusing for users - they expect to see buttons for "Hot Reload" and "Restart" on the toolbar.

It would be great if we could supply an icon/tooltip for additional buttons (and a way of positioning them between existing buttons) and have it run a custom command.

[isidorn]

This is a fair feature request.
We already have the editor title area where extensions can contribute actions and icons
Here's an example of markdown doing it.

So we would need to introduce a new menu id for the debug toolbar. For example 'debug/actionBar' - since we already call it actionbar in settings.
Positioning would be done by using the "group" property, so nothing new to introduce for this.

A nice thing about this is that we would be able to remove the chakra actions which do not really belong in the vscode core imho.

[weinand]

@isidorn Sorry, but there are no "chakra actions". The debug protocol supports reverse-back and reverse-continue and VS Code surfaces that in the UI. VS Code does not know anything about chakra (and the comment is wrong). Any debug extension can use that. So there is no way that we ever remove support for this.

[DanTup]

Reverse continue?! That sounds bizzare!

So we would need to introduce a new menu id for the debug toolbar. For example 'debug/actionBar'

I was actually thinking this would work by sending a customRequest or similar to the DA (so it's similar to restartRequest), though since we have two-way communication between UI and DA now it doesn't worry me too much how it'd work.

[DanTup]

@isidorn @weinand Do you think this is something that might happen anytime soon? I'm considering adding a setting to allow the user to control whether the Restart button will trigger a Reload or a Restart as a workaround, but it'd be much better if we could just give them both.

[weinand]

@DanTup We are investigating this is the Dec/Jan milestone.

[DanTup]

@weinand Ok cool, I'll hang fire doing anything until it's clear if this may happen - thanks for the info!

[DanTup]

@weinand Is there any news on this? If it's unlikely to happen, I might go ahead with adding a setting to control it instead. Thanks!

[weinand]

@DanTup we started investigating this but nothing will ship in the Dec/Jan milestone.

[DanTup]

@weinand Thanks. I somewhat expected that, but do you think it might come soon? It's not urgent so if it's still likely to come, I'll hold off. If it may be some way off (or might not come) then it's more worthwhile me adding a setting.

Thanks!

[isidorn]

Now the debug toolbar is customizable, extensions can add new items to it. The menu id of the debug toolbar is debug/toolbar.

We strongly recommend to use the when debugType context to avoid adding your actions for all debug types.
Currently it is possible to change the order of your contributed actions, however it is not possible to intermix them with the non contributed actions. This requires some debt work which I plan to tackle in the future (our debug actions need to be nicely contributed - here's the item to track it https://github.com/Microsoft/vscode/issues/69153)

Here's how my sample extension adds an action to the toolbar.
Try it out and let us know what you think.

"contributes": {
        "commands": [
            {
                "command": "extension.closeAll",
                "title": "Close All Editors in Group",
                "icon": {
                    "light": "media/closeall.svg",
                    "dark": "media/closeall_inverse.svg"
                }
            }
        ],
        "menus": {
            "debug/toolbar": [
                {
                    "command": "extension.closeAll",
                    "group": "navigation",
                    "when": "debugType == node2"
                }
            ]
        }
    }

[isidorn]

Note to self: we shuold update contribution points docs.

[DanTup]

Awesome! I'm not sure how well it'll work prior to being able to put our new button next to the existing restart button, but I'm really excited this is coming - thanks!!

By the way - does this affect the touch bar at all? Currently there are debug buttons shown there - ideally when we insert a new "hot restart" button to the debug toolbar, it'd be nice to have it inserted into the same position in the touch bar too for consistency (I did try inserting buttons in between in the touch bar previously, but the separators disappeared and everything merged into one big button, so I'm not sure if it's supposed to work).

[isidorn]

This does not affect the touch bar.