enable toggling of global script blocking policy\n\nThis commit also introduces `light_storage' module which is later going to replace the storage code we use right now.\nAlso included is a hack to properly display scrollbars under Mozilla (needs testing on newer Mozilla browsers).

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) {