Modernize the Retina support in Review Board.

Review Request #9261 — Created Oct. 10, 2017 and submitted

Review Board

This makes a couple of changes to Retina/high-DPI support, allowing for
crisper graphics on higher-DPI screens and preventing low-resolution
graphics from temporarily being used when higher-resolution graphics are
available on modern browsers.

The old retina.js script has been dropped in favor of the srcset
attribute. Modern browsers supporting srcset will make use of the best
graphics for the screen, even when moving windows between screens of
different DPIs, and unlike with retina.js, there won't be any need to
traverse the image elements and perform any graphics swaps. Older
browsers will use the new srcset shim in Djblets, which will traverse
the elements, but won't need to scan whether @2x images are needed by
performing HTTP HEAD requests.

Stylesheets now use the new .retina() in Djblets instead of its own
.at2x(), enabling support for SVG spritesheets for the icons on 3x and
higher screen DPIs.

It also switches the main logo to use srcset (preventing a jump from
low resolution to high) and fixes a syntax error with srcset for new
draft replies.

Tested various pages and made sure things looked right for 1x and 2x
image sets. Also temporarily turned off 2x, allowing SVG, and tested
that all icons scaled properly when zooming in.

Created a test page that tested each icon. Used it to verify all the
possible modes.

Tested that newly-created draft replies no longer caused errors in the
console and that they avatars appeared as high-DPI.

Loaded the page and saw that the Review Board logo didn't start with
the low-resolution image.

Tested that file attachment thumbnails were properly using the higher-DPI
thumbnails on a Retina display.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (eb47813)