Improve high-DPI support across Djblets.

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


This introduces a series of improvements and fixes for high-DPI (Retina)
support across Djblets, focusing primarily on support for srcset
attributes and the usage of @3x (or higher) and SVG image files in

The Avatar srcset support has been made more general. Instead of
focusing entirely on avatars, the new support works on all image
elements. There's a few key differences in the new method:

  1. The srcset capability check has been fixed. The old check attempted
    to call get() on the test element, which is actually intended to
    perform an HTTP request. The result was that srcset was never
    marked as supported. The intent was to look up the DOM element from
    the list, which has been fixed.

  2. The new method no longer attempts to parse an empty srcset or
    change the image URL if the pixel ratio hasn't changed, reducing the
    workload for images without srcset or when repeatedly called.

  3. The new method is also a standalone method, rather than a jQuery
    method, lazily performing the DOM query only if needed, improving
    performance on modern browsers that natively handle srcset.

The old avatar method, introduced within the 0.10 release cycle, has
been removed. The only effective difference it had with the new support
was the addition of a CSS class, which wasn't used anywhere.

The old .at2x CSS mixin has been replaced with a new .retina mixin.
This one is based on the latest mixin from, but heavily
modified to allow usage of SVG files. When enabled, screen pixel ratios
higher than the highest ratio level (2x, 3x, etc.) specified will use
the SVG file instead, ensuring quality on all screen resolutions. The
mixin for this has moved to a new file (css/mixins/retina.less), and a
a compatibility file and compatibility macro have been added.

The integrations list has also been updated to use srcset.

Tested that the srcset support capability was reporting the correct

Tested that .at2x() continued to work as it did before.

Tested the new .retina() with multiple density levels and with SVG

Tested that integrations were setting srcset correctly.

Tested that datagrids were using SVGs when limiting the max density
level to 1 (forcing SVGs for Retina displays).

  • 0
  • 0
  • 4
  • 1
  • 5
Description From Last Updated
  2. The other code path returns undefined.

    1. Ah, this was before I made it a non-jQuery function.

  2. djblets/static/djblets/css/mixins/retina.less (Diff revision 1)

    Will autoprefixer not do the right thing here with respect to -min-device-pixel-ratio, etc.?

    1. Just checked. It does not.

  2. djblets/static/djblets/css/mixins/retina.less (Diff revision 2)

    Can you clarify that this is up to and including this value? It might also be more accurate to use the word "ratio" instead of "level"

    1. Sure. Was going off their terminology.

  3. File probably shouldn't be capitalized.

  2. djblets/static/djblets/css/mixins/retina.less (Diff revisions 2 - 3)

    How about "2 through this number (inclusive) will be used"?

Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-0.10.x (38a2d70)