• 
      

    Introduce new spinner graphics and a new spinner CSS component.

    Review Request #11034 — Created May 21, 2020 and submitted — Latest diff uploaded

    Information

    Djblets
    release-2.0.x

    Reviewers

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

    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 #djblets-ns-ui.spinners.set-theme(light) to
    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
    sizes.

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

    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.

    Commits

    Files