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?

[AshGrowem]

*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. 🎉

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?

[buncis]

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]

[omer-g]

So, I get that the constant questions about this issue are annoying, but is there anything specific that makes it difficult to implement or holding it back? Having the option to remove these buttons would be great.

[imthenachoman]

Has there been any consideration to adding a new menu bar? Kind of like how browsers can have an optional favorites bar? Then users can control if they want the menu bar visible and what icons/buttons it shows? I realize VS Code loves keyboard shortcuts but at some point you start drowning in shortcuts.

[twome]

4 years and counting! 🎉🥳 Bets are now open at 1:1 odds on whether the total number of people who have ever clicked any of these buttons is greater or lesser than the number of people who've participated in this thread.

[yakamoz423]

Need this !!!

[albert-ying]

The best I can get:

  "customizeUI.stylesheet": {
    // Hide title actions in Zen-mode
    "div.monaco-split-view2.horizontal.separator-border div.title-actions": "display: none !important;",
    // Hide border lines
    ".monaco-split-view2.separator-border.horizontal>.split-view-container>.split-view-view:not(:first-child):before": "width: 0px",
    // Hide decorations over vertical scrollbar *
    ".decorationsOverviewRuler": "display: none !important;",
    // Hide scrollbar slider *
    "div.monaco-split-view2.horizontal.separator-border .slider": "display: none !important;",
    // Attempt to hide vertical borders (not working yet)
    "div.monaco-sash.vertical": "visible: hidden",
    // Hide File and title actions bar
    ".monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container": "display: none !important;",
    // Center vertically the text editor and reduce its height
    "div.monaco-split-view2.horizontal.separator-border > div.split-view-container > div:nth-child(2) > div > div": "top: 25%; height: 50%",
    ".editor-actions": "display: none !important;",
    ".actions-container[aria-label='Editor actions'] .action-item .action-label:not([title='xxxxxxxx...'])": "display: none !important;",
    ".actions-container[aria-label='Panel actions'] .action-item .action-label:not([title='xxxxxxxx...'])": "display: none !important;",
    "[title*='Terminal']": "display: none !important;",
    "[title*='Panel']": "display: none !important;",
    "[title*='Launch Profile']": "display: none !important;",
    "[title*='zsh']": "display: none !important;",
    // ".monaco-workbench .part.panel .title": "display: none !important;",
    "canvas.minimap-decorations-layer": "display: none !important;",
    "#asvetliakov\\.vscode-neovim[aria-label=\"-- INSERT --\"]": "background-color: #98971a !important;",
    "#asvetliakov\\.vscode-neovim[aria-label=\"-- VISUAL --\"]": "background-color: #b16286 !important;",
    "#asvetliakov\\.vscode-neovim[aria-label=\"-- VISUAL LINE --\"]": "background-color: #c16286 !important;",
    "#asvetliakov\\.vscode-neovim[aria-label=\"-- VISUAL BLOCK --\"]": "background-color: #d16286 !important;",

  },

[matthewelmer]

This is a certified crikey moment... Honestly just remove that cr*p from the source code. No one uses it anyways.

[imthenachoman]

This is a certified crikey moment... Honestly just remove that cr*p from the source code. No one uses it anyways.

Remove what, specifically?

[alexn-s]

please add settings to disable this

[YutingYou]

This annoying toolbar is unfriendly to users who use a small screen.

Disappointed with the fact that this issue has existed for 4 years. 😔

[matthewelmer]

This is a certified crikey moment... Honestly just remove that cr*p from the source code. No one uses it anyways.

Remove what, specifically?

Remove whatever this is: #46403 (comment)

[matthewelmer]

I kinda feel bad for the vscode devs, since vscode is the singular good Microsoft product, and they prolly get a lotta heat from threads like this. If you're out there vscode devs, we appreciate your efforts! Sorry that you work for such a smelly company 😔

[imthenachoman]

This is a certified crikey moment... Honestly just remove that cr*p from the source code. No one uses it anyways.

Remove what, specifically?

Remove whatever this is: #46403 (comment)

I happen to use and love those buttons. I bet many others do. I do think there should be an option to remove it for users that don't use/need/want it.

[YutingYou]

@imthenachoman Those buttons can be replaced with keyboard shortcuts, agree with the idea to add an option to remove it though.

[imthenachoman]

@imthenachoman Those buttons can be replaced with keyboard shortcuts, agree with the idea to add an option to remove it though.

Not everyone can or does use keyboard shortcuts. Software must meet the needs of its users with special/disability needs. And sometimes, especially if your hand is already on the mouse, it's way faster to move the mouse and click then move your hand back to the keyboard to enter a shortcut.

[gjsjohnmurray]

Take a look at what #154804 has recently brought to Insiders.

[gimbo]

Not everyone can or does use keyboard shortcuts. Software must meet the needs of its users with special/disability needs. And sometimes, especially if your hand is already on the mouse, it's way faster to move the mouse and click then move your hand back to the keyboard to enter a shortcut.

That's probably why this issue is called "Allow hiding the buttons..." not "Remove entirely the buttons...", and as the original comment said:

It would be nice to have an option to hide them as almost everything in the UI already can be hidden.

[eduardmavliutov]

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;",
},

Thank you sooooo much!

Hope that the proper checkbox in the VS Code settings will appear soon 🤞

[gjsjohnmurray]

Take a look at what #154804 has recently brought to Insiders.

This will arrive in the next release, expected next week. See #161802 for info, and try it now on Insiders.

[beorn]

So it's supposed to be in 1.72.0 as per the release notes, but (on a mac at least) I'm unable to make it work! Right-clicking just triggers the action instead of opening the context menu for hiding. I tried disabling/uninstalling customizeUI as well to make sure it wasn't conflicting. Can someone confirm that it works?

[hansu]

I can only confirm that it works under Linux and Windows.

[beorn]

I found a way to workaround the issue on macOS, but it's clearly a bug: basically if I right-click two times without moving the mouse in-between each time, then I get the "Hide" menu the second time. Any moving of the mouse position means the next click will result in triggering the action instead.

[costincaraivan]

I'm going to resolve this, @beorn you should probably file that as a separate bug 😉