Colorize and preserve newlines in log output

Author: Rangi42

css/style.css

@@ -190,6 +190,22 @@ canvas {
     grid-column: 1 / 3;
     grid-row: 3;
 }
+.output {
+    border: 1px inset #999;
+    padding: 2px;
+    width: calc(100% - 6px);
+    height: calc(100% - 6px);
+    overflow: auto;
+}
+.output .info {
+    color: green;
+}
+.output .stdout {
+	color: black;
+}
+.output .stderr {
+    color: red;
+}
 
 .emulator_screen_container {
     width: 512;
@@ -243,4 +259,4 @@ canvas {
         grid-column: 1;
         grid-row: 5;
     }
-}
+}

index.html

@@ -31,21 +31,37 @@
 			var cpu_step_interval_id;
 			var emu_view = "";
 
-			compiler.setLogCallback(function (str) {
+			function escapeHTML(str) {
+				var escapedHTML = document.createElement("div");
+				escapedHTML.innerText = str;
+				return escapedHTML.innerHTML;
+			}
+
+			compiler.setLogCallback(function (str, kind) {
+				console.log(`log_callback ${kind}`, [str]);
 				var output = document.getElementById("output");
-				if (str === null) {
-					output.value = "";
+				if (str === null && kind == null) {
+					output.innerHTML = "";
 					return;
 				}
-				output.value += str + "\n";
-				output.scrollTop = output.clientHeight;
+				output.innerHTML +=
+					"<span class=\"" +
+					kind +
+					"\">" +
+					escapeHTML(str) +
+					"</span>\n";
+				output.scrollTop = output.scrollHeight;
 			});
 			emulator.setSerialCallback(function (value) {
 				var output = document.getElementById("output");
 				if ((value >= 32 && value < 128) || value == 13)
-					output.value += String.fromCharCode(value);
-				else output.value += "[" + ("00" + value.toString(16)).slice(-2) + "]";
-				output.scrollTop = output.clientHeight;
+					output.innerHTML += escapeHTML(String.fromCharCode(value));
+				else
+					output.innerHTML +=
+						"<u>" +
+						escapeHTML("[" + ("00" + value.toString(16)).slice(-2) + "]") +
+						"</u>";
+				output.scrollTop = output.scrollHeight;
 			});
 
 			function compileCode() {
@@ -846,11 +862,11 @@
 				</table>
 			</div>
 			<div class="console">
-				<textarea
-					style="height: 100%; width: 100%"
+				<pre
 					id="output"
+					class="output"
 					readonly
-				></textarea>
+				></pre>
 			</div>
 
 			<div id="infodialog" class="modal">

js/compiler.js

@@ -16,31 +16,15 @@ var link_options = [];
 
 var line_nr_regex = /([\w\.]+)[\w\.\:~]*\(([0-9]+)\)/gi;
 
-var buffered_log = "";
-function logFunction(str) {
-	if (/^[^:\s]+:/.test(str)) {
-		// If the log starts with a label, we can emit the previously buffered one.
-		flushLog();
-		buffered_log = str.trim();
-	} else {
-		// If the log doesn’t start with a label, it’s a follow-up to the previous log,
-		// so add it to the buffer.
-		buffered_log += " " + str.trim();
-	}
-}
-
-function flushLog() {
-	unbufferedLogFunction(buffered_log);
-	buffered_log = "";
-}
-
-function unbufferedLogFunction(str) {
-	if (log_callback) log_callback(str);
+function logFunction(str, kind) {
+	if (log_callback) log_callback(str, kind);
 
 	if (
-		str.startsWith("error: ") ||
-		str.startsWith("ERROR: ") ||
-		str.startsWith("warning: ")
+		kind == "stderr" && (
+			str.startsWith("error: ") ||
+			str.startsWith("ERROR: ") ||
+			str.startsWith("warning: ")
+		)
 	) {
 		var type = "error";
 		if (str.startsWith("warning: ")) type = "warning";
@@ -53,6 +37,18 @@ function unbufferedLogFunction(str) {
 	}
 }
 
+function infoFunction(str) {
+	logFunction(str, "info");
+}
+
+function outFunction(str) {
+	logFunction(str, "stdout");
+}
+
+function errFunction(str) {
+	logFunction(str, "stderr");
+}
+
 export function setLogCallback(callback) {
 	log_callback = callback;
 }
@@ -89,7 +85,7 @@ function trigger() {
 }
 
 function startCompile() {
-	if (log_callback) log_callback(null);
+	if (log_callback) log_callback(null, null);
 	error_list = [];
 	rom_symbols = [];
 	ram_symbols = [];
@@ -102,7 +98,7 @@ function startCompile() {
 
 function runRgbAsm(targets, obj_files) {
 	var target = targets.pop();
-	logFunction("Running: rgbasm " + target + " -o " + target + ".o -Wall");
+	infoFunction("Running: rgbasm " + target + " -o " + target + ".o -Wall");
 	createRgbAsm({
 		arguments: [target, "-o", "output.o", "-Wall"],
 		preRun: function (m) {
@@ -111,10 +107,9 @@ function runRgbAsm(targets, obj_files) {
 				FS.writeFile(key, value);
 			}
 		},
-		print: logFunction,
-		printErr: logFunction,
+		print: outFunction,
+		printErr: errFunction,
 	}).then(function (m) {
-		flushLog();
 		if (repeat) {
 			buildFailed();
 			return;
@@ -135,17 +130,16 @@ function runRgbAsm(targets, obj_files) {
 function runRgbLink(obj_files) {
 	var args = ["-o", "output.gb", "--map", "output.map"].concat(link_options);
 	for (var name in obj_files) args.push(name + ".o");
-	logFunction("Running: rgblink " + args.join(" "));
+	infoFunction("Running: rgblink " + args.join(" "));
 	createRgbLink({
 		arguments: args,
 		preRun: function (m) {
 			var FS = m.FS;
 			for (var name in obj_files) FS.writeFile(name + ".o", obj_files[name]);
 		},
-		print: logFunction,
-		printErr: logFunction,
+		print: outFunction,
+		printErr: errFunction,
 	}).then(function (m) {
-		flushLog();
 		if (repeat) {
 			buildFailed();
 			return;
@@ -169,17 +163,16 @@ function runRgbLink(obj_files) {
 }
 
 function runRgbFix(input_rom_file, map_file) {
-	logFunction("Running: rgbfix -v output.gb -p 0xff");
+	infoFunction("Running: rgbfix -v output.gb -p 0xff");
 	createRgbFix({
 		arguments: ["-v", "output.gb", "-p", "0xff"],
 		preRun: function (m) {
 			var FS = m.FS;
 			FS.writeFile("output.gb", input_rom_file);
 		},
-		print: logFunction,
-		printErr: logFunction,
+		print: outFunction,
+		printErr: errFunction,
 	}).then(function (m) {
-		flushLog();
 		var FS = m.FS;
 		try {
 			var rom_file = FS.readFile("output.gb");
@@ -193,7 +186,7 @@ function runRgbFix(input_rom_file, map_file) {
 }
 
 function buildFailed() {
-	logFunction("Build failed");
+	infoFunction("Build failed");
 	if (repeat) {
 		repeat = false;
 		trigger();
@@ -265,7 +258,7 @@ function buildDone(rom_file, map_file) {
 				var total = 0x4000;
 				if (section_type.startsWith("WRAM")) total = 0x1000;
 				else if (section_type.startsWith("HRAM")) total = 127;
-				logFunction(
+				infoFunction(
 					"Space left: " +
 						section_type +
 						"[" +
@@ -278,8 +271,7 @@ function buildDone(rom_file, map_file) {
 				);
 			}
 		}
-		logFunction("Build done");
-		flushLog();
+		infoFunction("Build done");
 		done_callback(rom_file, start_address, addr_to_line);
 	}
 }

tracker/js/player.js

@@ -7,7 +7,14 @@ class Player {
 
     constructor()
     {
-        compiler.setLogCallback(console.log);
+        compiler.setLogCallback(function (str, kind) {
+            if (kind == "info")
+                console.info(str);
+            else if (kind == "stdout")
+                console.log(str);
+            else if (kind == "stderr")
+                console.error(str);
+        });
         compiler.setLinkOptions(['-t', '-w']);
 
         function getFile(url, name)