Fade out tab label on overflow instead of ellipsis

[Keith94]

Adding faded tab labels would look more consistent with the rest of Firefox UI. See https://bugzilla.mozilla.org/show_bug.cgi?id=658467

[piroor]

Firefox seems does it with very complicated technique, and it seems impossible to be done by simple CSS rules by 1 or 2 lines. I need PR to implement this.

[Keith94]

@piroor Maybe this implementation (CSS) would work also for TST? https://github.com/eoger/tabcenter-redux/commit/c17a99dc67193ddd2b3564ba46cb8e7eafe651da

[piroor]

Hmm, Tab Center Redux's way seems different from Firefox's one.

Firefox:

• The fade-out effect is implemented with SVG mask.
• The alpha of text is actually changed, so it is effective for various themes. We don't need define colored gradation for each case.

Tab Center Redux:

• The fede-out is just a fake, and it is done by a gray gradation element covers tab label.
• We need to define colored gradation element for various cases. (TST has 7 built-in themes!)

[piroor]

Anyway both ways require more effort. To be honest I think both they are not attractive for me - the cost-performance seems not high. Until more easier way like text-overflow: fade-out is introduced, I won't implement this by myself. (Instead I'm still waiting PRs ;) )

[Keith94]

Thanks for the info! Hopefully there will be an easier way at some point.

[hyiltiz]

text-overflow: fade-out should really be implemented within CSS. Two years since the proposal, and no browser really bothers to implement it.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

[Keith94]

@piroor I found some simple code that achieves the fade out effect quite nicely. Can you try it?

.tab .label {
  mask-image: linear-gradient(to left, transparent 0, black 2em);
}

[piroor]

@Keith94 Wow, this works on the released version of Firefox also!

[piroor]

I've added the rule as a built-in style of TST itself.

[Keith94]

Looks good to me. :)