2020-05-01 20:55:40 +00:00
// ==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==
2022-01-18 18:33:44 +00:00
( function ( ) {
2020-05-01 20:55:40 +00:00
'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 ;
2022-01-18 18:33:44 +00:00
img . addEventListener ( "mouseenter" , ( ) => {
2020-05-01 20:55:40 +00:00
img . style . left = ` ${ - 2 * screenshotWidth } px ` ;
} ) ;
2022-01-18 18:33:44 +00:00
img . addEventListener ( "mouseleave" , ( ) => {
2020-05-01 20:55:40 +00:00
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 ) ;
2022-01-18 18:33:44 +00:00
cleanUp = ( ) => {
2020-05-01 20:55:40 +00:00
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)" ;
2022-01-18 18:33:44 +00:00
setTimeout ( ( ) => {
2020-05-01 20:55:40 +00:00
outerContainer . remove ( ) ;
} , 500 ) ;
cleanUp = null ;
} ;
}
2022-01-18 18:33:44 +00:00
addEventListener ( "keydown" , e => {
2020-05-01 20:55:40 +00:00
if ( e . key === "d" ) {
if ( cleanUp ) {
cleanUp ( ) ;
} else {
2022-01-18 18:33:44 +00:00
var originalImg = document . elementFromPoint ( innerWidth / 2 , innerHeight / 2 ) ;
2020-05-01 20:55:40 +00:00
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)
2022-01-18 18:33:44 +00:00
addEventListener ( "pointerdown" , ( e ) => {
2020-05-01 20:55:40 +00:00
if ( cleanUp ) { cleanUp ( ) ; }
} ) ;
2022-01-19 03:52:59 +00:00
} ( ) ) ;