Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 294737

Update Drupal's default throbber icons

$
0
0

Problem/Motivation

The default AJAX progress throbber icons looks poor on a retina display.

Note: some instances of .ajax-progress-throbber currently reference throbber-active.gif, while others reference loading-small.gif. loading-small.gif is being worked on in a separate issue #2575253.

Proposed resolution

  • Replace throbber-active.gif with a high resolution animated SVG throbber-active.svg.
  • Replace throbber-inactive.png with a high resolution static SVG throbber-inactive.svg.
  • Maintain existing image size, color, and animation speed from the originals.
  • Replace references to each file in core ajax-progress and autocomplete stylesheets.
  • Replace references to each file Stable theme.
  • Redirect old GIFs to new SVGs in core's bundled .htaccess file.

Codepen for before/after comparison:
https://codepen.io/jameswilson/full/LYoZaXy

Before:

Inactive: PNG ajax progress throbber inactive
Active: GIF ajax progress throbber active

After:

Inactive: throbber-inactive.svg
Active: throbber-active.svg

Note: server limitations on uploading SVGs and/or rendering images from git.drupalcode.org prevent us from displaying the proposed SVGs inline here. See the Codepen for a better comparison.

Remaining tasks

  1. Ensure that overriding throbber's is as easy as possible and provide instructions for how themers can use libraries-override.
    COMPLETE: (See Docs → Theming Drupal → Update the throbber
  2. Override core's default throbber design in the Olivero theme, to help document an approach for themers to follow.
    COMPLETE: (See Olivero's throbber.svg).
  3. Create a patch.
  4. Review the code changes.
  5. Manually test and upload before/after screenshots.
  6. Since Seven was removed from core, copy issue credits from folks who worked on #2775725: Update throbber icon in Seven theme that was split out from this issue while Seven theme was still in core.

User interface changes

Users on devices with high resolution screens will see a crisp image with no diffusion artifacts or blur inherent from legacy image formats.

Users on devices with low resolution may or may not notice much of a visual difference.

API changes

In as much as images can be considered an "API", the old GIF files will be removed. In case any themes still reference the old images, the routes to these static assets can be redirected at the server level to the new SVG assets. Such redirects have been added to the .htaccess file shipped with Drupal core.


Viewing all articles
Browse latest Browse all 294737

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>