Image Thumbnail List bookmarklet

javascript:/*ImageThumbList*/
((o, p, u, i, v, e) => {
  function imgLoad() {
    this.width && (this.par.nextSibling.dataset.dim = this.width + "x" + this.height) || (this.par.nextSibling.className = "error")
  }
  if (window.itl_ujs) return itl_ujs.remove();
  o = Array.from(document.styleSheets).filter((s, z) => {
    try {
      return Array.from(s.cssRules).some(r => r.symbols)
    } catch(z) {}
  });
  p = "background-image,border-image-source,content,cursor,filter,list-style-image,mask-image,offset-path".split(",");
  u = new Set;
  Array.from(document.all).forEach((e, y) => {
    switch (e.tagName) {
      case "IMG":
        e.src && u.add(e.src);
        break;
      default:
        y = getComputedStyle(e);
        p.forEach(k => (k = y[k].match(/\burl\(['"]?(.*?)['"]?\)/)) && u.add(k[1]));
    }
  });
  (o = document.body.appendChild(p = document.createElement("DIV")).attachShadow({mode: "open"})).innerHTML = `<style>
#veil{position:fixed;left:0;top:0;width:100vw;height:100vh;background:#0008;cursor:pointer}
#list{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);box-sizing:border-box;border:.2em solid #007;border-radius:.5em;padding:.3em;max-width:80vw;max-height:95vh;width:100%;height:100%;overflow-y:scroll;background:#fff;cursor:auto;--len:calc(calc(80vw - 2.1em) / 5)}
#list a{display:inline-block;position:relative;padding:.5em;box-sizing:border-box;padding:.1em;width:var(--len);height:calc(var(--len) + 2.6em);text-align:center;text-decoration:none;color:unset}
#list a:hover{background:#ddf}
#list img{margin:0 auto;width:calc(var(--len) - .6em);height:calc(var(--len) - .6em);object-fit:scale-down}
#list img:hover{object-fit:none}
#list div{box-sizing:border-box;padding:0 .1em;width:calc(var(--len) - .6em);height:2.6em;overflow:hidden;text-align:center;word-break:break-all}
#list div:not(.err):before{display:inline-block;position:absolute;right:.3em;transform:translateY(-100%);padding:0 .2em;background:#000;color:#fff;font-size:9pt;content:attr(data-dim)}
#list div.error:before{display:inline-block;position:absolute;right:.3em;transform:translateY(-100%);padding:0 .2em;background:#000;color:#c00;font-size:9pt;content:attr(class)}
</style><div id="veil"><div id="list"></div></div>`;
  p.id = "itl_ujs";
  p = o.lastChild.lastChild;
  i = u.values();
  while ((v = i.next()) && !v.done) {
    p.appendChild(e = document.createElement("A")).innerHTML = '<img /><div></div>';
    e.rel = "noopener noreferrer";
    (e.firstChild.img = new Image()).par = e.firstChild;
    e.firstChild.img.onload = imgLoad;
    e.href = e.firstChild.img.src = e.firstChild.src = e.lastChild.textContent = v.value;
  }
  o.lastChild.onclick = function(ev) {
    (ev.target === this) && o.host.remove()
  };
  p.focus()
})()