Debug actions pane often blocks file names

[jasonyueyang]

Currently the debug actions pane is always displayed at the top center position. This often blocks the file names.

It would be helpful to find a better place for the pane or add the ability to move the debug actions pane.

[jtlowe]

Yes please! It would be great to have this in its own toolbar. I'm constantly having to move it out of the way when trying to switch tabs.

[jtlowe]

Possibly something like the image below, that would only appear when in debug mode.

[kmudrick]

I'd love to see it be moveable (more than left to right), or in the debug pane itself. This is pretty painful as is being locked on top of the file tabs.

[isidorn]

Assigning to april to investigate a better solution. Though not making gurantees that this gets fixed in april.
fyi @stevencl

[stevencl]

@jamiedawsonyoung - would love to hear your thoughts on this.

[gulshan]

What are those extra buttons in the screenshot here? How to get those buttons? Can debug buttons be placed there?

[isidorn]

@gulshan your link is not good, however some adapter support more debug actions and when using those adapters more actions appear. For instance the chakra debugger supports step back debugging, and when debugging chakra an additional step back action will be added

[gulshan]

The image in the link looks like-

[isidorn]

@gulshan those buttons are from ancient times of Monaco on azure websites. That product is an ancestor to VSCode, you can google around to search for more data.

[jamiedawsonyoung]

@stevencl When I looked at the debug section on the website I can see what looks like a 'grip / grabber' to the left of the controls. It would suggest that this panel has been floating in the past? Was there a reason it's now fixed?

It doesn't look (from my fairly light experience of VSC) that we have many floating windows that users can move around so I'm not sure we should introduce one here.

It might be there's a place for it in the debug view (the view I see when I click the bug icon on the left but I'd need to try out debugging something for real to see the controls work and whether they could fit.

@stevencl could you or someone send me a file I can try to debug?

[isidorn]

Hey @jamiedawsonyoung to debug something have the following file and press F5
The screenshot in this issue is outdated, currently we allow the debug toolbar to be dragged around but only horizontally. We are thinking if we should also allow vertical dragging with some sugar on top - like the toolbar beinging docked to top and it takes extra effort to dock it out.

console.log('hey jamie')

[jamiedawsonyoung]

Thanks @isidorn Got it working :-)

[isidorn]

@jamiedawsonyoung let me know if I can help in some other way or if you would like to chat so I provide more details about the issue.

[jamiedawsonyoung]

Hey @isidorn That would be great. I'll set up a wee call so we can chat about this.

[dearsaturn]

@mattacosta I actually really like that idea. That's a pretty sensible spot for it.

[JesseNewman19]

@isidorn how about the next one? :)

[EverlastEngineering]

Here's my way around it:

Open the workbench.main.js file inside vscode.app (on a mac, unsure of pc but I'm sure that file exists) and search for:

style("top",r.getTitleBarOffset()+"px")

and replace with:

style("top",(r.getTitleBarOffset()+35)+"px")

This moves the debugger down into your code area.

This needs to be redone after every update.

[ghost]

@fabiospampinato Your extension words fine! Thx

But not has a option to hide the native Debug actions pane.

[mikeseese]

@TiagoSAmaral the README file explains how to do that: https://github.com/fabiospampinato/vscode-statusbar-debugger#hints

[ghost]

Thx

[mattblackdev]

I don't understand why this thing has to be locked on the y-axis... I haven't looked at the implementation but people have been complaining about this for 2 years. Wouldn't a great first step be to simply allow it to be dragged wherever the user wants? Then the telemetry results might actually be helpful.

[kletkeman]

Debugging is one of the flashiest of vscode and also one of the most critical features for users ... yet this perpetual annoyance of a debugging UI stays under discussion for years. Purporting that it is "part of a larger problem" does exactly nothing for users who would be perfectly happy with the dirtiest quick hack to allow it to float anywhere in the window instead of frozen to the top row of the window. That's gotta be what, an hour's work? Mind-blowing to read such a thread ... is there a product manager that's married to the location perhaps?

[mikeseese]

I'm sorry, but I think we need to stop complaining and go ahead and put in the work. I don't see any of you stepping up to the plate and submitting a PR as @isidorn recommended in February.

Sure, I'm not sure why this one issue has fallen through the cracks, but I feel as developers we all know what it's like to be "too busy" to work on something that isn't in our priority list, or our bosses priority list. We all probably are just going to respond "Mike, we don't have time to do this, this is Microsoft's job." Well they are busy too, and try to release a stable product monthly for the entire world to use.

I will try to put in some time the next two weeks to submit a PR if no one else steps up to the plate, merely because I'm tired of hearing all of the complaints.

[mikeseese]

I've submitted 2 PRs for further discussion with VSCode maintainers/@isidorn. While #49097 is a readily available PR which allows vertical dragging, I prefer the other proposed solution in #49099 which will need further discussion in terms of implementation. I will push to have some sort of solution merged for the May or June milestones.

[JeanClaudeCottier]

I've been using Fabio's extension for months (THANK YOU FABIO). Most of the time, I'm using the keyboard shortcut anyway. I switch off the original and awful (yes awful) debugger tab and never looked back. I made VSCode my main platform for development (I wouldn't have without the extension). I feel the pain for the people that can't use it. I can't believe this hasn't been fix yet. VSCode is a great product that I'm promoting all the time. But the debug tab!!!! What are you waitting for guys? No excuses, for such a critical feature.

[kletkeman]

@seesemichaelj I agree that the whinging is probably best replaced with action. My excuse is having worked into the wee hours for too many days in a row, shuffling the debug tab back and forth as I stop, start, restart, stop, start, restart a couple of micro-services ... it gets a little old ... I'll take a look at Fabio's extension, thanks for the tip @JeanClaudeCottier

[bakasmarius]

@seesemichaelj I agree with you, but when I decided to try and make a PR myself I went to read about how to set up VSCode for developing it... It surprisingly has quite a lot of steps, so I decided to leave it for later "when I have more time", so like never :D But I guess I should just do it today and get over with it :)

[mikeseese]

I appreciate the initiative @bakasmarius! I went ahead and created PRs (see my last comment) so at this point it would be duplicating work, and much of it relies on the outcome of UX meetings.

[isidorn]

Thanks for the feedback and for opening PRs with great ideas.
After discussion we decided to introduce the following setting
"debug.toolbar": "float"|"dock"|"hide"

The default is like before that the debug toolbar is floating, however it can now be docked to the debug viewlet.
debug.hideActionBar is now deprecated and we will no longer support that setting in 2 milestones.

Feedback is welcome, especially on naming of settings.
What I still plan to investigate if possible is to add some action in the toolbar to dock it directly from there.

fyi @weinand @alexr00

[fabiospampinato]

That's better, thank you, but why not putting the commands in a secondary line/toolbar? Like this:

The current solution isn't great for compound debugging, this sidebar looks absolutely massive to me:

It can be resized, but then I lose the name fo the view ("DEBUG"), the name of the launch configuration gets cropped, and even the "more" button gets hidden.

Putting this actions on a secondary line/toolbar just seems a better solution to me.

[mikeseese]

I definitely agree with @fabiospampinato.

Further, you lose the launch configuration drop down. There are cases where you start debugging and then want to run another launch configuration. You can't press F5 because your selected configuration is already running and I believe combining the multi-process dropdown and launch configuration dropdown into one will be nonintuitive and a clutter.