Toolbar button icon for High DPI/Retina – how?

Add-ons Development
#1

I don’t have a “High DPI” or “Retina” screen. 1px in CSS means 1 pixel of my screen. So using a 16x16 PNG for a toolbar button icon works great for me.

However, MDN recommends using a 32x32 PNG for 2ddpx, using the following code:

#my-addon-button {
    list-style-image: url(icon16.png);
}

/* High-resolution displays */
@media (min-resolution: 2dppx) {
    #my-addon-button {
        list-style-image: url(icon32.png);
    }
}

Trying to make an as good add-on as possible, I used the above code in VimFx. However, a user with a Retina MacBook (using both Mac OSX and GNU/Linux on it) then reported the icon being too large (in both operating systems). That makes sense to me, because as far as I know you’re supposed to explicitly set the width of images@2x (at least when doing “regular web development”). So I updated the above code:

#my-addon-button {
    list-style-image: url(icon16.png);
}

/* High-resolution displays */
@media (min-resolution: 2dppx) {
    #my-addon-button {
        list-style-image: url(icon32.png);
    }

    #my-addon-button image {
        width: 16px;  /* ADDED */
    }
}

That solved the issue for the Retina MacBook user: The icon got the same size as other toolbar button icons, and became super sharp.

However, since that change two different users have reported that they use layout.css.devPixelsPerPx set to 2, and then the icon becomes way too small, or even invisible. Removing width: 16px; fixes their problem.

So, how are you supposed to make your toolbar button icon look good for “High DPI” users?

Aren’t other extensions running into this? Or do most extensions simply only provide a 16x16 icon, leaving “High DPI” users with a blurry (but correctly sized) icon?

(Some extensions use an SVG as the icon, and that seems to “just work” in all cases. Unfortunately, I’m not able to convert our PNG to an SVG.)

One idea I have is to add an observer to the layout.css.devPixelsPerPx pref and put an attribute on #main-window based on its value, allowing me to use CSS like:

#my-addon-button {
    list-style-image: url(icon16.png);
}

/* High-resolution displays */
@media (min-resolution: 2dppx) {
    #my-addon-button {
        list-style-image: url(icon32.png);
    }

    /* Note the `:not()` below: */
    #main-window:not([vimfx-devPixelsPerPx="2"]) #my-addon-button image {
        width: 16px;
    }
}

Here are some relevant VimFx issues in case anyone is interested:

#2

Users of VimFx helped me come up with the following solution:

 #my-addon-button {
     list-style-image: url(icon16.png);
 }

/* This is the important part: */
/* EDIT: No longer needed since Firefox 44. */
#my-addon-button image {
     width: inherit;
 }

 /* High-resolution displays */
 @media (min-resolution: 2dppx) {
     #my-addon-button {
         list-style-image: url(icon32.png);
    }
}
#3

The VimFx issue reporters helped me test out that there’s actually no need to set the width of the button image anymore. This was a bug in Firefox, which was fixed in Firefox 44 (mentioned in the Add-on Compatibility for Firefox 44 blog post).

So, the conclusion is that the MDN example code I mentioned in the first post is correct (in Firefox 44+).

Sorry for the confusion. (Hopefully, this might still help other confused add-on authors, though!)