Limited to 9 icons

[TauerOne]

It seems that the latest VS Code update has done something to limit the max number of icons in the toolbar to 9. The rest end up in the overflow menu. Any insight as to what controls this?

[GorvGoyl]

ah yes, vscode recently did some internal change which affects this. I'll see if there's a workaround if you want to see more than 9 btns. but, still 9 buttons are lot to put on screen :D

[TauerOne]

I'm an old guy, set in my ways. I like buttons, and my brain doesn't have as much free memory as it used to. ;) Then things like source control add even more buttons. I apply a couple of hacks and move the toolbar down to the breadcrumbs area where there's plenty of room. For now I've rolled VS Code back to version 1.53.2 so I can keep my buttons.

[GorvGoyl]

haha totally get you @TauerOne. I shall see if there's a workaround for showing all buttons on latest version of vscode. Do let me know if you happen to find a solution first.

[mp1994]

Any updates on this? It would also be nice to move around the buttons and re-order them

[Diogo-Rossi]

Hello people.
If you want to reduce a little the number of some buttons that VS Code puts automatically (letting us to define our own 9 buttons)
At least for anyone who use python files, please upvote this request.
Thankyou

[GitMensch]

It would also be nice to move around the buttons and re-order them

Not possible as it is all necessarily hard-coded so far. Actually this should not go into this extension, but instead the MS "it is on the backlock" toolbar.

I apply a couple of hacks and move the toolbar down to the breadcrumbs area where there's plenty of room

@TauerOne: How did you adjusted this extension to get the icons into the breadcrumbs? A configurable option for that would be quite useful. Or did you really mean you have the actual toolbar moved into the breadcrumbs (and if: How?)

[TauerOne]

To move the toolbar to the breadcrumbs area I hack the workbench CSS supplied with VS code (workbench.desktop.main.css).

/* Move the toolbar down to the breadcrumb area /
.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions{position:absolute;top:28px;right:12px;z-index:10;}
/ Adjust the height of the toolbar to match the breadcrumb area */
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label{height:22px;border-radius: 2px;}

This leaves me running an "[Unsupported]" version, so I hack the workbench JS file also (workbench.desktop.main.js) to hide that in the title bar.

/* Add the function to hide the "[Unsupported]" warning /
function hideHackWarning() { var t = document.getElementsByClassName('window-title')[0]; if (t && t.innerText.indexOf(' [Unsupported]') > -1) {t.innerText = t.innerText.replace(' [Unsupported]','');}}
/ Add an onchange trigger to the window title that will hide the hack warning whenever it is added /
function addTitleTrigger() { var t = document.getElementsByClassName('window-title')[0]; if (t) {tObsrv = new MutationObserver(hideHackWarning); tObsrv.observe(t,{childList:true,attributes:true,characterData:true,subtree:true}); hideHackWarning();} else {setTimeout(addTitleTrigger,1000);}}
/ Add a timeout to call the function above */
setTimeout(addTitleTrigger, 500);

Of course my changes will get overwritten whenever VS code updates, so I have a script that checks the CSS and JS files and adds my custom bits if they are not already there before it launches VS.

[imthenachoman]

@TauerOne Did you submit a FR to VSCode for making this more permanent?

[DigitalSorceress]

Came here and found this because I was banging my head trying to figure out why I could only see so few icons when the screenshots looked like there were many more

It may well just be VS is being a PITA about this and there's noting to be done but

just a vote here please if you can I really would love to have more buttons I really like the idea of this tool but I'm really a sucker for customizing my UI and this extension has so much promise