cmd/hiveview: add dark mode (#1205)

ethereum · Jan 10, 2025 · c5662af · c5662af
1 parent 3971bdd
commit c5662af
Show file tree

Hide file tree

Showing 9 changed files with 2,613 additions and 2,131 deletions.
diff --git a/...iveview/assets/extlib/bootstrap-5.2.3.css → ...iveview/assets/extlib/bootstrap-5.3.3.css b/...iveview/assets/extlib/bootstrap-5.2.3.css → ...iveview/assets/extlib/bootstrap-5.3.3.css
diff --git a/...iveview/assets/extlib/bootstrap-5.2.3.mjs → ...iveview/assets/extlib/bootstrap-5.3.3.mjs b/...iveview/assets/extlib/bootstrap-5.2.3.mjs → ...iveview/assets/extlib/bootstrap-5.3.3.mjs
diff --git a/cmd/hiveview/assets/index.html b/cmd/hiveview/assets/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <title>hive</title>
     <meta charset="utf-8">
@@ -16,6 +16,7 @@
         <nav id="hive-static-nav">
           <span class="nav-item" id="hive-instance-info"></span>
           <a class="nav-item" href="https://github.com/ethereum/hive/blob/master/docs/overview.md#what-is-hive">What is Hive?</a>
+          <span class="nav-item theme-toggle">🌙</span>
         </nav>
       </div>
 

diff --git a/cmd/hiveview/assets/lib/app-common.js b/cmd/hiveview/assets/lib/app-common.js
@@ -4,6 +4,24 @@ import $ from 'jquery';
 import * as routes from './routes.js';
 import { makeLink } from './html.js';
 
+// Initialize theme
+const storedTheme = localStorage.getItem('theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+document.documentElement.classList.add(storedTheme);
+document.documentElement.setAttribute('data-bs-theme', storedTheme);
+
+// Theme toggle handler
+$(document).ready(function() {
+    $('.theme-toggle').text(storedTheme === 'dark' ? '☀️' : '🌙');
+    $('.theme-toggle').on('click', function() {
+        const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        document.documentElement.classList.toggle('dark', newTheme === 'dark');
+        document.documentElement.setAttribute('data-bs-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        $('.theme-toggle').text(newTheme === 'dark' ? '☀️' : '🌙');
+    });
+});
+
 // updateHeader populates the page header with version information from hive.json.
 export function updateHeader() {
     $.ajax({
@@ -25,7 +43,7 @@ function hiveInfoHTML(data) {
     var txt = '';
     if (data.buildDate) {
         let date = new Date(data.buildDate).toLocaleString();
-        txt += '<span>built: ' + date + '</span>';
+        txt += '<span>hiveview (UI) built: ' + date + '</span>';
     }
     if (data.sourceCommit) {
         let url = 'https://github.com/ethereum/hive/commits/' + escape(data.sourceCommit);

diff --git a/cmd/hiveview/assets/lib/app.css b/cmd/hiveview/assets/lib/app.css
@@ -1,7 +1,11 @@
-@import "../extlib/bootstrap-5.2.3.css";
+@import "../extlib/bootstrap-5.3.3.css";
 @import "../extlib/dataTables-1.13.1.bootstrap5.css";
 @import "../extlib/responsive-2.4.0.bootstrap5.css";
 
+:root {
+    --highlight-bg: #fffaea;
+}
+
 main {
     margin: 8px 8px;
     font-size: 12pt;
@@ -10,7 +14,7 @@ main {
 }
 
 #hive-header {
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid;
     padding-bottom: 0px;
     margin-bottom: 8px;
     display: flex;
@@ -22,8 +26,12 @@ main {
     margin: 0 8px 3px 1px;
 }
 
+[data-bs-theme="dark"] #hive-logo {
+  filter: brightness(500%);
+}
+
 #hive-static-nav {
-    margin: 0 16px 0 auto;
+    margin: 0 0 10px auto;
     font-size: 80%;
 }
 
@@ -36,12 +44,22 @@ main {
     white-space: nowrap;
 }
 
-.dataTables_wrapper {
-    margin-top: 10px;
+.theme-toggle {
+    cursor: pointer;
+    padding: 4px 12px;
+    user-select: none;
+    border-radius: 20px;
+    transition: all 0.2s ease;
+    border: 1px solid;
+    margin: 0 !important;
+}
+
+.theme-toggle:hover {
+    transform: translateY(-1px);
 }
 
-#sim-log-link {
-    color: black;
+.dataTables_wrapper {
+    margin-top: 10px;
 }
 
 td.test-name-column {
@@ -97,32 +115,30 @@ td.ellipsis {
       first and set the width of the table based on that. This behavior is disabled by
       width: 0. However, we do want the element to expand to the available width.
       The min-width: 100% does that.
-   */
-    width: 0; min-width: 100%;
+    */
+   width: 0; min-width: 100%;
 }
 
 .test-output code {
-    color: black;
     white-space: pre;
-    border-left: 2px solid #777;
+    border-left: 2px solid;
     display: block;
     padding-left: 5px;
+    color: var(--bs-body-color);
 }
 
 .test-output .output-prefix::before,
 .test-output .output-suffix::after {
     content: "";
     width: 20px;
-    border-top: 2px solid #777;
+    border-top: 2px solid;
     display: block;
     padding-left: 5px;
     margin-left: -5px;
 }
 
 .test-output .output-trunc {
     display: inline-block;
-    background-color: #777;
-    color: #fff;
     padding: 0 10px;
     text-decoration: none;
     white-space: nowrap;
@@ -136,13 +152,18 @@ td.ellipsis {
     scroll-margin: 8em 0 0 0;
 }
 
-.dataTable tr.highlighted {
-    background-color: #fffaea;
+.dataTable tr.highlighted,
+.dataTable tr.highlighted td {
+    background-color: color-mix(in srgb, var(--bs-warning-border-subtle) 15%, transparent);
 }
 
+
 /* workaround for weird DataTables controls styling at small screen size */
 @media screen and (max-width: 767px) {
-    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
+    div.dataTables_wrapper div.dataTables_length,
+    div.dataTables_wrapper div.dataTables_filter,
+    div.dataTables_wrapper div.dataTables_info,
+    div.dataTables_wrapper div.dataTables_paginate {
         text-align: left !important;
         margin-top: 5px;
     }

diff --git a/cmd/hiveview/assets/lib/viewer.css b/cmd/hiveview/assets/lib/viewer.css
@@ -9,7 +9,6 @@ h3 {
 #viewer {
     display: flex;
     flex-wrap: nowrap;
-    background-color: #fff;
     border: 1px solid #d1d5da;
     border-radius: 0 0 3px 3px;
     width: 100%;
@@ -18,7 +17,6 @@ h3 {
 #viewer-header {
     margin: 8px 0 0 0;
     padding: 8px 16px;
-    background-color: #f6f8fa;
     border: 1px solid #d1d5da;
     border-bottom: none;
     border-radius: 3px 3px 0 0;
@@ -88,10 +86,21 @@ h3 {
     background: #f9f2dc;
 }
 
+[data-bs-theme="dark"] .num.highlighted {
+    background-color: var(--bs-gray-dark);
+}
+
 pre.highlighted {
     background-color: #f9f2dc;
 }
 
+
+
+[data-bs-theme="dark"] pre.highlighted {
+    background-color: var(--bs-gray-dark);
+    color: var(--bs-gray-100);
+}
+
 .num.highlighted::before {
     border: solid #d5d0bd;
     border-width: 1px 0 1px 1px;
@@ -116,3 +125,7 @@ pre.highlighted {
     clip-path: inset(4px 0 0 4px);
     background: linear-gradient(to bottom right, #f9f2dc00 15px, #f9f2dc 16px, #f9f2dc);
 }
+
+[data-bs-theme="dark"] .num.highlighted::before,.num.highlighted::after {
+    border-color: var(--bs-dark);
+}
diff --git a/cmd/hiveview/assets/suite.html b/cmd/hiveview/assets/suite.html
@@ -15,6 +15,7 @@
         <nav id="hive-static-nav">
           <span class="nav-item" id="hive-instance-info"></span>
           <a class="nav-item" href="https://github.com/ethereum/hive/blob/master/docs/overview.md#what-is-hive">What is Hive?</a>
+          <span class="nav-item theme-toggle">🌙</span>
         </nav>
       </div>
 

diff --git a/cmd/hiveview/assets/viewer.html b/cmd/hiveview/assets/viewer.html
@@ -24,6 +24,7 @@
         <nav id="hive-static-nav">
           <span class="nav-item" id="hive-instance-info"></span>
           <a class="nav-item" href="https://github.com/ethereum/hive/blob/master/docs/overview.md#what-is-hive">What is Hive?</a>
+          <span class="nav-item theme-toggle">🌙</span>
         </nav>
       </div>
 

diff --git a/cmd/hiveview/deploy.go b/cmd/hiveview/deploy.go
@@ -29,8 +29,8 @@ func hiveviewBundler(fsys fs.FS) *bundler {
 // moduleAliases maps ES module names to files.
 var moduleAliases = map[string]string{
 	"jquery":                        "./extlib/jquery-3.6.3.esm.js",
-	"@popper/core":                  "./extlib/popper-2.9.2.js",
-	"bootstrap":                     "./extlib/bootstrap-5.2.3.mjs",
+	"@popperjs/core":                "./extlib/popper-2.9.2.js",
+	"bootstrap":                     "./extlib/bootstrap-5.3.3.mjs",
 	"datatables.net":                "./extlib/dataTables-1.13.1.mjs",
 	"datatables.net-bs5":            "./extlib/dataTables-1.13.1.bootstrap5.mjs",
 	"datatables.net-responsive":     "./extlib/responsive-2.4.0.mjs",