revive "[saving...]" indicator on Hatena::Let for UserScript

hatenalet-indicator-reviver.user.js

// ==UserScript==
// @name        Hatena::Let indicator reviver
// @namespace   https://noromanba.github.com
// @description revive "[saving...]" indicator on Hatena::Let for UserScript
// @include     *://let.hatelabo.jp/l
// @grant       none
// @noframes
// @run-at      document-end
// @version     2018.5.14.1
// @homepage    https://gist.github.com/noromanba/ceaf1067aea7c3855ce7b57fe5ae1887
// @downloadURL https://gist.github.com/noromanba/ceaf1067aea7c3855ce7b57fe5ae1887/raw/hatenalet-indicator-reviver.user.js
// @license     MIT License https://nrm.mit-license.org/2018
// @author      noromanba   https://noromanba.github.com
// @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Vector_Loading.svg/500px-Vector_Loading.svg.png
// ==/UserScript==

// Icon (PD by Wikimedia Foundation Developers)
// https://commons.wikimedia.org/wiki/File:Vector_Loading.svg

// Devel
// https://gist.github.com/noromanba/ceaf1067aea7c3855ce7b57fe5ae1887

// Bookmarklet
// http://let.hatelabo.jp/noromanba/let/hLHU6pnS6og7


// inspired
// http://let.hatelabo.jp/pacochi/let/hJmc3OPAv48G

// c.f.
// http://h.hatena.ne.jp/noromanba/227136362604995923
(() => {
    'use strict';

    const indicator = document.body.querySelector([
        'img[src]#auto_save_icon'
    ]);
    if (!indicator) return;

    // TBD data URI or @require
    // thx id:a-kuma3
    // http://h.hatena.ne.jp/a-kuma3/83461036272149214
    indicator.src = 'https://cdn-ak.b.st-hatena.com/images/loading.gif';
    // [1]

    // TBD
    // - CSSnize
    // - align by flexbox
    // original style fixes
    indicator.style.verticalAlign = 'text-top';

    const checkbox = document.body.querySelector([
        'input[type="checkbox"]#autosave'
    ]);
    if (!checkbox) return;

    checkbox.style.verticalAlign =
        // XXX see the Rendering Engine
        navigator.userAgent.includes('Chrome') ? 'middle' :
        navigator.userAgent.includes('Firefox') ? 'text-top' :
        '';
})();


// DEV
//
// [:1] throbber/spinner icons
//
// original
// https://web.archive.org/web/20100511175314if_/http://r.hatena.ne.jp/images/indicator.gif
// circle large; same as original
// https://d.hatena.ne.jp/images/indicator.gif
// circle small
// https://s.hatena.ne.jp/images/load.gif
// square dots
// https://cdn-ak.b.st-hatena.com/images/loading.gif