only allow a single injection payload for page, rely on script bags for complex payloads

1 files changed, 43 insertions, 25 deletions

diff --git a/html/options.html b/html/options.html
index cb39090..ac6c736 100644
--- a/html/options.html
+++ b/html/options.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8"/>
     <title>Myext options</title>
     <style>
-      input[type="checkbox"], input[type="radio"],
-      .hide {
+      input[type="checkbox"], input[type="radio"], .hide, .popup.hide {
 	  display: none;
       }
 
@@ -50,8 +49,8 @@
 	  display: inline-block;
       }
 
-      /* popup window with list of selectable components for adding */
-      #select_components_window {
+      /* popup window with list of selectable components */
+      .popup {
 	  position: fixed;
 	  width: 100vw;
 	  height: 100vh;
@@ -64,7 +63,7 @@
 	  horizontal-align: center;
       }
 
-      #select_components_frame {
+      .popup_frame {
 	  background-color: white;
 	  width: 50vw;
       }
@@ -78,14 +77,18 @@
 	<button> Edit </button>
 	<button> Remove </button>
       </li>
-      <li id="component_li_template">
+      <li id="bag_component_li_template">
 	<span></span>
 	<button> Remove </button>
       </li>
-      <li id="selectable_component_li_template">
+      <li id="chbx_component_li_template">
 	<input type="checkbox" style="display: inline;"></input>
 	<span></span>
       </li>
+      <li id="radio_component_li_template">
+	<input type="radio" style="display: inline;" name="page_components"></input>
+	<span></span>
+      </li>
     </div>
 
     <input type="radio" name="tabs" id="show_pages" checked></input>
@@ -103,17 +106,18 @@
 	<li id="work_page_li" class="hide">
 	  <label for="page_url_field">URL: </label>
 	  <input id="page_url_field"></input>
-	  <ul id="page_components_ul">
-	    <li id="empty_page_component_li" class="hide"></li>
-	  </ul>
+	  <br/>
+	  <label>Payload: </label>
+	  <span id="page_payload"></span>
+	  <button id="select_page_components_but">
+	    Choose payload
+	  </button>
+	  <br/>
 	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
 	  <label for="page_allow_chbx">Allow native scripts</label>
-	  <button id="page_select_components_but">
-	    Add scripts
-	  </button>
 	  <br/>
-	  <button id="page_save_but" type="button"> Save </button>
-	  <button id="page_discard_but" type="button"> Cancel </button>
+	  <button id="save_page_but" type="button"> Save </button>
+	  <button id="discard_page_but" type="button"> Cancel </button>
 	</li>
       </ul>
       <button id="add_page_but" type="button"> Add page </button>
@@ -127,12 +131,12 @@
 	  <ul id="bag_components_ul">
 	    <li id="empty_bag_component_li" class="hide"></li>
 	  </ul>
-	  <button id="bag_select_components_but">
+	  <button id="select_bag_components_but">
 	    Add scripts
 	  </button>
 	  <br/>
-	  <button id="bag_save_but"> Save </button>
-	  <button id="bag_discard_but"> Cancel </button>
+	  <button id="save_bag_but"> Save </button>
+	  <button id="discard_bag_but"> Cancel </button>
 	</li>
       </ul>
       <button id="add_bag_but" type="button"> Add bag </button>
@@ -153,20 +157,34 @@
 	  <label for="script_contents_field"> contents: </label>
 	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
 	  <br/>
-	  <button id="script_save_but"> Save </button>
-	  <button id="script_discard_but"> Cancel </button>
+	  <button id="save_script_but"> Save </button>
+	  <button id="discard_script_but"> Cancel </button>
 	</li>
       </ul>
       <button id="add_script_but" type="button"> Add script </button>
     </div>
 
-    <div id="select_components_window" class="hide" position="absolute">
-      <div id="select_components_frame">
-	<ul id="selectable_components_ul">
+    <div id="chbx_components_window" class="hide popup" position="absolute">
+      <div class="popup_frame">
+	<ul id="chbx_components_ul">
+
+	</ul>
+	<button id="commit_bag_components_but"> Add </button>
+	<button id="cancel_bag_components_but"> Cancel </button>
+      </div>
+    </div>
+
+    <div id="radio_components_window" class="hide popup" position="absolute">
+      <div class="popup_frame">
+	<ul id="radio_components_ul">
 
+	  <li id="radio_component_none_li">
+	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
+	    <span>(None)</span>
+	  </li>
 	</ul>
-	<button id="commit_components_but"> Add </button>
-	<button id="cancel_components_but"> Cancel </button>
+	<button id="commit_page_components_but"> Choose </button>
+	<button id="cancel_page_components_but"> Cancel </button>
       </div>
     </div>