search

aminomancer / uc.css.js

A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is similar to other userChrome stylesheets, but it's intended for use with an autoconfig loader like fx-autoconfig, since it uses JavaScript to implement its more functional features.
Other
329 stars 27 forks source link

Limiting page title when hovering tab [tabThumbnailTooltip.uc.js script] #31

Closed ericpa06 closed 2 years ago

ericpa06 commented 2 years ago

Hi, first of all, thank you so much for your work!

Would it be possible to limit page title to a given number of characters? I don't actually want to limit the title page on firefox history settings, but only limit how much text is shown when I hover the tab thumbnail, like this: 02

So instead of : Sem acordo, conflito poderá ser comparado só à 2ª Guerra Mundia, diz jornalista brasileiro em Kiev | O Assunto | G1

I would see something like: Sem acordo, conflito poderá ser comparado só à 2ª Guerra Mundial...

In other words, on Firefox history settings, the page would still have its full page title, but when I hovered that tab I would only see a small snippet of the page title text.

Also, if possible, I was wondering if I could trigger this option of "limiting the page title text" to only when was I hovering a tab with a thumbnail available (some pages don't have thumbnail because they are on sleep mode/lazy mode). And on these cases, I would that Firefox shown the whole title, even if is it bigger, since there is no thumbnail available currently, like this: image

aminomancer commented 2 years ago

It's possible with CSS to limit it to one line and show an ellipsis at the end with overflow: hidden; text-overflow: ellipsis. To my knowledge, it is not possible to limit it any other way. If the text wraps onto more than 1 line, you lose that ability. You can limit its height, but not the number of lines. So you can set a particular max-height that adds up to 2 lines, but you won't get an ellipsis at the end.

With JavaScript it would be easy to limit the number of characters and add an ellipsis at the end, but I haven't done this because I think that'd mean playing favorites with locales. The standard Greek/Latin ellipsis is not used in every script. I think Chinese uses 6 dots and Mongolian uses 4. Well, I could add a setting. I'll look into it.

aminomancer commented 2 years ago

Alright try version 1.0.2

ericpa06 commented 2 years ago

Man, you should work at Mozilla, like you are pretty much adding options that they should have added on Firefox for ages and ages. And you are doing it all by yourself and through your wizardry. Thank you so much, it worked! •ᴗ•

Also, taking this opportunity, I would like to suggest two changes that I made, they are somewhat silly but I think they could improve a little bit your amazing script: Basically when I'm hovering a tab when there no thumbnail available, I added these 2 lines, so that the text aligns to left and only aligns to the center when there is a thumbnail available. I'm probably doing this the wrong way, and you will find a better solution ato dd this feature, but I played a little with the script and I thought it could be interesting:

I added "text-align: center" on "#tabThumbBox" and then added "text-align: left" on "#tabThumbTooltip[hide-thumbnail] #tabThumbBox", also removed "text-align: center" on "#tabThumbLabel".

image

aminomancer commented 2 years ago

Cool, I added it in 1.0.3