HiDPI support for some icons about firefox-gnome-theme HOT 8 CLOSED

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!

from firefox-gnome-theme.

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.

from firefox-gnome-theme.

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.

from firefox-gnome-theme.

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%.

from firefox-gnome-theme.

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.

from firefox-gnome-theme.

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.

from firefox-gnome-theme.

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

from firefox-gnome-theme.

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?

from firefox-gnome-theme.