Add toggle to show timestamps for the log messages

Author: JohannesDeml

Assets/WebGLTemplates/Develop/debug-console.css

@@ -68,6 +68,10 @@
     content: '🛑';
 }
 
+#debugConsole .console-top-bar .timestamp-button .icon::before {
+    content: '🕰️';
+}
+
 #debugConsole .console-top-bar .separator {
     position: relative;
     flex-shrink: 0;
@@ -107,6 +111,14 @@
     display:none;
 }
 
+#debugConsole .timestamplog {
+    color: #888;
+}
+
+#debugConsole.hidelogtimestamps .timestamplog {
+    display: none;
+}
+
 #debugConsole .entry.warn {
     color: rgb(82, 70, 3);
     background-color: rgba(231, 196, 41, 0.9);
@@ -131,6 +143,10 @@
     border-bottom: 3px solid yellowgreen;
 }
 
+#debugConsole .timestamp-button.show {
+    border-bottom: 3px solid yellowgreen;
+}
+
 #debugConsole .bubble-click-indicator:before {
     content: attr(data-before);
     ;

Assets/WebGLTemplates/Develop/debug-console.js

@@ -31,9 +31,13 @@ function getCookie(cname) {
     return "";
 }
 
-var scrollToBottom = false; // Default to false, since continuous erros can overload the system
-if(getCookie("scrollToBottom") === "true") {
-    scrollToBottom = true;
+var scrollToBottom = true;
+if(getCookie("scrollToBottom") === "false") {
+    scrollToBottom = false;
+}
+var addTimestamp = true;
+if(getCookie("addTimestamp") === "false") {
+    addTimestamp = false;
 }
 
 function initialzeDebugConsole() {
@@ -74,6 +78,28 @@ function addDebugConsoleTopBar(debugConsole, consoleDiv) {
     separator.classList.add('separator');
     consoleTopBar.appendChild(separator);
 
+    // Add timestamp toggle
+    var timestampButton = document.createElement('button');
+    timestampButton.classList.add('timestamp-button', 'bubble-click-indicator');
+    timestampButton.title = 'Add timestamp to logs';
+    consoleTopBar.appendChild(timestampButton);
+
+    var timestampIcon = document.createElement('div');
+    timestampIcon.classList.add('icon');
+    timestampButton.appendChild(timestampIcon);
+    applyTimestamp(timestampButton, consoleDiv);
+
+    timestampButton.addEventListener('click', function () {
+        addTimestamp = !addTimestamp;
+        setCookie("addTimestamp", addTimestamp, 365);
+        applyTimestamp(timestampButton, consoleDiv);
+        // Show copy feedback to the user
+        timestampButton.classList.add('active');
+        setTimeout(function () {
+            timestampButton.classList.remove('active');
+        }, 1500);
+    });
+
     // Clear logs button
     var clearButton = document.createElement('button');
     clearButton.classList.add('clear-button', 'bubble-click-indicator');
@@ -207,6 +233,18 @@ function applyScrollToBottom(toBottomButton, consoleDiv) {
     }
 }
 
+function applyTimestamp(timestampButton, consoleDiv) {
+    timestampButton.setAttribute('data-before', addTimestamp ? 'Show' : 'Hide');
+    var debugConsole = document.getElementById('debugConsole');
+    if (addTimestamp) {
+        timestampButton.classList.add("show");
+        debugConsole.classList.remove("hidelogtimestamps");
+    } else {
+        timestampButton.classList.remove("show");
+        debugConsole.classList.add("hidelogtimestamps");
+    }
+}
+
 function setupConsoleLogPipe() {
     // Store actual console log functions
     let defaultConsoleLog = console.log;
@@ -293,10 +331,13 @@ function htmlLog(message, className) {
     consoleDiv.appendChild(entry);
 
     var text = document.createElement('p');
-    // Remove last line break if existing
-    if (message.endsWith("\n")) {
-        message = message.substring(0, message.length - "\n".length);
-    }
+    var time = new Date().toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric"}
+    );
+    message = "<span class='timestamplog'>[" + time + "] </span>" + message;
     message = message.replaceAll("\n", "<br />");
     text.innerHTML = message;
     entry.appendChild(text);