Escape html for weblog in the client

code/espurna/debug.ino

@@ -62,15 +62,11 @@ void _debugSend(char * message) {
 
     #if DEBUG_WEB_SUPPORT
         if (wsConnected() && (getFreeHeap() > 10000)) {
-            String m = String(message);
-            m.replace("\"", """);
-            m.replace("{", "&#123");
-            m.replace("}", "&#125");
-            char buffer[m.length() + 24];
+            char buffer[strlen(message) + 24]; // 8 char timestamp [234567] + space + 14 char json wrap
             #if DEBUG_ADD_TIMESTAMP
-                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s%s\"}"), timestamp, m.c_str());
+                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s%s\"}"), timestamp, message);
             #else
-                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s\"}"), m.c_str());
+                snprintf_P(buffer, sizeof(buffer), PSTR("{\"weblog\": \"%s\"}"), message);
             #endif
             wsSend(buffer);
         }

code/html/custom.css

@@ -122,7 +122,7 @@ div.state {
 }
 
 .pure-g span.terminal,
-.pure-g textarea.terminal {
+.pure-g ul.terminal {
     font-family: 'Courier New', monospace;
     font-size: 80%;
     line-height: 100%;
@@ -309,5 +309,8 @@ span.slider {
 
 #weblog {
     height: 400px;
+    padding: 0.5em 0.6em;
     margin-bottom: 10px;
+    list-style: none;
+    overflow-y: scroll;
 }

code/html/custom.js

@@ -1161,7 +1161,7 @@ function processData(data) {
 
         // Web log
         if ("weblog" === key) {
-            $("#weblog").append(value);
+            $("<li></li>").addClass("weblog-event").text(value).appendTo("#weblog");
             $("#weblog").scrollTop($("#weblog")[0].scrollHeight - $("#weblog").height());
             return;
         }

code/html/index.html

@@ -983,8 +983,8 @@
                                 </div>
 
                                 <div class="pure-g">
-                                    <textarea class="pure-u-1 terminal" id="weblog" name="weblog" wrap="off" readonly></textarea>
-                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbg-clear pure-u-23-24">Clear</button></div>
+                                    <ul class="pure-u-1 terminal" id="weblog" name="weblog"></ul>
+                                    <div class="pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbg-clear pure-u-23-24">Clear</button></div>
                                 </div>
 
                             </fieldset>