Add Wayback Machine Toolbar Toggler

README.md

@@ -66,3 +66,8 @@ Keyboard shortcuts:
 - `Enter`/`Shift+Enter` on a crosspoted item: Open a crossposted item instead
   of its link (sometimes also opens its link, no idea how to fix)
 - `Shift+Enter` on Continue this thread: Opens a thread in a new tab
+
+## Wayback Machine Toolbar Toggler
+
+A userscript that replaces the "close this toolbar" button with one that lets
+you reopen the toolbar; its collapsed state is also saved

Wayback Machine Toolbar Toggler.user.js

@@ -0,0 +1,136 @@
+// ==UserScript==
+// @name        Wayback Machine Toolbar Toggler
+// @namespace   blankie-scripts
+// @match       https://web.archive.org/web/*
+// @grant       GM.getValue
+// @grant       GM.setValue
+// @version     1.0.0
+// @author      blankie
+// @description Replaces the "close this toolbar" button with one that lets you reopen the toolbar; its collapsed state is also saved
+// @inject-into page
+// @run-at      document-start
+// ==/UserScript==
+
+"use strict";
+
+let wmIppBase = null;
+let wmIpp = null;
+
+function hideToolbar() {
+    wmIpp.querySelector("#wm-ipp-inside").style.display = "none";
+
+    let openA = wmIpp.querySelector("#wmtt-open-toolbar");
+    let baseHeight = wmIpp.querySelector("#donato").offsetHeight + openA.offsetHeight + (wmIpp.querySelector("#wm-ipp-inside").offsetHeight - wmIpp.querySelector("#wm-capinfo").offsetHeight);
+    wmIppBase.style.height = `${baseHeight}px`;
+    openA.style.display = "";
+
+    GM.setValue("autoHideToolbar", true).catch(function(error) {
+        console.error("Failed to set autoHideToolbar to true:", error);
+    });
+}
+function showToolbar() {
+    wmIpp.querySelector("#wm-ipp-inside").style.display = "";
+    wmIppBase.style.height = "";
+    wmIpp.querySelector("#wmtt-open-toolbar").style.display = "none";
+
+    GM.setValue("autoHideToolbar", false).catch(function(error) {
+        console.error("Failed to set autoHideToolbar to false:", error);
+    });
+}
+
+function handleWmIpp() {
+    // Hook wm-tb-close for our own toolbar hider
+    let close = wmIpp.querySelector("#wm-tb-close");
+    let newClose = close.cloneNode(true);
+    newClose.addEventListener("click", function(event) {
+        event.preventDefault();
+        hideToolbar();
+    });
+    close.replaceWith(newClose);
+
+    // Add the "Open toolbar" button
+    let openWrapper = document.createElement("div");
+    openWrapper.style.paddingRight = "13px";
+    openWrapper.style.textAlign = "right";
+    openWrapper.style.whiteSpace = "nowrap";
+    wmIpp.append(openWrapper);
+
+    let openA = document.createElement("a");
+    openA.id = "wmtt-open-toolbar";
+    openA.className = "wm-btn wm-closed";
+    openA.addEventListener("click", function(event) {
+        event.preventDefault();
+        showToolbar();
+    });
+    // hide by default
+    openA.style.display = "none";
+    // copy of #wm-expand to avoid duplicate ids
+    openA.style.backgroundColor = "#666";
+    openA.style.padding = "0 5px 0 3px";
+    openA.style.borderRadius = "0 0 3px 3px";
+    openA.style.textDecoration = "none";
+    openA.setAttribute("role", "link");
+    openA.style.cursor = "pointer";
+    openWrapper.append(openA);
+
+    let openIcon = document.createElement("span");
+    openIcon.style.color = "white";
+    openIcon.className = "iconochive-down-solid";
+    openA.append(openIcon);
+
+    let openText = document.createElement("span");
+    openText.style.color = "white";
+    openText.style.fontSize = "80%";
+    // add leading whitespace
+    openText.innerText = " Open toolbar";
+    openA.append(openText);
+
+    // Automatically hide toolbar on startup
+    GM.getValue("autoHideToolbar", false).then(function(autoHideToolbar) {
+        if (autoHideToolbar) {
+            hideToolbar();
+        }
+    }).catch(function(error) {
+        console.log("Failed to fetch autoHideToolbar:", error);
+    });
+}
+
+
+
+// i hate IIFEs.
+// Hook Element.prototype.attachShadow to get wm-ipp-base and its (closed) shadow root
+let realAttachShadow = Element.prototype.attachShadow;
+Element.prototype.attachShadow = function() {
+    let shadowRoot = realAttachShadow.apply(this, arguments);
+    if (this.id === "wm-ipp-base") {
+        Element.prototype.attachShadow = realAttachShadow;
+        wmIppBase = this;
+        observer.observe(shadowRoot, {childList: true});
+    }
+    return shadowRoot;
+};
+
+// Hook wm-ipp-base's shadow root to get wm-ipp
+let observer = new MutationObserver(function(mutations, observer) {
+    for (let mutation of mutations) {
+        if (mutation.type !== "childList") {
+            continue;
+        }
+        for (let node of mutation.addedNodes) {
+            let stop = handleNewNode(node, observer);
+            if (stop) {
+                observer.disconnect();
+                return;
+            }
+        }
+    }
+});
+function handleNewNode(node, observer) {
+    if (node.nodeType !== 1 || node.id !== "wm-ipp") {
+        return false;
+    }
+
+    wmIpp = node;
+    handleWmIpp();
+    return true;
+}