diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/base.css | 19 | ||||
| -rw-r--r-- | html/display-panel.html | 27 | ||||
| -rw-r--r-- | html/display-panel.js | 1 | ||||
| -rw-r--r-- | html/import_frame.html | 33 | ||||
| -rw-r--r-- | html/import_frame.js | 74 | ||||
| -rw-r--r-- | html/options.html | 20 | ||||
| -rw-r--r-- | html/options_main.js | 6 | ||||
| -rw-r--r-- | html/table.css | 1 |
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 { |