• 
      

    Improve high-DPI support across Djblets.

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

    Information

    Djblets
    release-0.10.x
    d850fc3...

    Reviewers

    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
    CSS.

    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 retinajs.com, 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
    value.

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

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

    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).