cmd/hiveview: small UI improvements

cmd/hiveview/assets/lib/app-index.js

@@ -89,7 +89,7 @@ function showFileListing(data, error) {
 				title: "🕒",
 				data: "start",
 				type: "date",
-				width: "13%",
+				width: "10em",
 				render: function(v, type) {
 					if (type === 'display' || type == 'filter') {
 						return v.toLocaleString();
@@ -100,20 +100,20 @@ function showFileListing(data, error) {
 			{
 				title: "Suite",
 				data: "name",
-				width: "15%",
+				width: "10em",
 			},
 			{
 				title: "Clients",
 				data: "clients",
-				width: "40%",
+				width: "auto",
 				render: function(data) {
 					return data.join(", ")
 				},
 			},
 			{
 				title: "Status",
 				data: null,
-				width: "5em",
+				width: "5.5em",
 				className: "suite-status-column",
 				render: function(data) {
 					if (data.fails > 0) {

cmd/hiveview/assets/lib/app-suite.js

@@ -163,9 +163,11 @@ function formatTestLog(suiteData, test) {
 }
 
 function highlightErrorsInTestOutput(content) {
-	return content.replace(/(ERROR|FAIL|Error)(:)?.*/, function (m) {
-		return '<span class="output-error">' + m + '</span>';
-	});
+	let p = /\b(error|fail(ed)?|can't launch node)\b/i
+	if (p.test(content)) {
+		return '<span class="output-error">' + content + '</span>';
+	}
+	return content;
 }
 
 // showSuiteName displays the suite title.

cmd/hiveview/assets/lib/app-viewer.js

@@ -4,7 +4,7 @@ import * as app from './app.js'
 
 function navigate() {
     app.init();
-    
+
     // Check for line number in hash.
     var line = null;
     if (window.location.hash.substr(1, 1) == "L") {
@@ -144,19 +144,20 @@ function appendLine(contentArea, gutter, number, text) {
     num.setAttribute("line", number.toString());
     gutter.appendChild(num);
 
-    let line = document.createElement("span")
+    let line = document.createElement("pre")
     line.innerText = text + "\n";
     contentArea.appendChild(line);
 }
 
 // fetchFile loads up a new file to view
 function fetchFile(url, line /* optional jump to line */ ) {
+    let resultsRE = new RegExp("^" + app.resultsRoot);
     $.ajax({
         xhr: loader.newXhrWithProgressBar,
         url: url,
         dataType: "text",
         success: function(data) {
-            let title = url.replace("^"+app.resultsRoot, '');
+            let title = url.replace(resultsRE, '');
             showTitle(null, title);
             showFileContent(data, url);
             setHL(line, true);

cmd/hiveview/assets/lib/app.css

@@ -131,6 +131,7 @@ td.ellipsis {
 
 .highlighted {
     background-color: #fffaea !important;
+    scroll-margin: 5em 0 0 0;
 }
 
 /* workaround for weird DataTables controls styling at small screen size */

cmd/hiveview/assets/lib/viewer.css

@@ -0,0 +1,103 @@
+h3 {
+    word-wrap: anywhere;
+}
+
+#load-progress-bar-container {
+    margin: 8px 0;
+}
+
+#viewer {
+    display: flex;
+    flex-wrap: nowrap;
+    background-color: #fff;
+    border: 1px solid #d1d5da;
+    border-radius: 3px;
+    width: 100%;
+    font-size: 14px;
+}
+
+#viewer-header {
+    margin: 8px 0 0 0;
+    padding: 8px 16px;
+    background-color: #f6f8fa;
+    border: 1px solid #d1d5da;
+    border-bottom: none;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    font-size: 80%;
+}
+
+#gutter {
+    flex: 1 0 3em;
+    z-index: 20;
+    position: relative;
+}
+
+#file-content-container {
+    overflow-x: auto;
+    flex: 99 0 auto;
+    width: 90%;
+    z-index: 10;
+    position: relative;
+}
+
+#file-content pre {
+    border: 0;
+    margin: 0;
+    overflow: visible;
+    padding: 0 0 0 8px;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.num {
+    display: block;
+    height: 18px;
+    line-height: 18px;
+    font-size: 11px;
+    border-right: 1px solid #d1d5da;
+    color: #bbb;
+    padding: 0 5px;
+    text-align: right;
+    box-sizing: border-box;
+    margin-left: 4px;
+    scroll-margin: 10em 0 0 0;
+
+    -webkit-user-select: none; /* Safari */
+    user-select: none;
+}
+
+.num::before {
+    content: attr(line);
+    position: relative;
+    z-index: 20;
+}
+
+.num.highlighted {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    border: solid #a8a8a8;
+    border-width: 1px 0 1px 1px;
+    border-radius: 2px 2px 2px 2px;
+}
+
+.num.highlighted::before {
+    margin-right: -7px;
+}
+
+.num.highlighted::after {
+    content: '';
+    box-sizing: border-box;
+    display: block;
+    margin-right: -9px;
+    height: 17px;
+    width: 17px;
+    border-radius: 0 2px 2px 2px;
+    background-color: #fffaea;
+    border: solid #a8a8a8;
+    border-width: 0 1px 1px 0;
+    transform: rotate(-45deg);
+    clip-path: inset(5px 0 0 5px);
+    z-index: 10;
+}

cmd/hiveview/assets/viewer.html

@@ -6,68 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" href="/images/favicon.svg">
     <link rel="stylesheet" href="/lib/app.css">
-
-    <style>
-      h3 {
-          word-wrap: anywhere;
-      }
-
-      #load-progress-bar-container {
-          margin: 8px 0;
-      }
-
-      #viewer {
-          display: flex;
-          flex-wrap: nowrap;
-          background-color: #fff;
-          border: 1px solid #d1d5da;
-          border-radius: 3px;
-          width: 100%;
-          font-size: 14px;
-      }
-
-      #viewer-header {
-          margin: 8px 0 0 0;
-          padding: 8px 16px;
-          background-color: #f6f8fa;
-          border: 1px solid #d1d5da;
-          border-bottom: none;
-          border-top-left-radius: 3px;
-          border-top-right-radius: 3px;
-          font-size: 80%;
-      }
-
-      #gutter {
-          width: 4.5em;
-      }
-
-      #file-content {
-          overflow-x: auto;
-      }
-
-      #file-content span {
-          padding-left: 5px;
-          white-space: pre;
-          display: block;
-          float: left;
-          min-width: 100%;
-      }
-
-      .num::before {
-          content: attr(line);
-      }
-      .num {
-          border-right: 1px solid #d1d5da;
-          color: #bbb;
-          padding: 0 5px;
-          text-align: right;
-          display: block;
-      }
-
-      .text-mono {
-          font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
-      }
-    </style>
+    <link rel="stylesheet" href="/lib/viewer.css">    
 
     <script id="exampletext" type="text/foo">
       This is some sample text. You can load new files via the little input above, and also
@@ -95,13 +34,15 @@ <h3 id="file-title">Loading file...</h3>
         <div id="load-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
 
-      <div id="viewer-header" class="text-mono" style="display: none;">
+      <div id="viewer-header" class="font-monospace" style="display: none;">
         <span id="meta">5 lines 199 B</span>
         <a id="raw-url" style="display: none;">Raw</a>
       </div>
       <div id="viewer" style="display: none;">
-        <div id="gutter" class="text-mono"></div>
-        <div id="file-content" class="text-mono"></div>
+        <div id="gutter" class="font-monospace"></div>
+        <div id="file-content-container" class="font-monospace">
+          <table id="file-content" class="font-monospace"></table>
+        </div>
       </div>
     </main>
   </body>