1202846 - Icons rendered too thickly on OSX

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[aleth [:aleth]]

Attachment: Screen Shot.png

See screenshot for an example. This is a release blocker.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch

Aleth, is this one better? Do you have other icons which needs changes?

I'm not a icon designer and the icons are conversions from the previous png icons and every help to identify the needed changes is welcome.

Comment 2

[aleth [:aleth]]

Whoa, you think this requires fixing the icons? :-S I was hoping there was something that needed porting.

It's my impression *all* the toolbar icons are affected, and not just for chat. I just picked a particularly obvious example.

Comment 3

[aleth [:aleth]]

Is it possible something is causing blurriness due to the way the SVGs are mapped onto pixels?

Comment 4

[aleth [:aleth]]

(In reply to aleth [:aleth] from comment #3)
> Is it possible something is causing blurriness due to the way the SVGs are
> mapped onto pixels?

Another thought: is this only an issue on non-retina displays?

Comment 5

[Richard Marti (:Paenglab)]

Attachment: OSXIcons.png

(In reply to aleth [:aleth] from comment #2)
> Whoa, you think this requires fixing the icons? :-S I was hoping there was
> something that needed porting.
> 
> It's my impression *all* the toolbar icons are affected, and not just for
> chat. I just picked a particularly obvious example.

I have if I can copy how the Win 10 caption buttons are made. They are using 0.9px strokes instead of 1px and on different scales they play with the width and height.

(In reply to aleth [:aleth] from comment #3)
> Is it possible something is causing blurriness due to the way the SVGs are
> mapped onto pixels?

On even scales like 100% or 200% they are for me sharp. On other scales slightly blurred.

(In reply to aleth [:aleth] from comment #4)
> (In reply to aleth [:aleth] from comment #3)
> > Is it possible something is causing blurriness due to the way the SVGs are
> > mapped onto pixels?
> 
> Another thought: is this only an issue on non-retina displays?

I don't think as you can see on my 400% screenshot of my Yosemite VM with no scaling. Have you some scaling enabled?

Comment 6

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch

I've found a solution to make the icons sharp on scaled desktops (at least on Windows).

Aleth, please can you check, if this helps also in your case?

Comment 7

[aleth [:aleth]]

Attachment: toolbar-comparison.png

I've uploaded a screenshot with the effect of the last patch (it's not noticeable).

I included a screenshot from Firefox which shows what I mean by "thicker icons". It turns out they are darker too! Maybe matching the colour would make a big difference.

I don't use any scaling - standard OSX on a non-retina display.

Comment 8

[aleth [:aleth]]

> I included a screenshot from Firefox which shows what I mean by "thicker
> icons". It turns out they are darker too! Maybe matching the colour would
> make a big difference.

Comparing to a previous TB screenshot, e.g. https://mozorg.cdn.mozilla.net/media/img/l10n/en-US/thunderbird/landing/screenshot-mac-high-res.409fe4844573.png, the difference is also obvious. The icons seem to have been designed to have an inset-like gradient, and when they are solid near-black look heavy in comparison.

Comment 9

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch

The problem is the icons are drawn with a border to show the inset styles. But on Yosemite and Win 8/10 where is no 3D effect and I made the border the same color as the image. This made them looking fatter. For the main- and chat tollbars I made the icons without border. AB, Composer and Lightning are not changed and are showing now blurry edges because of the missing border.

The icon colors are always the same as for FX (#4d4d4d) for Yosemite but because of the additional border they looked heavier and darker than FX.

What do you think about the new icons?

If this looks good, I need to add a third style, icons with border, icons without border (flat style) and inverted icons.

Comment 10

[aleth [:aleth]]

(In reply to Richard Marti (:Paenglab) from comment #9)
> The icon colors are always the same as for FX (#4d4d4d) for Yosemite but
> because of the additional border they looked heavier and darker than FX.

Wow, you're right, sorry - I should have checked with the colour picker. An example of an optical illusion...

Comment 11

[aleth [:aleth]]

Attachment: toolbar-comparison 2

(In reply to Richard Marti (:Paenglab) from comment #9)
> The problem is the icons are drawn with a border to show the inset styles.
> But on Yosemite and Win 8/10 where is no 3D effect and I made the border the
> same color as the image. This made them looking fatter. For the main- and
> chat tollbars I made the icons without border. AB, Composer and Lightning
> are not changed and are showing now blurry edges because of the missing
> border.

Ah OK, that explains what is going on!

I've added a comparison screenshot. The main effect is to make the icons appear smaller, as you would expect. 

On average I think it looks better, but you might want to ask other people too!

Here are some things I noticed:
* The Hamburger icon should really be identical to the one on Firefox, for consistency (also the Firefox one looks better)
* On some icons it seems the border matters (e.g. the Calendar '7' icon)
* Are you planning to (over time) replace the remaining coloured icons with monochrome ones too?
* The 'show accounts' (i) icon is pretty bad - something about the proportions and the dot of the i not being round I think.
* The 'add contact' icon may be clearer with the border (as there's a + inside the head).

Comment 12

[Richard Marti (:Paenglab)]

Thank you for the feedback.

(In reply to aleth [:aleth] from comment #11)

> I've added a comparison screenshot. The main effect is to make the icons
> appear smaller, as you would expect. 

Yes, they should have only the dimensions without the border.

> On average I think it looks better, but you might want to ask other people
> too!
> 
> Here are some things I noticed:
> * The Hamburger icon should really be identical to the one on Firefox, for
> consistency (also the Firefox one looks better)

Yes it was smaller than the FX button -> fixed locally.

> * On some icons it seems the border matters (e.g. the Calendar '7' icon)

This is expected. I set on all icons stroke: none and some icons are relying on the border. But I haven't fixed them now for the appearance without border.

> * Are you planning to (over time) replace the remaining coloured icons with
> monochrome ones too?

The Lightning icons in the tabs? For this I need to ask Fallen if this would be okay. We have already some monochrome icons in the tabs and I think this should be also done for the Lightning tabs.

For the folder pane, I don't think we should do this because this helps to better distinguish between the types.

> * The 'show accounts' (i) icon is pretty bad - something about the
> proportions and the dot of the i not being round I think.

Yes, this needs more work.

> * The 'add contact' icon may be clearer with the border (as there's a +
> inside the head).

I'll look what I can do.

Comment 13

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch

Now all icons are changed for the flat appearance on OS X and Win8/10.

Aleth, please can you give me some feedback, if they are looking better now and if all icons are shown correct (I can't build on OS X and check them)?

Comment 14

[aleth [:aleth]]

Attachment: toolbars-new.png

That's a huge improvement! Looks good to me. (See screenshot)

The only one I think doesn't look quite right yet is the (i) one  - looks like the i is a bit too wide (see comparison on the screenshot).

Comment 15

[aleth [:aleth]]

Comment on attachment 8666456 [details] [diff] [review]
Bug1202846.patch

I shouldn't be the only one on OSX looking at this ;)

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch

(In reply to aleth [:aleth] from comment #14)
> Created attachment 8666489 [details]
> toolbars-new.png
> 
> That's a huge improvement! Looks good to me. (See screenshot)
> 
> The only one I think doesn't look quite right yet is the (i) one  - looks
> like the i is a bit too wide (see comparison on the screenshot).

Thank you! This icon was always a problem for me. I've made it now slimmer and the "i" should now have better proportions.

I already planned to ask Philipp for r? because there are also a lot of Lightning changes in this patch.

Comment 17

[aleth [:aleth]]

Attachment: i-icons.png

If you want to be perfectionist about it, as you can see from the png, you've gone from 4px width to 2px, while m-c uses 3.

Comment 18

[aleth [:aleth]]

(In reply to aleth [:aleth] from comment #17)
> Created attachment 8666515 [details]
> i-icons.png
> 
> If you want to be perfectionist about it, as you can see from the png,
> you've gone from 4px width to 2px, while m-c uses 3.

But of course maybe it's not possible to center the 3px in these new icons, idk.

Comment 19

[Richard Marti (:Paenglab)]

Attachment: Bug1202846.patch with new i icon

What do you think about this i-icon? It's now 3px wide. This makes the i a little bit blurry like the FX icon. I choosed before 2px to let it sharp but equality with FX it is maybe better to use 3px.

Comment 20

[aleth [:aleth]]

Attachment: i-final.png

When you zoom in, you can see it turns out to be 2px wide plus 1px blur on either side (not 3px).

I think both versions are OK -- maybe we should get someone to check which looks better on a retina screen?

Comment 21

[Richard Marti (:Paenglab)]

Attachment: Final Bug1202846.patch

Okay, this should now be the final version. I moved the i to align with the px.

Comment 22

[aleth [:aleth]]

Attachment: another-i.png

The horizontal width is now 3, but something has gone wrong with the vertical alignment here, so there's a big apparent gap between the dot and the bar.

Icons are hard work :-|

Comment 23

[Richard Marti (:Paenglab)]

Attachment: Final final Bug1202846.patch

Sh..t wrong copy pasted. This should now be the right.

Comment 24

[aleth [:aleth]]

Attachment: final-final-i.png

That fixed the problem!

I guess we just need Fallen to test these on retina now...

Comment 25

[Philipp Kewisch [:Fallen][📱📆]]

Comment on attachment 8667218 [details] [diff] [review]
Final final Bug1202846.patch

I don't have a retina display, so I can't test these, sorry. The code looks fine though, r=philipp for that.

Comment 26

[Richard Marti (:Paenglab)]

Thanks, but it should also look better than the actual.

Comment 27

[aleth [:aleth]]

https://hg.mozilla.org/comm-central/rev/1eee99e7b54c1f720d0bb27b1e9fb1f1ae5048c0
Bug 1202846 - Make icons sharp on scaled desktops and slimmer on Yosemite and Win 8/10. r=Fallen