better light theme, add another missing features, cosmetic improvement

render/base.css

@@ -28,7 +28,8 @@ html, body {
 *, *:before, *:after {
   box-sizing: inherit;
 }
-h1,h2,h3,h4,h5 {
+
+h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child {
 	margin-top: 0;
 }
 
@@ -39,6 +40,8 @@ h1,h2,h3,h4,h5 {
 	font-size: 16px;
 	font-weight: 400;
 	font-style: normal;
+	position: relative;
+	/*top: 1px; /* Twemoji */
 }
 .emoji:after {
 	font-variant-emoji: emoji; /* experimental feature and only in firefox :( */
@@ -47,18 +50,19 @@ h1,h2,h3,h4,h5 {
 .emoji.Twemoji {
 	font-family: "Twemoji Mozilla Built", sans-serif;
 	font-size: 16px;
+	top: 2px;
 }
 .emoji.Noto {
 	font-family: "Noto Color Emoji", sans-serif;
 	font-size: 14px;
-	position: relative;
+	/*left: -1px;*/
-	left: -1px;
+	top: 0px;
 }
 .emoji.OpenMoji {
 	font-family: "OpenMojiDemoFont", sans-serif;
 	font-size: 17px;
-	position: relative;
 	left: -2px;
+	top: 0px;
 	color: #888; /* fix outline */
 }
 .emoji.OpenMoji + .text-left-margin {
@@ -67,7 +71,7 @@ h1,h2,h3,h4,h5 {
 .emoji.Noto + .text-left-margin {
 	margin-left: 5px;
 }
-.emoji.Noto + .emoji.Noto {
+.sidebar .emoji.Noto + .emoji.Noto {
 	margin-left: 4px;
 }
 
@@ -169,11 +173,18 @@ table, tr, td, th {
 	height: var(--options-height);
 }
 #table { }
+
 #fail_images {
 	display: grid;
+	justify-content: left;
+}
+#fail_images.center,
+.grid-container.reversed #fail_images.center{
 	justify-content: center;
 }
-
+.grid-container.reversed #fail_images {
+	justify-content: right;
+}
 
 .panel {
 	display: block;
@@ -191,19 +202,21 @@ table, tr, td, th {
 .content {
 	grid-area: content;
 	overflow: auto;
-	justify-content: center;
+	padding: 0px 10px;
 }
 
-body.min { /* split feature */
+
+
+body.mini { /* split feature */
 	width: 75%; margin: 0 auto; /* FIXME */
 }
-.min .sidebar {
+.mini .sidebar {
 	font-size: 12px;
 }
-.min .sidebar .panel > div {
+.mini .sidebar .panel > div {
 	line-height: 20px;
 }
-.min .sidebar #options.panel {
+.mini .sidebar #options.panel {
 	height: var(--options-height-min);
 }
 
@@ -374,7 +387,7 @@ th.table-sticky {
 #options.sticky + #table th.table-sticky {
 	top: calc(var(--options-height) + 0.07em); /* FIXME */
 }
-.min .sidebar #options.sticky + #table th.table-sticky {
+.mini .sidebar #options.sticky + #table th.table-sticky {
 	top: calc(var(--options-height-min) + 0.07em); /* FIXME */
 }
 

render/index.js

@@ -30,6 +30,10 @@ const emojiFontReplacementTable = {
 	"💎":"Noto",
 	"🏀":"Noto",
 	"🖌":"Noto",
+	//"❌":"Noto",
+	"🏁":"Noto",
+	"🛑":"Noto",
+	"⛔":"Noto",
 }
 function emojiFont(emoji) {
 	let emojiFontReplacement = emojiFontReplacementTable[emoji];
@@ -179,7 +183,7 @@ function buildSummary(data) {
 	const total = data.length;
 	const fails = data.filter((d) => { return !!d.fail; }).length;
 	const fails_pct = fails * 100.0 / total;
-	return [Text(`Tests failed: ${fails} / ${total} (${fails_pct.toFixed(3)}%)`)];
+	return emojiToTag(`🧪 Tests 💥: ${fails}/${total}🏁 (⚠${fails_pct.toFixed(3)}%)`);
 }
 
 function buildTestResultImages(data) {
@@ -229,7 +233,7 @@ function buildData(table, images, data, sort) {
 
 const saveToLocalStorage = debounce((key, value) => {
 	localStorage.setItem(key, value);
-});
+}, ()=>{}, 250);
 const loadFromLocalStorage = (key, default_option) => {
 	const value = localStorage.getItem(key);
 	if (isNaN(value)) {
@@ -251,10 +255,14 @@ const loadFromLocalStorage = (key, default_option) => {
 }
 
 
-
+function uglyChecked(value) { // fast hack
+	return value ? {"checked": "checked"} : {};
+}
 
 
 window.onload = () => {
+	const theme = loadFromLocalStorage("rendertest_theme", "");
+
 	const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
 	function updateLinkRel(linkElements, id) {
 		for (const link of linkElements) {
@@ -269,20 +277,22 @@ window.onload = () => {
 	for (const linkElement of linkElements) {
 		const themeName = linkElement.getAttribute("data-theme");
 		const emojiTags = emojiToTag(linkElement.title);
-		const checked = !linkElement.rel.includes("alternate") ? {"checked": "checked"} : {};
+		let checked = uglyChecked(!linkElement.rel.includes("alternate"));
+		if (theme) {
+			checked = uglyChecked(theme === themeName);
+		}
 		themes.push(
 			Tag("label", null, null, [
 				Tag("input", {"type": "radio", "class": "theme-button", "id": themeName, "name": "theme", ...checked}, null, null,
 				"click", (e) => {
 					updateLinkRel(linkElements, e.target.id);
+					saveToLocalStorage("rendertest_theme", e.target.id);
 				}),
 				...emojiTags
 			])
 		)
 	};
 
-
-
 	function changeAnimationDuration(newDuration) {
 		document.documentElement.style.setProperty('--animation-duration', newDuration + 'ms');
 	}
@@ -300,13 +310,16 @@ window.onload = () => {
 	const switchFrequency = loadFromLocalStorage("rendertest_switchfrequency", 700);
 	const tableSort = loadFromLocalStorage("rendertest_tablesort", false);
 	const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos", "left");
+	const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
+	const sidebarSize = loadFromLocalStorage("rendertest_sidebarsize", "default");
 	const vpadding = loadFromLocalStorage("rendertest_vpadding", true);
 	const all_diff = loadFromLocalStorage("rendertest_all_diff", false);
-	const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
 	const diffMode = loadFromLocalStorage("rendertest_diffmode", "click");
+	const imagePosition = loadFromLocalStorage("rendertest_imageposition", "center");
 	let isPaused = loadFromLocalStorage("rendertest_paused", false);
-	function uglyChecked(value) { // fast hack
+
-		return value ? {"checked": "checked"} : {};
+	if (theme) {
+		updateLinkRel(linkElements, theme);
 	}
 
 	// TODO: simplification and bindings
@@ -423,14 +436,16 @@ window.onload = () => {
 							Tag("span", {"class": "emoji"}, "📏"),
 							Text(" size"),
 							Tag("label", null, null, [
-								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "always", "checked": "checked"}, null, null, "input", (e) => {
+								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "default",  ...uglyChecked(sidebarSize == "default")}, null, null, "input", (e) => {
-									document.body.classList.toggle("min");
+									document.body.classList.toggle("mini");
+									saveToLocalStorage("rendertest_sidebarsize", e.target.value);
 								}),
 								Text(" default")
 							]), 
 							Tag("label", null, null, [
-								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "min"}, null, null, "input", (e) => {
+								Tag("input", {"type": "radio", "name": "sidebar-size", "value": "mini",  ...uglyChecked(sidebarSize == "mini")}, null, null, "input", (e) => {
-									document.body.classList.toggle("min");
+									document.body.classList.toggle("mini");
+									saveToLocalStorage("rendertest_sidebarsize", e.target.value);
 								}),
 								Text(" mini")
 							])
@@ -443,11 +458,17 @@ window.onload = () => {
 						Text(" Image position")
 					]), 
 					Tag("label", null, null, [
-						Tag("input", {"type": "radio", "name": "image_position", "value": "relative", "disabled": "disabled"}),
+						Tag("input", {"type": "radio", "name": "image_position", "value": "relative", ...uglyChecked(imagePosition === "relative")}, null, null, "input", (e) => {
+								images.classList.toggle("center");
+								saveToLocalStorage("rendertest_imageposition", e.target.value);
+							}),
 						Text(" relative")
 					]), 
 					Tag("label", null, null, [
-						Tag("input", {"type": "radio", "name": "image_position", "value": "center", "checked": "checked"}),
+						Tag("input", {"type": "radio", "name": "image_position", "value": "center", ...uglyChecked(imagePosition === "center")}, null, null, "input", (e) => {
+								images.classList.toggle("center");
+								saveToLocalStorage("rendertest_imageposition", e.target.value);
+							}),
 						Text(" center ")
 					]),
 					Tag("b", null, null, [
@@ -503,7 +524,9 @@ window.onload = () => {
 			Tag("h1", null, "Rendertest report"),
 			Tag("h2", null, "Summary"),
 			Tag("div", {"id": "summary"}, null, [...buildSummary(data)]),
-			Tag("h2", null, "Images of things that are not perfect"),
+			Tag("h2", null, "Images of things that are not perfect ", [
+				Tag("span", {"class": "emoji"}, "⤵")
+			]),
 			images = Tag("div", {"id": "fail_images", "class": "vpadding"})
 		])
 	])
@@ -512,9 +535,18 @@ window.onload = () => {
 	buildData(table, images, data, tableSort);
 
 	// TODO: remove this
-	if (sidebarPos == "right") {
+	if (sidebarPos === "right") {
 		gridContainer.classList.toggle("reversed");
 	}
+	if (sidebarMode === "always") {
+		sidebarOptions.classList.toggle("sticky");
+	}
+	if (sidebarSize === "mini") {
+		document.body.classList.toggle("mini");
+	}
+	if (imagePosition === "center") {
+		images.classList.toggle("center");
+	}
 	if (!vpadding) {
 		images.classList.toggle("vpadding");
 	}
@@ -523,12 +555,10 @@ window.onload = () => {
 		//vpaddin_input.disabled = !vpaddin_input.disabled;
 		//images.classList.toggle("vpadding");
 	}
-	if (diffMode == "separate") {
+	if (diffMode === "separate") {
 		images.classList.toggle("diff_separate");
 	}
-	if (sidebarMode == "always") {
+
-		sidebarOptions.classList.toggle("sticky");
-	}
 	changeAnimationDuration(isPaused ? 0 : numberInput.value);
 
 	// stop animation when not in the viewport

render/theme-light.css

@@ -5,9 +5,9 @@ body {
 
 .panel {
 	background: #FFF;
-	border: #EEE 1px solid;
+	border: #e5f0ff 1px solid;
 	border-radius: 10px;
-	color: cornflowerblue;
+	color: #2d6bdb;
 }
 
 .meta-block h3 {
@@ -17,12 +17,12 @@ body {
 
 table {
 	color: #eb4300;
-	border: #e100ca 1px solid;
+	border: #ffa6f6 1px solid;
 	border-radius: 6px;
 }
 th {
 	background: oklch(62.5% 0.291 308.12);
-	background: linear-gradient(0deg,#b540ff,cornflowerblue);
+	background: linear-gradient(0deg,#d99dff,#c4d7f9);
 /*	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);*/
 }
 a, a:visited {