1594200 - "New Mail" system tray icon has changed from envelope icon to non-descript icon

Status: RESOLVED FIXED

(Thunderbird :: Mail Window Front End, enhancement)

Description

[ross]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

I received new, unread email.

Actual results:

The "new mail" icon in the system tray is displayed as a non-descript icon that uses the same iconography for "downloads" that every other app and website in existence uses these days.

Expected results:

I expect to see the envelope icon, ie the universal symbol for "You have new mail".

Comment 1

[Jorg K (CEST = GMT+2)]

Yes, we've changed it, and no, we won't change it back.

Comment 2

[ross]

Can you point me towards the reasoning for this change? It doesn't make sense to go from a symbol that uniquely means "new email" to a symbol that universally means "download something"

Comment 3

[Jorg K (CEST = GMT+2)]

I defer to our user interface person. I guess the icon was changed to be "compatible" with all the other Photon icons. It's a tray with a arrow signifying new content in the (in)tray/inbox.

Comment 4

[Richard Marti (:Paenglab)]

Yes, it's exactly a tray with a arrow signifying new content in the (in)tray/inbox.

Comment 5

[ross]

I guess that makes sense if you recognize that as a "tray". I had no idea that was supposed to be a tray until your comment.

Comment 6

[Janos Kövari]

(In reply to Jorg K (GMT+2) from comment #3)

It's a tray with a arrow signifying new content in the (in)tray/inbox.

a tray with an arrow does not signify "new mail" to me. we don't have this concept of "new mail" is put into some kind of a tray? is it a US thing?
an unopened envelope does.

Comment 7

[Richard Marti (:Paenglab)]

Wayne got another complain about the icon. So let's see what Alessandro thinks about changing it to an envelope.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: message.png

Proposal what we could use. Like the actual icon it's white with black border to follow the Windows 10 icons in the task bar.

Comment 9

[Jorg K (CEST = GMT+2)]

Comment on attachment 9107727 [details]
message.png

This is pretty ugly, it looks more like two triangles at the bottom and one above ;-) - I'm sure we can find a nicer envelop, even in SVG format.

Comment 10

[Richard Marti (:Paenglab)]

Attachment: icon-on-tray.png

This is how it would look on the task bar.

SVG doesn't work as it needs to be packaged in a ICO file. And I used our SVG file message.svg as base to deviate it. Only a white icon doesn't work as it is used too on Windows 7 and on Windows 10 with light task bar mode. The weird thing is that Windows 10 makes the icon a bit blurry also when the size isn't changed. But this is already the case with the actual icon and the one from TB 60.

This is only a quickly made proposal. Maybe a thinner white letter frame could look better. Let's see what Alessandro thinks.

Comment 11

[Jorg K (CEST = GMT+2)]

Much better 😁

Comment 12

[WaltS48 [:walts48]]

That tray icon is Windows only.

Comment 13

[Alessandro Castellani [:aleca]]

Comment on attachment 9107727 [details]
message.png

I agree with switching it to an envelope.
I'm not sure about this specific image as it looks a bit too thick and out of balance with the other Windows tray icons.
Since this is a Windows only issue, it might be worth implementing an icon that respects the Windows guidelines for that area.

f+ for the direction, thanks for taking care of this.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: icon-on-tray-2.png

The same icon with thinner lines. Again, Windows does something weird with the icon which makes it a bit blurry. I also tried it with only this 16px icon but it was still blurry.

Comment 15

[Alessandro Castellani [:aleca]]

Mh, it doesn't look great.

I did some research and this might be useful to get the proper sizing:
https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

And here's the official font icon used by Windows, which it provides an envelope icon:
https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font

Comment 16

[Richard Marti (:Paenglab)]

(In reply to Alessandro Castellani (:aleca) from comment #15)

Mh, it doesn't look great.

I did some research and this might be useful to get the proper sizing:
https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

This is about the icons in the start menu etc. but it seems not for the tray. And I'm using 16px icons.

And here's the official font icon used by Windows, which it provides an envelope icon:
https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font

I don't know how we could use this font in the tray. And this probably doesn't work for Windows 7 which doesn't have this font.

Comment 17

[Alessandro Castellani [:aleca]]

Great, I'm the master of wrong suggestions.

Do you think it might be helpful if I extract the envelope SVG from that font icon?
Or I can give you a PNG or ICO if needed. Do you have any link with the recommended specs for those icons?

Comment 18

[Richard Marti (:Paenglab)]

Attachment: 1594200-tray-icon.patch

Okay, I figured to make it look better.

Alessandro, I add some screenshots for the ui-r?

Comment 19

[Richard Marti (:Paenglab)]

Attachment: tray-icon.png

How it looks now on the tray and in the system bubble on Windows 10.

Comment 20

[Richard Marti (:Paenglab)]

Attachment: notification-icon.png

This is the same in the notification area under Windows 10.

Comment 21

[Richard Marti (:Paenglab)]

Attachment: win7-tray-icon.png

On Windows 7 it doesn't look 100% correct. It seems Windows 7 does the downscaling not so good like Windows 10. Windows 7 will be end of support next year by MS. So we should have focus on Windows 10 and see that it looks good on it.

I also tried to add a 16px icon but Windows 7 still uses the 32px icon and scales down.

Comment 22

[Wayne Mery (:wsmwk)]

Nice improvements. This bug isn't the first place that I've seen complaints - which shows how sensitive our users can be to asthetics. It's great that they care.

Comment 23

[Jorg K (CEST = GMT+2)]

Comment on attachment 9108060 [details] [diff] [review]
1594200-tray-icon.patch

Sadly the Win7 isn't such a winner. Did the thicker icon look better there?

Comment 24

[Richard Marti (:Paenglab)]

I haven't tried the thicker icon with 32px. Maybe it could be better when I don't use the rounding of the edges.

Comment 25

[Richard Marti (:Paenglab)]

Attachment: win10-tray-icon.png

I tried to remove the rounded corners.

Comment 26

[Richard Marti (:Paenglab)]

Attachment: win7-tray-icon.png

And Windows 7 with the removed rounded corners.

Comment 27

[Jorg K (CEST = GMT+2)]

They are very square, I liked the rounded ones better. The problem with the Win7 display is that the "diagonal" lines are unequal. The one from TL to the centre is thinner than the one from the centre to the TR. Can that be fixed?

Comment 28

[Richard Marti (:Paenglab)]

I liked the rounded one more too. The diagonal lines completely the same. It must be the downscaling algorithm of Windows 7 that creates this. See attachment 9108063 [details] there the top left edge is a sharp edge but should be rounded like top right.

Comment 29

[Alessandro Castellani [:aleca]]

Comment on attachment 9108060 [details] [diff] [review]
1594200-tray-icon.patch

Review of attachment 9108060 [details] [diff] [review]:
-----------------------------------------------------------------

Way better, good job.
I don't have a strong preference between square or rounded borders as a good argument might be done for both.
Square: consistent with Windows icons
Rounded: consistent with our Photon icons

I'll let you Richard decide on this.

Is there any way to improve the drop shadow (or is that a stroke?) around the icon?
It looks very weird on a light background.

Comment 30

[Richard Marti (:Paenglab)]

Attachment: light-task-bar.png

(In reply to Alessandro Castellani (:aleca) from comment #29)

Is there any way to improve the drop shadow (or is that a stroke?) around
the icon?
It looks very weird on a light background.

It's a border around the icon to make it visible on light backgrounds like the light task bar on Windows 10 (see screenshot) or Windows 7 Classic with the grey task bar.

The screenshot shows good how white icons would look with the two not changed icons.

Comment 31

[Richard Marti (:Paenglab)]

I like the rounded version better.

Comment 32

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/ae4432bce466
Use an envelope as "new mail" icon in systray. r=jorgk ui-r=aleca

Comment 33

[ross]

Awesome work, all! Thanks!

Comment 34

[Jorg K (CEST = GMT+2)]

Comment on attachment 9108060 [details] [diff] [review]
1594200-tray-icon.patch

I'm not sure it's a good idea to change the icon during right in the ESR cycle, but anyway. I got used to the tray.

Comment 35

[Jorg K (CEST = GMT+2)]

BTW, there are two sizes for the Windows taskbar on W10. Have you checked both? I'm using the smaller one.

Comment 36

[Richard Marti (:Paenglab)]

The icon size is the same on big and small task bar.

Comment 37

[Jorg K (CEST = GMT+2)]

TB 71 beta 3:
https://hg.mozilla.org/releases/comm-beta/rev/216e79bcfb3ffdb15169f9445b2fe2de00926e3e

Comment 38

[Jorg K (CEST = GMT+2)]

TB 68.3 ESR:
https://hg.mozilla.org/releases/comm-esr68/rev/5ffb611306eb1b7038fe460a4abb610b5b91d575

Comment 40

[Jorg K (CEST = GMT+2)]

Attachment: 2019-11-14 22_25_34-.png

Well, I have this in TB 68.3 now, but the icon is very faint. Can we do another iteration here?

Comment 41

[Richard Marti (:Paenglab)]

The icon has now the same style as the network or volume icon. For Alessandro was the icon in attachment 9107729 [details] too fat.

Forwarding to him to reply.

Comment 42

[Jorg K (CEST = GMT+2)]

Right, network and volume have graphics which are 1px wide at my resolution of 1280x1024. But Photon icons are usually thicker.

Comment 43

[Alessandro Castellani [:aleca]]

I suggested to use a thinner icon than what we use in the photon icon style in order to maintain the visual consistency with the Windows ecosystem and its native toolbar icons.
Since this is a Windows issue only, having a dedicated icon that respects its guideline seems proper.

Anyway, I don't have a strong preference on this, so if Windows users might prefer a thicker icon, feel free to replace it.

Comment 44

[Jorg K (CEST = GMT+2)]

Hmm, but the tray was pretty thick. Network and volume icons appear thicker although they are also only drawn with one pixel because the have more light pixels in total.

Comment 45

[Alessandro Castellani [:aleca]]

Not being on Windows, nor having a Windows machine, makes it really hard for me to take an educated decision.
I trust you and Richard with updating the icon to its best.

Comment 46

[Richard Marti (:Paenglab)]

I'm for being consistent with the Windows native icons and staying with the actual style. The Java icon for example in your screenshot is very old style.