Merge branch 'koszko' into jahoti

author: jahoti <jahoti@tilde.team> 2021-12-03 00:00:00 +0000
committer: jahoti <jahoti@tilde.team> 2021-12-03 00:00:00 +0000
commit: d16e763e240a2aefe3d4490cddff61893a35a1ea (patch)
tree: 1e90890a39798f6cd9a1c0886d1234ccc187f5b3 /html/options.html
parent: 591c48a6903bbf324361610f81c628302cae7049 (diff)
parent: 93dd73600e91eb19e11f5ca57f9429a85cf0150f (diff)
download: browser-extension-d16e763e240a2aefe3d4490cddff61893a35a1ea.tar.gz
browser-extension-d16e763e240a2aefe3d4490cddff61893a35a1ea.zip
1 files changed, 305 insertions, 140 deletions
diff --git a/html/options.html b/html/options.html
index 2246f9a..2e8317c 100644
--- a/html/options.html
+++ b/html/options.html
@@ -1,32 +1,22 @@
 <!doctype html>
 <!--
+    This file is part of Haketilo.
+
+    Function: Extension's settings page.
+
     Copyright (C) 2021 Wojtek Kosior
-    Copyright (C) 2021 Nicholas Johnson
     Redistribution terms are gathered in the `copyright' file.
   -->
 <html>
   <head>
     <meta charset="utf-8"/>
-    <title>Hachette options</title>
+    <title>Haketilo options</title>
+    <link type="text/css" rel="stylesheet" href="reset.css" />
     <link type="text/css" rel="stylesheet" href="base.css" />
+    <link type="text/css" rel="stylesheet" href="table.css" />
     <style>
-      /* pages list */
-      #page_components_ul {
-	  max-height: 80vh;
-	  overflow-y: auto;
-      }
-      #page_components_ul li.dragover_li {
-	  border-top: 2px solid blue;
-      }
-      #page_components_ul li {
-	  border-top: 2px solid white;
-      }
-      li[draggable=true] * {
-	  pointer-events: none;
-      }
-      li[draggable=true] label,
-      li[draggable=true] button {
-	  pointer-events: auto;
+      body {
+	  width: 100%;
       }
 
       /* tabbed view */
@@ -37,20 +27,38 @@
 	  display: none;
       }
 
-      #show_repos:checked ~ #repos_lbl,
-      #show_pages:checked ~ #pages_lbl,
-      #show_bags:checked ~ #bags_lbl,
-      #show_scripts:checked ~ #scripts_lbl {
+      #show_repos:checked ~ div #repos_lbl,
+      #show_pages:checked ~ div #pages_lbl,
+      #show_bags:checked ~ div #bags_lbl,
+      #show_scripts:checked ~ div #scripts_lbl {
 	  background: #4CAF50;
           color: white;
       }
 
-      body > div {
-	  border-top: 6px solid #4CAF50;
+      #tab_heads>* {
+	  font-size: 130%;
+	  padding: 10px;
+	  display: inline-block;
+	  cursor: pointer;
       }
 
-      .tab_head {
-	  display: inline-block;
+      #tab_heads {
+	  -moz-user-select: none;
+	  user-select: none;
+      }
+
+      #import_but {
+	  font: unset;
+	  font-size: 130%;
+	  float: right;
+	  margin: 0;
+	  border-radius: 0;
+      }
+
+      div.tab {
+	  min-width: 50vw;
+	  width: fit-content;
+	  padding-left: 6px;
       }
 
       /* popup window with list of selectable components */
@@ -60,7 +68,7 @@
 	  height: 100vh;
 	  left: 0;
 	  top: 0;
-	  background-color: rgba(0,0,0,0.4);
+	  background-color: rgba(60,60,60,0.4);
 	  z-index: 1;
 	  overflow: auto;
 	  vertical-align: center;
@@ -68,135 +76,284 @@
       }
 
       .popup_frame {
-	  background-color: white;
-	  width: 50vw;
+	  background-color: #f0f0f0;
+	  margin: 5vh auto;
+	  padding: 15px;
+	  border: solid #333 4px;
+	  border-radius: 15px;
+	  width: -moz-fit-content;
+	  width: fit-content;
+      }
+
+      .work_li .table_wrapper::before {
+	  background: linear-gradient(#e0f0f0, #555);
+      }
+
+      .work_li .table_wrapper::after {
+	  background: linear-gradient(#555, #e0f0f0);
+      }
+
+      .table_wrapper.always_scrollbar>* {
+	  border-left: solid #454 8px;
+	  max-height: 80vh;
+	  overflow-y: scroll;
+      }
+
+      .table_wrapper .table_wrapper.always_scrollbar>*,
+      .popup_frame .table_wrapper.always_scrollbar>* {
+	  max-height: 60vh;
+      }
+
+      .popup_frame .table_wrapper table {
+	  min-width: 30vw;
+      }
+
+      .popup_frame .table_wrapper {
+	  margin: 0 auto;
+      }
+
+      td:first-child {
+	  max-width: 70vw;
+	  overflow: hidden;
+      }
+
+      tr.work_li>td:first-child {
+	  padding-right: 0;
+	  max-width: unset;
       }
 
-      input[type="radio"]:not(:checked)+.import_window_content {
+      tr.work_li>td>div {
+	  background-color: #e0f0f0;
+	  border-left: solid #454 5px;
+	  border-right: solid #454 2px;
+	  padding: 5px 10px;
+      }
+
+      .form_grid {
+	  display: grid;
+	  grid-template-columns: auto auto;
+      }
+
+      .form_grid>label {
+	  grid-column: 1 / span 1;
+	  margin-right: 10px;
+      }
+
+      .form_grid label {
+	  line-height: 34px; /* center text vertically */
+      }
+
+      .form_grid>input, .form_grid>span {
+	  grid-column: 2 / span 1;
+      }
+
+      .form_grid>label[for="script_contents_field"],
+      .form_grid>* {
+	  grid-column: 1 / span 2;
+      }
+
+      .form_grid>textarea {
+	  min-width: 70vw;
+	  resize: none;
+      }
+
+      .form_disabled>* {
+	  opacity: 0.5;
+	  pointer-events: none;
+      }
+
+      .form_disabled_msg {
 	  display: none;
+	  font-style: italic;
+      }
+
+      .form_disabled .form_disabled_msg {
+	  opacity: initial;
+	  pointer-events: initial;
+	  display: initial;
       }
     </style>
   </head>
   <body>
-    <!-- The invisible div below is for elements that will be cloned. -->
-    <div class="hide">
-      <li id="item_li_template">
-	<span></span>
-	<button> Edit </button>
-	<button> Remove </button>
-	<button> Export </button>
-      </li>
-      <li id="bag_component_li_template">
-	<span></span>
-	<button> Remove </button>
-      </li>
-      <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>
+    <template>
+      <tr id="item_li" class="nowrap">
+	<td></td>
+	<td><div class="button"> Edit </div></td>
+	<td><div class="button"> Remove </div></td>
+	<td><div class="button"> Export </div></td>
+      </tr>
+      <tr id="bag_component_li" class="nowrap">
+	<td></td>
+	<td><div class="button"> Remove </div></td>
+      </tr>
+      <tr id="chbx_component_li" class="nowrap">
+	<td>
+	  <input type="checkbox" style="display: inline;"></input>
+	  <span></span>
+	</td>
+      </tr>
+      <tr id="radio_component_li" class="nowrap">
+	<td>
+	  <input type="radio" style="display: inline;" name="page_components"></input>
+	  <span></span>
+	</td>
+      </tr>
+    </template>
 
     <!-- Mind the show_*s ids below - their format is assumed in js code -->
     <input type="radio" name="tabs" id="show_repos"></input>
     <input type="radio" name="tabs" id="show_pages" checked></input>
     <input type="radio" name="tabs" id="show_bags"></input>
     <input type="radio" name="tabs" id="show_scripts"></input>
-    <label for="show_repos" id="repos_lbl"
-	   class="tab_head"> Repos </label>
-    <label for="show_pages" id="pages_lbl"
-	   class="tab_head"> Pages </label>
-    <label for="show_bags" id="bags_lbl"
-	   class="tab_head"> Bags </label>
-    <label for="show_scripts" id="scripts_lbl"
-	   class="tab_head"> Scripts </label>
-
-    <div id="repos">
-      <ul id="repos_ul">
-	<li id="work_repo_li" class="hide">
-	  <label for="repo_url_field">URL: </label>
-	  <input id="repo_url_field"></input>
-	  <br/>
-	  <button id="save_repo_but" type="button"> Save </button>
-	  <button id="discard_repo_but" type="button"> Cancel </button>
-	</li>
-      </ul>
+    <div id="tab_heads" class="has_bottom_line">
+      <label for="show_repos" id="repos_lbl"> Repos </label>
+      <label for="show_pages" id="pages_lbl"> Pages </label>
+      <label for="show_bags" id="bags_lbl"> Bags </label>
+      <label for="show_scripts" id="scripts_lbl"> Scripts </label>
+      <button id="import_but" style="margin-left: 40px;"> Import </button>
+    </div>
+    <div id="repos" class="tab">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
+	<div>
+	  <table>
+	    <tbody id="repos_ul">
+	      <tr id="work_repo_li" class="hide work_li">
+		<td colspan="4">
+		  <div class="form_grid">
+		    <label for="repo_url_field">URL: </label>
+		    <input id="repo_url_field"></input>
+		    <div>
+		      <button id="save_repo_but" type="button"> Save </button>
+		      <button id="discard_repo_but" type="button"> Cancel </button>
+		    </div>
+		  </div>
+		</td>
+	      </tr>
+	    </tbody>
+	  </table>
+	</div>
+      </div>
       <button id="add_repo_but" type="button"> Add repository </button>
     </div>
-
-    <div id="pages">
-      <ul id="pages_ul">
-	<li id="work_page_li" class="hide">
-	  <label for="page_url_field">URL: </label>
-	  <input id="page_url_field"></input>
-	  <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>
-	  <br/>
-	  <button id="save_page_but" type="button"> Save </button>
-	  <button id="discard_page_but" type="button"> Cancel </button>
-	</li>
-      </ul>
+    <div id="pages" class="tab">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
+	<div>
+	  <table>
+	    <tbody id="pages_ul">
+	      <tr id="work_page_li" class="hide work_li">
+		<td colspan="4">
+		  <div class="form_grid">
+		    <label for="page_url_field">URL: </label>
+		    <input id="page_url_field"></input>
+		    <label>Payload: </label>
+		    <span class="nowrap">
+		      <span id="page_payload"></span>
+		      <button id="select_page_components_but">
+			Choose payload
+		      </button>
+		    </span>
+		    <div id="allow_native_scripts_container" class="nowrap">
+		      <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
+		      <label for="page_allow_chbx">Allow native scripts</label>
+		      <span class="form_disabled_msg">
+			(only possible when no payload is used)
+		      </span>
+		    </div>
+		    <div>
+		      <button id="save_page_but" type="button"> Save </button>
+		      <button id="discard_page_but" type="button"> Cancel </button>
+		    </div>
+		  </div>
+		</td>
+	      </tr>
+	    </tbody>
+	  </table>
+	</div>
+      </div>
       <button id="add_page_but" type="button"> Add page </button>
+      <br/>
+      <IMPORT html/default_blocking_policy.html />
     </div>
-
-    <div id="bags">
-      <ul id="bags_ul">
-	<li id="work_bag_li" class="hide">
-	  <label for="bag_name_field"> Name: </label>
-	  <input id="bag_name_field"></input>
-	  <ul id="bag_components_ul">
-	    <li id="empty_bag_component_li" class="hide"></li>
-	  </ul>
-	  <button id="select_bag_components_but">
-	    Add scripts
-	  </button>
-	  <br/>
-	  <button id="save_bag_but"> Save </button>
-	  <button id="discard_bag_but"> Cancel </button>
-	</li>
-      </ul>
+    <div id="bags" class="tab">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
+	<div>
+	  <table>
+	    <tbody id="bags_ul">
+	      <tr id="work_bag_li" class="hide work_li">
+		<td colspan="4">
+		  <div class="form_grid">
+		    <label for="bag_name_field"> Name: </label>
+		    <input id="bag_name_field"></input>
+		    <div class="table_wrapper tight_table has_bottom_line has_upper_line">
+		      <div>
+			<table>
+			  <tbody id="bag_components_ul">
+			    <tr id="empty_bag_component_li" class="hide"></tr>
+			  </tbody>
+			</table>
+		      </div>
+		    </div>
+		    <div>
+		      <button id="select_bag_components_but">
+			Add scripts
+		      </button>
+		    </div>
+		    <div>
+		      <button id="save_bag_but"> Save </button>
+		      <button id="discard_bag_but"> Cancel </button>
+		    </div>
+		  </div>
+		</td>
+	      </tr>
+	    </tbody>
+	  </table>
+	</div>
+      </div>
       <button id="add_bag_but" type="button"> Add bag </button>
     </div>
-
-    <div id="scripts">
-      <ul id="scripts_ul">
-	<li id="work_script_li" class="hide">
-	  <label for="script_name_field"> Name: </label>
-	  <input id="script_name_field"></input>
-	  <br/>
-	  <label for="script_url_field"> URL: </label>
-	  <input id="script_url_field"></input>
-	  <br/>
-	  <label for="script_sha256_field"> sha256: </label>
-	  <input id="script_sha256_field"></input>
-	  <br/>
-	  <label for="script_contents_field"> contents: </label>
-	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
-	  <br/>
-	  <button id="save_script_but"> Save </button>
-	  <button id="discard_script_but"> Cancel </button>
-	</li>
-      </ul>
+    <div id="scripts" class="tab">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
+	<div>
+	  <table>
+	    <tbody id="scripts_ul">
+	      <tr id="work_script_li" class="hide work_li">
+		<td colspan="4">
+		  <div class="form_grid">
+		    <label for="script_name_field"> Name: </label>
+		    <input id="script_name_field"></input>
+		    <label for="script_url_field"> URL: </label>
+		    <input id="script_url_field"></input>
+		    <label for="script_sha256_field"> SHA256: </label>
+		    <input id="script_sha256_field"></input>
+		    <aside>
+		      Note: URL and SHA256 are ignored if script text is provided.
+		    </aside>
+		    <label for="script_contents_field"> contents: </label>
+		    <textarea id="script_contents_field" rows="20" cols="80"></textarea>
+		    <div>
+		      <button id="save_script_but"> Save </button>
+		      <button id="discard_script_but"> Cancel </button>
+		    </div>
+		  </div>
+		</td>
+	      </tr>
+	    </tbody>
+	  </table>
+	</div>
+      </div>
       <button id="add_script_but" type="button"> Add script </button>
     </div>
 
-    <button id="import_but" style="margin-top: 40px;"> Import </button>
-
     <div id="chbx_components_window" class="hide popup" position="absolute">
       <div class="popup_frame">
-	<ul id="chbx_components_ul">
-
-	</ul>
+	<div class="table_wrapper tight_table has_bottom_line has_upper_line">
+	  <div>
+	    <table>
+	      <tbody id="chbx_components_ul">
+	      </tbody>
+	    </table>
+	  </div>
+	</div>
 	<button id="commit_bag_components_but"> Add </button>
 	<button id="cancel_bag_components_but"> Cancel </button>
       </div>
@@ -204,13 +361,20 @@
 
     <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>
+	<div class="table_wrapper tight_table always_scrollbar has_bottom_line has_upper_line">
+	  <div>
+	    <table>
+	      <tbody id="radio_components_ul">
+		<tr id="radio_component_none_li">
+		  <td>
+		    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
+		    <span>(None)</span>
+		  </td>
+		</tr>
+	      </tbody>
+	    </table>
+	  </div>
+	</div>
 	<button id="commit_page_components_but"> Choose </button>
 	<button id="cancel_page_components_but"> Cancel </button>
       </div>
@@ -218,6 +382,7 @@
 
     <div id="import_window" class="hide popup" position="absolute">
       <div class="popup_frame">
+	<h2> Settings import </h2>
 	<IMPORT html/import_frame.html />
       </div>
     </div>
author	jahoti <jahoti@tilde.team>	2021-12-03 00:00:00 +0000
committer	jahoti <jahoti@tilde.team>	2021-12-03 00:00:00 +0000
commit	d16e763e240a2aefe3d4490cddff61893a35a1ea (patch)
tree	1e90890a39798f6cd9a1c0886d1234ccc187f5b3 /html/options.html
parent	591c48a6903bbf324361610f81c628302cae7049 (diff)
parent	93dd73600e91eb19e11f5ca57f9429a85cf0150f (diff)
download	browser-extension-d16e763e240a2aefe3d4490cddff61893a35a1ea.tar.gz browser-extension-d16e763e240a2aefe3d4490cddff61893a35a1ea.zip