Closed Bug 1594200 Opened 1 year ago Closed 11 months ago

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

Categories

(Thunderbird :: Mail Window Front End, enhancement)

x86_64
Windows 10
enhancement
Not set
normal

Tracking

(thunderbird_esr6871+ fixed, thunderbird71 fixed, thunderbird72 fixed)

RESOLVED FIXED
Thunderbird 72.0
Tracking Status
thunderbird_esr68 71+ fixed
thunderbird71 --- fixed
thunderbird72 --- fixed

People

(Reporter: ross, Assigned: Paenglab)

References

Details

Attachments

(9 files, 2 obsolete files)

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".

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

Status: UNCONFIRMED → RESOLVED
Closed: 1 year ago
Resolution: --- → WONTFIX
See Also: → 1584488

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"

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.

Flags: needinfo?(richard.marti)

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

Flags: needinfo?(richard.marti)

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.

(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.

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

Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: WONTFIX → ---
Attached image 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.

Attachment #9107727 - Flags: feedback?(alessandro)
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.
Attached image icon-on-tray.png (obsolete) —

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.

Much better 😁

That tray icon is Windows only.

OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
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.
Attachment #9107727 - Flags: feedback?(alessandro) → feedback+
Attached image icon-on-tray-2.png (obsolete) —

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.

Attachment #9107952 - Flags: feedback?(alessandro)

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

Attachment #9107952 - Flags: feedback?(alessandro) → feedback-

(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.

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?

Okay, I figured to make it look better.

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

Assignee: nobody → richard.marti
Attachment #9108060 - Flags: ui-review?(alessandro)
Attachment #9108060 - Flags: review?(jorgk)
Attached image tray-icon.png

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

Attachment #9107729 - Attachment is obsolete: true
Attachment #9107952 - Attachment is obsolete: true
Attached image notification-icon.png

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

Attached image 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.

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.

Component: Untriaged → Mail Window Front End
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?
Attachment #9108060 - Flags: review?(jorgk) → review+

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

Attached image win10-tray-icon.png

I tried to remove the rounded corners.

Attached image win7-tray-icon.png

And Windows 7 with the removed rounded corners.

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?

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 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.
Attachment #9108060 - Flags: ui-review?(alessandro) → ui-review+
Attached image 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.

I like the rounded version better.

Attachment #9108060 - Flags: approval-comm-esr68?
Attachment #9108060 - Flags: approval-comm-beta?

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

Status: REOPENED → RESOLVED
Closed: 1 year ago11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 72.0

Awesome work, all! Thanks!

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.
Attachment #9108060 - Flags: approval-comm-esr68?
Attachment #9108060 - Flags: approval-comm-esr68+
Attachment #9108060 - Flags: approval-comm-beta?
Attachment #9108060 - Flags: approval-comm-beta+

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

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

Duplicate of this bug: 1596349

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

Flags: needinfo?(richard.marti)

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.

Flags: needinfo?(richard.marti) → needinfo?(alessandro)

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

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.

Flags: needinfo?(alessandro)

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.

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.

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.

You need to log in before you can comment on or make changes to this bug.