Allow hiding the buttons in the tab bar line and in the panel title bar #46403

costincaraivan · 2018-03-23T09:32:16Z

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 · 2018-05-31T23:40:03Z

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

kirkstrobeck · 2018-08-08T16:27:40Z

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

AshGrowem · 2018-08-09T01:06:05Z

*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 · 2018-08-10T12:10:45Z

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 · 2018-11-29T04:48:59Z

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

kube · 2018-12-03T13:20:41Z

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

usernamehw · 2018-12-03T13:29:33Z

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

kube · 2018-12-03T14:07:00Z

@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 · 2019-01-10T07:46:33Z

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 · 2019-02-01T19:58:16Z

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 · 2019-02-08T09:22:48Z

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

ronjouch · 2019-02-12T21:08:09Z

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

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

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

hesting15 · 2019-02-27T08:52:43Z

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 · 2019-03-11T05:52:07Z

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 · 2019-03-13T11:11:15Z

+1

JamesGreenaway · 2019-03-13T12:04:21Z

+1

curliq · 2019-03-13T12:15:13Z

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

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

ronjouch · 2019-03-13T23:12:32Z

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 · 2019-06-05T15:33:11Z

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

buncis · 2019-06-24T14:31:21Z

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 · 2019-07-20T05:43:40Z

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

craigcosmo · 2019-07-20T05:50:48Z

omer-g · 2022-03-30T17:05:49Z

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 · 2022-05-21T03:11:21Z

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 · 2022-06-01T17:21:09Z

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 · 2022-06-14T07:03:30Z

Need this !!!

albert-ying · 2022-06-19T00:09:32Z

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 · 2022-07-07T15:31:36Z

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

imthenachoman · 2022-07-07T15:34:19Z

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 · 2022-07-14T20:12:44Z

please add settings to disable this

YutingYou · 2022-07-18T03:24:17Z

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 · 2022-07-18T03:33:13Z

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 · 2022-07-18T03:36:51Z

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 · 2022-07-18T03:40:55Z

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 · 2022-07-18T03:48:06Z

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

imthenachoman · 2022-07-18T03:49:53Z

@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 · 2022-07-18T04:47:16Z

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

gimbo · 2022-07-18T11:20:43Z

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 · 2022-08-11T09:00:16Z

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

Install the Customize UI extension

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 · 2022-09-27T04:01:54Z

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 · 2022-10-07T22:38:42Z

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 · 2022-10-08T08:41:39Z

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

beorn · 2022-10-19T22:55:08Z

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 · 2022-12-02T11:55:04Z

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

vscodebot bot assigned bpasero Mar 23, 2018

bpasero added feature-request Request for new features or functionality layout General VS Code workbench layout issues labels Mar 23, 2018

bpasero removed their assignment Mar 23, 2018

lorensr mentioned this issue Oct 19, 2018

Explain top-right icons in User Interface microsoft/vscode-docs#2021

Closed

sbatten mentioned this issue Jan 22, 2019

Option to disable "Open changes"/"Split Editor Right" icons #66951

Closed

ronjouch mentioned this issue Feb 26, 2019

Support disabling / hiding editor actions (icons at the right of tab bar) gitkraken/vscode-gitlens#669

Closed

AshGrowem mentioned this issue Mar 16, 2019

Add user stylesheet #40764

Closed

julie777 mentioned this issue Mar 21, 2022

Tab bar display is not correctly updated when editors open and close #145518

Closed

Tyriar mentioned this issue Mar 22, 2022

No split icon on the panel toolbar when there are multiple terminals #145784

Closed

Z-E-D mentioned this issue Mar 30, 2022

Make the title bar as a customizable toolbar #146331

Closed

sbatten mentioned this issue Jun 1, 2022

Option to remove [Run; Split Editor; Close; More actions] from top right #150585

Closed

This comment was marked as spam.

Sign in to view

beorn mentioned this issue Oct 13, 2022

Test hiding menu items #161802

Closed

2 tasks

costincaraivan closed this as completed Dec 2, 2022

github-actions bot locked and limited conversation to collaborators Jan 17, 2023

Allow hiding the buttons in the tab bar line and in the panel title bar #46403

Allow hiding the buttons in the tab bar line and in the panel title bar #46403

Comments

costincaraivan commented Mar 23, 2018 • edited Loading

ewohlken commented May 31, 2018

kirkstrobeck commented Aug 8, 2018 • edited Loading

AshGrowem commented Aug 9, 2018 • edited Loading

Alternative Solution

Hide the whole thing

Hide action-items by title

Hide action-items by #

costincaraivan commented Aug 10, 2018 • edited Loading

jmcannon commented Nov 29, 2018

kube commented Dec 3, 2018

usernamehw commented Dec 3, 2018

kube commented Dec 3, 2018

edporteous commented Jan 10, 2019

jabacchetta commented Feb 1, 2019

jonathan-holm commented Feb 8, 2019

ronjouch commented Feb 12, 2019 • edited Loading

hesting15 commented Feb 27, 2019

bpartridge commented Mar 11, 2019 • edited Loading

curliq commented Mar 13, 2019

JamesGreenaway commented Mar 13, 2019

curliq commented Mar 13, 2019 • edited Loading

ronjouch commented Mar 13, 2019 • edited Loading

AbakumovAlexandr commented Jun 5, 2019 • edited Loading

buncis commented Jun 24, 2019 • edited Loading

craigcosmo commented Jul 20, 2019

craigcosmo commented Jul 20, 2019

omer-g commented Mar 30, 2022

imthenachoman commented May 21, 2022

twome commented Jun 1, 2022

yakamoz423 commented Jun 14, 2022

This comment was marked as spam.

albert-ying commented Jun 19, 2022

matthewelmer commented Jul 7, 2022

imthenachoman commented Jul 7, 2022

alexn-s commented Jul 14, 2022

YutingYou commented Jul 18, 2022

matthewelmer commented Jul 18, 2022

matthewelmer commented Jul 18, 2022

imthenachoman commented Jul 18, 2022

YutingYou commented Jul 18, 2022

imthenachoman commented Jul 18, 2022

gjsjohnmurray commented Jul 18, 2022

gimbo commented Jul 18, 2022

eduardmavliutov commented Aug 11, 2022

gjsjohnmurray commented Sep 27, 2022

beorn commented Oct 7, 2022 • edited Loading

hansu commented Oct 8, 2022

beorn commented Oct 19, 2022

costincaraivan commented Dec 2, 2022 • edited Loading

costincaraivan commented Mar 23, 2018 •

edited

Loading

kirkstrobeck commented Aug 8, 2018 •

edited

Loading

AshGrowem commented Aug 9, 2018 •

edited

Loading

Hide `action-items` by `title`

Hide `action-items` by #

costincaraivan commented Aug 10, 2018 •

edited

Loading

ronjouch commented Feb 12, 2019 •

edited

Loading

bpartridge commented Mar 11, 2019 •

edited

Loading

curliq commented Mar 13, 2019 •

edited

Loading

ronjouch commented Mar 13, 2019 •

edited

Loading

AbakumovAlexandr commented Jun 5, 2019 •

edited

Loading

buncis commented Jun 24, 2019 •

edited

Loading

beorn commented Oct 7, 2022 •

edited

Loading

costincaraivan commented Dec 2, 2022 •

edited

Loading