summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2021-09-01 14:14:51 +0200
committerWojtek Kosior <koszko@koszko.org>2021-09-01 14:14:51 +0200
commit4b59dced912fb9b50ff041c67f0f72cbbad56b6c (patch)
treeb542e0727219f2ab88999459df0cab7a015a2dd6
parentd85dcc1ea805651797b07f72b64d84764214a3b9 (diff)
downloadbrowser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.tar.gz
browser-extension-4b59dced912fb9b50ff041c67f0f72cbbad56b6c.zip
add styling to settings install(import) dialog
-rw-r--r--html/base.css19
-rw-r--r--html/display-panel.html27
-rw-r--r--html/display-panel.js1
-rw-r--r--html/import_frame.html33
-rw-r--r--html/import_frame.js74
-rw-r--r--html/options.html20
-rw-r--r--html/options_main.js6
-rw-r--r--html/table.css1
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 {