VS Code Move Debug Toolbar to Window Title

Question

Is it possible to move debug toolbar to window title?

I know that VS Code does not provide such debug toolbar positioning option, but I am talking about edit the source code of VS Code.

Maybe you can suggest me what documentation to read and what files I have to edit to implement my idea?

Answer 1

There is an option available in Insiders v1.83 now for testing (and possibly in Stable v1.83 early October 2023) which will move the debug toolbar to the Command Center which is in the title area. Here it is working:

These settings must be enabled for this to work:

Window: Command Center         // enable/check this
Window: Title Bar Style        // must be set to 'custom'

Debug: Tool Bar Location       // set to 'commandCenter'

In addition there are a number of new ThemeColors for the Command Center that can be used colorCustomizations of your settings.json:

  "workbench.colorCustomizations": {

    "commandCenter.debuggingBackground": "#e9e7e7",    // inactive
    "commandCenter.activeBackground": "#e9e7e7",
    "commandCenter.activeForeground": "#000",
    "commandCenter.inactiveForeground": "#f00",   // doesn't get rid of "search text next to mag glass"
    "commandCenter.foreground": "#0000",          // works to get rid of search text

    // "commandCenter.background": "#ff0000",
    // "commandCenter.activeBorder": "#ff0000",
    // "commandCenter.border": "#ff0000",
    // "commandCenter.inactiveBorder": "#ff0000"

    // "debugIcon.pauseForeground": "#ff0000",
    // "debugIcon.restartForeground": "#ff0000",
    // and other 'debugIcon' ThemeColors to control the icons 

  }

So you must have the Command Center enabled for this to work (which is unfortunate) but you do gain the ability to move the debug toolbar out of the editor or debug view areas.