1210752 - the new toolbar icons are blurry

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[Patrick Brosset <:pbro>]

Attachment: toolbar-icons.png

Tested on Windows 10, I haven't tested on other platforms.
The new icons look really nice, but they have blurry edges.

Comment 1

[Patrick Brosset <:pbro>]

Hmm, looks like the previous ones were sort of blurry too, but I guess I'm seeing this now because the old ones had a bit more straight lines (especially the inspector which now has rounded corners).
Is there anything we can do?
They look so sharp on a mac retina screen that it feels really odd when I switch over to windows on a normal density screen.

Comment 2

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #1)
> Hmm, looks like the previous ones were sort of blurry too, but I guess I'm
> seeing this now because the old ones had a bit more straight lines
> (especially the inspector which now has rounded corners).
> Is there anything we can do?
> They look so sharp on a mac retina screen that it feels really odd when I
> switch over to windows on a normal density screen.

That is so weird—I'll dig around and see what I can learn about SVGs appearing blurry and how to fix it...

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

Stephen, it looks like you've worked with some other resolution bugs in the past -->> https://bugzilla.mozilla.org/show_bug.cgi?id=878288

Any chance you've run into what we're experiencing here?

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: tool-icons-27.svg

Test SVG with some different Illustrator flags set; it's possible that the editor exports with an anti-aliasing flag that's creating the fuzziness (or it's possible that we need to pass a crisp-edges flag or something like that as outlined here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering)

I haven't cleaned up this file at all, sorry!

Comment 5

[Helen V. Holmes (:helenvholmes) (:✨)]

So, spent a bit of time with bgrins on this trying a few things:

- Seems like shape-rendering has little-to-no effect. We went messed with some of the flags outlined here but none seemed to do much to improve the fuzziness below 20px: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

- Tried messing with some anti-aliasing flags in Illustrator before exporting. This didn't do anything. Bleh.

I read through some stack exchange issues and found this, which seems to suggest it's more of an issue with curved lines in SVGs at small sizes: http://graphicdesign.stackexchange.com/questions/42438/svg-images-showing-up-blurry-in-safari-in-any-size-smaller-than-20-px (also relevant: http://opticalcortex.com/svg-rendering-in-browsers/)

So, unless shorlander knows of some tricks, the answer to solving the fuzz might be to modify the icons themselves.

Comment 6

[Stephen Horlander [:shorlander]]

Attachment: Pixel Grid Alignment

The icons don't appear to be pixel snapped, that is causing the blurriness.

Comment 7

[Brian Grinstead [:bgrins]]

Comment on attachment 8669014 [details]
tool-icons-27.svg

Clearing flag, looks like Comment 6 will do the trick

Comment 8

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: bug1210752.patch

Comment 9

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: nonfuzzy-icons.patch

Comment 10

[Patrick Brosset <:pbro>]

Attachment: toolbar-icons-2.png

Much better with the patch applied, thanks!

Comment 11

[Patrick Brosset <:pbro>]

The performance tool's icon is probably the one that remains the most blurry one, but I don't this comes from a lack of pixel-snapping, rather from the fact that it doesn't have any straight lines and is quite complex.

Comment 12

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #11)
> The performance tool's icon is probably the one that remains the most blurry
> one, but I don't this comes from a lack of pixel-snapping, rather from the
> fact that it doesn't have any straight lines and is quite complex.

Agreed, might be worth revisiting eventually.

Comment 13

[Brian Grinstead [:bgrins]]

We'll need to request uplift for this for 44 since the merge happened early

Comment 14

[Brian Grinstead [:bgrins]]

Marking checkin-needed - icon swap, shouldn't need a try push

Comment 15

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/8a1c05c18fee

Comment 16

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/8a1c05c18fee

Comment 17

[Brian Grinstead [:bgrins]]

Comment on attachment 8680250 [details] [diff] [review]
nonfuzzy-icons.patch

Approval Request Comment
[Feature/regressing bug #]: 1205046 
[User impact if declined]: Devtools tab icons will be fuzzy
[Describe test coverage new/current, TreeHerder]: N/A
[Risks and why]: This is an image swap with some pixel snapping, no code changes
[String/UUID change made/needed]: none

Comment 18

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8680250 [details] [diff] [review]
nonfuzzy-icons.patch

It's still early in the Aurora cycle and this change looks safe enough. Approved for uplift to Aurora44.

Comment 19

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/8733c7ad72a4

Comment 20

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/8a1c05c18fee

Comment 21

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-b2g44_v2_5/rev/8733c7ad72a4

Comment 22

[Mohammad Maruf Islam]

I have reproduced this bug with Firefox Nightly 44.0a1(Build ID: 20151002030204) on windows 10 (64-bit) with the instructions from Comment 0.

The bug is verified as fixed with Firefox Beta 44.0b9 (Build ID:20160114165817) .
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0

The bug is verified as fixed with Firefox Developer edittion 45.0a2 (Build ID:20160115004002) .
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0

Comment 23

[Khalid Syfullah Zaman [:khalid32]]

I have reproduced this bug on Nightly 44.0a1(2015-10-02) on Ubuntu 14.04 LTS, 32-bit!

This bug is verified on Latest Beta 45.0b7!

Build ID: 20160218171844
User Agent: Mozilla/5.0 (X11; Linux i686; rv:45.0) Gecko/20100101 Firefox/45.0

As this bug is verified on Windows 10, 64-bit(comment 22), I am marking this as verified!