1636238 - Convert remaining PNG icons to SVG for visual consistency

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Alessandro Castellani [:aleca]]

Attachment: icons.png

We're using some PNGs around the app which should be converted to SVGs and complete the visual refresh to better support HiDPI monitors and improve UI consistency.

After a quick investigation, these are the sections that present replaceable icons:

• Account settings richilist for IM accounts.
• Chat contacts and availability indicator.
• Compose Address Book menu item.
• Missing primary icon in the Get Messages dropdown menulist.
• Online/Offline indicator in the status bar.

Attachment for reference.

Comment 1

[Richard Marti (:Paenglab)]

Magnus, FX removed all icons from the menus on Linux, Mac and Windows have none.

What do you think about removing them on TB too? Then we are in synch with Mac and Windows. The issue is also that we have no HiDPI icons, like the AB icon in composer menu, that look good on HiDPI Linux desktops.

Using SVG icons is also no option as they don't fit with the native icons we also use.

Comment 2

[Magnus Melin [:mkmelin]]

It's a bit of a shame, but gtk stock icons are deprecated, so I guess it's time to let go.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1636238-apply-more-SVG.patch

This patch implements the things you wrote in comment 0 except the IM parts. They should be done in bug 827092.

I also removed a lot of not used icons. In total 120 icons removed.

Comment 4

[Richard Marti (:Paenglab)]

Forgot to mention: this patch removes the menu icons on Linux. Mac and Windows have done this already long time ago.

Comment 5

[Alessandro Castellani [:aleca]]

Massive patch!
Thank you so much for taking care of this. I'll take some time to review and be sure to check every single section and line of code.
Apologies for the wait.

Comment 6

[Alessandro Castellani [:aleca]]

Comment on attachment 9147349 [details] [diff] [review]
1636238-apply-more-SVG.patch

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

After a first round of review this looks pretty good, thank you so much.
There are a couple of nits that need fixing, but I'm gonna write them alongside the screenshots I took.

Comment 7

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-05-11 10-55-29.png

The zoom of the Gloda view timeline is in a very strange position.
Would be possible to move it to the right of the "Toggle timeline" button?
Also, That dark background color on the zoom button is too dark. We could have that zoom icon without a bg-color in its natural state, and using the primary color on hover.

Comment 8

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-05-11 10-57-23.png

The icon used for the deleted attachment is a bit too busy.
We already have the file, which acts as a container, so we shouldn't use the cancel icon which has a circle background (another container).
A simple red X icon, or a red bar like you did for the offline icon might work better.

Comment 9

[Richard Marti (:Paenglab)]

Attachment: 1636238-apply-more-SVG.patch

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

Created attachment 9147465 [details]
Screenshot from 2020-05-11 10-55-29.png

The zoom of the Gloda view timeline is in a very strange position.
Would be possible to move it to the right of the "Toggle timeline" button?
Also, That dark background color on the zoom button is too dark. We could have that zoom icon without a bg-color in its natural state, and using the primary color on hover.

In non-hovered state there is now no background. I changed the hover colours to use system colours, Highlight and HighlightText. I also added a border with the gloda background colour to separate the button when it overlaps a rectangle (hoe is this named?).

I don't move the button because this is too much for this bug because this button is created in JS. This should be done in a separate bug.

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

Created attachment 9147466 [details]
Screenshot from 2020-05-11 10-57-23.png

The icon used for the deleted attachment is a bit too busy.
We already have the file, which acts as a container, so we shouldn't use the cancel icon which has a circle background (another container).
A simple red X icon, or a red bar like you did for the offline icon might work better.

I changed it to a red X.

Comment 10

[Alessandro Castellani [:aleca]]

Comment on attachment 9147607 [details] [diff] [review]
1636238-apply-more-SVG.patch

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

This is great, thanks.

I finally figured why the get messages icon was bothering me. The rectangle has 1px curvature but all our other icons that come with a rectangle (email, folder, etc) have a 2px radius.
I'm gonna attach the updated SVGs for `getmsg` and `get-all` which will respect the curvature we're using everywhere else. The `get-all` basically uses the `share.svg` Photon icon with a flipped arrow.

Another little update is the Phishing icon, I like the shield, but due to the severity of the warning, we should use an exclamation mark instead of the info mark inside the shield.
Attaching those files so you can use them (and probably optimize them).
After that, this is an r+ and ready to go.

I guess we should launch a try run to be sure no test is affected by these UI changes. It shouldn't, but we can never be too sure.

Comment 11

[Alessandro Castellani [:aleca]]

Attachment: get-all.svg

Comment 12

[Alessandro Castellani [:aleca]]

Attachment: getmsg.svg

Comment 13

[Alessandro Castellani [:aleca]]

Attachment: phishing.svg

Comment 14

[Richard Marti (:Paenglab)]

Attachment: 1636238-apply-more-SVG.patch

Thanks. Yes, looks better with this icons.
Try https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=05a8e5c368b7fb720aea4e5b7bc2543a4fa8e1ea shows no relevant failures.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/f42a53d1dc79
Apply more SVG icons. r=aleca