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

VERIFIED FIXED in Firefox 45

Status

()

defect
P3
normal
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: cwiiis, Assigned: ntim)

Tracking

(Blocks 1 bug)

Trunk
Firefox 45
All
Windows 10
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox42 affected, firefox45 verified)

Details

Attachments

(5 attachments, 10 obsolete attachments)

Reporter

Description

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

Updated

4 years ago
Blocks: windows-10
Assignee

Comment 1

4 years ago
Seems DPI specific too.
Blocks: theme-win10
No longer blocks: windows-10
Summary: Iconography in tab bar does not match Windows 10 window iconography → Caption button icons don't match Windows 10 window iconography
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.
Do you know what your display specs are and what your scaling factor is set to?
Flags: needinfo?(chrislord.net)
Assignee

Comment 4

4 years ago
Hmm, I somehow thought this bug was about the caption button icons looking uneven (especially the close icon).
Summary: Caption button icons don't match Windows 10 window iconography → [HDPI] Toolbar button icons are blurry
Reporter

Comment 5

4 years ago
(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)
Flags: needinfo?(chrislord.net)
Reporter

Comment 6

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

Updated

4 years ago
Summary: [HDPI] Toolbar button icons are blurry → [HDPI] tab bar button (new tab, tab overflow scroll, panorama) icons are blurry
Blocks: 1192839
Priority: -- → P3
(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...
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.
Summary: [HDPI] tab bar button (new tab, tab overflow scroll, panorama) icons are blurry → [HiDPI] tab bar button (new tab, tab overflow scroll, panorama) icons are blurry
No longer blocks: 1192839
(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.
(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 Toolbar@2x.png. So it's still not clear to me what we want this bug to be about.

Comment 12

4 years ago
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?
Flags: needinfo?(dao)

Comment 13

4 years ago
(I also think that the blurriness is just less noticeable in the other toolbars, but maybe that's just me?)
I have no problem with using SVG for these icons.
Flags: needinfo?(dao) → needinfo?(shorlander)
I wouldn't spend extra time on the panorama icon, though.
Assignee

Comment 16

4 years ago
(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.
Assignee

Comment 18

4 years ago
Posted image tabview.svg
Assignee

Comment 19

4 years ago
Posted image newtab.svg (obsolete) —
Assignee

Comment 20

4 years ago
Posted image tab-arrow-left.svg (obsolete) —
Assignee

Comment 21

4 years ago
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.
Assignee

Comment 22

4 years ago
Posted image newtab-inverted.svg (obsolete) —
Assignee

Comment 23

4 years ago
Posted image newtab-inverted-XPVista7.svg (obsolete) —
Assignee

Comment 24

4 years ago
Posted image newtab-XPVista7.svg (obsolete) —
Assignee

Comment 25

4 years ago
Posted image tab-arrow-left.svg (obsolete) —
Attachment #8658386 - Attachment is obsolete: true
Assignee

Comment 26

4 years ago
Posted image tab-arrow-left-XPVista7.svg (obsolete) —
Assignee

Comment 27

4 years ago
Posted image tab-arrow-left-XPVista7.svg (obsolete) —
Fixed up the indentation
Attachment #8660837 - Attachment is obsolete: true
Assignee

Comment 28

4 years ago
Posted image tab-arrow-left-inverted.svg (obsolete) —
Assignee

Updated

4 years ago
Attachment #8658373 - Attachment description: panorama.svg → tabview.svg
Attachment #8658373 - Attachment filename: panorama(5).svg → tabview.svg
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?
Flags: needinfo?(shorlander)
Assignee

Comment 30

4 years ago
(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.
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
Assignee

Comment 31

4 years ago
Posted patch Patch (obsolete) — Splinter Review
I've addressed Stephen comments in the patch.
Attachment #8658375 - Attachment is obsolete: true
Attachment #8658393 - Attachment is obsolete: true
Attachment #8660814 - Attachment is obsolete: true
Attachment #8660816 - Attachment is obsolete: true
Attachment #8660833 - Attachment is obsolete: true
Attachment #8660840 - Attachment is obsolete: true
Attachment #8660842 - Attachment is obsolete: true
Attachment #8687550 - Flags: review?(dao)
Assignee

Comment 32

4 years ago
Posted patch Patch v1.1Splinter Review
Fixed up the indentation in some SVG files.
Attachment #8687550 - Attachment is obsolete: true
Attachment #8687550 - Flags: review?(dao)
Attachment #8687551 - Flags: review?(dao)
Attachment #8687551 - Flags: review?(dao) → review+
Assignee

Updated

4 years ago
Keywords: checkin-needed

Comment 35

4 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/ec8fee39af3b
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45

Comment 36

4 years ago
Posted image New tab icon
New new-tab inverted icon looks blurry on dark lightweight theme, because of too bright icon border.

Comment 37

4 years ago
(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?
Flags: needinfo?(ntim.bugs)
Assignee

Comment 38

4 years ago
(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 ?
Flags: needinfo?(ntim.bugs) → needinfo?(gijskruitbosch+bugs)

Comment 39

4 years ago
(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.
Flags: needinfo?(gijskruitbosch+bugs)
Assignee

Updated

4 years ago
Depends on: 1227235
Assignee

Comment 40

4 years ago
(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.
Confirming the fix on a Microsoft Surface Pro 2 device running Windows 10 x64.
Tested with latest 45.0a1 Nightly.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.