Vscode: Allow hiding the buttons in the tab bar line and in the panel title bar

[costincaraivan]

A small change related to the buttons in the tab bar line:

• Open Changes
• Split Editor
• Close

and to the buttons in the panel title bar:

• New Terminal
• Split Terminal
• Kill Terminal
• Maximize Panel Size
• Move to Bottom
• Close Panel

For users who have already memorized the keyboard shortcuts for these commands (and considering the existence of Ctrl-p and Ctrl-Shift-p), the buttons are kind of redundant. It would be nice to have an option to hide them as almost everything in the UI already can be hidden. I know about Zen mode, but Zen mode also centers the text in the editor, hides the panel/terminals, makes Visual Studio Code full screen and all sort of other things which might not be desirable.

As a note related to this, Vim and Emacs users generally tend to hide the UI. Funnily enough, even the beast that is IntelliJ IDEA allows it 😆

[ewohlken]

Any update on this? Love vscode but its UI is way too busy for my taste

[kirkstrobeck]

This is referring to these buttons, right? What is this area called?

[ashrafhadden]

_*Updated for v1.32.1 Release_

@kirkstrobeck According to it's aria-label It's called Editor actions, and each child has a class of action-item

Alternative Solution

Using Custom CSS and JS Loader

Hide the whole thing

.editor-actions {
  display: none !important;
}

Hide action-items by title

_Possible titles_

• Open Changes
• Open Preview to the Side (⌘K V)
• Compare File with Previous Revision (⌥⌘G ,)
• Toggle File Blame Annotations (⌥⌘G B)
• Split Editor Right (⌘\)
• More Actions...

[title="Open Changes"] {
  display: none !important;
}

Hide action-items by #

_Left-most item usually starts at 1, but it's not always in order_

.menu-item-action-item-icon-1,
.menu-item-action-item-icon-2 {
  display: none !important;
}

[costincaraivan]

Yup, @kirkstrobeck I was referring to that area. I guess I could make an extension for it? I'd need to read up how to make an extension, though.

Edit: Ah, damn, it's not really doable. There is an extension for custom CSS but it gets reset after each update. So this really needs to be in the core VS Code.

[jmcannon]

Please let users remove these. It takes up significant real estate that I'd rather use for my open tabs.

[kube]

This would be cool for screenshots where you want to focus on content.

[usernamehw]

@kube https://marketplace.visualstudio.com/items?itemName=pnp.polacode

[kube]

@usernamehw Thanks, it seems a really nice extension and .

But in my current case, I want to record a GIF, show completions, and error linting:

[edporteous]

Various extensions add buttons to this toolbar making it take up more real-estate. It would be great to be able to hide it.

[jabacchetta]

This feature request becomes even more appealing when taking into account:

• split editors, where available tab bar space is further reduced
• duplication of the ... icon across every editor group
• extensions (which add their own icons and require additional settings to remove)

The Custom CSS and JS Loader extension (as mentioned above) does work in removing the icons, but it's a hack that requires maintaining a css file and also requires permanently silencing the "corrupt installation" message.

[jonathan-holm]

Bump! All actions from these icons are available to perform elsewhere. They are needless clutter.

[ronjouch]

Extension-less workaround that might be good enough for folks who like me start VSCode at most once every few days:

1. Pop open the Dev Tools. I like to bind them to Ctrl+Shift+i like in a browser: add { "key": "ctrl+shift+i", "command": "workbench.action.toggleDevTools" } to your keybindings.json.
2. In the console, [...document.querySelectorAll('.editor-actions')].map(a => a.style.display = 'none') (and given the Console's history feature, once you typed it once, you just have to press Up to get it again)
3. :tada:

EDIT 2019-03-11: followed bpartridge's suggestion to do the removal for all .editor-actions

[hesting15]

So, what about second part of the question?

and to the buttons in the panel title bar:

• New Terminal
• Split Terminal
• Kill Terminal
• Maximize Panel Size
• Move to Bottom
• Close Panel

If I simply do

.monaco-workbench .part.panel .title {
    display: none;
}

The search results panel goes up, it doesn't stretch to the whole area, and I have an empty spot in the bottom:

[bpartridge]

Based on @ronjouch's suggestion, if you have multiple panes and want to hide actions for all of them, use this in the dev tools instead:

[...document.querySelectorAll('.editor-actions')].map(a => a.style.display = 'none')

I understand why #459 is locked and why giving extensions deep abilities to execute JS/edit CSS is unhealthy and counter to performance goals, but this is exactly the type of thing that userscripts would be perfect for, caveat emptor. In this case, it would be great to have a simple setting that toggles a single CSS rule to switch this, but that would need to be built into core.

[curliq]

+1

[JamesGreenaway]

+1

[curliq]

For people wanting to particularly hide the Gitlens icons, you can use these settings

"gitlens.menus": {
    "editorGroup": {
        "blame": false,
        "compare": false
    },
},

[ronjouch]

To an eventual implementer for this feature request: Firefox's "Overflow Menu" seems like a UX good inspiration. See how a contextual action lets users choose which addons deserve an icon in the bar (the most commonly used, to the user taste), and which should remain "pinned" in the Overflow Menu (the uncommonly-used ones).

It's usable, obvious, and for minimalists it would limit icon creep to a single "Overflow Menu" icon, which IMHO is reasonable:

[AbakumovAlexandr]

VSCode Team, could you provide an ETA for this one, please?

[buncismamen]

I hope I could modify or move it because its kinda annoying and blocking my tab
just like this

make it hideable like chrome extension buttons or movable like debugger mode buttons are enough I think

[craigcosmo]

yep, that sh*t takes to much space. Gotta hide it.

[craigcosmo]

[jabacchetta]

For those still looking for a better solution until this feature gets added natively:

1. Install the Customize UI extension

2. Add the following configuration to your settings.json file (additional CSS selectors referenced here):

"customizeUI.stylesheet": {
  ".editor-actions": "display: none !important;",
},

[xhat]

@craigcosmo
"customizeUI.stylesheet": { ".monaco-toolbar": "display: none !important;", },

[taiya]

yes, many of us moves to vscode to have a super-clean UI.
Extensions should not be allowed to pollute it without our permission!
+1 to this → and yes, customizeUI is an "ok" temporary fix

[AbakumovAlexandr]

I guess the top reason why commercial devs move to VSCode is not because of its 'super-clean UI', but rather because technologies they have to use at work are targeted VSCode (like Angular, etc.).
Also, if you don't like how an extension X pollutes VSCode UI, the most obvious solution seems to be not using that extension X.

[felipezarco]

As already pointed by many, we already have easy access to those functionalities. Especially when using split view, these buttons at the tab take too much space we want for our tabs. Definitely should at least be optional (if not removed all together).

[patrickgilmour]

+1 for a native VS Code option to hide the editor actions

[mikelyons]

piling on here and say that it would be nice if you could move these buttons off the tab bar or disable them natively somehow. It seems obvious to me that the tab bar already gets mega cluttered when you have lots of files open.

EDIT: I did find @jabacchetta's solution worked perfectly: https://github.com/Microsoft/vscode/issues/46403#issuecomment-523286973

[bionicles]

these buttons suck and should die

[torchlard]

I guess the top reason why commercial devs move to VSCode is not because of its 'super-clean UI', but rather because technologies they have to use at work are targeted VSCode (like Angular, etc.).
Also, if you don't like how an extension X pollutes VSCode UI, the most obvious solution seems to be not using that extension X.

Disagree. We need those extensions, but we don't need an icon from it placed in title bar. I don't understand why this simple UI change being ignored for long time, it should be very easy to implement, just hide all in 3 dots ...

[sytelus]

This page needs update to show "Editor Actions": https://code.visualstudio.com/docs/getstarted/userinterface

On Ubuntu, this area is over the tabs instead of along the same line as menus.

[3nuc]

While you're at it, you can also go full rice mode and remove the side bar titles

to

  "customizeUI.stylesheet": {
    ".title-label": "display: none !important;", 
  },

You can change .title-label to .composite.title to remove the empty space but then you won't be able to right click the top bar to hide accordion items like the outline view etc. Or you could change "display: none" to some height changing class

[sytelus]

This issue has become very critical given so many extensions now pollute editor actions. On Ubuntu, this renders vscode almost unusable now. Hope it can be fixed very soon!

[KentoNishi]

Any updates on this?
A simple checkbox-style action menu toggle (like that of the left shortcuts bar) would be enough.

[KarlRamstedt]

How has this not been fixed yet? It's been over a year and these useless buttons still plague our existence.
I'd understand if a more thorough overhaul is being worked on. Something along the lines of what Firefox allows with buttons that can be relocated and hidden at will would be amazing.

[KarlRamstedt]

I should add that I couldn't get @ashrafhadden's solution to work (pretty sure I did everything correctly; VSCode complained about corruption).
I did get @jabacchetta's solution to work though. It's also a much less fiddly solution.

[gatspy]

action-items on the tab annoys me!!!

[jrend]

Following the workaround that worked for me -- thanks jabacchetta! -- I just want to share an option that hides things more selectively instead of hiding all the buttons. An example of hiding the GitHub extension buttons:

    "customizeUI.stylesheet": {
        ".editor-actions a[title^=\"Git: View History\"]": "display: none !important;",
        ".editor-actions a[title^=\"Open Changes\"]": "display: none !important;",
        ".editor-actions a[title^=\"Show Revision Details\"]": "display: none !important;",
        ".editor-actions a[title^=\"Toggle File Blame Annotations\"]": "display: none !important;"
    },

[ShiftyMcCool]

Following the workaround that worked for me -- thanks jabacchetta! -- I just want to share an option that hides things more selectively instead of hiding all the buttons. An example of hiding the GitHub extension buttons:

    "customizeUI.stylesheet": {
        ".editor-actions a[title^=\"Git: View History\"]": "display: none !important;",
        ".editor-actions a[title^=\"Open Changes\"]": "display: none !important;",
        ".editor-actions a[title^=\"Show Revision Details\"]": "display: none !important;",
        ".editor-actions a[title^=\"Toggle File Blame Annotations\"]": "display: none !important;"
    },

Obviously a native solution would be preferable, but THIS works just fine until then. Love that it's selective, I still use the buttons in diff view but all the Git buttons while editing was getting to be a bit much. Thanks!

[nikitavoloboev]

Super annoying that you can't hide these icons. Can the devs suggest which area contributors should look into into making this change so one can send a PR?

Thank you.

[mkxbl]

almost two years, why so hard?

[rodrigobravenewcoin]

I need this right now!

[ugirc]

For those still looking for a better solution until this feature gets added natively:

1. Install the Customize UI extension
2. Add the following configuration to your settings.json file (additional CSS selectors referenced here):

"customizeUI.stylesheet": {
  ".editor-actions": "display: none !important;",
},

It works for me👍. Thanks for solving my preblem.

[nikitavoloboev]

I don't want to install an extension running in the background just to hide one piece of UI. 😞

[sobolevn]

I have tried CustomizeUI solution but I agree with @nikitavoloboev that it is really strange to setup a monkeypatched version of VSCode just to hide several icons. It should be configurable by default.

Currently, it is the only thing that bothers me in my setup:

I would love to see a fix!

[jasonbuckboyer]

I think @ronjouch's suggestion is the best so far to balance minimalism with quick access to common actions.

That suggestion, along with an option to completely hide the menu, would provide the ideal functionality overall.

[gehringf]

+1 for a native VS Code option to hide the editor actions

[berfubuyukoz]

I am relieved to see I am not alone by being annoyed by these buttons. It gets even worse when you have to work on a single PC screen and split the screen into two. I see only one tab at once in that case.

[RobinTournemenne]

This issue entered the backlog list of issue on 23 Oct 2019. It is a list of issue without any due date. It should be in the On Deck list of issues since it reduces a lot VS code usability when having a lot of editors opened.

[mritalian]

And it's like the simplest option to add, seriously what gives? customizeUI is a bit of a hack.

[icetbr]

To hide the Split Editor Right button, you might need something like this to escape the backslash

[title='Split Editor Right (Ctrl+\\\\)'] {
  display: none !important;
}

I'm using the Custom UI extension. It looks easier to install and maintain. I installed it, activated with CTRL + P, "Enable Monkey Patch".

Then add this to settings.json (use Help -> Toggle Developer Tools to find out other selectors)

"customizeUI.stylesheet": {
    "[title='Open Changes']": "display: none !important;",
    "[title='Split Editor Right (Ctrl+\\\\)']": "display: none !important;"
},

[uribalb]

Up !

[ilteris]

Please give us a setting to disable those icons

[Robin-Law]

Agree with all the above. This is a maddening bit of chrome that I would like to get rid of. The tab bar is for tabs!

[dan-dr]

Came here to put a +1 on the OP but man are people here entitled.

And it's like the simplest option to add, seriously what gives?

I don't want to install an extension running in the background just to hide one piece of UI.

I need this right now!

almost two years, why so hard?

How has this not been fixed yet? It's been over a year and these useless buttons still plague our existence.

Y'all are programmers and this is a free, open source, high quality software. if it's THAT important maybe you can put some effort into fixing it for yourself and others.

[taiya]

It is "funny" are you are pointing out people being aggressive yet your post is likely more condescending the all the ones above combined.

And as to your observation... for somebody that knows intimately the vscode internals this should indeed be a trivial change, but to somebody that is not, even a simple change like this comes with a large overhead (learning curve).

Anyhow...

[dan-dr]

Is it possible to call out people's behavior without sounding condescending? I'm not sure.
It could have been said in a "nicer" way, but they are acting entitled, which is the opposite kind of behavior you want in open source. I think it's important to call it out.

And as to your observation... for somebody that knows intimately the vscode internals this should indeed be a trivial change, but to somebody that is not, even a simple change like this comes with a large overhead (learning curve).

I don't know if it's trivial or not. How do you know that it's trivial? Maybe it's trivial for both?

In any case It is not "trivial" to maintain a 5000+ issue and 200+ PR's project.

Do you suggest prioritizing a feature because someone said "I need this right now!" ?

[paolomangiadev]

"trivial change" making an option to hide a couple of buttons from a chromium based application... big lol

[ianmcateer]

if you just want to hide everything, i had to target the aria label specifically because otherwise the action items on the left menu bar would get removed

  // hide top right icons
  "customizeUI.stylesheet": {
    ".actions-container[aria-label='Editor actions']": "display: none !important;"
  }

[loosechalk]

Is there a similar console input to @ronjouch's extension-less workaround (using the Console in Developer Tools) to hide these five icons in the integrated terminal?

[heartacker]

hi, there is an another effective way to solve the problem of compressed tabs by action icon.
Move editor actions into the window title to free up space #104738

I think it can be a better way to solve the problem than hide action-icon. even be an new innovations an UI.
PLEASE +1 👍 if you are agree #104738

[astier]

@heartacker I think your request addresses a different issue. Many people here just want to remove the icons so they don't have to see them. More space for tabs is a benefit but not the main-goal. Moving them to the titlebar doesn't solve the issue for me because I still can see them. Your suggestion is maybe good for people who need the icons and want to safe space for tabs but not for people who just don't need the icons.

[bedge]

To remove entirely, this works on startup, no manual action needed once setup:
https://github.com/iocave/customize-ui/issues/63

[AllanDaemon]

I have to disable many extensions because when enabled they add soo many icons there that makes the tab selector disappear.

This means that this issue renders VSCODE with extensions unusable. It seems this should be an urgent fix.

[rocke2020]

I indeed hope to sove this issue: allow hide the eidtor icon. thanks!!

[welcometochristown]

Would also like this feature please.