Skip to content

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

Closed
Closed
Allow hiding the buttons in the tab bar line and in the panel title bar#46403
Assignees
sbatten
Labels
feature-requestRequest for new features or functionalitylayoutGeneral VS Code workbench layout issuesuxUser experience issues
Milestone
Backlog

Description

@costincaraivan
costincaraivan
opened on Mar 23, 2018

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 😆

Activity

  1. vscodebot
    assigned
    Benjamin Pasero (bpasero)
    on Mar 23, 2018
  2. Benjamin Pasero (bpasero)
    added
    feature-requestRequest for new features or functionality
    layoutGeneral VS Code workbench layout issues
    on Mar 23, 2018
  3. Benjamin Pasero (bpasero)
    removed their assignment
    on Mar 23, 2018

  4. ewohlken commented on May 31, 2018

    @ewohlken
    Elvis Wohlken (ewohlken)
    on May 31, 2018

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

  5. kirkstrobeck commented on Aug 8, 2018

    @kirkstrobeck
    Kirk Strobeck (kirkstrobeck)
    on Aug 8, 2018

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

    screen shot 2018-08-08 at 09 27 17

  6. AshGrowem commented on Aug 9, 2018

    @AshGrowem
    Ash Growem (AshGrowem)
    on Aug 9, 2018

    *Updated for v1.32.1 Release

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

    screen shot 2018-08-13 at 7 09 10 pm

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

  7. costincaraivan commented on Aug 10, 2018

    @costincaraivan
    costincaraivan
    on Aug 10, 2018
    ContributorAuthor

    Yup, Kirk Strobeck (@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.

  8. jmcannon commented on Nov 29, 2018

    @jmcannon
    jmcannon
    on Nov 29, 2018

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

  9. kube commented on Dec 3, 2018

    @kube
    Chris Feijoo (kube)
    on Dec 3, 2018

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

  10. usernamehw commented on Dec 3, 2018

    @usernamehw
    Alexander (usernamehw)
    on Dec 3, 2018
    Contributor

    Chris Feijoo (@kube) https://marketplace.visualstudio.com/items?itemName=pnp.polacode

  11. kube commented on Dec 3, 2018

    @kube
    Chris Feijoo (kube)
    on Dec 3, 2018

    Alexander (@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:

    2018-12-03 14 55 10

  12. edporteous commented on Jan 10, 2019

    @edporteous
    Ed Porteous (edporteous)
    on Jan 10, 2019

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

  13. jabacchetta commented on Feb 1, 2019

    @jabacchetta
    Jason Bacchetta (jabacchetta)
    on Feb 1, 2019

    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.

  14. jonathan-holm commented on Feb 8, 2019

    @jonathan-holm
    Jonathan Holm (jonathan-holm)
    on Feb 8, 2019

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

  15. 92 remaining items

  16. matthewelmer commented on Jul 18, 2022

    @matthewelmer
    Matthew Elmer (matthewelmer)
    on Jul 18, 2022

    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)

  17. matthewelmer commented on Jul 18, 2022

    @matthewelmer
    Matthew Elmer (matthewelmer)
    on Jul 18, 2022

    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 😔

  18. imthenachoman commented on Jul 18, 2022

    @imthenachoman
    IMTheNachoMan (imthenachoman)
    on Jul 18, 2022

    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.

  19. YutingYou commented on Jul 18, 2022

    @YutingYou
    Yuting (Eugene) (YutingYou)
    on Jul 18, 2022

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

  20. imthenachoman commented on Jul 18, 2022

    @imthenachoman
    IMTheNachoMan (imthenachoman)
    on Jul 18, 2022

    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.

  21. gjsjohnmurray commented on Jul 18, 2022

    @gjsjohnmurray
    John Murray (gjsjohnmurray)
    on Jul 18, 2022
    Contributor

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

  22. gimbo commented on Jul 18, 2022

    @gimbo
    Andy Gimblett (gimbo)
    on Jul 18, 2022

    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.

  23. eduardmavliutov commented on Aug 11, 2022

    @eduardmavliutov
    Eduard Mavliutov (eduardmavliutov)
    on Aug 11, 2022

    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 🤞

  24. gjsjohnmurray commented on Sep 27, 2022

    @gjsjohnmurray
    John Murray (gjsjohnmurray)
    on Sep 27, 2022
    Contributor

    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.

  25. beorn commented on Oct 7, 2022

    @beorn
    Bjørn Stabell (beorn)
    on Oct 7, 2022

    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?

  26. hansu commented on Oct 8, 2022

    @hansu
    Hans Unzner (hansu)
    on Oct 8, 2022

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

  27. beorn commented on Oct 19, 2022

    @beorn
    Bjørn Stabell (beorn)
    on Oct 19, 2022

    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.

  28. costincaraivan commented on Dec 2, 2022

    @costincaraivan
    costincaraivan
    on Dec 2, 2022
    ContributorAuthor

    I'm going to resolve this, Bjørn Stabell (@beorn) you should probably file that as a separate bug 😉

  29. costincaraivan
    closed this as completedon Dec 2, 2022
  30. github-actions
    locked and limited conversation to collaborators on Jan 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

feature-requestRequest for new features or functionalitylayoutGeneral VS Code workbench layout issuesuxUser experience issues

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions