• 
      

    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)