Fixed remote trace of objects, colors and console subs

Author: Matt Karl

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.0-alpha.6",
+	"version": "0.2.0-alpha.7",
 	"private": true,
 	"dependencies": {
 		"jqueryui": "*",

deploy/index.html

@@ -41,6 +41,6 @@
 				<span class="icon glyphicon glyphicon-send"></span> Remote Trace
 			</a>
 		</div>
-		<footer class="version">Version <span id="version">0.2.0-alpha.6</span></footer>
+		<footer class="version">Version <span id="version">0.2.0-alpha.7</span></footer>
 	</body>
 </html>

deploy/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"description": "Application for SpringRoll projects",
-	"version": "0.2.0-alpha.6",
+	"version": "0.2.0-alpha.7",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SpringRoll/SpringRollStudio"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"private": true,
-	"version": "0.2.0-alpha.6",
+	"version": "0.2.0-alpha.7",
 	"dependencies": {
 		"grunt": "~0.4.5",
 		"grunt-contrib-copy": "^0.7.0",

project.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.0-alpha.6",
+	"version": "0.2.0-alpha.7",
 	"main": [
 		"components/node-webkit-app/src/utils/UpdateChecker.js",
 		"components/node-webkit-app/src/utils/Browser.js",

src/springroll/remote/RemoteTrace.js

@@ -313,47 +313,56 @@
 			atBottom = scrollTop + height >= scrollHeight;
 
 		result = JSON.parse(result);
-		var level = result.level || "GENERAL";
-		var now = (new Date()).toLocaleString();
 
-		// This is a hack we should fix the framework
-		if (level === "true" || level === true)
-		{
-			level = "DE"+"BUG";
-		}
+		var level = (result.level || "GENERAL").toLowerCase();
+		var now = (new Date()).toLocaleString();
 
 		this.saveButton.removeClass('disabled');
 		this.clearButton.removeClass('disabled');
 
-		var log = $("<div class='log'></div>")
-			.addClass(level.toLowerCase());
-
 		if (level === "session")
 		{
-			if (this.clearOnNewSession)
-			{
-				this.clear();
-			}
-			log.text("New Session Began at " + now);
+			this.logSession(now);
 		}
-		else
+		else if (Array.isArray(result.message))
 		{
-			var message = result.message;
+			var message, i, j, tokens, token, sub;
 
-			if (typeof message === "object")
+			for (i = 0; i < result.message.length; i++)
 			{
-				message = JSON.stringify(message, null, "\t");
+				message = result.message[i];
+
+				// Ignore non-strings
+				if (typeof message == "string")
+				{
+					tokens = message.match(/%[sdifoObxec]/g);
+
+					if (tokens)
+					{
+						for (j = 0; j < tokens.length; j++)
+						{
+							token = tokens[j];
+							sub = result.message[++i];
+
+							// CSS substitution check
+							if (token == "%c")
+							{
+								sub = '<span style="'+ sub + '">';
+								message += '</span>';
+							}
+							// Do object substitution
+							else if (token  == "%o" || token == "%O")
+							{
+								sub = JSON.stringify(sub, null, "\t");
+							}
+							message = message.replace(token, String(sub));
+						}
+					}
+				}
+				this.logMessage(now, message, level);
 			}
-			log.append(
-				$("<span class='type'></span>").text(level),
-				$("<span class='timestamp'></span>").text(now),
-				$("<span class='message'></span>").text(message)
-			);
 		}
 
-		// Add a new log
-		this.output.append(log);
-
 		if (this.maxLogs)
 		{
 			this.output.html(this.output.children(".log").slice(-this.maxLogs));
@@ -366,6 +375,47 @@
 		}
 	};
 
+	/**
+	 * Log a new message
+	 * @method logMessage
+	 * @param {string} now The current time name
+	 * @param {string} message The message to log
+	 * @param {string} level The level to use
+	 */
+	p.logMessage = function(now, message, level)
+	{
+		if (typeof message === "object")
+		{
+			message = JSON.stringify(message, null, "\t");
+		}
+		this.output.append(
+			$("<div class='log'></div>")
+				.addClass(level)
+				.append(
+					$("<span class='type'></span>").text(level.toUpperCase()),
+					$("<span class='timestamp'></span>").text(now),
+					$("<span class='message'></span>").html(message)
+				)
+			);
+	};
+
+	/**
+	 * Log a new session
+	 * @method logSession
+	 * @param {string} now The current time name
+	 */
+	p.logSession = function(now)
+	{
+		if (this.clearOnNewSession)
+		{
+			this.clear();
+		}
+		this.output.append(
+			$("<div class='log session'></div>")
+				.text("New Session Began at " + now)
+		);
+	};
+
 	/**
 	*  Close the application
 	*  @method shutdown

src/springroll/remote/less/trace.less

@@ -51,7 +51,7 @@
 	}
 	// Options for the trace
 	&.wrap .log {
-		white-space:normal;
+		white-space:pre;
 	}
 	&.timestamps .timestamp {
 		display: inline-block;