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
attributes and the usage of
@3x(or higher) and SVG image files in
srcsetsupport 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:
srcsetcapability check has been fixed. The old check attempted
get()on the test element, which is actually intended to
perform an HTTP request. The result was that
marked as supported. The intent was to look up the DOM element from
the list, which has been fixed.
The new method no longer attempts to parse an empty
change the image URL if the pixel ratio hasn't changed, reducing the
workload for images without
srcsetor when repeatedly called.
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
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.
.at2xCSS mixin has been replaced with a new
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
Tested that the
srcsetsupport capability was reporting the correct
.at2x()continued to work as it did before.
Tested the new
.retina()with multiple density levels and with SVG
Tested that integrations were setting
Tested that datagrids were using SVGs when limiting the max density
level to 1 (forcing SVGs for Retina displays).
- Forced a math calculation on the LessCSS side, instead of having it on the CSS side. (This bug(?) was present in the upstream retina.less.)
Djblets.enableRetinaImagesto never return any value.
Revision 2 (+207 -52)
Checks run (2 succeeded)
- Changed the terminology to "ratio".
- Filed capitalization of a word in the docs.
Revision 3 (+205 -52)