1022060 - Firefox snippets should always include HiDPI images

Status: RESOLVED DUPLICATE of bug 881281

(Snippets Graveyard :: General, defect)

Description

[Justin Dolske [:Dolske]]

Attachment: Screenshot of Beta snippet with low-res/blurry icon

We're working on the remaining bits to ensure Firefox uses high-resolution UI images on hidpi displays. Support for Apple's Retina displays has fairly good for quite a while. We're soon going to be focusing on the same for Windows, as high-resolution displays are increasingly common.

The snippets on about:home stand out as being blurry and low-resolution, whereas the rest of the product around it is crisp and sharp. (I'm not sure if they all are, but the snippet I get on Beta certainly is.)

AIUI we just grab HTML from the snippet service and stuff it into the page, so I don't think supporting this requires any in-product changes. But that could certainly happen if needed.

Presumably the approaches here could be:

 1) Only include a high-res icon (<img src="64x64.png" width=32 height=32>),
    which renders at 1:1 on a Retina display and is downscaled for normal
    displays.
 2) Use SVG.
 3) Use CSS Media Queries, as we do in Firefox:
    .whatever { background-image: url(lowres.png); }
    @media (min-resolution: 2dppx) {
      .whatever { background-image: url(highres.png); }
    }

Comment 1

[Osmose [:osmose, :mkelly]]

We went with option 2 for a while but ran into issues with snippet filesizes, and we're planning on re-evaluating pretty much the options you lined out. There's already a bug for tracking this, although I don't know if the two default built-in snippets are retina-compatible yet, which might deserve their own bug since that would be an in-product change.