92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
// ==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(); }
|
|
});
|
|
|
|
})();
|