init the awkward code

static/html/jspaint/cypress/cypress-image-snapshot-viewer.js

@@ -0,0 +1,91 @@
+// ==UserScript==
+// @name         Cypress Image Snapshot Viewer
+// @namespace    https://github.com/1j01/
+// @version      0.1
+// @description  Show diffs of screenshots within the Cypress Dashboard. Works with images from cypress-image-snapshot. To use, press D in the gallery, and then move the mouse over and out of the image.
+// @author       Isaiah Odhner
+// @match        https://dashboard.cypress.io/*
+// @grant        none
+// @noframes
+// ==/UserScript==
+
+(function () {
+	'use strict';
+
+	let cleanUp = null;
+
+	function showDiffView(originalImg) {
+		if (cleanUp) { cleanUp(); }
+
+		var screenshotWidth = originalImg.naturalWidth / 3;
+		var screenshotHeight = originalImg.naturalHeight;
+		originalImg.style.opacity = "0";
+		var img = document.createElement("img");
+		img.src = originalImg.src;
+		img.style.position = "absolute";
+		img.style.left = "0";
+		img.style.pointerEvents = "all";
+		img.draggable = false;
+		img.addEventListener("mouseenter", () => {
+			img.style.left = `${-2 * screenshotWidth}px`;
+		});
+		img.addEventListener("mouseleave", () => {
+			img.style.left = "0";
+		});
+		var container = document.createElement("div");
+		container.style.width = `${screenshotWidth}px`;
+		container.style.height = `${screenshotHeight}px`;
+		container.style.position = "relative";
+		container.style.overflow = "hidden";
+		container.style.margin = "auto";
+		var outerContainer = document.createElement("div");
+		outerContainer.style.position = "fixed";
+		outerContainer.style.display = "flex";
+		outerContainer.style.left = "0";
+		outerContainer.style.right = "0";
+		outerContainer.style.top = "0";
+		outerContainer.style.bottom = "0";
+		outerContainer.style.zIndex = "100000";
+		outerContainer.style.pointerEvents = "none";
+
+		outerContainer.appendChild(container);
+		container.appendChild(img);
+		document.body.appendChild(outerContainer);
+
+		cleanUp = () => {
+			originalImg.style.opacity = "";
+			container.style.transformOrigin = "center center";
+			container.style.transition = "opacity 0.2s ease, transform 0.2s ease";
+			container.style.opacity = 0;
+			container.style.transform = "scale(0.9)";
+			setTimeout(() => {
+				outerContainer.remove();
+			}, 500);
+			cleanUp = null;
+		};
+	}
+
+	addEventListener("keydown", e => {
+		if (e.key === "d") {
+			if (cleanUp) {
+				cleanUp();
+			} else {
+				var originalImg = document.elementFromPoint(innerWidth / 2, innerHeight / 2);
+				if (!originalImg || !originalImg.matches("img")) {
+					console.warn("Didn't find an image in the middle of the page. Found", originalImg);
+					return;
+				}
+				showDiffView(originalImg);
+			}
+		} else if (e.key === "Escape") {
+			if (cleanUp) { cleanUp(); }
+		}
+	});
+
+	// mousedown is TAKEN - with stopPropagation, presumably
+	// (useCapture doesn't help)
+	addEventListener("pointerdown", (e) => {
+		if (cleanUp) { cleanUp(); }
+	});
+
+}());