Improve high-DPI support across Djblets.
Review Request #9260 — Created Oct. 10, 2017 and submitted — Latest diff uploaded
This introduces a series of improvements and fixes for high-DPI (Retina)
support across Djblets, focusing primarily on support forsrcset
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:
The
srcset
capability check has been fixed. The old check attempted
to callget()
on the test element, which is actually intended to
perform an HTTP request. The result was thatsrcset
was never
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
srcset
or
change the image URL if the pixel ratio hasn't changed, reducing the
workload for images withoutsrcset
or 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 handlesrcset
.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).