Refine debug toolbar

[weinand]

I've tried to compile issues and proposals from #2513 and #9093:

Today VS Code supports two locations:

• floating on top of editor tabs (default)
• pinned to debug viewlet header (new option)

"floating" debug toolbar issues:

• floating debug toolbar can only be moved horizontally and its vertical position is not ideal
  • problem: floating debug toolbar hides tabs (but only in tab mode).
  • workaround: move floating debug toolbar to the left and make debug viewlet wide enough so that toolbar doesn't overlap with tabs.

"docked" debug toolbar issues:

• debug actions only available in debug viewlet
  • problem: you cannot use debug buttons when debug viewlet is not active
  • workaround: use F1 or keyboard shortcuts
• no debug configuration drop-down visible while debug session active
  • problem: another concurrent session cannot be easily started while one is active
  • workaround: use F1 or set "debug.showInStatusBar" to "onFirstSessionStart" and start session via quickpick
• no session drop-down visible if debug viewlet is too narrow
  • problem: it is not really obvious that the CALLSTACK view could be used for switching sessions in this situation
  • workaround: make debug viewlet wider

Proposed Debug Bar locations:

• in activity bar (Debug actions pane often blocks file names #2513 (comment))
• pinned to its own bar directly below the title bar (Debug actions pane often blocks file names #2513 (comment))
• like an actual toolbar (not floating) like VS (Debug actions pane often blocks file names #2513 (comment))
• in statusbar (Debug actions pane often blocks file names #2513 (comment))
• snap it to any edge along the editor view (Debug actions pane often blocks file names #2513 (comment))
• below the find box (Debug toolbar custom positioning #9093 (comment))
• under the debug viewlet header (Debug toolbar custom positioning #9093 (comment))
• float in the editor like the search widget (Debug toolbar custom positioning #9093 (comment))
• unanchored free floating (Debug toolbar custom positioning #9093 (comment))
• moves the debugger down into your code area (Debug actions pane often blocks file names #2513 (comment))

Important requirements:

• toolbar always visible (independent from which viewlet is active)
  • "docked" toolbar violates this
• toolbar should not hide anything
  • "floating" toolbar violates this

My take:

The two important requirements could be easily addressed by a global toolbar, but VS Code doesn't provide one.
Since it is difficult to find a good solution that obeys both requirements, I propose a two-pronged approach:

• improve "floating" toolbar (which will continue to be the default):

  • make it more suitable for editor tabs mode, e.g. by allowing to move it below the tabs, and/or
  • allow for unanchored free floating

• improve "docked" toolbar (which is most likely covered by Show debug sessions under a new split view section #49881):

  • don't overlap docked toolbar with viewlet header but create a new view "SESSIONS"
  • show debug actions in the SESSIONs header
  • move the session drop-down into the SESSIONs content
  • as long as there is only a single debug session there is no need to expand the SESSION view and all debug actions are available through in the header anyway

Let's start by improving the "floating" toolbar.

[weinand]

In June we have improved the positioning of the "floating" toolbar.

[pklapperich]

I'm running 1.24.1 which is currently the latest release. There's still no vertical position of the "floating" toolbar. It covers my filenames or other things I want to read/use. I can't put it anywhere that's out of my way. I'm constantly dragging the thing left and right. I hate it.

Every time I open VSCode I have modify the local style on the "debug-actions-widget" to change style="top:0px; ..." to `style="bottom:0px; ..." I feel like it wasn't that long ago that the debug buttons sat permanently above the "variables" list on the debug pane. I liked that. I swore at my computer less.

[weinand]

@pklapperich as always the new feature is available in the current Insiders release (1.25.0) and it will become available in the upcoming stable June release.

[WhatFreshHellIsThis]

Why in the world is it floating in the first place? I never could understand that choice and now the fix is to make it even more "floaty"?!

[weinand]

@WhatFreshHellIsThis if you don't like the floating bar, you can dock it.

[WhatFreshHellIsThis]

Cool, thank you @weinand I didn't know that, my work life just got a tiny bit more pleasant! I still wonder at the mystifying choice to float it at all. I've used VSCODE with many different languages and environments now and I still don't see a use-case for it other than to annoy people but maybe that's just me.