diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/MOZILLA_scrollbar_fix.css | 46 | ||||
| -rw-r--r-- | html/base.css | 8 | ||||
| -rw-r--r-- | html/default_blocking_policy.html | 18 | ||||
| -rw-r--r-- | html/default_blocking_policy.js | 47 | ||||
| -rw-r--r-- | html/display-panel.html | 24 | ||||
| -rw-r--r-- | html/display-panel.js | 5 | ||||
| -rw-r--r-- | html/import_frame.html | 7 | ||||
| -rw-r--r-- | html/options.html | 1 | ||||
| -rw-r--r-- | html/options_main.js | 3 |
9 files changed, 149 insertions, 10 deletions
diff --git a/html/MOZILLA_scrollbar_fix.css b/html/MOZILLA_scrollbar_fix.css new file mode 100644 index 0000000..5feb7c3 --- /dev/null +++ b/html/MOZILLA_scrollbar_fix.css @@ -0,0 +1,46 @@ +/** + * Hachette + * Hacky fix for vertical scrollbar width being included in child's width. + * + * Copyright (C) 2021 Wojtek Kosior + * Redistribution terms are gathered in the `copyright' file. + */ + +/* + * Under Mozilla browsers to avoid vertical scrollbar forcing horizontal + * scrollbar to appear in an element we add the `firefox_scrollbars_hacky_fix' + * class to an element for which width has to be reserved. + * + * This is a bit hacky and relies on some assumed width of Firefox scrollbar, I + * know. And must be excluded from Chromium builds. + * + * I came up with this hack when working on popup. Before that I had the + * scrollbar issue with tables in the options page and gave up there and made + * the scrollbal always visible. Now we could try applying this "fix" there, + * too! + */ + +.firefox_scrollbars_hacky_fix { + font-size: 0; +} + +.firefox_scrollbars_hacky_fix>div { + display: inline-block; + width: -moz-available; +} + +.firefox_scrollbars_hacky_fix>*>* { + font-size: initial; +} + +.firefox_scrollbars_hacky_fix::after { + content: ""; + display: inline-block; + visibility: hidden; + font-size: initial; + width: 14px; +} + +.firefox_scrollbars_hacky_fix.has_inline_content::after { + width: calc(14px - 0.3em); +} diff --git a/html/base.css b/html/base.css index 94b3f31..df52f7c 100644 --- a/html/base.css +++ b/html/base.css @@ -100,6 +100,14 @@ textarea: { background: linear-gradient(#555, transparent); } +.has_bottom_thin_line { + border-bottom: dashed #4CAF50 1px; +} + +.has_upper_thin_line { + border-top: dashed #4CAF50 1px; +} + .nowrap { white-space: nowrap; } diff --git a/html/default_blocking_policy.html b/html/default_blocking_policy.html new file mode 100644 index 0000000..50c19ca --- /dev/null +++ b/html/default_blocking_policy.html @@ -0,0 +1,18 @@ +<!-- + Copyright (C) 2021 Wojtek Kosior + Redistribution terms are gathered in the `copyright' file. + + This is not a standalone page. This file is meant to be imported into other + HTML code. + --> +<style> + #blocking_policy_div { + line-height: 2em; + } +</style> +<span id="blocking_policy_span"> + Default policy for unmatched pages is to + <span id="current_policy_span" class="bold"></span> + their own scripts. + <button id="toggle_policy_but">Toggle policy</button> +</span> diff --git a/html/default_blocking_policy.js b/html/default_blocking_policy.js new file mode 100644 index 0000000..2f49bac --- /dev/null +++ b/html/default_blocking_policy.js @@ -0,0 +1,47 @@ +/** + * part of Hachette + * Default policy dialog logic. + * + * Copyright (C) 2021 Wojtek Kosior + * Redistribution terms are gathered in the `copyright' file. + */ + +/* + * IMPORTS_START + * IMPORT by_id + * IMPORT light_storage + * IMPORT observables + * IMPORTS_END + */ + +/* + * Used with `default_blocking_policy.html' to allow user to choose whether to + * block scripts globally or not. + */ + +const blocking_policy_span = by_id("blocking_policy_span"); +const current_policy_span = by_id("current_policy_span"); +const toggle_policy_but = by_id("toggle_policy_but"); + +let policy_observable; + +const update_policy = + allowed => current_policy_span.textContent = allowed ? "allow" : "block"; +const toggle_policy = + () => light_storage.set_var("default_allow", !policy_observable.value); + +async function init_default_policy_dialog() +{ + policy_observable = await light_storage.observe_var("default_allow"); + update_policy(policy_observable.value); + observables.subscribe(policy_observable, update_policy); + + toggle_policy_but.addEventListener("click", toggle_policy); + blocking_policy_span.classList.remove("hide"); +} + +/* + * EXPORTS_START + * EXPORT init_default_policy_dialog + * EXPORTS_END + */ diff --git a/html/display-panel.html b/html/display-panel.html index 0806f26..a8c52b6 100644 --- a/html/display-panel.html +++ b/html/display-panel.html @@ -11,10 +11,11 @@ <link type="text/css" rel="stylesheet" href="base.css" /> <link type="text/css" rel="stylesheet" href="back_button.css" /> <link type="text/css" rel="stylesheet" href="table.css" /> + <link type="text/css" rel="stylesheet" href="MOZILLA_scrollbar_fix.css" /> <style> body { width: max-content; - width: -moz-max-content; + width: -moz-fit-content; } .top>h2 { @@ -114,8 +115,6 @@ pre { font-family: monospace; background-color: white; - border-top: dashed #4CAF50 1px; - border-bottom: dashed #4CAF50 1px; padding: 1px 5px; } @@ -133,8 +132,11 @@ padding-right: 5px; } + .padding_top { + padding-top: 5px; + } + .header { - border-bottom: dashed #4CAF50 1px; padding-bottom: 0.3em; margin-bottom: 0.5em; text-align: center; @@ -146,7 +148,6 @@ } .footer { - border-top: dashed #4CAF50 1px; padding-top: 0.3em; margin-top: 0.5em; text-align: center; @@ -199,7 +200,7 @@ <label data-template="lbl"> <h3><div class="unroll_triangle"></div> script</h3> </label> - <pre data-template="script_contents"></pre> + <pre class="has_bottom_thin_line has_upper_thin_line" data-template="script_contents"></pre> </div> </div> @@ -242,7 +243,7 @@ Patterns higher are more specific and override the ones below. </aside> </div> - <div class="table_wrapper"> + <div class="table_wrapper firefox_scrollbars_hacky_fix"> <div> <table> <tbody id="possible_patterns"> @@ -250,6 +251,11 @@ </table> </div> </div> + <div class="padding_inline padding_top has_upper_thin_line firefox_scrollbars_hacky_fix has_inline_content"> + <span class="nowrap"> + <IMPORT html/default_blocking_policy.html /> + </span> + </div> </div> <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input> @@ -265,7 +271,7 @@ <h3 id="privileged_notice" class="middle hide">Privileged page</h3> <div id="page_state" class="hide"> - <div class="header padding_inline"> + <div class="header padding_inline has_bottom_thin_line"> <label for="show_patterns_view_radio" class="button"> Edit settings for this page </label> @@ -317,7 +323,7 @@ </div> </div> - <div class="footer padding_inline"> + <div class="footer padding_inline has_upper_thin_line"> <button id="settings_but" type="button"> Open Hachette settings </button> diff --git a/html/display-panel.js b/html/display-panel.js index bd210c1..ed96c07 100644 --- a/html/display-panel.js +++ b/html/display-panel.js @@ -14,6 +14,7 @@ *** temporarily, before all storage access gets reworked. * IMPORT get_remote_storage * IMPORT get_import_frame + * IMPORT init_default_policy_dialog * IMPORT query_all * IMPORT CONNECTION_TYPE * IMPORT is_privileged_url @@ -243,7 +244,6 @@ function handle_activity_report(message) if (type === "settings") { let [pattern, settings] = data; - settings = settings || {}; blocked_span.textContent = settings.allow ? "no" : "yes"; if (pattern) { @@ -254,6 +254,7 @@ function handle_activity_report(message) view_pattern_but.addEventListener("click", settings_opener); } else { pattern_span.textContent = "none"; + blocked_span.textContent = blocked_span.textContent + " (default)"; } const components = settings.components; @@ -549,6 +550,8 @@ by_id("settings_but") async function main() { + init_default_policy_dialog(); + storage = await get_remote_storage(); import_frame = await get_import_frame(); import_frame.onclose = () => show_queried_view_radio.checked = true; diff --git a/html/import_frame.html b/html/import_frame.html index e6db205..754b289 100644 --- a/html/import_frame.html +++ b/html/import_frame.html @@ -1,3 +1,10 @@ +<!-- + Copyright (C) 2021 Wojtek Kosior + Redistribution terms are gathered in the `copyright' file. + + This is not a standalone page. This file is meant to be imported into other + HTML code. + --> <style> .padding_right { padding-right: 0.3em; diff --git a/html/options.html b/html/options.html index 085162c..f2a75e1 100644 --- a/html/options.html +++ b/html/options.html @@ -248,6 +248,7 @@ </div> </div> <button id="add_page_but" type="button"> Add page </button> + <IMPORT html/default_blocking_policy.html /> </div> <div id="bags" class="tab"> <div class="table_wrapper tight_table has_bottom_line has_upper_line"> diff --git a/html/options_main.js b/html/options_main.js index e08bdb9..2f4f154 100644 --- a/html/options_main.js +++ b/html/options_main.js @@ -17,6 +17,7 @@ * IMPORT by_id * IMPORT matchers * IMPORT get_import_frame + * IMPORT init_default_policy_dialog * IMPORTS_END */ @@ -670,6 +671,8 @@ function jump_to_item(url_with_item) async function main() { + init_default_policy_dialog(); + storage = await get_remote_storage(); for (let prefix of list_prefixes) { |