Improve tab overflow UX

[isidorn]

I know this is how it is desgined but just to raise my concern that the overflow cut of tab headers seems too strong for me. And when I look at the layout in some cases I feel like it is broken because of this. Not sure how to solve this issue, but we should somehow make this cut softer imho

[bgashler1]

OneNote handles this issue in an interesting way by using a gradient mask on either end when tabs are overflowing

I'm thinking of doing something like the following. Note that it's overflowing in both directions. If it was only overflowing in one direction, we would only do it in that direction.

[bpasero]

@bgashler1 looks nice, worth a try 👍

[bpasero]

@bgashler1 if you have an idea for which CSS rules to use, we could give this a spin. What I would suggest however is to somehow put this into the scrollbar widget we are using. Because the custom scrollbar widget already has the option to show a shadow when content overflows to the left and we would want a new option to fade out the content below when it overflows.

From my quick hacking I could not really find a way to let a separate DIV alter the underlying DIV in such a way. I was playing around with CSS gradients (http://www.w3schools.com/css/css3_gradients.asp).

The scrollbar applies the styles in https://github.com/Microsoft/vscode/blob/master/src/vs/base/browser/ui/scrollbar/scrollableElement.ts#L330

[bpasero]

Moving. Interestingly we did not hear complaints from the users.

[snarf-snarf-snarf]

I find the current tab overflow tab overflow design very difficult to use - when I have lots of files open instead of having a nice drop down to pick a currently hidden file like in Visual Studio you either have to use the horrible horizontal scrollbar (which is extremely tiny so I often end up dragging the tab by mistake) or use the "..." "Show Opened Editors" route which involves 3 clicks. Horizontal scrollbars are generally frowned upon in UI design so I don't see you've chosen to use one here. Why not just stick to the Visual Studio design in the first place which is tried and tested?

[TheColorRed]

@rocksthehouse For the scrollbar, if you have a mouse with a scroll wheel you can use the scroll wheel to scroll instead of dragging the scrollbar.

[bgse]

I'd prefer the slider be a little more visible, e.g. like this:

I mainly scroll with wheel or touchpad, so it being small isn't an issue for me (and I think it definitely looks better than a gigantic slider), but the color makes it hard to judge quickly where you can actually scroll.

This could even double as an overflow notifier of sorts, granted you'd have to move the cursor to the tab bar, but still...

On a side note, concerning scrolls in general, I believe in this day and age, they are better implemented as unobtrusive indicators instead of actual scrollbars.

I think the UX in Ubuntu Unity is pretty much perfect in that regard, the scrollbars are just indicators that blend well with the overall design, and become scrollbars only when you move your cursor into a hot zone where it is safe to assume you're actually attempting to scroll by click-drag.

(Regarding the click-drag, I'd wager this feature is only used by a miniscule portion of the VSCode target audience, so maybe there could be an option to turn all scrolls into pure-indicator mode?)

[JeffreyLeeSpokeo]

I am in this boat as well. I hate the scrollbar for the VSC editor when my tabs get large. It helps me a lot have a visual display of what I currently have opened even if it's a snippet of it. I prefer to have what sublime does where the tabs are squished together in one view. Is there a way to do that now?

[stefcameron]

@JeffreyLeeSpokeo I'm right there with you! The closest thing I've found so far is to map the workbench.action.showAllEditors command to a shortcut key. This will display a popup window with all open editors listed in group, then editor tab order. You can type the name of an open file or click to jump to it. It's still not the same, though. I still constantly lose editors the second I have more than about 3 open in a single group with a 3 column layout on a 2560x1440 monitor. Each group displays just over 100 characters in width, but it's just not enough for editor tab management.

[jroboyd]

Please add some configuration options, some people like the visual studio approach (drop down), I prefer the sublime text approach (tab width condensed). It's the only thing that really bothers me about using VS Code.

[JeffreyLeeSpokeo]

@boydy12 ah so that's what it is called. tab width condensed...yes I prefer that UX as well. I like to see all at once. Yea that feature would be great.

[jroboyd]

It needs a name! Difficult to search tab related information without running into the tabs vs spaces battle.

[bpasero]

Let's continue in #15048