• 
      

    Introduce new spinner graphics and a new spinner CSS component.

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

    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.

    Summary ID
    Introduce new spinner graphics and a new spinner CSS component.
    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.
    ecd411c4cd99974e5a47af25caae00e7d22f3bbf
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-2.0.x (933ea60)