Show tab shrinking overflow differently (no "...", shadow?)

[Tekbr]

• VSCode Version: 1.19.0-insider (5b0fa2e Date 2017-12-01T06:14:38.596Z )
• OS Version: Windows 10

-- Sorry for the English, I used Google Translator --

As he talked to @bpasero , he asked to be tracked in a new case. From #15048

Comment @Tekbr #15048

@bpasero An idea ... Instead of using the '...', why not use the style of Microsoft Edge, Mozilla Firefox and Google Chrome? 😉 The text is below the "X" (erased slightly) as the guide decreases.

Particularly, I prefer the style of Firefox.

Comment @bpasero #15048

@Tekbr good suggestions. I am not a big fan of how Edge is simply clipping the text at the end of the tab. I really like what Firefox/Chrome are doing with the fading out in the end, if anyone wants to chime in with a reasonable PR (not too crazy, just CSS), feel free.

What I can change though is to not leave the room for the close button. I realized that when shrinking is enabled, the close button should only show up on hover, but otherwise not consume any space:

Comment @Tekbr #15048

@bpasero Thanks for the feedback!!

I was happy with your move !! 😄 👏 👏

By your comment it seems like something simple to do (or not) 🤔 , but after going through the team tests .. or even before (if you think better) maybe crawl for a new case suggesting for beginners, no? Referring to this case and the test case, with my comment and your comment (if you think you should). That way, someone can locate it more easily! 🤔

Anyway, thanks again for the feedback! 👍

Comment @bpasero #15048

Sure, feel free to create a new issue for it and we can ask for help.

@bpasero If necessary, update the case. Make the necessary modifications / simplifications. (do it please.)

Reproduces without extensions: Yes

[bpasero]

Would be willing to look into a reasonable PR for this that is not too crazy. E.g. ideally CSS only change.

[bpasero]

Thanks to @Dari-K, tabs now fade out when set to shrink:

[Tekbr]

@bpasero and @Dari-K I really liked it very much .... ❤️ ❤️ ❤️

I delayed responding until I got the Insiders version 1.21.0

Just one question ... do you think this overlap might be a little longer? Put a little more word for word?

Ex: By the image above, in the second tab (image), half of the letter 'g' would also have the shading.
Just to have an idea .. if you could increase.

This would extend to when we hover over and the 'X' appears to close.

Anyway the work was great ... it was good, much better than '...' 😍 Congratulations on the beautiful work. 👏 👏 👏

Thank you!!

[bpasero]

Yeah I also thought that the shadow is very subtle, I wouldn't mind expanding it a bit.

[Tekbr]

@bpasero I think it could increase the width between 25 ~ 30px!
What do you think? Would you suggest more or less? 🤔

Sorry for the bad image / gif. I modified it by inspecting ...

[bpasero]

@Dari-K your call, I think 10px is fine.

[Tekbr]

@bpasero From 5px to 10px there is almost no difference .. at least 15px. What do you think?

[bpasero]

Verification:
Configure "workbench.editor.tabSizing": "shrink" and open enough tabs so that they shrink. See a shadow instead of a ellipsis at the end of the tab label. The shadow works fine in light and dark themes.