debug frame: Limit the messages element in size

Signed-off-by: Hubert Figuière <hub@collabora.com>
Change-Id: I1f43d4839341e9d1acac617cc6a6a96e2118a51f

Author: hfiguiere

browser/html/framed.doc.html

@@ -63,6 +63,16 @@
           margin: 0px;
       }
 
+      #messages {
+          height: 5vh;
+          overflow: scroll;
+      }
+
+      #messages > p {
+              margin: 0;
+              font-family: monospace;
+      }
+
     </style>
 
     <script>
@@ -290,6 +300,13 @@
           display.querySelector("#UserState_Elapsed").textContent = msg.Values.Elapsed;
       }
 
+      function ClearMessages() {
+        let messageOut = document.getElementById("messages");
+        while (child = messageOut.firstChild) {
+          child.remove();
+        }
+      }
+
       // This function is invoked when the iframe posts a message back.
 
       function receiveMessage(event) {
@@ -300,7 +317,9 @@
         }
 
         let messageOut = document.getElementById("messages");
-        messageOut.textContent = messageOut.textContent + JSON.stringify(msg) + "\n";
+        let line = document.createElement("p");
+        line.textContent = JSON.stringify(msg);
+        messageOut.append(line);
 
         if (msg.MessageId == 'App_LoadingStatus') {
           if (msg.Values) {
@@ -588,9 +607,9 @@ <h3>Send a message</h3>
 
     <div class="framed hbox">
       <div class="vbox">
-        <h3>Messages from editor</h3>
+        <h3>Messages from editor <button onclick="ClearMessages();">Clear</button></h3>
 
-        <pre id="messages"></pre>
+        <div id="messages"></div>
       </div>
     </div>