From 95914de41903ffce2ac2aa8654c7553a81bbf49b Mon Sep 17 00:00:00 2001
From: Flemming Madsen <flemming@themadsens.dk>
Date: Wed, 12 Dec 2018 16:38:11 +0100
Subject: [PATCH 1/4] Save restore of connection and messages. Simple message
 history and format

---
 index.css     |  6 ++++
 index.html    | 20 ++++++++---
 index.js      | 97 +++++++++++++++++++++++++++++++++++++++++++++++++--
 manifest.json |  7 ++--
 4 files changed, 122 insertions(+), 8 deletions(-)

diff --git a/index.css b/index.css
index c3bb6eb..409a904 100644
--- a/index.css
+++ b/index.css
@@ -60,6 +60,7 @@ html, body {
   padding: 5px;
   font-size: 16px;
   line-height: 20px;
+  word-break: break-all;
 }
 
 .log .entry .publisher .timestamp {
@@ -177,6 +178,11 @@ html, body {
   border-collapse: collapse;
 }
 
+.buttons table th {
+  text-align: left;
+  padding: 3px;
+}
+
 .controls table th {
   text-align: right;
   padding: 3px;
diff --git a/index.html b/index.html
index f4b2b02..855c827 100644
--- a/index.html
+++ b/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>
@@ -68,7 +72,15 @@
               <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>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
index 5cd31fa..82db5bf 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,11 @@
 $(document).ready(function() {
+
+  var syncset = chrome.storage.sync.set;
+  var syncget = chrome.storage.sync.get;
+  var send_commands = [];
+  var command_index = 0;
+  $("#btn_send_next").prop('disabled', true);
+
   var ReadyState = {
     CONNECTING: 0,
     OPEN: 1,
@@ -280,19 +287,105 @@ $(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) {
+    syncset({
+      ws_url: $("#endpoint").val(),
+      ws_protocols: $("#protocols").val(),
+      ws_reconnect: $("#reconnect")[0].checked
+    }, function() {
+      console.log("All saved");
+    });
+  });
+
+  $("#btn_url_restore").on('click', function(event) {
+    syncget(["ws_url", "ws_protocols", "ws_reconnect"], function(res) {
+      if (res) {
+        $("#endpoint").val(res.ws_url);
+        $("#protocols").val(res.ws_protocols);
+        $("#reconnect")[0].checked = res.ws_reconnect;
+      }
+      console.log("All restored", res);
+    });
+  });
+
+  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();
+    console.log("Send", msg, command_index, send_commands);
+
+    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;
+    command_index = Math.max(command_index - 1, 0);
+    if (send_commands[command_index]) {
+      $("#message_text").val(send_commands[command_index]);
+    }
+    histUpdate();
+  });
+
+  $("#btn_send_save").on('click', function(event) {
+    syncset({
+      message_text: $("#message_text").val(),
+      message_hist: send_commands,
+    }, function() {
+      console.log("All saved");
+    });
+  });
+
+  $("#btn_send_restore").on('click', function(event) {
+    syncget(["message_text", "message_hist"], function(res) {
+      if (res) {
+        $("#message_text").val(res.message_text);
+        send_commands = res.message_hist || [];
+      }
+      console.log("All restored", res);
+    });
+  });
+
+  $("#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());
diff --git a/manifest.json b/manifest.json
index 9ef2844..92df165 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,5 +15,8 @@
   "options_page": "index.html",
   "background":{
     "scripts": [ "background.js" ]
-  }
-}
\ No newline at end of file
+  },
+  "permissions": [
+    "storage"
+  ]
+}

From f72f46a001fcc422c3594b570c7e9905b429cf22 Mon Sep 17 00:00:00 2001
From: Flemming Madsen <flemming@themadsens.dk>
Date: Thu, 13 Dec 2018 08:07:26 +0100
Subject: [PATCH 2/4] Switch to localStorage. Bring message pane in front

---
 index.css     |  5 -----
 index.html    |  2 +-
 index.js      | 45 +++++++++++++++++++++------------------------
 manifest.json |  5 +----
 4 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/index.css b/index.css
index 409a904..428c4cd 100644
--- a/index.css
+++ b/index.css
@@ -178,11 +178,6 @@ html, body {
   border-collapse: collapse;
 }
 
-.buttons table th {
-  text-align: left;
-  padding: 3px;
-}
-
 .controls table th {
   text-align: right;
   padding: 3px;
diff --git a/index.html b/index.html
index 855c827..f6ff8e3 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,7 @@
           </table>
         </div>
         <div class="control-pane">
-          <table>
+          <table style="position:relative; z-index:10;" >
             <tr>
               <th style="text-align: left;">Message Text</th>
             </tr>
diff --git a/index.js b/index.js
index 82db5bf..8dd1744 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,13 @@
 $(document).ready(function() {
 
-  var syncset = chrome.storage.sync.set;
-  var syncget = chrome.storage.sync.get;
+  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);
@@ -295,24 +301,20 @@ $(document).ready(function() {
   });
 
   $("#btn_url_save").on('click', function(event) {
-    syncset({
+    storageSet("connection", {
       ws_url: $("#endpoint").val(),
       ws_protocols: $("#protocols").val(),
       ws_reconnect: $("#reconnect")[0].checked
-    }, function() {
-      console.log("All saved");
     });
   });
 
   $("#btn_url_restore").on('click', function(event) {
-    syncget(["ws_url", "ws_protocols", "ws_reconnect"], function(res) {
-      if (res) {
-        $("#endpoint").val(res.ws_url);
-        $("#protocols").val(res.ws_protocols);
-        $("#reconnect")[0].checked = res.ws_reconnect;
-      }
-      console.log("All restored", res);
-    });
+    var res = storageGet("connection");
+    if (res) {
+      $("#endpoint").val(res.ws_url);
+      $("#protocols").val(res.ws_protocols);
+      $("#reconnect")[0].checked = res.ws_reconnect;
+    }
   });
 
   function histUpdate() {
@@ -334,7 +336,6 @@ $(document).ready(function() {
       }
     }
     histUpdate();
-    console.log("Send", msg, command_index, send_commands);
 
     sendText(msg);
     scrollLogToBottom();
@@ -358,22 +359,18 @@ $(document).ready(function() {
   });
 
   $("#btn_send_save").on('click', function(event) {
-    syncset({
+    storageSet("message", {
       message_text: $("#message_text").val(),
       message_hist: send_commands,
-    }, function() {
-      console.log("All saved");
     });
   });
 
   $("#btn_send_restore").on('click', function(event) {
-    syncget(["message_text", "message_hist"], function(res) {
-      if (res) {
-        $("#message_text").val(res.message_text);
-        send_commands = res.message_hist || [];
-      }
-      console.log("All restored", res);
-    });
+    var res = storageGet("message");
+    if (res) {
+      $("#message_text").val(res.message_text);
+      send_commands = res.message_hist || [];
+    }
   });
 
   $("#btn_send_format").on('click', function(event) {
diff --git a/manifest.json b/manifest.json
index 92df165..b5ed429 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,8 +15,5 @@
   "options_page": "index.html",
   "background":{
     "scripts": [ "background.js" ]
-  },
-  "permissions": [
-    "storage"
-  ]
+  }
 }

From 57bf05be4fc3484e4ff8137dbcf44011f18866f7 Mon Sep 17 00:00:00 2001
From: Flemming Madsen <flemming@themadsens.dk>
Date: Fri, 14 Dec 2018 09:19:56 +0100
Subject: [PATCH 3/4] Remove offending leftover line. Fixes "Prev" bug

---
 index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/index.js b/index.js
index 8dd1744..5f3056a 100644
--- a/index.js
+++ b/index.js
@@ -351,7 +351,6 @@ $(document).ready(function() {
 
   $("#btn_send_next").on('click', function(event) {
     command_index = send_commands[command_index-1] ? command_index-1 : command_index;
-    command_index = Math.max(command_index - 1, 0);
     if (send_commands[command_index]) {
       $("#message_text").val(send_commands[command_index]);
     }

From 08acc6d432ba6d2c7c559863284e8719154da6bc Mon Sep 17 00:00:00 2001
From: Flemming Madsen <flemming@themadsens.dk>
Date: Fri, 21 Dec 2018 18:09:20 +0100
Subject: [PATCH 4/4] Strangely, it seems necessary to position relative to
 viewport (chrome bug?)

---
 index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.css b/index.css
index 428c4cd..ae562e5 100644
--- a/index.css
+++ b/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;
 }