From 831b0fd767928719978b8556f0b6bbf42f88b4fb Mon Sep 17 00:00:00 2001
From: smellai <s.mellai@arduino.cc>
Date: Tue, 11 Jul 2017 18:40:46 +0200
Subject: [PATCH 1/2] improved debugger UI

---
 main.go | 185 +++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 116 insertions(+), 69 deletions(-)
diff --git a/main.go b/main.go
index 35ee6c414..b8256ddf1 100755
--- a/main.go
+++ b/main.go
@@ -286,59 +286,63 @@ const homeTemplateHtml = `<!DOCTYPE html>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
 <script type="text/javascript">
     $(function() {
-
-    var socket;
-    var msg = $("#msg");
-    var log = document.getElementById('log');
-    var pause = document.getElementById('myCheck');
-    var messages = [];
-    var only_log = true;
-
-    function appendLog(msg) {
-
-		if (!pause.checked && (only_log == false || (!(msg.indexOf("{") == 0) && !(msg.indexOf("list") == 0) && only_log == true))) {
-			messages.push(msg);
-			if (messages.length > 100) {
-				messages.shift();
-			}
-			var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
-			log.innerHTML = messages.join("<br>");
-			if (doScroll) {
-				log.scrollTop = log.scrollHeight - log.clientHeight;
-			}
-		}
-    }
-
-    $("#form").submit(function() {
-        if (!socket) {
-            return false;
-        }
-        if (!msg.val()) {
-            return false;
-        }
-        socket.emit("command", msg.val());
-        if (msg.val().indexOf("log off") != -1) {only_log = true}
-        if (msg.val().indexOf("log on") != -1) {only_log = false}
-        msg.val("");
-        return false
-    });
-
-    if (window["WebSocket"]) {
-    	if (window.location.protocol === 'https:') {
-    		socket = io('https://{{$}}')
-    	} else {
-    		socket = io("http://{{$}}");
-    	}
-        socket.on("disconnect", function(evt) {
-            appendLog($("<div><b>Connection closed.</b></div>"))
-        });
-        socket.on("message", function(evt) {
-            appendLog(evt);
-        });
-    } else {
-        appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
-    }
-    });
+	    var socket;
+	    var input = $('#input');
+	    var log = document.getElementById('log');
+	    var autoscroll = document.getElementById('autoscroll');
+	    var listenabled = document.getElementById('list');
+	    var messages = [];
+
+	    function appendLog(msg) {
+	    	console.log(msg);
+	    	console.log('----');
+	        if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
+	            messages.push(msg);
+	            if (messages.length > 2000) {
+	                messages.shift();
+	            }
+	            var doScroll = log.scrollTop == log.scrollHeight - log.clientHeight;
+	            log.innerHTML = messages.join('<br>');
+	            if (autoscroll.checked && doScroll) {
+	                log.scrollTop = log.scrollHeight - log.clientHeight;
+	            }
+	        }
+	    }
+
+	    $('#form').submit(function(e) {
+	    	e.preventDefault();
+	        if (!socket) {
+	            return false;
+	        }
+	        if (!input.val()) {
+	            return false;
+	        }
+	        socket.emit('command', input.val());
+	    });
+
+	    $('#export').click(function() {
+	    	var link = document.createElement('a');
+	    	link.setAttribute('download', 'agent-log.txt');
+	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(log.innerHTML));
+    		link.click();
+    	});
+
+	    if (window['WebSocket']) {
+	        if (window.location.protocol === 'https:') {
+	            socket = io('https://{{$}}')
+	        } else {
+	            socket = io('http://{{$}}');
+	        }
+	        socket.on('disconnect', function(evt) {
+	            appendLog($('<div><b>Connection closed.</b></div>'))
+	        });
+	        socket.on('message', function(evt) {
+	            appendLog(evt);
+	        });
+	    } else {
+	        appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
+	    }
+	});
 </script>
 <style type="text/css">
 html {
@@ -351,42 +355,85 @@ body {
     margin: 0;
     width: 100%;
     height: 100%;
-    background: gray;
+    background: #00979d;
+    font-family: 'Lucida Grande', Lucida, Verdana, sans-serif;
 }
 
 #log {
     background: white;
     margin: 0;
-    padding: 0.5em 0.5em 0.5em 0.5em;
+    padding: .5em;
     position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    right: 0.5em;
+    top: .5em;
+    left: .5em;
+    right: .5em;
     bottom: 3em;
     overflow: auto;
 }
 
-#form {
-    padding: 0 0.5em 0 0.5em;
+.buttons {
+	display: flex;
+    padding: 0 .5em;
     margin: 0;
     position: absolute;
     bottom: 1em;
-    left: 0px;
-    width: 100%;
+    left: 0;
+    width: calc(100% - 1em);
     overflow: hidden;
 }
 
+#form {
+	display: inline-block;
+}
+
+#export {
+	float: right;
+	margin-left: auto;
+}
+
+#autoscroll,
+#list {
+	margin-left: 2em;
+	vertical-align: middle;
+}
+
+@media screen and (max-width: 950px) {
+	#form {
+		max-width: 60%;
+	}
+
+	#input {
+		max-width: 55%;
+	}
+}
+@media screen and (max-width: 825px) {
+	.buttons {
+		flex-direction: column;
+	}
+
+	#log {
+		bottom: 7em;
+	}
+
+	#autoscroll,
+	#list {
+		margin-left: 0;
+		margin-top: .5em;
+	}
+}
 </style>
 </head>
 <body>
 <div id="log"></div>
-<form id="form">
-    <input type="submit" value="Send" />
-    <input type="text" id="msg" size="64"/>
-    <input name="pause" type="checkbox" value="pause" id="myCheck"/> Pause
-    <!--<input type="button" value="Install Certificate" onclick="window.open('http://localhost:8991/certificate.crt')" />-->
-</form>
-</form>
+<div class="buttons">
+	<form id="form">
+	    <input type="submit" value="Send" />
+	    <input type="text" id="input" size="64"/>
+	</form>
+	<div><input name="pause" type="checkbox" checked id="autoscroll"/> Autoscroll</div>
+	<div><input name="list" type="checkbox" checked id="list"/> Toggle List</div>
+	<button id="export">Export Log</button>
+</div>
 </body>
 </html>
 `

From 12ef59b68ee65b5a1ca71b8d2ffe05a18c82922e Mon Sep 17 00:00:00 2001
From: smellai <s.mellai@arduino.cc>
Date: Wed, 12 Jul 2017 09:56:54 +0200
Subject: [PATCH 2/2] removed logs, improved export

---
 main.go | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/main.go b/main.go
index b8256ddf1..3e9bd97a6 100755
--- a/main.go
+++ b/main.go
@@ -294,8 +294,6 @@ const homeTemplateHtml = `<!DOCTYPE html>
 	    var messages = [];
 
 	    function appendLog(msg) {
-	    	console.log(msg);
-	    	console.log('----');
 	        if (listenabled.checked || (typeof msg === 'string' && msg.indexOf('{') !== 0 && msg.indexOf('list') !== 0)) {
 	            messages.push(msg);
 	            if (messages.length > 2000) {
@@ -323,7 +321,8 @@ const homeTemplateHtml = `<!DOCTYPE html>
 	    $('#export').click(function() {
 	    	var link = document.createElement('a');
 	    	link.setAttribute('download', 'agent-log.txt');
-	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(log.innerHTML));
+	    	var text = log.innerHTML.replace(/<br>/g, '\n');
+	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
     		link.click();
     	});
 
