Introduce new spinner graphics and a new spinner CSS component.
Review Request #11034 — Created May 21, 2020 and updated
For years now, we've used Font Awesome's spinner capabilities whenever
we wanted to show a spinner. This was an easy approach and had the
benefits of scalable graphics and reliable alpha-transparency (something
we didn't necessarily have on all supported browsers years back), but it
suffered from wobbly animations due to pixel precision and sizing issues
in Font Awesome, and from a lot of required setup to just display a
This change introduces a replacement spinner, used by simply adding a
<div class="djblets-o-spinner"></div>to a page. This makes use of
SVGs, embedded within the stylesheet using data-URIs (which gives us
instant rendering without more server round-trips), and gives us all the
benefits of the old Font Awesome spinner without the downsides.
We have two variations on the spinner: A dark version, and a light
version. These are available for the different backgrounds that the
spinners might be placed on. Dark spinners are the default, but
stylesheets can call a new
enable the light spinner for a given selector.
The new spinners are also sized appropriately for whatever line of text
they're currerntly on. That means that they won't cause any jumps in
height for parent elements due to discrepencies between text and spinner
In order for the new theme variants on spinners to work, we need to
enable a new option for LessCSS,
--rewrite-urls=all. This enables some
useful relative URL normalization when importing stylesheets. If
Stylesheet A has a relative URL, and Stylesheet B imports Stylesheet A,
the relative URLs inside it will be normalized correctly so that
Stylesheet B can reference the correct files. This will require the same
option to be added to consuming applications.
Tested this spinner in several places where we currently use the older
Tested this in some upcoming changes, which place spinners in Config Forms
list item buttons. Saw that the size stayed correct.
Also tested with theme variant overrides from other stylesheets.