Fade out tab label on overflow instead of ellipsis

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
User avatar
pm29_2008r2
Moongazer
Moongazer
Posts: 12
Joined: 2021-10-16, 08:38

Fade out tab label on overflow instead of ellipsis

Unread post by pm29_2008r2 » 2023-02-01, 18:25

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
QQ截图20230202100359.jpg

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by FranklinDM » 2023-02-02, 07:52

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

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
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Blacklab » 2023-02-02, 10:46

FranklinDM wrote: ...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
FranklinDM's screenshot 2023-02-02 153105.png (8.07 KiB) Viewed 1496 times

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

BenFenner
Astronaut
Astronaut
Posts: 588
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: Fade out tab label on overflow instead of ellipsis

Unread post by BenFenner » 2023-02-02, 14:52

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.

User avatar
pm29_2008r2
Moongazer
Moongazer
Posts: 12
Joined: 2021-10-16, 08:38

Re: Fade out tab label on overflow instead of ellipsis

Unread post by pm29_2008r2 » 2023-02-02, 17:41

FranklinDM wrote:
2023-02-02, 07:52
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 :D
Last edited by pm29_2008r2 on 2023-02-02, 18:00, edited 1 time in total.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Moonchild » 2023-02-02, 17:48

FranklinDM wrote:
2023-02-02, 07:52
will require a platform change
What platform change, exactly?
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by FranklinDM » 2023-02-03, 07:11

Moonchild wrote:
2023-02-02, 17:48
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.
Blacklab wrote:
2023-02-02, 10:46
... 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:
Screenshot 2023-02-03 150919.png
Attachments
test-tablabelfade-dev-build+pm.xpi
(2.71 KiB) Downloaded 16 times

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by FranklinDM » 2023-02-03, 07:26

pm29_2008r2 wrote:
2023-02-02, 17:41
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 :D
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! :lol:
pm29_2008r2 wrote:
2023-02-02, 17:41
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;
}

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Moonchild » 2023-02-03, 11:08

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)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by FranklinDM » 2023-02-03, 14:30

Moonchild wrote:
2023-02-03, 11:08
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.
Moonchild wrote:
2023-02-03, 11:08
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.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Moonchild » 2023-02-03, 16:35

FranklinDM wrote:
2023-02-03, 14:30
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.
FranklinDM wrote:
2023-02-03, 14:30
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!
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Blacklab » 2023-02-04, 12:35

Re: the CSS script needed... FranklinDM wrote:... 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? :think:

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.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Fade out tab label on overflow instead of ellipsis

Unread post by Moonchild » 2023-02-04, 14:18

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.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
pm29_2008r2
Moongazer
Moongazer
Posts: 12
Joined: 2021-10-16, 08:38

Re: Fade out tab label on overflow instead of ellipsis

Unread post by pm29_2008r2 » 2023-02-06, 14:20

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

Locked