Vscode: Allow tabs to wrap to multi-line

[illz]

I almost always have more tabs open than fit in the horizontal space provided. I have seen the thread on shrinking tabs to try to fit them in one line #15048, and I've also seen this closed feature request for what I'm asking for - #32836. That issue was closed saying there would be no changes for 6-12 months, and it has been around 15 months now so wanted to reopen discussion.

JetBrains IDEs added this a few years ago - simple config option to wrap open tabs to multiple lines rather than extending indefinitely horizontally, forcing a horizontal scroll or use of the Open Editors section in the left bar. While the Open Editors block is a nice idea, I've spent so many years switching via tabs (and continue to do so in all my other editors) that I'm requesting a better solution.

[hugodichon]

For sure that is a really basic and essential functionality to have. Following up on that for a while now.

[joaohonorato]

Can this be done any time soon? I just love this feature, it awe me to not see it in vscode.

Up discussion!

[neil-119]

Would love to have this as well. We use VS Code mostly for Angular work and we typically have multiple components (TS, HTML, CSS) and services (TS) open at a time, and we like to group relevant tabs together at the top.

[helloli]

Although we can use 'Open Editors' or 'Ctrl + Tab' instead, many of us would appreciate it very much if multi-line tabs were supported. Please carefully consider it.

[akira90]

Has there been any updates regarding this feature? How difficult would it be to create an extension that does this and publish it to the market place ?

[im-richard]

Seems like really simple functionality which is almost a must. I've debated utilizing other apps just for this feature alone because at any given time, I can have roughly 20-30 tabs open, and everything on a single row is just annoying at times.

Really hope this is looked at as it's literally the only pet-peeve I currently have with vscode.

[hugodichon]

Come on guys... At least provide some feedback to people expecting that feature one day.
If I had enough time I would have liked to investigate and submit a pull request, unfortunately I don't have that luxury.
I would like to add up that Microsoft main development product has that feature built-in since a bunch of years already, it's called Visual Studio.

[akira90]

I've gave up with VSCODE - this feature should've been built in, even Eclipse has it. I'm using IntelliJ now as a lot of things come out of the box.

[lucaszanella]

PLEASE, THIS FEATURE IS EXTREMELY USEFUL

Look at my firefox: https://imgur.com/a/CKOGGMq

I can't live without miltiline tabs

It's VERY annoying to search for the opened tabs by scrolling. I'm almost giving up on vscode because of this.

[stevenlaidlaw]

I've implemented a stop-gap solution using VSCode Custom CSS. Just create your own custom CSS file in your system and fill it with the following:

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

Then just point the plugin at your custom file in your settings.json like so:

    "vscode_custom_css.imports": [
        "file:///home/username/path/to/dir/custom.css"
    ],
    "vscode_custom_css.policy": true,

Then hit ctrl-shift-p and run "Reload custom CSS and JS"

This has solved the problem for me until they implement an in-app solution.

[manustays]

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

@stevenlaidlaw, your solution worked for me, thanks! How do you figure out the classes used by vscode?

---

EDIT:

As suggested by @stevenlaidlaw below, VSCode has an option in action menu (Ctrl+Shift+P) to Toggle Developer Tools.

I ended up downloading the source code to find the classes for individual tabs and added the following CSS to make the tabs thinner (so that they take less vertical space):

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
    height: 25px;
    padding-left:4px;
    font-size:0.8em;    /* size of text and icon */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
    font-size:inherit !important;    /* apply new file-size to tab label */
}

/* below CSS for the close button on tab */

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
    width:20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
    height: 12px;
    width: 12px;
    background-size: 12px;
}

[stevenlaidlaw]

@manustays you can toggle the chrome dev tools via the action menu (ctrl+shift+P)

[akira90]

After applying the custom.css I got an error stating "Your Code installation appears to be corrupt. Please reinstall".

Has anyone experienced something similar ?

[stevenlaidlaw]

@akira90 As detailed in the plugin (https://github.com/be5invis/vscode-custom-css):

If Code complains about that it is corrupted, simply click “Don't show again”

[akira90]

@stevenlaidlaw

It keeps appearing again and again, after closing it appears again after 30 seconds. Then cmd + q is disabled as you can't close vscode because of the shortcut cannot be found, checked keymaps - it's still there.

This issue appeared after I've installed the Custom CSS and JS extension, I had to completely reinstall vscode.

[lucaszanella]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Please Microsoft, provide this by default

[Manachi]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

[richardnnn]

+1 Surprised this is not yet supported as of 2019

[kenjione]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

@Manachi,

If you look up you can find @stevenlaidlaw's post how he has solved the issue. You need to install vscode-custom-css extension and copy the stylesheet which you can find in his (or @manustays's) comment.

[rmolinamir]

Look at my firefox: https://imgur.com/a/CKOGGMq

It would be amazing for vscode to achieve this, was about to open an issue until I found this :)

Has there been any announcements regarding this feature?

[sebaranowski]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Agree. A new settings field for an additional css file or raw styles string for overwrites would help too. Atom has this too and I love it - this makes the DevTools inside vscode so much more useful..

[josineiaraujo]

This is an option I wish I could use!

[rajnisheu]

Its unbelievable there is no mutli line tab support. The Open Editors list is so irritating to the eye jumping up and done when files are opened and closed.

+1 for the issue

[dhex]

This is not just nice-to-have. It is a must. Waiting.. for official news ...

[hoodist]

Multi-line-tabs is very useful feature for editors.
'Open Editors Block' is good idea but it's not enough for us.

I hope that Microsoft adding to this feature.

[nausicaasnow]

Definitely a must have feature.

[iki]

EDIT: Updated for latest VS Code.

I combined @stevenlaidlaw and @manustays styles above, but wasn't able to avoid hiding the upper row of tabs under top app bar when working in VS Code for longer time (reload always helped). So, instead of allowing tabs to wrap, I'm letting them to shrink on single line:

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab {
  padding-left: 1px;
  flex-shrink: 1;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab.sizing-fit .monaco-icon-label {
  width: 2em;
  overflow: visible;
  text-overflow: clip;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-description-container {
  width: 2em;
  overflow: visible;
  text-overflow: clip;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab .sizing-fit .monaco-icon-label:before {
  padding: 0;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close {
  width: 12px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close .action-item {
  height: 35px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close .action-label {
  height: 12px;
  width: 12px;
  background-size: 12px;
  margin-right: 1px
}

[pzuraq]

So I'm probably in a very small minority here, but I find horizontal tab bars to be very difficult to work with, especially when I have lots of code open in a large codebase and am jumping around a lot 😅

A couple of times now, I've hacked together a vertical tab bar to get around this, it works much better for me personally:

VSCode doesn't support this type of UI hacking at all (the solution is pretty terrible), and I imagine it would be a large lift to make it so extensions could add arbitrary panels and views like this, but it would also be really nice.

One of the things that is so great about a browser based editor is that it really is pretty hackable, and it mean we can experiment with new UIs and better DX in ways that would never have been possible in something like IntelliJ or Visual Studio directly. I know I've had lots of random ideas for utilities and widgets that would make life easier, would be cool to be able to play around more with the layout and such.

[Lady-Natalya]

Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

Horizontal scrolling the tab bar is horrible. And the bar itself is by default hidden so I have to hover where I think it might be and await for it to appear. And it's so thin, I tried making it thicker so it would be easier to click on, but that didn't work either.

I just don't understand, do y'all want a bad UI for this product? Please help us.

[lucaszanella]

commenting again here: PLEASE, Microsoft, add this feature. It's a PAIN to do horizontal scrolling. Mouses weren't made for horizontal scrolling.

Enviado via ProtonMail móvel

-------- Mensagem Original --------
Ativo 15 de nov de 2019 17:23, Natalya escreveu:

Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

Horizontal scrolling the tab bar is horrible. And the bar itself is by default hidden so I have to hover where I think it might be and await for it to appear. And it's so thin, I tried making it thicker so it would be easier to click on, but that didn't work either.

I just don't understand, do y'all want a bad UI for this product? Please help us.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[ciltocruz]

Netbeans has the option to create a bar for each project. VScode does not have "projects" but VScode does have Folders within the workspace ... It would be nice if a bar of open files could be created for each folder in the workspace.

[rafaelucena]

@Lady-Natalya
Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

@bpasero added the Backlog milestone in 23 of October for this feature.

That's already some progress, there is a plan to do it, now we wait. :)

[DLiblik]

Highly-condensed version of wrapping tabs using @stevenlaidlaw approach... some space lost to the right due to editor commands, but seeing the tabs all at once is worth it 😃

.tabs-and-actions-container>.monaco-scrollable-element {
    height: auto !important;
}

.tabs-and-actions-container>.monaco-scrollable-element>.tabs-container {
    height: auto !important;
    flex-wrap: wrap;
}

.tabs-and-actions-container>.monaco-scrollable-element>.tabs-container .label-description
 {
    margin-left: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label:before {
    height: 35px;
}

.monaco-icon-label>.monaco-icon-label-container {
    flex-direction: column-reverse;
    display: flex;
}

.monaco-icon-label:before {
    background-size: 20px;
    width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab {
    width: 80px;
    min-width: fit-content;
    min-width: -moz-fit-content;
    flex-shrink: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
    width: 15px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
    margin-right: 0;
}

[mmzoo]

For me it would already suffice if the tab bar area would be wider than 50% of the window, i.e. stretch all the way to the right (like in TextMate).

I could not find an issue for this feature. But this issue here comes closest.

EDIT

I found an issue for that here https://github.com/microsoft/vscode/issues/84010

[fraigo]

This is what I've done after a couple of tweaks.
I noticed when changing the theme, you need to "_Reload Custom CSS and JS_" again.

.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element {
    height: initial !important;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container{
    height: initial !important;
    flex-wrap: wrap;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab{
    height: 30px;
    flex-grow: 1;
    border-bottom: 1px solid rgba(128,128,128,0.5);
}

[J3m5]

Still not planned for April, seriously, come on...
I'm so tired of scrolling and looking for my tabs...

[arnotes]

yes please :)

[dgwyer]

Surprised this wasn't available already as VS Code is so flexible. Fingers crossed it can be added soon. I always have too many tabs to fit on one line and scrolling to find tabs is a real pain!

[lucaszanella]

It's almost as if vscode developers never used vscode for actual development

-------- Mensagem Original --------
Ativo 16 de abr de 2020 15:49, David Gwyer escreveu:

Surprised this wasn't available already as VS Code is so flexible. Fingers crossed it can be added soon. I always have too many tabs to fit on one line and scrolling to find tabs is a real pain!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[jarileon]

Started using VS code because a React course suggested it. One of the first things I tried to enable was tabs on multiple rows - but the option is missing, which is a real bummer. The actual Visual Studio has it and I use it all the time. VS code needs this ASAP!

[dgwyer]

Interesting that Visual Studio already has this.

Started using VS code because a React course suggested it. One of the first things I tried to enable was tabs on multiple rows - but the option is missing, which is a real bummer. The actual Visual Studio has it and I use it all the time. VS code needs this ASAP!

[lazzyn]

Oh come on Microsoft, do it already. This has been in Visual Studio for ages.

[im-richard]

I'm going to have to start adding an additional 500 calories to my diet just because my finger is having to fight with the constant scrolling so much.

It may seem like a small feature to them, but it has actually caused me to contemplate moving editors. The only reason I haven't is because I have VSCode setup exactly how I want it, and screwing with a new one right now is just going to lag my workflow / performance for a bit.

I can't imagine such a feature would take much work, and it would make a lot of people happy.

[J3m5]

Get ready for the next iteration plan! 💪 ✊

[J3m5]

It's here, pinned tabs are planned but still no multi line tabs... 😢

[im-richard]

Not shocked anymore. I've come to the conclusion that these guys don't use their own software. There's no way that a developer who uses this on an every-day basis AND has pull with deciding what VSCode has; could not be irritated at constantly scrolling.

[bedge]

Re:

Highly-condensed version of wrapping tabs using @stevenlaidlaw approach... some space lost to the right due to editor commands, but seeing the tabs all at once is worth it 😃

.tabs-and-actions-container>.monaco-scrollable- {
    height: auto !important;
}

.tabs-and-actions-container>.monaco-scrollable->.tabs-container {
    height: auto !important;
    flex-wrap: wrap;
}

.tabs-and-actions-container>.monaco-scrollable->.tabs-container .label-description
 {
    margin-left: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label:before {
    height: 35px;
}

.monaco-icon-label>.monaco-icon-label-container {
    flex-direction: column-reverse;
    display: flex;
}

.monaco-icon-label:before {
    background-size: 20px;
    width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab {
    width: 80px;
    min-width: fit-content;
    min-width: -moz-fit-content;
    flex-shrink: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
    width: 15px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
    margin-right: 0;
}

@DLiblik
I like the idea, but there's too much padding around each filename, any suggestion for compressing a bit?
Also, the wrapping is non-optimal:

I know it's the toolbar that's causing the wrapping issue, and I've been using this as a console cmd to remove it:

[...document.querySelectorAll('.editor-actions')].map(a => a.style.display = 'none')

But if we're wrapping, it would be preferable to keep the toolbar and extend to the full width below it.

[DLiblik]

I like the idea, but there's too much padding around each filename, any suggestion for compressing a bit?

Unfortunately @bedge the DOM structure/classes for the info in the tabs has changed since I did that - the folder name showed at the top when I did that up.

I was going to try and keep up with VS Code changes, but then the customizations had VSCode warning about non-standard code (at least at last check) which caused other issues, so I just gave up and went back to the out-of-box single row line-up. When I'm up to my ankles upside-down in concurrent edits then I just use a different editor for now.

And no complaints, VS Code is, after all, free and it's a great tool, but it's definitely sucking a little wind on this item right now. I'd jump in and PR it myself but I'm heavily into some other community undertakings atm.

[lazzyn]

It's here, pinned tabs are planned but still no multi line tabs... 😢

This is just sad.

[jay4110]

C'mon Microsoft you can do it. JUST DO IT

[jmoois]

Hey Microsoft, could you please give us some sort of feedback. If you're not planning on doing multirow tabs can you tell us, or maybe "some day", or "it's on the backlog somewhere", or "we're looking into what it might take now" or "we're doing it the iteration after next" (notice the progression here). At least please give us some sort of information so at least we know you are listening and paying attention. Developers hate it when they feel like their tool makers are paying no attention to them. Let us know you're there =)

If you're not planning on ever doing it, could you at least make things a little bit more flexible so that a proper add-on could be developed without resorting to hacks?

Thanks! And thanks for all the work on VSCode/CSCodium. It really is quite awesome!

[rshea0]

Dear corporate overlords, please hear our cry.

[scorsy63]

+1 please add this feature

[lazzyn]

Microsoft, please. I promise to buy a Zune if you ever release it again. Just add this feature, please!!

[J3m5]

Please, don't forget to upvote the first post of this issue with a 👍.
Thank you.

[lazzyn]

Please, don't forget to upvote the first post of this issue with a 👍.
Thank you.

Yes, yes and yes!!

[yulei900609]

yes, please.

[zonesql]

Please add this feature, or provide an update on this product request.

[im-richard]

Captains log... 295. Still no multi-row support. When will the madness ever end.

[scorsy63]

I tried the solution posted by @stevenlaidlaw and it works perfect. Just one small issue, after installing the required extension I get a "[Unsupported]" message in the title bar. Other than that, it works just like I wanted it to.

[msesen]

This is really bad, especially when doing Angular development. This is counter-productive, does anyone has any other IDE recommendations please?

[rajnisheu]

this is bad when doing _any_ development. Go for jetbrains. its worth it. with such a basic feature missing, no plans to implement, vscode is more of a toy.

[alexandreseris]

hello guys, same as everyone the lack of feedback is quite annoying...

i did a little powershell script for windows users to automate the css change (thus you dont need the VSCode Custom CSS extension and all the shenanigans). It can easilly be adapted for linux/mac users using bash instead, just be carefull with the encoding when you write to the css file (on windows it seems to be UCS-2 LE BOM according to notepad++)
the file which will be updated is VSCODEINSTALLDIR\resources\app\out\vs\workbench\workbench.desktop.main.css

how to use:
-close vscode
-adapt the following variables: $vscodeInstallPath and $customCssStr
-if vscode was installed globally, run the script as admin
-restart vscode, you're good to go

the script:

# change this by your installation path of vscode
$vscodeInstallPath = "C:\Program Files\Microsoft VS Code"

# you can change the css by somethig else but if you want to change the css code, you'll have to manually remove the previous css code
$customCssStr = @"
 .tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}
"@



$cssComment = "/* MANUAL EDIT: custom css for multi line tabs */"
$customCssStr = "`n" + $cssComment + "`n" + $customCssStr

$mainCssPath = "resources\app\out\vs\workbench\workbench.desktop.main.css"
$fullmainCssPath = join-path $vscodeInstallPath $mainCssPath

$cssFile = gi $fullmainCssPath -ErrorAction SilentlyContinue
if ($cssFile) {
    if ($(Select-String -InputObject $(gi $fullmainCssPath) -SimpleMatch $cssComment) -eq $null) {
        write-host "adding custom css and making a backup of the file $fullmainCssPath"
        Copy-Item -LiteralPath $fullmainCssPath -Destination $($fullmainCssPath + ".old")
        $customCssStr | Out-File -LiteralPath $fullmainCssPath -Append
    } else {
        write-host "custom css already in the file, please remove it manually"
    }
} else {
    write-host "file $fullmainCssPath not found"
}
# to revert the modification simply use
# Copy-Item -LiteralPath $($fullmainCssPath + ".old") -Destination $fullmainCssPath

[ChristianWilkie]

@microsoft any update on this?

[rocifra]

@microsoft I am also interested in an update on this. I've been waiting on it for over an year now since I started working on a relatively large project and each day I'm working with many opened tabs/files (json, interfaces, classes) which are mostly interlinked and prefer to always keep them opened to juggle easier between them.

[vtcifer]

I've implemented a stop-gap solution using VSCode Custom CSS. Just create your own custom CSS file in your system and fill it with the following:

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

Then just point the plugin at your custom file in your settings.json like so:

    "vscode_custom_css.imports": [
        "file:///home/username/path/to/dir/custom.css"
    ],
    "vscode_custom_css.policy": true,

Then hit ctrl-shift-p and run "Reload custom CSS and JS"

This has solved the problem for me until they implement an in-app solution.

I've used this work around, but it seems to break the horizontal scroll bar when the tabs wrap...

[aureliusm]

@microsoft That would be a really really helpful feature! One of the bigger things I miss in VS code.

[ErnirSH]

Anyone know if they are working on this ?

[ciltocruz]

I've implemented a stop-gap solution using VSCode Custom CSS. Just create your own custom CSS file in your system and fill it with the following:

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

Then just point the plugin at your custom file in your settings.json like so:

    "vscode_custom_css.imports": [
        "file:///home/username/path/to/dir/custom.css"
    ],
    "vscode_custom_css.policy": true,

Then hit ctrl-shift-p and run "Reload custom CSS and JS"
This has solved the problem for me until they implement an in-app solution.

I've used this work around, but it seems to break the horizontal scroll bar when the tabs wrap...

This does not work in vscode installed by Snap. Because the system is mounted in read-only mode.
Any alternative solution?

[im-richard]

I'm using the css edits that were posted here. It does help the issue and at least I have multi-row tabs now instead of one scrolling bar, but vscode wants to complain for some reason that the install is corrupt.

No idea why, but it goes away when I remove the configuration for custom css. So for now I've just set the error to ignore.

Honestly pretty sad that we have to ghetto-rig something so... basic. Something I'd imagine that would take almost no time at all for the VSCode team to include, but yet push features that I've never seen a single recommendation for.

That one issue was obstructing my workflow quite a great deal; so I can only imagine the frustration others are experiencing.

[danfmaia]

PLEASE, THIS FEATURE IS EXTREMELY USEFUL

Look at my firefox: https://imgur.com/a/CKOGGMq

I can't live without miltiline tabs

It's VERY annoying to search for the opened tabs by scrolling. I'm almost giving up on vscode because of this.

You could also pin the most used tabs to save space.

[scorsy63]

For those that use the VSCode Custom CSS solution posted here, you can remove the "unsupported" message VS Code complains about with this exension Fix VSCode Checksums

[mike-boost]

Please add multi-row tabs feature!

[im-richard]

With the Custom CSS solution, I've also noticed that it makes the horizontal scrollbar disappear as well. Not sure if anyone else is experiencing this, but as soon as I load it, the bar goes away.

[lokize]

+1 for this

[braddialpad]

As someone who uses a vertical monitor fairly regularly, this is very important to have.

[yulei900609]

Please add multi-row tabs feature!

[apereyra]

+1 for this

[pdxwolfy]

Please. +1

[SneakyFish5]

Started working on this, huge props to @stevenlaidlaw cause I suck at CSS 😄. Commit is here, it would be amazing if someone was willing to clone my fork and test it out, to make sure there aren't any issues. If I'm missing something CSS wise, please let me know. I didn't include any of the other proposed style changes, since I assume those should be in a different issue entirely.

It currently requires a window reload before taking effect, however I can try to figure out how to have it automatically wrap when changing the setting if it's requested.

[vannaka]

@SneakyFish5 A big problem with the custom CSS hacks above is when trying to rearrange the tabs by dragging and dropping the drop zone would not be adjusted to cover the new rows of tabs so you would be able to start dragging any tab but could only drop it on the first row. Do your changes account for this by expanding the drop zone to cover all tabs no matter how many rows exist?

[SneakyFish5]

@vannaka I was unaware of that problem, but after testing it out yes, that is an issue. Like I said, I'm really awful at CSS (and I'm assuming its a CSS issue?). I messed around with it and couldn't figure it out. The CSS file for tabs is here. If anyone comes up with a solution for it, I can work on applying it on the JS side of things.

[vannaka]

@SneakyFish5 I found the html/css for the drop zone. I used the dev tools available via Help -> Toggle Developer Tools to find the div element for the drop zone. The html/css for the drop zone is generated dynamically at runtime and is (probably) triggered by drag/hover events and as such you'll need to find the typescript that handles these events and change the css they generate.

As you can see in the screenshot, the top and height attributes are incorrect. I can change them manually and watch the drop zone shift down as desired. You'll need to find the code that sets style="top: Npx; height: calc(100% - Npx);" to set the height offset appropriately on the div html element (red circle in screenshot). I'd suggest grepping through the code for the beginning of the above style=... string to get you started although it's likely the 35px is not hardcoded and thus you can't just search for the whole string. You could also try searching for the html element's ID monaco-workbench-editor-drop-overlay.

[fraigo]

@SneakyFish5 I've made a change to set the context of multi-line tabs to a higher level container (element .tabs-and-actions-container), to fix cases when the .monaco-scrollable-element inside is setting a fixed container height _when opening a new file_ (otherwise, the css fix has no effect into the inner container). Also adding a light bottom border for tabs.

https://github.com/SneakyFish5/vscode/commit/a38aaa56611bb652d950a5768cdabcb671ecb88a

Also, as suggested @vannaka, I added a fix to the DropTarget element to dynamically calculate the height of the tab section (current code uses a fixed height of 35)

https://github.com/SneakyFish5/vscode/commit/f0695d51cf22af967946674acbd1212d082a5f91

[SneakyFish5]

That was so helpful, thank you both so much, saved me a lot of time and almost definitely a CSS-induced headache haha. I implemented a listener as well to watch for settings changes, so a window reload is no longer required and it'll smoothly transition into using multiline tabs.

Everything look good?

[Manachi]

@SneakyFish5 You, my friend, are an absolute champion - thank you for your incredible work on this!

[SneakyFish5]

@Manachi thank you thank you, I just got the ball rolling though. Couldn't have done it without everyone here especially @fraigo, @vannaka, and @stevenlaidlaw. It was a group effort for sure. I'll open up the PR by end of day tomorrow, just want to do last minute testing and such.

[lazzyn]

That was so helpful, thank you both so much, saved me a lot of time and almost definitely a CSS-induced headache haha. I implemented a listener as well to watch for settings changes, so a window reload is no longer required and it'll smoothly transition into using multiline tabs.

Everything look good?

This looks awesome, thanks mate 👍

[SneakyFish5]

PR opened 🎉

[pdxwolfy]

Thank you so much for doing this!

[swinder0161]

Is this coming into insider or release channel anytime sooner?

[Jeyloh]

holding my breath 🥳

[jmoois]

Any news? Does Microsoft plan to accept SneakyFish5's PR? If not, could you tell us why not? If so, do you have an even rough timetable you could share?

Thanks.

[fraigo]

The best way to contribute and keep this going on right now is to clone/fork the repo and play with this version, spotting any issues and, if possible, posting code fixes. The same if you can't wait for a release to start using it.
A quick start script:

git clone https://github.com/SneakyFish5/vscode.git
git checkout wrap-tabs
cd vscode
yarn install
./scripts/code.sh

[SneakyFish5]

Hey everyone following this issue, very sorry for a lack of progress. I've been swamped recently with work, but rest assured I will get around to it (hopefully this weekend again). This is a feature I'd really like to have myself 😄. This is 100% on me and @bpasero has been extremely helpful every step of the way. And like @fraigo said, the best way to help is to contribute code fixes/spot any issues or be a little bit more patient.

[jmoois]

I didn't mean to offend anyone. I'm sorry.
I guess I was worried this was turning into a still-born feature (Like so many features in other products I've cared about over they years). While I had looked at the actual PR page, the last time I had read it there wasn't much activity so I thought this thread was much more metalevel and therefore a better place to ask more metalevel questions (as opposed to specifics of actual code in the PR).
But again, I'm sorry.

[jmoois]

@fraigo

I tried installing but when I got to the yarn install step, I get the following:

yarn install v1.22.5
$ node build/npm/preinstall.js
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "eslint@>=7.0.0".
warning " > [email protected]" has incorrect peer dependency "typescript@^3.0.0".
[4/4] Building fresh packages...
[1/19] ⠐ keytar
[2/19] ⠐ native-is-elevated
[3/19] ⠐ native-keymap
[4/19] ⠐ native-watchdog
error C:\programs\vscodeMultiTabs\vscodenode_modules\native-keymap: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments:
Directory: C:\programs\vscodeMultiTabs\vscodenode_modules\native-keymap
Output:
C:\programs\vscodeMultiTabs\vscodenode_modules\native-keymap>if not defined npm_config_node_gyp (node "C:\Program Filesnodejsnode_modules\npmbinnode-gyp-bin\....node_modulesnode-gypbinnode-gyp.js" rebuild ) else (node "" rebuild )
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Python38\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:304:12)
gyp ERR! stack at ChildProcess.emit (events.js:196:13)
gyp ERR! stack at maybeClose (internal/child_process.js:1000:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:267:5)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\programs\vscodeMultiTabs\vscodenode_modules\native-keymap

[fraigo]

@jmoois please see this document about prerequisites for the dev build:
https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites

You could be missing something, especially the compiler tools for win32 (used by node-gyp), for example:
npm install --global windows-build-tools --vs2015

If it still does not work please refer to the node-gyp installation prerequisites
https://github.com/nodejs/node-gyp#on-windows

[jgbolling]

Just put your cursor over the tab bar and use the mouse wheel to scroll the tab bar horizontally to see the tabs that aren't otherwise visible.

[AlonMiz]

+1

[jmoois]

ok, with the windows-build-tools it now builds successfully. I am seeing an
interesting issue. If:
1) I don't yet have enough tabs to get multiple rows, and
2) I expand the window wider horizontally than the tab bar,
then
result: the content/document area area goes blank.
I can switch tabs and the content/document area is still blank.
The only thing that gets the content visible again is decrease the width of
the window to less than the width of the tab bar.

Also, if you change the width of the tab bar (by opening a new one or
closing one) you get the same situation with the new width.

Jeff

On Thu, Oct 29, 2020 at 12:32 PM Francisco Igor [e-mail]
wrote:

@jmois https://github.com/jmois please see this document about
prerequisites for the dev build:
https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites

You could be missing something, especially the compiler tools for win32
(used by node-gyp), for example:
npm install --global windows-build-tools --vs2015

If it still does not work please refer to the node-gyp installation
prerequisites
https://github.com/nodejs/node-gyp#on-windows

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/70413#issuecomment-718942046,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AOM325PEHGYC4WSIYXIA6GDSNGYLZANCNFSM4G5XB4KA
.

[SneakyFish5]

Are you able to reproduce this with the latest changes? Tested it and I wasn't able to when resizing the window, however I might be doing it wrong. If you are able to repro, do you mind providing a recording of what you mean?

[jerviscui]

I want this function too.

Will the official merge this?

[swinder0161]

Finally, I moved to Ultraedit(Paid Software) to get this feature. It was a show stopper for me along with a few more features which are poorly written in VSCode.