HiDPI support for some icons

[MrPowerMac]

I am using this theme with a 4K display with scaling set to 200%, and some of the icons in the title bar appear blurrier than their regular GNOME counterparts.

Firefox 60.0.1 with latest firefox-gnome-theme (3.26 light variant):

GNOME (in this case, Files):

Icons that are provided by Firefox itself (bookmarks menu, reload, overflow menu, etc.) look fine, so I'm assuming it's an issue with the theme alone. Note that the minimize, maximize, close button issue only applies to CSD being enabled, since with it disabled those buttons are rendered by GNOME as part of the title bar. The back/forward buttons appear the same regardless of CSD being on or not.

Perhaps some alternate icons for those with HiDPI displays could be added?

[lunakurame]

I can't reproduce that because looks like my Fedora virtual machine with GNOME 3.26 doesn't have an option to scale the UI at all. How did you enable it? I don't see it in the tweak tool, nor in the system settings, looks like they removed it? Can't check on Wayland because it's unusable on a VM. This says they really did remove scaling without leaving any alternative... I tried that command in a terminal but didn't work. Could you post your distro / gnome version and whether you are using X or Wayland, so I can try to reproduce it?

I thought we were loading SVG icons in those places so it should work on any resolution, but looks like it doesn't. Still SVG icons are available in /usr/share/icons, so I think this bug should be fixable.

[MrPowerMac]

I'm currently on Fedora 28, GNOME 3.28.2, Wayland session. Haven't tested with the Xorg session. I enabled the scaling through Settings->Devices->Displays, then choosing 200%.

[rafaelmardojai]

I can reproduce this. To archive this we should find a way to get scalable stock icons.

A workaround is to disable icons replacement in theme.css.

[lunakurame]

I can't change the scaling factor on Wayland either, I can only enable 150% scaling if I dig deep info dconf-editor, but then all Firefox icons look bad. So instead I just modified our CSS to make the buttons bigger and indeed our icons look bad. We use the moz-icon pseudo-protocol to fetch system icons, looks like they don't fetch SVG icon, but you can specify the size: source. We use this, you can even navigate to this link in your browser: moz-icon://stock/window-close-symbolic?size=menu. Apparently setting size to arbitrary values doesn't work in this case, but I found size=dialog gives about 3 times bigger icons. I don't know what other values work, I haven't found any. So I changed all our icons to the bigger ones.

Before (look at the forward button): After:

So that looks good to me, I don't know if it looks good on a real machine with UI scaling, but it should. I just pushed this fix to master, please update your FF theme and let me know. And thanks for reporting this bug, of course.

[lunakurame]

Oops, that broke our CSD icons. My bad, fixed.

[rafaelmardojai]

Looks good to me too (scaling set to 200%). Maybe it will break in some higher scaling, but it's a big improvement.

@MrPowerMac can you test this with all your available scales?

[MrPowerMac]

Tested at all scaling percentages (100%-400%), and the icons look great! No complaints here. If there's any other scaling problems with the theme, I have yet to find them. Thanks for the quick fix!

[lunakurame]

I found more about moz-icon, if anyone's interested. A draft of a protocol specification: link and Firefox' code which parses those URLs: link.

Looks like those values are allowed:

static const char* kSizeStrings[] =
{
  "button",
  "toolbar",
  "toolbarsmall",
  "menu",
  "dnd",
  "dialog"
};

And you can also define an icon state, not just size:

static const char* kStateStrings[] =
{
  "normal",
  "disabled"
};

Integer values should also work, but they don't. Probably a FF bug, idk. FF accepts it as a valid URL but still serves a 16×16 icon. dialog is 48×48 and it's the largest we can get if numbers don't work. moz-icon seems to fetch PNG icons, Firefox' stock icons are SVG so they can scale to any size, eg. here's the reload button's icon: chrome://browser/skin/reload.svg.

I also did some math. The largest icons we can get are 48 px wide (and we are using them now), the header bar icons look about 6 mm wide at 96 PPI, which is kinda a standard, so using a 48 px wide icon means it's enough for 203 PPI displays.

Some more numbers (more PPI = smaller pixels):

• 23" 1080p monitor = 96 PPI
• 27" 1440p monitor = 109 PPI
• 27" 2160p (4K) monitor = 163 PPI
• 27" 4320p (8K) monitor = 383 PPI
• iMac with Retina 4K Display 21.5" = 219 PPI
• iPhone 8 Plus, 5.5" 1080p = 401 PPI

I'd say our current icons are more than enough for 4K screens and I doubt anyone can see a difference between 4K and 8K on a 27" display. I can hardly see single pixels on my 109 PPI monitor and Apple considers that iMac's 219 PPI a Retina display, so I think we can assume we will never need bigger icons for the header bar anyway.