New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine debug toolbar #52490

weinand opened this Issue Jun 20, 2018 · 6 comments


None yet
4 participants

weinand commented Jun 20, 2018

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:

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 #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 weinand changed the title from Refined debug toolbar locations to Refine debug toolbar Jun 20, 2018

@isidorn isidorn referenced this issue Jun 22, 2018


Test: debug toolbar floating position #52686

2 of 2 tasks complete

@kieferrm kieferrm referenced this issue Jun 25, 2018


Iteration Plan for June 2018 #51483

43 of 52 tasks complete

@weinand weinand added this to the June 2018 milestone Jun 25, 2018


This comment has been minimized.


weinand commented Jun 25, 2018

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


This comment has been minimized.

pklapperich commented Jun 30, 2018

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.


This comment has been minimized.


weinand commented Jun 30, 2018

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


This comment has been minimized.

WhatFreshHellIsThis commented Jul 11, 2018

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"?!


This comment has been minimized.


weinand commented Jul 11, 2018

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


This comment has been minimized.

WhatFreshHellIsThis commented Jul 11, 2018

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.

@vscodebot vscodebot bot locked and limited conversation to collaborators Aug 9, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.