Problem/Motivation
The default AJAX progress throbber icons looks poor on a retina display.
throbber-active.gif
is a low resolution animated GIF.throbber-inactive.png
is a low resolution static
PNG.
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 SVGthrobber-active.svg
. - Replace
throbber-inactive.png
with a high resolution static SVGthrobber-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:
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
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 throbberOverride core's default throbber design in the Olivero theme, to help document an approach for themers to follow.
COMPLETE: (See Olivero's throbber.svg).Create a patch.- Review the code changes.
- Manually test and upload before/after screenshots.
- 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.