Self-hosted dashboard: Searchable oplog and links between oplog entry dependencies (#213)v5.5.12-pre0

* Consistent use of semicolons

* Added fallback if oplog entry assumptions do not hold

* 'marker' and 'expired' cells were incorrectly friendly

* Two spaces when there should only be one

* Robustness against .text(undefined) calls

* A single step into JavaScript modules

* Turned Fetcher into a module

* Friendly into a module

* Specialise Cbo field name comparison as TextDecoder() is very slow

* Prefer is_named() over get_name()

* Incorrect logic checking if a server reply was okay

* Try and make sure it's always numbers that flow through Friendly

* Added a progress bar component

* Swap key and package hash columns

* CbObject cloning

* Dark and light themes depending on browser settings

* Adjust styling of input boxes

* Add theme swatches to test page

* Turns out one can nest CSS selectors

* Separate swatch for links/actions

* Generate theme by lerping intermediate colours

* Clearer progress bar

* Chromium was complaining about label-less input elements

* Promise-based cache using an IndexedDb

* WebWorker for generating map of package ids to names

* Indexer class for building, loading, and saving map of ids to names

* Added links to oplog entries of an entry's dependencies

* This doesn't need to be decorated as async any longer

* Implemented oplog searching

* View and drop make no sense on package data payloads

* Rudimentary search result truncation

* Updated changelog

* Updated HTML zip archive

1 files changed, 306 insertions, 236 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index a725ffb79..033563736 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -1,23 +1,47 @@
 /* Copyright Epic Games, Inc. All Rights Reserved. */
 
-/* page --------------------------------------------------------------------- */
-
-:root {
-	--theme_g0:	#000;
-	--theme_g1:	#555;
-	--theme_g2:	#999;
-	--theme_g3:	#f4f4f4;
-	--theme_g4:	#fff;
-
-	--theme_p0:	#069;
-	--theme_p1:	#58b;
-	--theme_p2:	#cce;
-	--theme_p3:	#dde;
-	--theme_p4:	#eeeef7;
-
-	--theme_er:	#fcc;
+/* theme -------------------------------------------------------------------- */
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--theme_g0:	#000;
+		--theme_g4:	#fff;
+		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 45%);
+		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 80%);
+		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 96%);
+
+		--theme_p0:	#069;
+		--theme_p4:	hsl(210deg 40% 94%);
+		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+		--theme_ln:	var(--theme_p0);
+		--theme_er:	#fcc;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--theme_g0:	#ddd;
+		--theme_g4:	#222;
+		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 35%);
+		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 65%);
+		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 88%);
+
+		--theme_p0:	#479;
+		--theme_p4:	#333;
+		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
+		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
+		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);
+
+		--theme_ln:	#feb;
+		--theme_er:	#622;
+	}
 }
 
+/* page --------------------------------------------------------------------- */
+
 body, input {
 	font-family:	consolas, monospace;
 	font-size:		11pt;
@@ -27,12 +51,18 @@ body {
 	overflow-y:			scroll;
 	margin:				0;
 	background-color:	var(--theme_g4);
+	color:				var(--theme_g0);
 }
 
 pre {
 	margin:				0;
 }
 
+input {
+	background-color:	var(--theme_g3);
+	border:				1px solid var(--theme_g2);
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -41,57 +71,57 @@ pre {
 	max-width:		130em;
 	min-width:		80em;
 	margin:			auto;
-}
 
-#container > div {
-	margin:			1.0em 2.2em 1.5em 2.2em;
+	> div {
+		margin:		1.0em 2.2em 1.5em 2.2em;
+	}
 }
 
 /* links -------------------------------------------------------------------- */
 
 .zen_action, a {
-	all:		unset;
-	cursor:		pointer;
-	color:		var(--theme_p0);
-}
+	all:					unset;
+	cursor:					pointer;
+	color:					var(--theme_ln);
 
-.zen_action:hover, a:hover {
-	text-decoration:	underline var(--theme_p1);
+	&:hover {
+		text-decoration:	underline var(--theme_ln);
+	}
 }
 
 /* sector ------------------------------------------------------------------- */
 
-h1, h2, h3 {
-	white-space:	nowrap;
-}
-
-h1 {
-	font-size:		1.5em;
-	width:			100%;
-	border-bottom:	1px solid var(--theme_g2);
-}
-
-h2 {
-	font-size:		1.25em;
-	margin-bottom:	0.5em;
-}
-
-h3 {
-	font-size:			1.1em;
-	margin:				0em;
-	padding:			0.4em;
-	background-color:	var(--theme_p4);
-	border-left:		5px solid var(--theme_p2);
-	font-weight:		normal;
-}
-
 .zen_sector {
+	h1, h2, h3 {
+		white-space:		nowrap;
+	}
+
+	h1 {
+		font-size:			1.5em;
+		width:				100%;
+		border-bottom:		1px solid var(--theme_g2);
+	}
+
+	h2 {
+		font-size:			1.25em;
+		margin-bottom:		0.5em;
+	}
+
+	h3 {
+		font-size:			1.1em;
+		margin:				0em;
+		padding:			0.4em;
+		background-color:	var(--theme_p4);
+		border-left:		5px solid var(--theme_p2);
+		font-weight:		normal;
+	}
+
 	margin-bottom:	3em;
+	> *:not(h1) {
+		margin-left:	2em;
+	}
 }
 
-.zen_sector > *:not(h1) {
-	margin-left:	2em;
-}
 
 /* table -------------------------------------------------------------------- */
 
@@ -100,229 +130,269 @@ h3 {
 	border:					1px solid var(--theme_g2);
 	border-left-style:		none;
 	margin-bottom:			1.2em;
-}
 
-.zen_table > div {
-	display: contents;
-}
+	> div {
+		display: contents;
+	}
 
-.zen_table > div:nth-of-type(odd) {
-	background-color:	var(--theme_g3);
-}
+	> div:nth-of-type(odd) {
+		background-color:	var(--theme_g3);
+	}
 
-.zen_table > div:first-of-type {
-	font-weight:		bold;
-	background-color:	var(--theme_p3);
-}
+	> div:first-of-type {
+		font-weight:		bold;
+		background-color:	var(--theme_p3);
+	}
 
-.zen_table > div:hover {
-	background-color:	var(--theme_p4);
-}
+	> div:hover {
+		background-color:	var(--theme_p4);
+	}
 
-.zen_table > hidden {
-	visibility:			hidden;
-	display:			none;
-}
+	> hidden {
+		visibility:			hidden;
+		display:			none;
+	}
 
-.zen_table > div > div {
-	padding:			0.3em;
-	padding-left:		0.75em;
-	padding-right:		0.75em;
-	align-content:		center;
-	border-left:		1px solid var(--theme_g2);
-	overflow:			auto;
-	overflow-wrap:		break-word;
-	background-color:	inherit;
+	> div > div {
+		padding:			0.3em;
+		padding-left:		0.75em;
+		padding-right:		0.75em;
+		align-content:		center;
+		border-left:		1px solid var(--theme_g2);
+		overflow:			auto;
+		overflow-wrap:		break-word;
+		background-color:	inherit;
+	}
 }
 
 /* toolbar ------------------------------------------------------------------ */
 
 .zen_toolbar {
-	display:		flex;
-	margin-top:		0.5em;
-	margin-bottom:	0.6em;
-}
+	display:			flex;
+	margin-top:			0.5em;
+	margin-bottom:		0.6em;
 
-.zen_toolbar.zen_toolbar_inline {
-	margin:			unset;
-}
+	> div {
+		display:		flex;
+		align-items:	center;
+	}
 
-.zen_toolbar > div {
-	display:		flex;
-	align-items:	center;
-}
+	> div > .zen_toolbar_sep {
+		color:			var(--theme_g2);
+	}
 
-.zen_toolbar > div > .zen_toolbar_sep {
-	color:			var(--theme_g2);
-}
+	> div:last-child {
+		margin-left:	auto;
+	}
 
-.zen_toolbar > div:last-child {
-	margin-left:	auto;
-}
+	> div > div {
+		padding-right:	0.7em;
+	}
 
-.zen_toolbar > div > div {
-	padding-right:	0.7em;
-}
+	> div:last-child > :last-child {
+		padding-right:	0;
+	}
 
-.zen_toolbar > div:last-child > :last-child {
-	padding-right:	0;
+	&.zen_toolbar_inline {
+		margin:			unset;
+	}
 }
 
+
 /* modal -------------------------------------------------------------------- */
 
 .zen_modal {
-	position:			fixed;
-	z-index:			1;
-	top:				0;
-	left:				0;
-	width:				100%;
-	height:				100%;
-	display:			flex;
-	justify-content:	center;
-	align-items:		center;
-	backdrop-filter:	blur(5px);
-}
-
-.zen_modal .zen_modal_bg {
-	position:			absolute;
-	z-index:			-1;
-	top:				0;
-	left:				0;
-	width:				100%;
-	height:				100%;
-	background:			var(--theme_g0);
-	opacity:			0.4;
-}
-
-.zen_modal > div {
-	border-radius:		0.5em;
-	background-color:	var(--theme_g4);
-	opacity:			1.0;
-	width:				35em;
-	padding:			0em 2em 2em 2em;
-}
-
-.zen_modal > div > div {
-	text-align:			center;
-}
-
-.zen_modal .zen_modal_title {
-	font-size:			1.2em;
-	border-bottom:		1px solid var(--theme_g2);
-	padding:			1.2em 0em 0.5em 0em;
-	color:				var(--theme_g1);
-}
-
-.zen_modal .zen_modal_buttons {
-	display:			flex;
-	justify-content:	center;
-	padding-bottom:		0em;
-}
-
-.zen_modal .zen_modal_buttons > div {
-	margin:				0em 1em 0em 1em;
-	padding:			1em;
-	align-content:		center;
-	border-radius:		0.3em;
-	background-color:	var(--theme_p3);
-	width:				6em;
-	cursor:				pointer;
-}
-
-.zen_modal .zen_modal_buttons > div:hover {
-	background-color:	var(--theme_p4);
-}
-
-.zen_modal .zen_modal_message {
-	padding:			2em;
-	min-height:			8em;
-	align-content:		center;
+	position:					fixed;
+	z-index:					1;
+	top:						0;
+	left:						0;
+	width:						100%;
+	height:						100%;
+	display:					flex;
+	justify-content:			center;
+	align-items:				center;
+	backdrop-filter:			blur(5px);
+
+	.zen_modal_bg {
+		position:				absolute;
+		z-index:				-1;
+		top:					0;
+		left:					0;
+		width:						100%;
+		height:					100%;
+		background:				var(--theme_g0);
+		opacity:				0.4;
+	}
+
+	> div {
+		border-radius:			0.5em;
+		background-color:		var(--theme_g4);
+		opacity:				1.0;
+		width:					35em;
+		padding:				0em 2em 2em 2em;
+	}
+
+	> div > div {
+		text-align:				center;
+	}
+
+	.zen_modal_title {
+		font-size:				1.2em;
+		border-bottom:			1px solid var(--theme_g2);
+		padding:				1.2em 0em 0.5em 0em;
+		color:					var(--theme_g1);
+	}
+
+	.zen_modal_buttons {
+		display:				flex;
+		justify-content:		center;
+		padding-bottom:			0em;
+
+	> div {
+			margin:				0em 1em 0em 1em;
+			padding:			1em;
+			align-content:		center;
+			border-radius:		0.3em;
+			background-color:	var(--theme_p3);
+			width:				6em;
+			cursor:				pointer;
+		}
+
+		> div:hover {
+			background-color:	var(--theme_p4);
+		}
+	}
+
+	.zen_modal_message {
+		padding:				2em;
+		min-height:				8em;
+		align-content:			center;
+	}
+}
+
+/* progress bar ------------------------------------------------------------- */
+
+.zen_progressbar {
+	position:				absolute;
+	top:					0;
+	left:					0;
+	width:					100%;
+	height:					0.5em;
+
+	> div:first-of-type {
+		/* label */
+		padding:			0.3em;
+		padding-top:		0.8em;
+		background-color:	var(--theme_p4);
+		width:				max-content;
+		font-size:			0.8em;
+	}
+
+	> div:last-of-type {
+		/* bar */
+		position:			absolute;
+		top:				0;
+		left:				0;
+		width:				0%;
+		height:				100%;
+		background-color:	var(--theme_p1);
+	}
+
+	> div:nth-of-type(2) {
+		/* bg */
+		position:			absolute;
+		top:				0;
+		left:				0;
+		width:				100%;
+		height:				100%;
+		background-color:	var(--theme_p3);
+	}
 }
 
 /* crumbs ------------------------------------------------------------------- */
 
 #crumbs {
-	display:		flex;
-	position:		relative;
-	top:			-1em;
-}
+	display:			flex;
+	position:			relative;
+	top:				-1em;
 
-#crumbs > div {
-	padding-right:	0.5em;
-}
+	> div {
+		padding-right:	0.5em;
+	}
 
-#crumbs > div:nth-child(odd)::after {
-	content:		":";
-	font-weight:	bolder;
-	color:			var(--theme_p2);
+	> div:nth-child(odd)::after {
+		content:		":";
+		font-weight:	bolder;
+		color:			var(--theme_p2);
+	}
 }
 
 /* branding ----------------------------------------------------------------- */
 
 #branding {
-	font-size:		10pt;
-	font-weight:	bolder;
-	margin-bottom:	2.6em;
-	position:		relative;
-}
-
-#logo {
-	width:			min-content;
-	margin:			auto;
-	user-select:	none;
-	position:		relative;
-}
-
-#logo #go_home {
-	width:			100%;
-	height:			100%;
-	position:		absolute;
-	top:			0;
-	left:			0;
-}
-
-#logo:hover {
-	filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
-}
-
-#ue_logo {
-	position:		absolute;
-	top:			1em;
-	right:			0;
-	width:			5em;
-	margin:			auto;
+	font-size:			10pt;
+	font-weight:		bolder;
+	margin-bottom:		2.6em;
+	position:			relative;
+
+	#logo {
+		width:			min-content;
+		margin:			auto;
+		user-select:	none;
+		position:		relative;
+
+		#go_home {
+			width:		100%;
+			height:		100%;
+			position:	absolute;
+			top:		0;
+			left:		0;
+		}
+	}
+
+	#logo:hover {
+		filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
+	}
+
+	#ue_logo {
+		position:		absolute;
+		top:			1em;
+		right:			0;
+		width:			5em;
+		margin:			auto;
+	}
 }
 
 /* error -------------------------------------------------------------------- */
 
 #error {
-	position:			fixed;
-	bottom:				0;
-	z-index:			1;
-	color:				var(--theme_g0);
-	background-color:	var(--theme_er);
-	padding:			1.0em 2em 2em 2em;
-	width:				100%;
-	border-top:			1px solid var(--theme_g0);
-	display:			flex;
-}
-
-#error > div:nth-child(1) {
-	font-size:			2.5em;
-	font-weight:		bolder;
-	font-family:		serif;
-	transform:			rotate(-13deg);
-	color:				var(--theme_p0);
-}
-
-#error > div:nth-child(2) {
-	margin-left:		2em;
-}
-
-#error > div:nth-child(2) > pre:nth-child(2) {
-	margin-top:			0.5em;
-	font-size:			0.8em;
-	color:				var(--theme_g1);
+	position:				fixed;
+	bottom:					0;
+	z-index:				1;
+	color:					var(--theme_g0);
+	background-color:		var(--theme_er);
+	padding:				1.0em 2em 2em 2em;
+	width:					100%;
+	border-top:				1px solid var(--theme_g0);
+	display:				flex;
+
+	> div:nth-child(1) {
+		font-size:			2.5em;
+		font-weight:		bolder;
+		font-family:		serif;
+		transform:			rotate(-13deg);
+		color:				var(--theme_p0);
+	}
+
+	> div:nth-child(2) {
+		margin-left:		2em;
+	}
+
+	> div:nth-child(2) > pre:nth-child(2) {
+		margin-top:			0.5em;
+		font-size:			0.8em;
+		color:				var(--theme_g1);
+	}
 }
 
 /* stats -------------------------------------------------------------------- */