add styling to settings install(import) dialog

author: Wojtek Kosior <koszko@koszko.org> 2021-09-01 14:14:51 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-09-01 14:14:51 +0200
commit: 4b59dced912fb9b50ff041c67f0f72cbbad56b6c (patch)
tree: b542e0727219f2ab88999459df0cab7a015a2dd6 /html
parent: d85dcc1ea805651797b07f72b64d84764214a3b9 (diff)
download: browser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.tar.gz
browser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.zip
8 files changed, 102 insertions, 79 deletions
diff --git a/html/base.css b/html/base.css
index 0b9c7d3..94b3f31 100644
--- a/html/base.css
+++ b/html/base.css
@@ -13,6 +13,21 @@ body {
     overflow: auto;
 }
 
+.bold, h2 {
+    font-weight: bold;
+}
+
+h2 {
+    margin: 8px;
+    font-size: 120%;
+}
+
+h3 {
+    padding: 5px;
+    font-size: 108%;
+    text-shadow: 0 0 0 #454;
+}
+
 textarea {
     font-family: monospace;
 }
@@ -84,3 +99,7 @@ textarea: {
 .has_bottom_line::after {
     background: linear-gradient(#555, transparent);
 }
+
+.nowrap {
+    white-space: nowrap;
+}
diff --git a/html/display-panel.html b/html/display-panel.html
index 4121c30..0806f26 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -17,15 +17,6 @@
 	  width: -moz-max-content;
       }
 
-      .bold, h2 {
-	  font-weight: bold;
-      }
-
-      h2 {
-	  margin: 8px;
-	  font-size: 120%;
-      }
-
       .top>h2 {
 	  padding-left: calc(0.8*3.2em - 8px);
       }
@@ -38,12 +29,6 @@
 	  padding-left: 0;
       }
 
-      h3 {
-	  padding: 5px;
-	  font-size: 108%;
-	  text-shadow: 0 0 0 #454;
-      }
-
       .unroll_chbx:not(:checked)+div>:not(:first-child) {
 	  display: none;
       }
@@ -179,7 +164,7 @@
   </head>
   <body>
     <template>
-      <tr id="pattern_entry" data-template="entry">
+      <tr id="pattern_entry" class="nowrap" data-template="entry">
 	<td data-template="name"></td>
 	<td>
 	  <div class="button" data-template="button">Add setting</div>
@@ -236,7 +221,9 @@
     <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input>
     <div id="install_view">
       <div class="top has_bottom_line"><h2> Site modifiers install </h2></div>
-      <IMPORT html/import_frame.html />
+      <div class="padding_inline">
+	<IMPORT html/import_frame.html />
+      </div>
     </div>
 
     <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>
@@ -288,7 +275,7 @@
 	  <div>
 	    <table class="active_setting_table">
 	      <tbody>
-		<tr>
+		<tr class="nowrap">
 		  <td>Matched pattern:</td>
 		  <td id="pattern" class="bold">...</td>
 		  <td>
@@ -297,12 +284,12 @@
 		    </button>
 		  </td>
 		</tr>
-		<tr>
+		<tr class="nowrap">
 		  <td>Scripts blocked:</td>
 		  <td id="blocked" class="bold">...</td>
 		  <td></td>
 		</tr>
-		<tr>
+		<tr class="nowrap">
 		  <td>Injected payload:</td>
 		  <td id="payload" class="bold">...</td>
 		  <td id="payload_buttons" class="hide">
diff --git a/html/display-panel.js b/html/display-panel.js
index 0c89864..bd210c1 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -23,7 +23,6 @@
  * IMPORT url_matches
  * IMPORT each_url_pattern
  * IMPORT by_id
- * IMPORT get_template
  * IMPORT clone_template
  * IMPORTS_END
  */
diff --git a/html/import_frame.html b/html/import_frame.html
index 835977d..e6db205 100644
--- a/html/import_frame.html
+++ b/html/import_frame.html
@@ -1,12 +1,21 @@
+<style>
+  .padding_right {
+      padding-right: 0.3em;
+  }
+</style>
 <template>
-  <li id="import_li">
-    <span></span>
-    <input type="checkbox" style="display: inline;" checked></input>
-    <span></span>
-  </li>
+  <tr id="import_entry" class="nowrap" data-template="entry">
+    <td>
+      <input type="checkbox" style="display: inline;" checked data-template="chbx"></input>
+      <span data-template="name_span"></span>
+    </td>
+    <td class="bold padding_right" data-template="warning"></td>
+  </tr>
 </template>
+
 <input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input>
 <span> Loading... </span>
+
 <input id="import_failed_radio" type="radio" name="import_window_content" class="show_next"></input>
 <div>
   <span id="import_errormsg"></span>
@@ -14,13 +23,23 @@
   <pre id="import_errordetail"></pre>
   <button id="import_failok_but"> OK </button>
 </div>
+
 <input id="import_selection_radio" type="radio" name="import_window_content" class="show_next"></input>
 <div>
   <button id="check_all_import_but"> Check all </button>
   <button id="uncheck_all_import_but"> Uncheck all </button>
   <button id="uncheck_colliding_import_but"> Uncheck existing </button>
-  <ul id="import_ul">
-  </ul>
+  <aside id="existing_settings_note">
+    Settings that would owerwrite existing ones are marked "!".
+  </aside>
+  <div id="import_table_wrapper" class="table_wrapper">
+    <div>
+      <table>
+	<tbody id="import_list">
+	</tbody>
+      </table>
+    </div>
+  </div>
   <button id="commit_import_but"> OK </button>
   <button id="cancel_import_but"> Cancel </button>
 </div>
diff --git a/html/import_frame.js b/html/import_frame.js
index ab39702..c0eb2f0 100644
--- a/html/import_frame.js
+++ b/html/import_frame.js
@@ -9,7 +9,7 @@
  * IMPORTS_START
  * IMPORT get_remote_storage
  * IMPORT by_id
- * IMPORT get_template
+ * IMPORT clone_template
  * IMPORT nice_name
  * IMPORT make_once
  * IMPORTS_END
@@ -17,48 +17,38 @@
 
 let storage;
 
-const import_li_template = get_template("import_li");
-import_li_template.removeAttribute("id");
-
-function import_li_id(prefix, item)
-{
-    return `ili_${prefix}_${item}`;
-}
-
-let import_ul = by_id("import_ul");
+let import_list = by_id("import_list");
 let import_chbxs_colliding = undefined;
+let entry_objects = undefined;
 let settings_import_map = undefined;
 
-function add_import_li(prefix, name)
+function add_import_entry(prefix, name)
 {
-    let li = import_li_template.cloneNode(true);
-    let name_span = li.firstElementChild;
-    let chbx = name_span.nextElementSibling;
-    let warning_span = chbx.nextElementSibling;
+    const cloned_template = clone_template("import_entry");
+    Object.assign(cloned_template, {prefix, name});
 
-    li.setAttribute("data-prefix", prefix);
-    li.setAttribute("data-name", name);
-    li.id = import_li_id(prefix, name);
-    name_span.textContent = nice_name(prefix, name);
+    cloned_template.name_span.textContent = nice_name(prefix, name);
 
     if (storage.get(prefix, name) !== undefined) {
-	import_chbxs_colliding.push(chbx);
-	warning_span.textContent = "(will overwrite existing setting!)";
+	import_chbxs_colliding.push(cloned_template.chbx);
+	cloned_template.warning.textContent = "!";
     }
 
-    import_ul.appendChild(li);
+    import_list.appendChild(cloned_template.entry);
+
+    return cloned_template;
 }
 
 function check_all_imports()
 {
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = true;
+    for (const entry_object of entry_objects)
+	entry_object.chbx.checked = true;
 }
 
 function uncheck_all_imports()
 {
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = false;
+    for (const entry_object of entry_objects)
+	entry_object.chbx.checked = false;
 }
 
 function uncheck_colliding_imports()
@@ -69,17 +59,13 @@ function uncheck_colliding_imports()
 
 function commit_import()
 {
-    for (let li of import_ul.children) {
-	let chbx = li.firstElementChild.nextElementSibling;
-
-	if (!chbx.checked)
+    for (const entry_object of entry_objects) {
+	if (!entry_object.chbx.checked)
 	    continue;
 
-	let prefix = li.getAttribute("data-prefix");
-	let name = li.getAttribute("data-name");
-	let key = prefix + name;
-	let value = settings_import_map.get(key);
-	storage.set(prefix, name, value);
+	const key = entry_object.prefix + entry_object.name;
+	const value = settings_import_map.get(key);
+	storage.set(entry_object.prefix, entry_object.name, value);
     }
 
     deactivate();
@@ -106,38 +92,48 @@ function show_error(errormsg, errordetail)
 }
 
 const import_selection_radio = by_id("import_selection_radio");
+const existing_settings_note = by_id("existing_settings_note");
 
 function show_selection(settings)
 {
     import_selection_radio.checked = true;
 
-    let old_children = import_ul.children;
+    let old_children = import_list.children;
     while (old_children[0] !== undefined)
-	import_ul.removeChild(old_children[0]);
+	import_list.removeChild(old_children[0]);
 
     import_chbxs_colliding = [];
+    entry_objects = [];
     settings_import_map = new Map();
 
     for (let setting of settings) {
 	let [key, value] = Object.entries(setting)[0];
 	let prefix = key[0];
 	let name = key.substring(1);
-	add_import_li(prefix, name);
+	entry_objects.push(add_import_entry(prefix, name));
 	settings_import_map.set(key, value);
     }
+
+    const op = import_chbxs_colliding.length > 0 ? "remove" : "add";
+    existing_settings_note.classList[op]("hide");
 }
 
 function deactivate()
 {
     /* Let GC free some memory */
     import_chbxs_colliding = undefined;
+    entry_objects = undefined;
     settings_import_map = undefined;
 
     if (exports.onclose)
 	exports.onclose();
 }
 
-const exports = {show_loading, show_error, show_selection, deactivate};
+const wrapper = by_id("import_table_wrapper");
+const style_table = (...cls) => cls.forEach(c => wrapper.classList.add(c));
+
+const exports =
+      {show_loading, show_error, show_selection, deactivate, style_table};
 
 async function init()
 {
diff --git a/html/options.html b/html/options.html
index 13a8973..085162c 100644
--- a/html/options.html
+++ b/html/options.html
@@ -89,14 +89,14 @@
 	  background: linear-gradient(#555, #e0f0f0);
       }
 
-      .table_wrapper>.always_scrollbar{
+      .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 {
+      .table_wrapper .table_wrapper.always_scrollbar>*,
+      .popup_frame .table_wrapper.always_scrollbar>* {
 	  max-height: 60vh;
       }
 
@@ -108,7 +108,7 @@
 	  margin: 0 auto;
       }
 
-      tr>td:first-child {
+      td:first-child {
 	  max-width: 70vw;
 	  overflow: hidden;
       }
@@ -156,23 +156,23 @@
   </head>
   <body>
     <template>
-      <tr id="item_li">
+      <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">
+      <tr id="bag_component_li" class="nowrap">
 	<td></td>
 	<td><div class="button"> Remove </div></td>
       </tr>
-      <tr id="chbx_component_li">
+      <tr id="chbx_component_li" class="nowrap">
 	<td>
 	  <input type="checkbox" style="display: inline;"></input>
 	  <span></span>
 	</td>
       </tr>
-      <tr id="radio_component_li">
+      <tr id="radio_component_li" class="nowrap">
 	<td>
 	  <input type="radio" style="display: inline;" name="page_components"></input>
 	  <span></span>
@@ -336,8 +336,8 @@
 
     <div id="radio_components_window" class="hide popup" position="absolute">
       <div class="popup_frame">
-	<div class="table_wrapper tight_table has_bottom_line has_upper_line">
-	  <div class="always_scrollbar">
+	<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">
diff --git a/html/options_main.js b/html/options_main.js
index 03505a5..e08bdb9 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -37,7 +37,9 @@ function list_set_scrollbar(list_elem)
     const op = ((list_elem.children.length === 1 &&
 		 list_elem.children[0].classList.contains("hide")) ||
 		list_elem.children.length < 1) ? "remove" : "add";
-    list_elem.parentElement.parentElement.classList[op]("always_scrollbar");
+    while (!list_elem.classList.contains("table_wrapper"))
+	list_elem = list_elem.parentElement;
+    list_elem.classList[op]("always_scrollbar");
 }
 
 function item_li_id(prefix, item)
@@ -632,6 +634,8 @@ async function initialize_import_facility()
 
     import_frame = await get_import_frame();
     import_frame.onclose = hide_import_window;
+    import_frame.style_table("has_bottom_line", "always_scrollbar",
+			     "has_upper_line", "tight_table");
 }
 
 /*
diff --git a/html/table.css b/html/table.css
index 6296f83..36f88bb 100644
--- a/html/table.css
+++ b/html/table.css
@@ -32,7 +32,6 @@ td {
 
 td:first-child {
     padding: 3px 10px 6px;
-    white-space: nowrap;
 }
 
 .tight_table td:first-child {
author	Wojtek Kosior <koszko@koszko.org>	2021-09-01 14:14:51 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-09-01 14:14:51 +0200
commit	4b59dced912fb9b50ff041c67f0f72cbbad56b6c (patch)
tree	b542e0727219f2ab88999459df0cab7a015a2dd6 /html
parent	d85dcc1ea805651797b07f72b64d84764214a3b9 (diff)
download	browser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.tar.gz browser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.zip