the new toolbar icons are blurry

VERIFIED FIXED in Firefox 44

Status

defect
VERIFIED FIXED
4 years ago
11 months ago

People

(Reporter: pbro, Assigned: bbell)

Tracking

unspecified
Firefox 45
Unspecified
Windows 10
Dependency tree / graph

Firefox Tracking Flags

(firefox43 unaffected, firefox44 verified, firefox45 verified)

Details

Attachments

(5 attachments, 1 obsolete attachment)

Reporter

Description

4 years ago
Posted image 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.
Reporter

Comment 1

4 years ago
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.
(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...
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?
Flags: needinfo?(shorlander)
Posted image 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!
Attachment #8669014 - Flags: ui-review?(bgrinstead)
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.
Posted image Pixel Grid Alignment
The icons don't appear to be pixel snapped, that is causing the blurriness.
Flags: needinfo?(shorlander)
Comment on attachment 8669014 [details]
tool-icons-27.svg

Clearing flag, looks like Comment 6 will do the trick
Attachment #8669014 - Flags: ui-review?(bgrinstead)
Posted patch bug1210752.patch (obsolete) — Splinter Review
Attachment #8680222 - Flags: review?(pbrosset)
Attachment #8680222 - Attachment is obsolete: true
Attachment #8680222 - Flags: review?(pbrosset)
Attachment #8680250 - Flags: review?(pbrosset)
Reporter

Comment 10

4 years ago
Posted image toolbar-icons-2.png
Much better with the patch applied, thanks!
Reporter

Updated

4 years ago
Assignee: nobody → hholmes
Status: NEW → ASSIGNED
Reporter

Updated

4 years ago
Attachment #8680250 - Flags: review?(pbrosset) → review+
Reporter

Comment 11

4 years ago
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.
(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.
We'll need to request uplift for this for 44 since the merge happened early
Marking checkin-needed - icon swap, shouldn't need a try push
Keywords: checkin-needed

Comment 16

4 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8a1c05c18fee
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45
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
Attachment #8680250 - Flags: approval-mozilla-aurora?

Updated

4 years ago
Depends on: 1220382
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.
Attachment #8680250 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
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
QA Whiteboard: [testday-20160115]
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!
Status: RESOLVED → VERIFIED
QA Whiteboard: [testday-20160115] → [testday-20160115][testday-20160219]
Assignee

Updated

3 years ago
Assignee: hholmes → bbell

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.