Dashboard: oplog tree view (#217)

* Turned tables and progress bars and friends into "widgets!"

* A step to abstracting away a page's the internal DOM structure

* Folded sector creation into Page and pivoted it to a widget host

* Try and keep start/count as numbers regardless of input

* No need for the entry table to be defined up front now

* Add op count and log sixe to oplog list page

* Cache left side toolbar object

* Bounds count page start when building list of oplog entrie

* Start/end navigation tools

* Build rest of entry page while waiting for indexer to load

* Consistent naming with other pages

* Spacially consolidate fetching code

* Hide fetch latency to speed up index generation workers

* Extract dashboard structure from zen.js monolith

* Fix breadcrumbs after restructuring

* Add view link to actions cell of oplogs list

* Generator to enumerate names of entries in indexer

* Methods for simple traversal of component relations

* is() to check if a component is of a certain type

* Extend attr() to get and unset a component's attributes

* Unsetting all styles of anchor tags was underisrable

* Restore page name as id of container element

* A tree view of an oplog

* Move helper class out to private module scope

* Small tweak to use left var that already exists

* Changelog update

* Updated frontend .zip archive

1 files changed, 47 insertions, 1 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 033563736..2463a6b5d 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -79,8 +79,11 @@ input {
 
 /* links -------------------------------------------------------------------- */
 
+a {
+	text-decoration:		unset;
+}
+
 .zen_action, a {
-	all:					unset;
 	cursor:					pointer;
 	color:					var(--theme_ln);
 
@@ -401,3 +404,46 @@ input {
 	float:			left;
 	min-width:		15%;
 }
+
+/* tree --------------------------------------------------------------------- */
+
+#tree {
+	#tree_root {
+		margin-left:			5em;
+		margin-right:			10em;
+	}
+	ul {
+		list-style-type:		none;
+		padding-left:			0;
+		margin-left:			2em;
+	}
+	li > div {
+		display:				flex;
+		border-bottom:			1px solid transparent;
+		padding-left:			0.3em;
+		padding-right:			0.3em;
+	}
+	li > div > div:last-child {
+		margin-left:			auto;
+	}
+	li > div:hover {
+		background-color:		var(--theme_p4);
+		border-bottom:			1px solid var(--theme_g2);
+	}
+	li a {
+		font-weight:			bolder;
+	}
+	li::marker {
+		content:				"+";
+		color:					var(--theme_g1);
+	}
+	li[expanded]::marker {
+		content:				"-";
+	}
+	li[leaf]::marker {
+		content:				"|";
+	}
+	li:last-child::marker {
+		content:				"\\";
+	}
+}