Add colored icons and theme support in message filter list toolbar

[RealRaven2000]

The modern version of quickFilters has monochromatic icons some of which are hard to distinguish

default theme:

dark theme:

It would be good to have an option to colorize some / all of them for clarity. For reference, here are the old icons in Thunderbird 68:

Initially we could use some of the original colors, red for find duplicates, green for troubleshooting (bug), and purple for the save button. Also the sort icon could be a little clearer (maybe showing a-z instead of lines that seem to indicate sizes)

[RealRaven2000]

Initials suggestions for the color choices

bright theme:

dark theme:

I think the clipboard icons do not need to be colored as they are very distinctive, likewise the merge and clone buttons.

[RealRaven2000]

Here is a test version for working with your personal light weight theme:

quickFilters-wx-5.3pre78.zip

To install this, download the zip file and drop that into Thunderbird Add-ons Manager.

[RealRaven2000]

It turns out that the background images of 3rd party themes wasn't loaded, here is a fixed version.

quickFilters-wx-5.3pre80.zip

To install this, download the zip file and drop that into Thunderbird Add-ons Manager.

Preview in theme "Windows 10 style":

[SKelem]

I really like the addition of color! Color makes the choices jump out to me!.
My only complaint is that the images are tiny. I think a little bigger image and a consistent about of white (black) space around each of the images would help them look consistent. For example, it's difficult to see that the green one is a bug with legs. I also appreciate the hover explanations, which help me learn what each icon is for.
Thank you!

[RealRaven2000]

I really like the addition of color! Color makes the choices jump out to me!.
My only complaint is that the images are tiny. I think a little bigger image and a consistent about of white (black) space around each of the images would help them look consistent. For example, it's difficult to see that the green one is a bug with legs. I also appreciate the hover explanations, which help me learn what each icon is for.

I think the tooltip text was already there (unless it was broken in the last version you used?). I can do something about the icon sizes though. I don't want them to take up so much space permanently to avoid distracing the users, but I can zoom in when you hover over the icons - one of the advantages of svg over png graphics is that they always scale perfectly:

quickFilters-wx-5.3pre103.zip

[SKelem]

Having tooltips and tiny icons is like playing a D&D game, where you have to explore everywhere to find hidden treasures.
It's more productive, once I know what the icons mean, if I can see the icons easily without having to hover to make them big enough to see. The current time between hovering and getting the hover text is too slow (16 seconds to hover over all 11 icons, allowing no time to actually read the text). Can you make the hover time a configurable item? Can you make icon size configurable? If they're SVG, then you don't have to redraw them all!
Also, I have the quickFilters-wx-5.3pre80.zip installed, and there is no hover text for Troubleshooting. All the other icons have hover text.

[RealRaven2000]

Having tooltips and tiny icons is like playing a D&D game, where you have to explore everywhere to find hidden treasures.
It's more productive, once I know what the icons mean, if I can see the icons easily without having to hover to make them big enough to see. The current time between hovering and getting the hover text is too slow (16 seconds to hover over all 11 icons, allowing no time to actually read the text).

well, you can hover as long as you like :) the transition time is 0.3 seconds. I am not sure if I can delay the time when you move "off" the icon, but I can try to make it slower transition delay. But I wouldn't make that longer than 2.5 seconds max because it will feel "broken" after a certain length.
https://www.w3schools.com/cssref/css3_pr_transition.asp

Can you make the hover time a configurable item? Can you make icon size configurable? If they're SVG, then you don't have to redraw them all!

yeah, no redrawing just some simple CSS rules here. i tried a few settings but it felt strangely sluggish and wrong to let the icon stand increased for a while after moving off. One problem is that then your cursor will actually point to a different thing when you stay still and the icons on the left one by one get smaller. I thinking focusing on one thing (the one the user points to) is much nicer. you can't read all tooltips simultaneously anyway. Here is an example with 3 seconds delay:
quickFilters-wx-5.3pre107.zip
-doesn't work for me.

I much prefer a single second and half a second for the transition back to the small size:
quickFilters-wx-5.3pre108.zip

That's pretty much fast enough if I want to read them all one by one, left to right.

Also, I have the quickFilters-wx-5.3pre80.zip installed, and there is no hover text for Troubleshooting. All the other icons have hover text.

That could have been an interim bug from converting all locales to the new json format.

[SKelem]

I'm referring to the time between when the mouse is over a button and when the hover is displayed. I'm not sure about other people, but I would like the text to appear more quickly. I would expect the text to remain until I move the mouse away, but 3 seconds might be okay.
Instead of increasing the size of the icon, why not just draw a border around it of a contrasting color from the background?

[RealRaven2000]

I'm referring to the time between when the mouse is over a button and when the hover is displayed. I'm not sure about other people, but I would like the text to appear more quickly. I would expect the text to remain until I move the mouse away, but 3 seconds might be okay.

Sorry, but I have no control over the tooltips, they are rendered by the Operating System. And they may go away altogether in the future when we switch to pure HTML, at that stage I will have to reinvent the wheel once again and code my own.

Instead of increasing the size of the icon, why not just draw a border around it of a contrasting color from the background?
Well you complained about the detail in the icons not being visible at the default size (16px²) and I didn't want to take up more space than necessary, so zooming the one you point to seemed like a nice alternative. I think the delay after moving of the button (currently 1s) doesn't work though. 0.3s just for the zoom in / zoom out seems nicely responsive and gives you a better view of the icon of the command you are interested in. The border around it doesn't really make it clearer, but on my OS (Windows7) it is painted when I point anyway.

Anyway I optimized the transition somewhat to remove the "jankyness" - the other icons shouldn't be moved around when one is zoomed / shrinks back and more importantly the contents of the message list below are not moved around. New test version below:

quickFilters-wx-5.3pre114.zip

I achieve that by using smaller (and sometimes negative) margin and padding so that the icon doesn't push out the boundaries of the buttons while still presenting larger. everything now has the same transition time, 0.3s which I prefer to a sudden jumping of the size.

[RealRaven2000]

Implemented in 5.3, released on 04/Aug/2021