I recently got a new laptop, and one of the key features (for me) on this new laptop was that it had a high DPI screen, and for the most part, Fedora 21 Alpha looks amazing with so many extra pixels. However, when I launched Firefox, I was greeted with the following less-than-amazing view:    firefox.png

The text in the body of pages was tiny compared to the rest of the interface, and the tabs were not big enough to contain the labels, and the icons in the top right of the Firefox window were also very small. So after a bit of research, it seems that support for high DPI screens in Firefox is not switched on automatically if you have a high DPI screen. So the trick here is that you need to tweak your Firefox’s about:config to double the size of everything in the interface.

Enabling High DPI mode in Firefox

Enabling the high DPI mode in Firefox is actually pretty simple, it is just a matter of setting the layout.css.devPixelsPerPx value in about:config to a value of 2 (i.e. double the size).

To do this, open up a new tab, and type about:config into the address bar, and press enter.

Then use the search box in this page to find the key layout.css.devPixelsPerPx and then change the value from -1.0 to 2firefox2.png

Now, flip back to a normal Firefox tab, and your interface should look a lot better.

firefox3.png

Fixing the fuzzy icons

However, on closer inspection you will realise that the icons in the Firefox toolbar, while now the correct proportions, are now slightly fuzzy compared to the text. This is because the default Firefox theme ships bitmap icons that don’t work well with High DPI displays

firefox4.png

The easiest way to fix this, and to make your Firefox fit that much better with the Fedora Workstation, is to install the GNOME Firefox theme. This theme uses scalable vector assets for the icons (SVGs) that look crisp and clean on a high DPI display:

firefox5.png