search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.38k stars 28.61k forks source link

Allow to hide editor title section entirely (tabs, breadcrumbs) #33607

Closed faustinoaq closed 10 months ago

faustinoaq commented 7 years ago

Steps to Reproduce:

  1. Configure settings.json
{
  "workbench.editor.showTabs": false
}
  1. Tabs are hidden but tabs section still fill the space.

Reproduces without extensions: Yes

Some captures:

  1. Face to face with Vim

screenshot_20170831_111904

  1. Proposed setting:
{
  "workbench.editor.showTabs": "none | one | all"
}

With "workbench.editor.showTabs": "none" then

screenshot_20170831_112820

fabiospampinato commented 7 years ago

I think you might achieve what you want today via a third party extension and some custom CSS.

faustinoaq commented 7 years ago

This extension modifies some VS Code files so use it at your own risk.

Yes, Custom CSS and JS Loader is useful and risky.

cpxPratik commented 6 years ago

Also is there any way to shorten height of tabs (file's tab headings), ? Tabs are noticeably tall and waste screen space. I can't find issue related to it. Surely, someone must have notice it.

fabiospampinato commented 6 years ago

@faustinoaq there's actually barely any risk involved with it. In case anything breaks a simple re-installation of VSC would fix it.

@cpxPratik Unless they fix https://github.com/Microsoft/vscode/issues/459 the only option remains to use the extension.

skyhirider commented 6 years ago

Has this been added yet? The more space for actual text the better.

TwatBurglar commented 6 years ago

Has this been added yet? The more space for actual text the better.

thany commented 6 years ago

Second that. The tabs are useless to me. They waste valuable screen real estate. The open files show in the side bar perfectly fine.

charlesferreira commented 6 years ago

Still waiting for this feature. I really love other editor's ability to go full screen and zero bars/tabs/menus distraction. I can achieve that in like Jetbrains' IDEs and it's totally awesome.

Please, guys. I'm loving VS Code, but the tab bar, beyond not being able to hide them, is too large!

well1791 commented 5 years ago

:wave: Hi everyone!

:thinking: I have some (silly :sweat_smile:) workaround if you just work with one project all day (and you don't want to bother yourself with Custom CSS and JS Loader plugin).

  1. Toggle Developer Tools
  2. Inspect the row
  3. Delete the element :rofl:

I haven't seen any errors yet :man_shrugging: but (as you have already guessed), it only works during your current session.

Anyway, I just hope the VS Code team still consider this feature-request :pray:

DimitarNestorov commented 5 years ago

@well1791 don't you have an empty space between your code and terminal? Like so: image

Not really a workaround, you're not getting that screen real estate back

well1791 commented 5 years ago

@dimitarnestorov good catch! :clap:

Didn't noticed that! However, it doesn't bother me as I don't look at that part too often.

fuzihaofzh commented 5 years ago

You can use the plugin "Custom CSS & JS" and use the following code

.title.show-file-icons {
    display: none !important;
}
thany commented 5 years ago

That's not really a solution. The extension needs permission for VSCode to change itself, which is frankly terrifying. This needs a proper fix.

therealpeterhua commented 5 years ago

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

therealpeterhua commented 5 years ago

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

therealpeterhua commented 5 years ago

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

therealpeterhua commented 5 years ago

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

isti115 commented 5 years ago

Has anyone figured out how to actually make that space usable after hiding the tab div? I couldn't make it fill the extra height using just CSS, so I guess that something is calculated in JS that would need to be changed as well.

isti115 commented 5 years ago

Wow, I've become so desperate over the last few days that I finally managed to write a script that pushes the window off the top of the screen, thus hiding the (to me useless) title bar and tab bar! All the other elements (Activity Bar, Status Bar and maybe minimap, but I like to keep that one around sometimes) can be hidden in VSCode, so I guess that this is solved for me as long as the window is at the top of the screen. :)

For reference here is the AutoHotKey code that worked for me, but you could call the DLL from any of your favorite languages.

SetTitleMatchMode, 2
WinTitle := "Visual Studio Code"

; --- WinMove version

; WinMove, %WinTitle%, , 0, -64, 1280, 1504

; -- DLL version

WinGet, id, , %WinTitle%
Result := DllCall("SetWindowPos", "uint", id, "uint", HWND_TOP, "Int", 0, "Int", -64, "Int", 1280, "Int", 1504, "UInt", 0x400)

ps.: The 0x400 corresponds to the SWP_NOSENDCHANGING flag that prevents the window from realizing that it has been resized and jumping back on screen.

jinyaozhuzhu commented 5 years ago

👋 Hi everyone!

🤔 I have some (silly 😅) workaround if you just work with one project all day (and you don't want to bother yourself with Custom CSS and JS Loader plugin).

  1. Toggle Developer Tools
  2. Inspect the row
  3. Delete the element 🤣

I haven't seen any errors yet 🤷‍♂️ but (as you have already guessed), it only works during your current session.

Anyway, I just hope the VS Code team still consider this feature-request 🙏 are you doubi（逗比）？

liquidvisual commented 5 years ago

This seems like such a basic feature. Why has it not been implemented yet?

BjarkeCK commented 5 years ago

Would love this! And then possibly an option to only show tabs if multiple files are open?

If I could configure vscode, to always open files in a new window (no tabs), and then only add tabs if I drag in a file to an existing window or open a folder/project. That would be amazing.

wangchou commented 5 years ago

I tried Custom CSS and JS Loader extension with 

.title.show-file-icons {
    display: none !important;
}

(vscode version: 1.35.1)

Then, I found the tab bar is gone but the editor area size didn't change. The editor area only moved up 35px... and generated new blank space at bottom.

Any other workaround?

sepehrhosseini commented 5 years ago

This os how I removed the blank space in the bottom of the screen:

.title.show-file-icons {
     display: none !important;
 }

 .editor-container,
 .editor-instance > div,
 .monaco-editor.mac,
 .overflow-guard,
 .editor-scrollable {
     height: 100% !important;
 }
TamasBarta commented 5 years ago

@sepehrHosseini I tried something similar, but that caused the last line to be visible, which disappears when the last pixel of it would be covered by the status bar. Does your solution solve this?

wangchou commented 5 years ago

@sepehrHosseini I tried the css. On my mac (vscode 1.35.1), the empty space at bottom just didn't go away... 😢

I also found there is a pull request for hiding tabs. (https://github.com/microsoft/vscode/pull/70140)

Currently, I use smaller zoom level, bigger tree.indent and bigger font-size to make tabs smaller.

sepehrhosseini commented 5 years ago

@TamasBarta No actually, I have the same problem, but it's better than having a 30px useless tab bar 😊

@wangchou That's weird, I've selected every element to the editor itself, don't know why it's not working 🤔 , can you check it with VSCode Developer tools (Option+CMD+I) to see that which element is causing this behavior? Thanks for sharing the PR 👍

wangchou commented 5 years ago

@sepehrHosseini Sorry, I was wrong. It did increase editor area slightly. But the empty space is still there. Not sure which setting / extension causes this... It's too complex, so I'm trying live a peaceful life with tabs bar, now. 😿 Thanks~

with css off スクリーンショット 0001-06-20 0 03 35

with css on スクリーンショット 0001-06-20 0 03 24

sepehrhosseini commented 5 years ago

@wangchou Great 🎉 Yes, it appears that when you apply height: 100% on these elements the last line gets disappeared when it's near the bottom of the view.

saivan commented 4 years ago

I have to chime in here too and say please. The header area is distracting, and it doesn't really serve a huge purpose for me, I can always just bring back the tab bar if I need that information

ghost commented 4 years ago

Seems like an interesting idea, I'd definitely try this one out.

stevenvachon commented 4 years ago

Do it.

toger5 commented 4 years ago

This would be really great to have!

fr3fou commented 4 years ago

any news regarding this? it's been 2 years

mokhosh commented 4 years ago

@sepehrHosseini this one breaks settings search bar, and removing it doesn't seem to have any negative effect:

.monaco-editor.mac
roboslone commented 4 years ago

Oh please, do it! Tab bar is even visible in Zen mode :(

stevenvachon commented 4 years ago

This is one of the few things keeping me from seriously contemplating a switch from Sublime Text 3. 🤷

tysiachnyi commented 4 years ago

so what?

ZayRTun commented 4 years ago

any updates? I tried the css plugin to hide it but the plugin is not working in the latest vs code version. this feature would be really nice.

ssmooncoder commented 3 years ago

chrome macOS has the option to hide the tab toolbar, yet this hasn't been implemented for 4 years now

stpoa commented 3 years ago

Any updates? 4 years of waiting, and still nothing

eimfach commented 3 years ago

Fork ?

tejasvi commented 3 years ago

The empty space at the bottom is due to limited number of rendered lines. Bumping this limit by 3-4 lines will solve the issue.

JulienBe commented 3 years ago

Jumping in the bandwagon, I would love this too ;)

pacifio commented 2 years ago

pleaseeeeee

OceanBelongsToMe commented 2 years ago

pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

OceanBelongsToMe commented 2 years ago

@tejasvi can you tell me your solution？

Aqa-Ib commented 2 years ago

At least let the user hide it on Zen Mode. Thanks

laralove143 commented 2 years ago

better solution, have a pixel number setting for tab size instead of just normal/large.. this way we can just put 0 to disable it, this is how other sizes are handled anyway like the scrollbar, anything limiting this?

SichangHe commented 2 years ago

Working workaround (hack)

I just spent a few hours and final have a working configuration using Custom CSS and JS Loader. Disclaimer: this configuration is licensed under an MIT license (don't blame me if you get hacked! 😄)

I'll paste it here as well:

/* # Hide tab bar and float utility buttons to the right. */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.title.tabs.show-file-icons {
    float: right;
    z-index: 1;
}

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.title.tabs.show-file-icons>div.tabs-and-actions-container>div.monaco-scrollable-element>div.tabs-container {
    display: none;
}

/* ## Force the editor area to use full height. */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs>div.lines-content.monaco-editor-background>div.view-lines.monaco-mouse-cursor-text {
    height: 100% !important;
}

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard {
    height: 100% !important;
    position: absolute;
}

/* # Show the bottom bar even if it is toggled off. */
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nosidebar.nopanel.noauxiliarybar.maximized.vs.nostatusbar>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(4),
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nopanel.noauxiliarybar.nostatusbar.maximized.vs>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(4) {
    bottom: 0px;
    height: unset !important;
    top: unset !important;
    display: unset;
}

#workbench\.parts\.statusbar {
    height: unset !important;
}

/* ## Show the horizontal scrollbar */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs>div.visible.scrollbar.horizontal,
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nopanel.noauxiliarybar.maximized.vs.nostatusbar.nosidebar>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(3)>div>div>div.monaco-scrollable-element>div.visible.scrollbar {
    bottom: 12px !important;
}

If it does not work for you, perhaps you need to delete some classes in the code above (maybe your vscode does not have those classes so the elements are not correctly selected).

Hopefully, this is helpful! I got 2 more lines (had 34) in my vscode 🎉 Please give suggestions if improvements can be made. Please give proper credit if you share.

Steven Hé (Sīchàng)