Allow customisation of debug toolbar (eg. additional buttons)

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

Stateful Hot Reload
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.

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.

Isidor Nikolic (@isidorn)

Isidor Nikolic (@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.

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.

Isidor Nikolic (@isidorn)

Isidor Nikolic (@isidorn) Andre Weinand (@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.

Danny Tuppeny (@DanTup)

Danny Tuppeny (@DanTup) We are investigating this is the Dec/Jan milestone.

Andre Weinand (@weinand)

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

Andre Weinand (@weinand)

Andre Weinand (@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!

Danny Tuppeny (@DanTup)

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

Andre Weinand (@weinand)

Andre Weinand (@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!

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 #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"
				}
			]
		}
	}

Note to self: we shuold update contribution points docs.

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).

This does not affect the touch bar.

Make debug toolbar customisable

Navigation Menu

Repository navigation

Allow customisation of debug toolbar (eg. additional buttons) #45116

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Allow customisation of debug toolbar (eg. additional buttons) #45116

Description

Activity

isidorn commented on Mar 6, 2018

weinand commented on Mar 6, 2018

DanTup commented on Mar 6, 2018

DanTup commented on Dec 10, 2018

weinand commented on Dec 10, 2018

DanTup commented on Dec 10, 2018

DanTup commented on Jan 29, 2019

weinand commented on Jan 29, 2019

DanTup commented on Jan 29, 2019

isidorn commented on Feb 21, 2019

isidorn commented on Feb 21, 2019

DanTup commented on Feb 21, 2019

isidorn commented on Feb 22, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions