Fade out tab label on overflow instead of ellipsis

[pm29_2008r2]

There is a new small change in the appearance of Firefox 53 that can add too long titles to display more characters on the tabbar. I tried to achieve similar effects with stylem, but failed. Is this function expected to be added to palemoon?

The following address is the official page of Firefox to solve this problem：
https://bugzilla.mozilla.org/show_bug.cgi?id=658467
https://bug658467.bmoattachments.org/attachment.cgi?id=8814057

[FranklinDM]

Unlike what was done in that bug's patch, this effect is possible using CSS without changing the tab label structure, but will require a platform change and JS to check if the mask should be applied:

On a side note: This comment is actually correct. The described behavior of the "none" attribute value in the documentation is inaccurate. The "none" attribute value literally means "don't crop anything" if you'd check the code and is also equivalent to not setting the "crop" attribute at all. This has always been the case since Firefox 2 (earliest version I checked) and apparently, this section of the documentation was copied verbatim from XULPlanet without even checking if it's correct.

[Blacklab]

...this effect is possible using CSS without changing the tab label structure, but will require a platform change and JS to check if the mask should be applied

Thank you for a most interesting reply to OP pm29_2008r2's question.

I can adjust the tab label fade-out length in current Firefox/Librewolf v109 easily using simple CSS, but if I understand you correctly the current 'ellipsis' (...) used to indicate tab label 'text overflow' in Pale Moon (and Firefox prior to v53) is part of the tab label structure and therefore cannot be altered using CSS alone?

Like the OP, I've looked up CSS rules regarding 'text-overflow' and I've tried various other CSS approaches and I can't seem to adjust, replace, or hide the ellipsis (...) in Pale Moon's tab labels without affecting the whole of the tab label text.

However, you also posted this intriguing screenshot... apparently showing tab label fade-out replacing the current text overflow ellipsis used in Pale Moon 32 tab labels... but perhaps this was only a mock-up of what might be possible with fade-out applied?

FranklinDM's screenshot 2023-02-02 153105.png (8.07 KiB) Viewed 1346 times

If tab label fade-out is possible using CSS in Pale Moon... as per your screenshot... would you please post the CSS script.

[BenFenner]

At first I was indifferent with regard to this perceived benefit, but after seeing the screenshots it does seem to be quite a nice functional improvement.

[pm29_2008r2]

Unlike what was done in that bug's patch, this effect is possible using CSS without changing the tab label structure, but will require a platform change and JS to check if the mask should be applied:
Screenshot 2023-02-02 153105.png

Although it is different from the official implementation method, the effect is very close.
However, the second tab "ludeon studios" itself has displayed all the page title text on the tab, but the text behind it has also faded.
The tab with edges and corners is also better than the default round of the palemoon

Ps: Find a fan of rimworld

[Moonchild]

will require a platform change

What platform change, exactly?

[FranklinDM]

What platform change, exactly?

https://repo.palemoon.org/FranklinDM/UX ... 4b581228d2
https://repo.palemoon.org/FranklinDM/UX ... 829f7c773d

The first commit extends the XUL "crop" attribute by implementing a "clip" value, which functions similarly to having the text-overflow property set to an empty string or "", while the second commit provides us with an indication that the text is being cropped by setting the _moz_cropped attribute on the label/description.

... would you please post the CSS script.

It's just this, but it won't work without the changes above and an extension*:

Code: Select all

.tabbrowser-tab .tab-text[_moz_cropped] {
  mask-image: linear-gradient(to left, transparent, black 3em);
}

* The attached extension forcibly changes the "crop" attribute for the tab labels to the new "clip" value (This will NOT work on current PM!), with this, tabs with long titles should appear like so:

[FranklinDM]

However, the second tab "ludeon studios" itself has displayed all the page title text on the tab, but the text behind it has also faded.
Ps: Find a fan of rimworld

Yeah, the first screenshot I posted was just a test and wasn't fully working yet which is why that tab title appeared faded.

Off-topic:
That game is certainly addictive!

The tab with edges and corners is also better than the default round of the palemoon

This is the default on Windows 10 and above. AFAIK you can also configure this by adding the following CSS using a user style (e.g. Stylem) or userChrome.css.

Code: Select all

:root {
  --tab-border-radius: 0;
}

[Moonchild]

Aha okay so this would be an explicit extension to XUL, not CSS (which already has text-overflow:clip) to do the same thing. Note the "empty string" comment would be the wrong explanation? Shouldn't that be text-overflow:clip?

Honestly, since we pretty much own XUL at this point, I don't see why not. I'd rather use _is_cropped than _moz_cropped though, to indicate with a property that the text content is being cropped. Would there be too much extension breakage in that case? Are extensions other than yours actually using this?

Edit: Issue #2104 (UXP)

[FranklinDM]

Note the "empty string" comment would be the wrong explanation? Shouldn't that be text-overflow:clip?

There's a minor difference between text-overflow:clip and text-overflow:"". The former clips text at the limit of the content area which can happen in the middle of a character, while the latter clips text at the transition between characters. The behavior of crop:clip in my current implementation does the latter, since doing the former will slightly complicate things and isn't something I'd rather do with XUL code, especially one that's used everywhere in the UI.

I'd rather use _is_cropped ... Are extensions other than yours actually using this?

Sure, that shouldn't be a problem. This is a new attribute (based on what's known with nsGkAtomList and xref) and AFAIK only my test extension uses it.

[Moonchild]

The former clips text at the limit of the content area which can happen in the middle of a character, while the latter clips text at the transition between characters.

Oh. interesting.

The behavior of crop:clip in my current implementation does the latter, since doing the former will slightly complicate things and isn't something I'd rather do with XUL code, especially one that's used everywhere in the UI.

Totally fair!

[Blacklab]

... but it won't work without the changes above and an extension

Just a thought...

If the option to use fade-out rather than ellipsis in Pale Moon's tab labels is incorporated into the browser XUL...
But... will then still require installing FranklinDM's extension 'test-tablabelfade-dev-build+pm' to work...
Could the necessary CSS script also be built into the extension?

This would create an 'all-in-one' tab label fade-out Addon package that would have the advantage of being a very simple option for all Pale Moon users including those not wishing to, or adept at, adding CSS scripts via userChrome or Stylem?

Ideally, the Tab Label Fade extension might include selector boxes or a slider allowing the user to adjust the fade-out length in the tab labels to suit their particular Pale Moon's UI, screen size, personal taste, etc.

[Moonchild]

Before you twist yourself into a painful mental situation: I agree with the premise that fading looks better and provides a functional improvement to boot, so I do intend to incorporate that into Pale Moon by default.

[pm29_2008r2]

Thanks to FranklinDM for fixing this problem and Moonchild for adopting this improvement.