1188785 - [HiDPI] tab bar button (new tab, tab overflow scroll, panorama) icons are blurry

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P3)

Description

[Chris Lord [:cwiiis]]

Attachment: Firefox tab-bar icons.png

The icons in the tab bar looks bulbous and slightly blurry next to the sharp icons that Windows 10 uses in the window frame.

Comment 1

[Tim Nguyen :ntim]

Seems DPI specific too.

Comment 2

[Stephen Horlander [:shorlander]]

Yeah those all look pretty good on my screen except the dropdown arrow. The big difference is that the caption button icons are SVG and the rest are PNG. Using SVG everywhere might help with unusual scaling factors.

Comment 3

[Stephen Horlander [:shorlander]]

Do you know what your display specs are and what your scaling factor is set to?

Comment 4

[Tim Nguyen :ntim]

Hmm, I somehow thought this bug was about the caption button icons looking uneven (especially the close icon).

Comment 5

[Chris Lord [:cwiiis]]

(In reply to Tim Nguyen [:ntim] from comment #4)
> Hmm, I somehow thought this bug was about the caption button icons looking
> uneven (especially the close icon).

1080p screen with 125% scaling. (This is on a Dell XPS12)

Comment 6

[Chris Lord [:cwiiis]]

Attachment: Tab bar in Edge

This bug wasn't so much about the icons being fuzzy (though that doesn't help), but that they differ drastically in style compared to the icons for things in similar situations in Windows 10. Elsewhere in Windows 10, including in Edge, icons in the window chrome tend to be very thin, sharp lines with no fills, and only at 45-degree angles.

We don't need to ape the style exactly, but we should at least be consistent (I notice our tab-close icon looks correct and Windows 10-like).

Attached a screenshot of Edge for comparison.

Comment 7

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander [:shorlander] from comment #2)
> Yeah those all look pretty good on my screen except the dropdown arrow. The
> big difference is that the caption button icons are SVG and the rest are
> PNG. Using SVG everywhere might help with unusual scaling factors.

This means that all toolbar button icons (all PNGs) are affected too, not just those in the tab bar. The original summary, "Toolbar button icons are blurry", seemed to capture this. The new one doesn't. But now comment 6 says that this bug was meant to be about something else entirely...

Comment 8

[Dão Gottwald [:dao]]

Unblocking bug 1192839 until people are on the same page regarding what exactly this bug should be about and how we might address it in time for Firefox 41.

Comment 9

[Stephen Horlander [:shorlander]]

(In reply to Dão Gottwald [:dao] from comment #7)
> (In reply to Stephen Horlander [:shorlander] from comment #2)
> > Yeah those all look pretty good on my screen except the dropdown arrow. The
> > big difference is that the caption button icons are SVG and the rest are
> > PNG. Using SVG everywhere might help with unusual scaling factors.
> 
> This means that all toolbar button icons (all PNGs) are affected too, not
> just those in the tab bar. The original summary, "Toolbar button icons are
> blurry", seemed to capture this. The new one doesn't. But now comment 6 says
> that this bug was meant to be about something else entirely...

Oh, I did not see Comment 6. I don't think we should change our default icon styling to that extent just for Windows 10.

Comment 10

[Stephen Horlander [:shorlander]]

But we should definitely fix blurry icons.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander [:shorlander] from comment #10)
> But we should definitely fix blurry icons.

Except for tabview.png they should only be blurry because we downscale them, just like [e-mail]. So it's still not clear to me what we want this bug to be about.

Comment 12

[:Gijs (he/him)]

To propose something concrete that I think would resolve the concerns without radically changing our iconography:

The icons in the tabbar (at least the ones in the screenshot) are not in Toolbar.png, which would make it relatively easy to replace them all with SVG versions (easier than doing that for all of Toolbar.png, anyway), which would ensure a much crisper result on 125%, which is (as dolske noted elsewhere) our most-used resolution after 100%. 125% doesn't look amazing with the 200% icons because the downscaling factor isn't "nice", even if it looks better than upscaling the 100% icons.

Does that sound like an OK plan, Dão? If so, can you ping Stephen for these assets?

Comment 13

[:Gijs (he/him)]

(I also think that the blurriness is just less noticeable in the other toolbars, but maybe that's just me?)

Comment 14

[Dão Gottwald [:dao]]

I have no problem with using SVG for these icons.

Comment 15

[Dão Gottwald [:dao]]

I wouldn't spend extra time on the panorama icon, though.

Comment 16

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #15)
> I wouldn't spend extra time on the panorama icon, though.

The panorama icon is inside Toolbar.png.

Comment 17

[Dão Gottwald [:dao]]

This one isn't: http://mxr.mozilla.org/mozilla-central/source/browser/themes/windows/tabview/tabview.png

Comment 18

[Tim Nguyen :ntim]

Attachment: tabview.svg

Comment 19

[Tim Nguyen :ntim]

Attachment: newtab.svg

Comment 20

[Tim Nguyen :ntim]

Attachment: tab-arrow-left.svg

Comment 21

[Tim Nguyen :ntim]

Comment on attachment 8658386 [details]
tab-arrow-left.svg

This one doesn't look quite right, since it's a misaligned, it also looks a bit odd in 2x sizing.

Comment 22

[Tim Nguyen :ntim]

Attachment: newtab-inverted.svg

Comment 23

[Tim Nguyen :ntim]

Attachment: newtab-inverted-XPVista7.svg

Comment 24

[Tim Nguyen :ntim]

Attachment: newtab-XPVista7.svg

Comment 25

[Tim Nguyen :ntim]

Attachment: tab-arrow-left.svg

Comment 26

[Tim Nguyen :ntim]

Attachment: tab-arrow-left-XPVista7.svg

Comment 27

[Tim Nguyen :ntim]

Attachment: tab-arrow-left-XPVista7.svg

Fixed up the indentation

Comment 28

[Tim Nguyen :ntim]

Attachment: tab-arrow-left-inverted.svg

Comment 29

[Stephen Horlander [:shorlander]]

Mostly looks good to me. Only have a retina display to test on at the moment, so not sure how it looks on a 1x screen. 

Can you please use the same shape for the arrows that we use for the subpanel arrow here?: http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/controlcenter/arrow-subview-back.svg?raw=1

How do you think it would look using the same border style from tab-arrow-left-XPVista7.svg on newtab-XPVista7.svg?

Comment 30

[Tim Nguyen :ntim]

(In reply to Stephen Horlander [:shorlander] from comment #29)
> Mostly looks good to me. Only have a retina display to test on at the
> moment, so not sure how it looks on a 1x screen. 
Thanks for taking a look ! I've tested this on Windows, and it looks fine on 1x.

> Can you please use the same shape for the arrows that we use for the
> subpanel arrow here?:
> http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/
> controlcenter/arrow-subview-back.svg?raw=1
Sure, will do.

> How do you think it would look using the same border style from
> tab-arrow-left-XPVista7.svg on newtab-XPVista7.svg?

I personally think the gradient on the newtab file is more similar than the original PNGs. The newtab file has a shadow effect (like the PNG), while the tab-arrow file has a solid stroke which I'm not too fond of, I had to go with this solution because it was tricky to reproduce the same shadow effect for the arrow file.

Comment 31

[Tim Nguyen :ntim]

Attachment: Patch

I've addressed Stephen comments in the patch.

Comment 32

[Tim Nguyen :ntim]

Attachment: Patch v1.1

Fixed up the indentation in some SVG files.

Comment 33

[Tim Nguyen :ntim]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=48410e8877b2

Comment 34

[Pulsebot]

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

Comment 35

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

https://hg.mozilla.org/mozilla-central/rev/ec8fee39af3b

Comment 36

[UK92]

Attachment: New tab icon

New new-tab inverted icon looks blurry on dark lightweight theme, because of too bright icon border.

Comment 37

[:Gijs (he/him)]

(In reply to UK92 from comment #36)
> Created attachment 8690608 [details]
> New tab icon
> 
> New new-tab inverted icon looks blurry on dark lightweight theme, because of
> too bright icon border.

Looks like this is just because we stroke the border. :ntim, was there any reason to actually do that? For the dark lwtheme, maybe we should be using the same style as the win10 caption buttons... Can you file the appropriate new bug for this?

Comment 38

[Tim Nguyen :ntim]

(In reply to :Gijs Kruitbosch from comment #37)
> (In reply to UK92 from comment #36)
> > Created attachment 8690608 [details]
> > New tab icon
> > 
> > New new-tab inverted icon looks blurry on dark lightweight theme, because of
> > too bright icon border.
> 
> Looks like this is just because we stroke the border. :ntim, was there any
> reason to actually do that? 
The old PNG image had a border/stroke around the plus shape. All I did was converting the file to SVG.

> For the dark lwtheme, maybe we should be using
> the same style as the win10 caption buttons...
Are you referring to the native caption button style or our lightweight theme caption button style ?

Comment 39

[:Gijs (he/him)]

(In reply to Tim Nguyen [:ntim] from comment #38)
> > For the dark lwtheme, maybe we should be using
> > the same style as the win10 caption buttons...
> Are you referring to the native caption button style or our lightweight
> theme caption button style ?

The latter.

Comment 40

[Tim Nguyen :ntim]

(In reply to :Gijs Kruitbosch from comment #39)
> (In reply to Tim Nguyen [:ntim] from comment #38)
> > > For the dark lwtheme, maybe we should be using
> > > the same style as the win10 caption buttons...
> > Are you referring to the native caption button style or our lightweight
> > theme caption button style ?
> 
> The latter.

Filed bug 1227235. The lightweight theme caption button style is the same as the new tab button style, but with a darker stroke.

Comment 41

[Cornel Ionce [:noni] [Hubs QA]]

Confirming the fix on a Microsoft Surface Pro 2 device running Windows 10 x64.
Tested with latest 45.0a1 Nightly.