Closed Bug 1202846 Opened 4 years ago Closed 4 years ago

Icons rendered too thickly on OSX

Categories

(Thunderbird :: Theme, defect, major)

Unspecified
macOS
defect
Not set
major

Tracking

(thunderbird43 affected)

RESOLVED FIXED
Thunderbird 44.0
Tracking Status
thunderbird43 --- affected

People

(Reporter: aleth, Assigned: Paenglab)

References

Details

(Keywords: regression)

Attachments

(9 files, 8 obsolete files)

13.33 KB, image/png
Details
13.70 KB, image/png
Details
144.74 KB, image/png
Details
95.57 KB, image/png
Details
160.83 KB, image/png
Details
22.82 KB, image/png
Details
8.39 KB, image/png
Details
121.45 KB, patch
Fallen
: review+
Details | Diff | Splinter Review
13.76 KB, image/png
Details
Attached image Screen Shot.png
See screenshot for an example. This is a release blocker.
Attached patch Bug1202846.patch (obsolete) — Splinter Review
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.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #8661402 - Flags: review?(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.
Is it possible something is causing blurriness due to the way the SVGs are mapped onto pixels?
(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?
Attached image 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?
Attached patch Bug1202846.patch (obsolete) — Splinter Review
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?
Attachment #8661402 - Attachment is obsolete: true
Attachment #8661402 - Flags: review?(aleth)
Attachment #8663259 - Flags: feedback?(aleth)
Attached image 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.
> 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.
Attached patch Bug1202846.patch (obsolete) — Splinter Review
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.
Attachment #8663259 - Attachment is obsolete: true
Attachment #8663259 - Flags: feedback?(aleth)
Attachment #8663383 - Flags: feedback?(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...
Attached image 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).
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.
Attached patch Bug1202846.patch (obsolete) — Splinter Review
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)?
Attachment #8663383 - Attachment is obsolete: true
Attachment #8663383 - Flags: feedback?(aleth)
Attachment #8666456 - Flags: feedback?(aleth)
Attached image 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 on attachment 8666456 [details] [diff] [review]
Bug1202846.patch

I shouldn't be the only one on OSX looking at this ;)
Attachment #8666456 - Flags: feedback?(philipp)
Attachment #8666456 - Flags: feedback?(aleth)
Attachment #8666456 - Flags: feedback+
Attached patch Bug1202846.patch (obsolete) — Splinter Review
(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.
Attachment #8666456 - Attachment is obsolete: true
Attachment #8666456 - Flags: feedback?(philipp)
Attachment #8666505 - Flags: review?(philipp)
Attached image 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.
(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.
Attached patch Bug1202846.patch with new i icon (obsolete) — Splinter Review
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.
Attachment #8666828 - Flags: feedback?(aleth)
Attached image 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?
Attached patch Final Bug1202846.patch (obsolete) — Splinter Review
Okay, this should now be the final version. I moved the i to align with the px.
Attachment #8666828 - Attachment is obsolete: true
Attachment #8666828 - Flags: feedback?(aleth)
Attachment #8667163 - Flags: feedback?(aleth)
Attached image another-i.png (obsolete) —
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 :-|
Sh..t wrong copy pasted. This should now be the right.
Attachment #8667163 - Attachment is obsolete: true
Attachment #8667163 - Flags: feedback?(aleth)
Attachment #8667218 - Flags: feedback?(aleth)
Attachment #8667212 - Attachment is obsolete: true
Attached image final-final-i.png
That fixed the problem!

I guess we just need Fallen to test these on retina now...
Attachment #8667218 - Flags: review?(philipp)
Attachment #8666505 - Attachment is obsolete: true
Attachment #8666505 - Flags: review?(philipp)
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.
Attachment #8667218 - Flags: review?(philipp) → review+
Thanks, but it should also look better than the actual.
Keywords: checkin-needed
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
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 44.0
Attachment #8667218 - Flags: feedback?(aleth)
Blocks: 1225913
You need to log in before you can comment on or make changes to this bug.