Save restore of connection and messages etc.

index.css

@@ -32,13 +32,13 @@ html, body {
   width: 100%;
   height: calc(100% - 155px);
   overflow: auto;
-  position: relative;
+/*position: relative;*/
 }
 
 .log #btn_clear_log {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 175px;
+  right: 35px;
   z-index: 1;
 }
 
@@ -60,6 +60,7 @@ html, body {
   padding: 5px;
   font-size: 16px;
   line-height: 20px;
+  word-break: break-all;
 }
 
 .log .entry .publisher .timestamp {

index.html

@@ -24,11 +24,15 @@
               <td><input type="text" id="protocols" value="" /></td>
             </tr>
             <tr>
-              <th></th>
+              <td>
+                <input type="submit" id="btn_url_save" value="Save" />
+              </th>
               <td><label><input type="checkbox" value="1" id="reconnect" /> Auto-Reconnect</label></td>
             </tr>
             <tr>
-              <th></th>
+              <td>
+                <input type="submit" id="btn_url_restore" value="Restore" />
+              </th>
               <td>
                 <input type="submit" id="btn_connect" value="Connect" />
               </td>
@@ -60,15 +64,23 @@
           </table>
         </div>
         <div class="control-pane">
-          <table>
+          <table style="position:relative; z-index:10;" >
             <tr>
               <th style="text-align: left;">Message Text</th>
             </tr>
             <tr>
               <td><textarea id="message_text"></textarea></td>
             </tr>
             <tr>
-              <td><input type="submit" id="btn_send" value="Send" /></td>
+              <td>
+                <input type="submit" id="btn_send" value="Send" />
+                <input type="submit" id="btn_send_prev" value="Prev" />
+                <input type="submit" id="btn_send_next" value="Next" />
+                <input type="label"  id="btn_send_index" value="0" style="width:6px; border:0;" />
+                <input type="submit" id="btn_send_format" value="Format" style="float:right;"/>
+                <input type="submit" id="btn_send_restore" value="Restore" style="float:right;"/>
+                <input type="submit" id="btn_send_save" value="Save" style="float:right;"/>
+              </td>
             </tr>
           </table>
         </div>
@@ -80,4 +92,4 @@
       </div> <!-- /log -->
     </div> <!-- /frame -->
   </body>
-</html>
+</html>

index.js

@@ -1,4 +1,17 @@
 $(document).ready(function() {
+
+  function storageSet(key, obj) {
+    window.localStorage.setItem(key, JSON.stringify(obj));
+  }
+  function storageGet(key) {
+    var obj = window.localStorage.getItem(key);
+    return obj ? JSON.parse(obj) : null;
+  }
+
+  var send_commands = [];
+  var command_index = 0;
+  $("#btn_send_next").prop('disabled', true);
+
   var ReadyState = {
     CONNECTING: 0,
     OPEN: 1,
@@ -280,19 +293,95 @@ $(document).ready(function() {
 
   var updateCloseText = function() {
     $("#close_status_text").text(closeCodeToString($("#close_status").val()));
-  }
+  };
 
   $("#btn_connect").on('click', function(event) {
     event.preventDefault();
     connect($("#endpoint").val(), $("#protocols").val());
   });
 
+  $("#btn_url_save").on('click', function(event) {
+    storageSet("connection", {
+      ws_url: $("#endpoint").val(),
+      ws_protocols: $("#protocols").val(),
+      ws_reconnect: $("#reconnect")[0].checked
+    });
+  });
+
+  $("#btn_url_restore").on('click', function(event) {
+    var res = storageGet("connection");
+    if (res) {
+      $("#endpoint").val(res.ws_url);
+      $("#protocols").val(res.ws_protocols);
+      $("#reconnect")[0].checked = res.ws_reconnect;
+    }
+  });
+
+  function histUpdate() {
+    $("#btn_send_next").prop('disabled', !send_commands[command_index-1]);
+    $("#btn_send_prev").prop('disabled', !send_commands[command_index+1]);
+    $("#btn_send_index").val(command_index+"");
+  }
+
   $("#btn_send").on('click', function(event) {
     event.preventDefault();
-    sendText($("#message_text").val());
+    send_commands = send_commands || [];
+    var msg = $("#message_text").val();
+    if (msg != send_commands[command_index]) {
+      if (command_index == 0) {
+        send_commands.splice(0, send_commands.length - 9, msg);
+      }
+      else {
+        send_commands[command_index] = msg;
+      }
+    }
+    histUpdate();
+
+    sendText(msg);
     scrollLogToBottom();
   });
 
+  $("#btn_send_prev").on('click', function(event) {
+    command_index = send_commands[command_index+1] ? command_index+1 : command_index;
+    if (send_commands[command_index]) {
+      $("#message_text").val(send_commands[command_index]);
+    }
+    histUpdate();
+  });
+
+  $("#btn_send_next").on('click', function(event) {
+    command_index = send_commands[command_index-1] ? command_index-1 : command_index;
+    if (send_commands[command_index]) {
+      $("#message_text").val(send_commands[command_index]);
+    }
+    histUpdate();
+  });
+
+  $("#btn_send_save").on('click', function(event) {
+    storageSet("message", {
+      message_text: $("#message_text").val(),
+      message_hist: send_commands,
+    });
+  });
+
+  $("#btn_send_restore").on('click', function(event) {
+    var res = storageGet("message");
+    if (res) {
+      $("#message_text").val(res.message_text);
+      send_commands = res.message_hist || [];
+    }
+  });
+
+  $("#btn_send_format").on('click', function(event) {
+    var fmt;
+    try {
+      fmt = JSON.parse($("#message_text").val());
+    } catch(e) {}
+    if (fmt) {
+        $("#message_text").val(JSON.stringify(fmt, null, 2));
+    }
+  });
+
   $("#btn_close").on('click', function(event) {
     event.preventDefault();
     close($("#close_status").val(), $("#close_reason").val());

manifest.json

@@ -16,4 +16,4 @@
   "background":{
     "scripts": [ "background.js" ]
   }
-}
+}