Fix JohannesDeml#21 Add log counter that can toggle showing specific messages

Author: JohannesDeml

Assets/WebGLTemplates/Develop/debug-console.css

@@ -1,6 +1,8 @@
 /* Debug console styling */
 #debugConsole {
  position: absolute;
+ top: 0px;
+ left: 0px;
  width: 100%;
  height: 90vh;
  z-index: 100;
@@ -19,26 +21,69 @@
  align-items: center;
  height: 30px;
  padding: 10px 50px 10px 10px;
- background-color: white;
+ background-color: rgb(243, 243, 243);
 }
 
 #debugConsole .console-top-bar button {
  position: relative;
  flex-shrink: 0;
- width: 20px;
- height: 20px;
+ width: 24px;
+ height: 24px;
+ margin: 0px 8px;
  cursor: pointer;
  border: 0;
  background: none;
 }
 
+#debugConsole .console-top-bar .log-counter {
+ position: relative;
+ flex-shrink: 0;
+ height: 24px;
+ margin: 0px 8px;
+ border: 0;
+}
+
+#debugConsole .console-top-bar .log-counter .counter {
+ cursor: pointer;
+ padding: 8px;
+ background-color: rgba(255, 255, 255, 0.5);
+}
+
+#debugConsole .console-top-bar .log-counter input[type='checkbox']:checked + .counter {
+ border-bottom: 3px solid yellowgreen;
+}
+
+#debugConsole .console-top-bar .log-counter .counter::before {
+ padding-right: 2px;
+}
+#debugConsole .console-top-bar .log-counter.info .counter::before {
+ content: 'ℹ️';
+}
+
+#debugConsole .console-top-bar .log-counter.warn .counter::before {
+ content: '⚠️';
+}
+
+#debugConsole .console-top-bar .log-counter.error .counter::before {
+ content: '🛑';
+}
+
+#debugConsole .console-top-bar .separator {
+ position: relative;
+ flex-shrink: 0;
+ width: 1px;
+ height: 24px;
+ margin: 0px 8px;
+ background: black;
+}
+
 #debugConsole .log-entries {
  overflow-y: scroll;
 }
 
 #debugConsole .console-input {
  flex-shrink: 0;
- height: 20px;
+ height: 24px;
 }
 
 #debugConsole .entry {
@@ -54,6 +99,13 @@
  color: rgb(41, 50, 60);
  background-color: rgba(172, 204, 224, 0.9);
 }
+#debugConsole.hidelogs-info .entry.info,
+#debugConsole.hidelogs-info .entry.debug,
+#debugConsole.hidelogs-info .entry.log,
+#debugConsole.hidelogs-warn .entry.warn,
+#debugConsole.hidelogs-error .entry.error {
+ display:none;
+}
 
 #debugConsole .entry.warn {
  color: rgb(82, 70, 3);
@@ -306,4 +358,4 @@ dl div:after {
  border-top-right-radius: 2px;
  top: -7px;
  left: -2px
-}
+}

Assets/WebGLTemplates/Develop/debug-console.js

@@ -1,4 +1,12 @@
 var consoleDiv;
+var logCounterDivs = {};
+var logCounter = {
+ "log": 0,
+ "info": 0,
+ "debug": 0,
+ "warn": 0,
+ "error": 0
+};
 
 
 function setCookie(cname, cvalue, exdays) {
@@ -23,9 +31,9 @@ function getCookie(cname) {
  return "";
 }
 
-var scrollToBottom = true;
-if(getCookie("scrollToBottom") === "false") {
- scrollToBottom = false;
+var scrollToBottom = false; // Default to false, since continuous erros can overload the system
+if(getCookie("scrollToBottom") === "true") {
+ scrollToBottom = true;
 }
 
 function initialzeDebugConsole() {
@@ -60,6 +68,12 @@ function addDebugConsoleTopBar(debugConsole, consoleDiv) {
  consoleTopBar.className = 'console-top-bar';
  debugConsole.appendChild(consoleTopBar);
 
+ addTopBarLogCounter(consoleTopBar);
+
+ var separator = document.createElement('div');
+ separator.classList.add('separator');
+ consoleTopBar.appendChild(separator);
+
  // Clear logs button
  var clearButton = document.createElement('button');
  clearButton.classList.add('clear-button', 'bubble-click-indicator');
@@ -133,6 +147,56 @@ function addDebugConsoleTopBar(debugConsole, consoleDiv) {
  });
 }
 
+function addTopBarLogCounter(consoleTopBar) {
+
+ addButton = (logLevels) => {
+ var counter = document.createElement('div');
+ const logLevelsArray = logLevels.split(',');
+ counter.classList.add('log-counter', 'bubble-click-indicator', ...logLevelsArray);
+ counter.setAttribute('data-loglevels', logLevels);
+ counter.title = logLevels;
+ let count = 0;
+ logLevelsArray.forEach(logLevel => {
+ count += logCounter[logLevel];
+ logCounterDivs[logLevel] = counter;
+ });
+ consoleTopBar.appendChild(counter);
+
+ var checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.id = `counter-${logLevels}`;
+ checkbox.name = checkbox.id;
+ checkbox.checked = true;
+ checkbox.setAttribute('hidden', 'true');
+ counter.appendChild(checkbox);
+
+ var counterText = document.createElement('label');
+ counterText.className = 'counter';
+ counterText.htmlFor = checkbox.id;
+ counterText.innerHTML = count;
+ counter.appendChild(counterText);
+
+ checkbox.addEventListener('change', (event) => {
+ var logLevels = event.currentTarget.parentNode.getAttribute('data-loglevels');
+ const logLevelsArray = logLevels.split(',');
+ var debugConsole = document.getElementById('debugConsole');
+ if(event.currentTarget.checked) {
+ logLevelsArray.forEach(element => {
+ debugConsole.classList.remove(`hidelogs-${element}`);
+ });
+ } else {
+ logLevelsArray.forEach(element => {
+ debugConsole.classList.add(`hidelogs-${element}`);
+ });
+ }
+ })
+ }
+
+ addButton('debug,log,info');
+ addButton('warn');
+ addButton('error');
+}
+
 function applyScrollToBottom(toBottomButton, consoleDiv) {
  toBottomButton.setAttribute('data-before', scrollToBottom ? 'locked' : 'unlocked');
  if (scrollToBottom) {
@@ -160,6 +224,7 @@ function setupConsoleLogPipe() {
 
 
  parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
+ updateLogCounter(logLevel);
  let index = 0;
  let consoleArgs = [];
  let consoleMessage = "";
@@ -208,6 +273,20 @@ function setupConsoleLogPipe() {
  };
 }
 
+function updateLogCounter(logLevel) {
+ logCounter[logLevel]++;
+
+ counter = logCounterDivs[logLevel];
+ const logLevels = counter.getAttribute('data-loglevels');
+ const logLevelsArray = logLevels.split(',');
+ let count = 0;
+ logLevelsArray.forEach(logLevel => {
+ count += logCounter[logLevel];
+ });
+
+ counter.querySelector(".counter").innerHTML = count;
+}
+
 function htmlLog(message, className) {
  var entry = document.createElement('div');
  entry.classList.add('entry', className);