Pinned tabs: show them in a secondary tab row above others

[bpasero]

Refs: #12622

Pinned tabs by default will show to the left of other tabs. An alternative presentation is to do what Visual Studio does and have a secondary tab row above the others:

vs what we do today:

[yannlairdc]

Here's why I would like to get the pinned tab VS style:

I use pinned tab has my main work focus. I usually have between 2 to 5 tabs pinned and all the tab noise of opening / looking / searching / inspecting is kept out of it. So when I find what I'm looking for, I can instantly go back to the focused tabs and they are clearly delimited on their own row.

It's a huge productivity booster for me to be able to organise tab like that.

[bpasero]

@yannlairdc pinned tabs in VSCode are always the first tabs of the row and never scroll out of view, does that still require a secondary row then?

[yannlairdc]

@bpasero It's all about visibility and speed of access to what you're looking for. I will say that having this improvement without the other feature to display the full name of the pinned files reduces the value of that one alone.

When I'm looking for something or iterating through references in the code, I can go back to where I was at the glance of an eye. I know it's going to be on the first row, I know it's not going to move whatever I do and I know which tab I need to go back to with the name displayed.

It allows me in my head to have the first row as my area of focus, while everything in the second row is just "noise" that I disregard.

Having everything pinned in the first rows without the name display is a nice addition, but not quite there for me.
The reason it works well with chrome tabs is because the content of those pinned tab never changes and it's easy to recognise the icon of the website in case of doubt. Witt VS Code, the files pinned changes regularly and most of the time they are of the same type.

Having 7 pinned tabs with a C# icon on them would still force me to iterate on each tab until I find back the tab I'm interested in, while pushing to the right all the others opened tab.

[bpasero]

@yannlairdc yeah understood, assume you have a setting to show the name of a tab even when pinned. Would that be sufficient to not add another row of tabs?

[yannlairdc]

@bpasero That would be another good step in the right direction for sure, but it wouldn't solve all the problems. If you have 6 or 7 pinned tabs with their full names displayed, their's a high chance that it will occupy most of the screen and left out the non pinned tabs.

By the way, I just realised something by looking at both VS and Code and the tabs in Code are much bigger than in VS, which makes the above problems more critical (see below).

If I have 6 pinned tabs, it would occupy most of the space opened on my 27" screen. Is there any option to be able to reduce the size? Or put them on several rows maybe?

[bpasero]

@yannlairdc you might want to check out "workbench.editor.tabSizing": "shrink" setting which will ensure tabs start to shrink to a minimum of 80px when space is limited.

To be clear: I would only suggest a solution that makes pinned tabs shrink too so that you can have many pinned tabs side by side without starting to scroll. E.g. one idea is to make every pinned tab shrink as if "workbench.editor.tabSizing": "shrink" as configured.

[yannlairdc]

@bpasero If we can get the pinned tab on a separate row, this problem almost solves itself.

[bpasero]

I am trying to find a design alternative that does not require a second row of tabs which I personally find very heavy visually.

[yannlairdc]

I understand that not everyone would like a second row, but that's what I'm looking for (and that's the title of this enhancement request ^^).

I'm not asking for it to be the default behavior or to replace current implementation, I would just like the ability to configure it this way for me and other likeminded people (lot of them requested that specific behavior to be implemented on the original pinned tabs topic).

[GreenAirplane]

I 100% agree with @yannlairdc. I have exactly the same use case. In most cases, I have 3-5 pinned tabs and a bunch of tabs on the 2nd row in VS. The ability to have full names for the pinned tabs is crucial as well because e.g. if I'm working on some backend feature then all or most of my files will be *.cs.

One more thing, with the ability to pin tabs, it would be nice to have the option to "Close all but pinned" tabs.

[bpasero]

The ability to have full names for the pinned tabs is crucial

Which #98161 would try to cover too.

One more thing, with the ability to pin tabs, it would be nice to have the option to "Close all but pinned" tabs.

That should already work today, pinned tabs should stay open for mass closing commands.

[ChuckkNorris]

Not intending to "beat the drums", but I definitely believe that having pinned tabs on a separate row will be more beneficial than "shrunk" tabs on the same row as the rest of the tabs.

From a functional perspective, we want to be able to:

• Read the whole file name (showing an icon doesn't help when all the file types we're working with are the same)
• Quickly determine which tabs are pinned and which ones are not (which is challenging when all the tabs on are the same line)

I understand the desire to come up with a less "heavy" solution, but I'm not quite sure what that would look like without sacrificing some functionality.

[jeffpedneau]

Not sure what "heavy" is, but if I want to pin a tab above the others, I'm opting in on it having a bigger visual footprint (if that's what you meant). Angular file names tend to be enormously long, and I never get more than about 4 across, and I hate the scrolling -- would much rather than wrap. I'm always hunting, so using more rows is fine with me.

I'd also have more room if I could drag some of them out to separate windows....or the Explorer off.

[dean1010]

How about having all pinned tabs in one tab with a drop down on hover (or click)?

• [ Pinned ]
  • [ file1 ]
  • [ file2 ]
  • [ etc ]

[GorvGoyl]

Just so you know there's also a SO question for multirow tabs (50+ upvotes) so that does kind of provide validation for demand. https://stackoverflow.com/questions/42462777/multirow-tabs-for-vscode.
There's also mention of custom CSS hack to get multirow tabs meanwhile.

[jeffpedneau]

dean1010's idea isn't bad -- anything that conserves horizontal space and stacks potentially wide names on top of each other without truncation is better...

[marko-hologram]

If I had to pick, I would probably choose this secondary tab row option since you can easily see all open tabs and their names at a glance. Having them just showing an icon it's hard to actually see what you have pinned if you have multiple files pinned that have the same extension.

I'm just wondering what should happen if you pin a bunch of tabs and they span outside the editor view, should they scroll as current tabs in VS Code should they wrap? As is the case with Visual Studio for example.
Also, should there be a keyboard shortcut to toggle between pinned tabs? Like CTRL + PageUp/PageDown that's available now for open editors.

Ideally, it would be great if you could implement secondary tab row option AND this one (#98161) and then offer the user to choose first one OR the second one. I'm just not sure how much resources would that require in order to be implemented. VS Code always seems to have a bunch of options for everything, so it would be in VS Code "spirit" to offer multiple configurations for this issue, but I understand it might not be viable to do so.

How about having all pinned tabs in one tab with a drop down on hover (or click)?

* [ Pinned ]
  
  * [ file1 ]
  * [ file2 ]
  * [ etc   ]

Hmm this looks like a decent compromise to me. It doesn't add multiple rows of tabs on top (as it looks that is not preferred by the devs) and it can still display file names when you open it. I would also love a keyboard shortcut that would allow you to open/close it so you can quickly inspect what you have pinned without having to move your hands from the keyboard.

Only problem I see with this approach is if you pin 10-15 files and the list becomes tall, so probably limiting the height and introducing scroll would resolve this, but then you wouldn't be able to see all pinned tabs at once.

[DavidZidar]

Seeing how similar the pinned tabs are to pinned browser tabs I would like to add that I think they are completely different animals.

Pinned browser tabs are often from different sites with visually distinct icons and they are often open long term, but they stay mostly in the background.

Pinned code tabs are often of the same file type so the icons are all the same, they are open short term, but are the most important tabs open at the moment and needs to be easily available.

Having pinned code tabs on a separate row with full titles like in Visual Studio is very helpful.

[moonflame]

Current pinned tab style may also cause misunderstanding frequently, like this(I pinned a JS file):

Besides this reason, I prefer the 2-row style.

I also agree with @yannlairdc that the size of tabs in VS Code is too large, either in width or height. Hope there are options to modify the tab size more flexibly.

[theopenroad]

Another vote for pinned tabs having their own row, possibly with a different background color too. When I'm working in a large project with many files of the same type, I end up having anywhere from 4-8 files that I need quick access to. I need to be able to see the file names, not just the icon.

Having 2 rows would be extremely helpful to my workflow.

The visual studio example looks great.

[chibibiscuit]

I would love for Pinned Tabs to have their own row, but I would also like to see them get some UI treatment in the File Explorer pane. Giving them either their own group or section, or a pinned indicator could alleviate the frustration, at least in a workaround fashion.

[lendup-erikschlegel]

Having pinned tabs that exist on a separate row is a fantastic productivity booster, but the brownie points version of this is to support a dynamic number of rows. IMO pinning a tab should not automatically create a separate row. But when a user drags a tab (pinned or not) up or down beyond some threshold the IDE would spawn a new row onto which the user can drop said pin. This would then allow for multiple rows of pins. Perhaps I want a row for configs, another for base classes, another for utility classes, etc. I've looked for this feature in every IDE ever, but have never found it.

[vicmarcal]

Not sure about the secondary row, it steals some space and doesn't attack the source of the issue: as soon as you start working with files from one or other project, you end with tons of files opened.

Now that you can pin a Tab, probably is time to have a solution which grows from Dumb to Smarter:

Dumb Tab Row

The Dumb Tab row just shows the Tabs related to the active repo/folder in Workspace. If you change to a file from a different repo/folder, files unrelated to the new folder are hidden but the pinned ones.

Ie: if I am working in the Frontend Repo, with F1, F2, F3 files/tabs opened and I am going to open the file B1 from my Backend Repo I can pin the, ie, F1 tab, before clicking in the B1 file.
As soon as I open/click the B1 file the F2,F3 tabs are hidden but not the F1 one since it was pinned.

I can keep working in my Backend project opening files, B2,B3,B4, B5. But as soon as I click in the F1 tab/file, the F2, F3 files which were hidden are revealed and B1,B2,B3,B4,B5 are now hidden.

Tabs are not closed but hidden, so it is fast to swap from project F to B while keeping the Tab bar tidy.

Also it will help us with two scenarios I usually find:

1 - Workspace with unrelated projects.

• Sometimes I have 4 landing pages/projects totally unrelated. But I have them in the same Workspace. I start working in one of them, opening dozen of files(html, css, js..etc). I finish my work there so I click in a file of a different project, automatically the Dumb Tab Row would hide the Tabs of the previous project, cleaning my Tabs row. Since they are unrelated, I dont need them at all. But Ey! I suddenly realize I missed a detail in the previous project. I have just to click in any file in the Explorer window of the previous project, and then the hidden Tabs are revealed and the current one are hidden.

2 - Workspace with related project. Typical Front-Back.
I am working in a GET controller in the B1 file, implementing a middleware B2, a router B3, etc...
Now I decide to swap to the frontend file F1 which is calling the controller in B1. I would be pinning B1 tab, to not lose it from view when opening F1. As soon as I start editing F1, the rest of B files, but B1 which is pinned, are hidden, making room and reducing noise from my frontend work (as I will start open F2, F3,F4 files...). However if I suddenly detect a problem in my B code not sitting at B1, as soon as I click in the B1 file, B2, B3 and the B files I was using are shown..and F are hidden, helping me to swap fast from Front to Back.

This Dumb behavior would help a lot because it kills tons of unneeded files/leftovers but at the same time helps to swap easily from project to project.

I usually work with 3 projects at the same time, Front Web, Front Mobile, Backend...so the mess is 3x and Dumb Tab Row will help a lot.

Smarter Tab Row

• It would work pretty similar to the Dumb one, however it doesnt hide the last files touched of the previous project. So, if I have B1,B2,B3,B4,B5 tabs opened of my Background project they would be hidden as soon as I click in a file from my Frontend project unless 1)the tab was recently touched, 2)the tab was recently saved, or 3)the tab is pinned.
  This way when swapping from project to project, the Smarter Tab does not hide latest dirty or saved files, since the chances they are related to my new work is pretty high (or higher at least that those untouched for days but they are still hanging around).

TLTR: Just show related Files to the Project, unless they are pinned or recently touched/saved. It helps when swapping from project to project in the same Workspace by hidding unneeded files.

[lendup-erikschlegel]

I usually work with 3 projects at the same time, Front Web, Front Mobile, Backend...so the mess is 3x and Dumb Tab Row will help a lot.

A humble suggestion, @vicmarcal, which, it seems, could side-step your raised issues while also offering other benefits to your workflow: what if you opened three instances of VSCode (one for each project). This, presumably, would also help you with things like file searches, debugging, commits, console commands, etc as each IDE instance is constrained to the particular project's workspace. After a reboot or closing your VSCode instances, you can easily get back to work by popping up a console, cd'ing to a project's folder, and running 'code .'. Using this setup, you'll find that each project maintains its own tab set, previously opened files, etc.

I've recently adopted this strategy and have found it works a lot better for me than one instance with multiple open projects.

[slprogrp]

@pavlexander I have found a problem where, when I have multiple rows of tabs, pinned or unpinned, the horizontal scroll bar for the code window no longer shows when I mouse over the area where it should be, as it normally does. If I close enough tabs to get back to a single row, then the horizontal scroll for the code window shows again when I mouse over the area where it should be. Any ideas on how to solve this one, we are sooooo close.

[IceSentry]

Since we still have to do this ourselves in 2022 and I prefer having the style directly in settings.json instead of a separate file. Here's the fix formatted in json:

"customizeUI.stylesheet": {
	// Hack to have pinned tab on another row <https://github.com/microsoft/vscode/issues/98160>
    ".title.tabs": "height: auto !important;",
    ".title.tabs .tabs-and-actions-container": "height: auto !important;",
    ".title.tabs .tabs-and-actions-container .monaco-scrollable-element": "height: auto !important;",
    ".title.tabs .tabs-container": "display: flex !important; flex-wrap: wrap !important; height: auto !important; flex-direction: row !important; justify-content: flex-start !important; align-content: flex-start !important;",
    ".title.tabs .tabs-container::before": "content: \"\" !important; width: 100% !important; order: 1 !important;",
    ".title.tabs .tabs-container::after": "content: \"\" !important; width: 100% !important; order: 1 !important;",
    ".title.tabs .tabs-container .tab": "display: flex !important;",
    ".title.tabs .tabs-container .tab:not(.sticky)": "order: 1 !important;",
    ".title.tabs .tabs-container .tab.last-in-row:not(:last-child)": "flex-grow: 0 !important;"
}

[learn-more]

Just thought I'd drop an update to the above CSS by @pavlexander to fix an issue that would break the integrated terminal

An alternate way of using this is installing https://windhawk.net/, with the VSCode tweaker extension

[jez9999]

Hmm, pinned tabs is implemented but pinning on a seperate row isn't yet? Grr... this would be very useful.

[jez9999]

Since we still have to do this ourselves in 2022 and I prefer having the style directly in settings.json instead of a separate file. Here's the fix formatted in json:

"customizeUI.stylesheet": {
	// Hack to have pinned tab on another row <https://github.com/microsoft/vscode/issues/98160>
    ".title.tabs": "height: auto !important;",
    ".title.tabs .tabs-and-actions-container": "height: auto !important;",
    ".title.tabs .tabs-and-actions-container .monaco-scrollable-element": "height: auto !important;",
    ".title.tabs .tabs-container": "display: flex !important; flex-wrap: wrap !important; height: auto !important; flex-direction: row !important; justify-content: flex-start !important; align-content: flex-start !important;",
    ".title.tabs .tabs-container::before": "content: \"\" !important; width: 100% !important; order: 1 !important;",
    ".title.tabs .tabs-container::after": "content: \"\" !important; width: 100% !important; order: 1 !important;",
    ".title.tabs .tabs-container .tab": "display: flex !important;",
    ".title.tabs .tabs-container .tab:not(.sticky)": "order: 1 !important;",
    ".title.tabs .tabs-container .tab.last-in-row:not(:last-child)": "flex-grow: 0 !important;"
}

For some reason this, and the other CSS hacks to get the pinned tabs in a new row, cause my horizontal scrollbar along the bottom of editors to disappear. :-(

[lonix1]

The css hack also forces the secondary tab row onto multiple rows, so you could have three or more rows. Even with "workbench.editor.wrapTabs": false.

[prasad-kamat]

Coming from Visual Studio, would REALLY love to see this in Code!

[kodi]

Coming from IntelliJ, would REALLY love to see this in Code!

[BenjaBobs]

This is probably the most significant usability improvement that can be made in the realm of code navigation.
I feel the need for this feature scales linearly with the number of files in the project.

[JordanHoffman]

Looking at the above Iteration Plan for September 2023:
This puppy is actually planned to get implemented this month??? I haven't been this excited for something since the Avengers Endgame movie came out. Haven't waited this long for something since the last Avatar movie came out.

[benibenj]

In todays insider we released a new setting for pinned editor tabs: workbench.editor.pinnedTabsOnSeparateRow
This will display all your pinned tabs on a tab bar above your regular tabs.
Please give it a try and let me know what you think.

You can give our preview releases a try from: https://code.visualstudio.com/insiders/

[DavidZidar]

Works great! Pinned tabs will finally be useful, thank you!

[abhijit-chikane]

this is fantastic🎉
but is there a way I can pin multiple tabs simultaneously?

[bpasero]

Multi-select of tabs is covered in: #119327

[abhijit-chikane]

In insider I couldn't access the tab
Tabs are half hidden
though I haven't turn on this setting
but I thought could be this that might have affect the tabs in certain cases or it could be existing issue, not sure

steps to reproduce.
I just open the remote repository and tabs are half hidden.
Reloading the window fixes the issue but I have seen this few times.

[bpasero]

Can you create an issue? Thanks!

[ChuckkNorris]

8 years later and it's finally here! Hurrah!
Better late than never 😄 Thank you!

[prasad-kamat]

Amazing, so glad to see this !! Any timeline on when this gets GA'ed into the stable version of Code ?

[gjsjohnmurray]

@prasad-kamat expect it before the end of next week. See #193938

[JakeShirley]

Just got this today in an update. Thanks so all for this journey.

[welcometochristown]

Yaayyyy. Its everything I dreamed it would be!

I can't believe how long the journey has been but we finally made it! :)