Improve high-DPI support across Djblets.

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

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

Description From Last Updated

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

brenniebrennie

The other code path returns undefined.

brenniebrennie

Can you clarify that this is up to and including this value? It might also be more accurate to use …

daviddavid

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

daviddavid

File probably shouldn't be capitalized.

daviddavid
brennie
  1. 
      
  2. Show all issues

    The other code path returns undefined.

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

  3. 
      
brennie
  1. 
      
  2. djblets/static/djblets/css/mixins/retina.less (Diff revision 1)
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Show all issues

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

    1. Just checked. It does not.

  3. 
      
chipx86
david
  1. 
      
  2. djblets/static/djblets/css/mixins/retina.less (Diff revision 2)
     
     
     
     
     
    Show all issues

    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. Show all issues

    File probably shouldn't be capitalized.

  4. 
      
chipx86
david
  1. 
      
  2. djblets/static/djblets/css/mixins/retina.less (Diff revisions 2 - 3)
     
     
    Show all issues

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

  3. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-0.10.x (38a2d70)