From 826b4fd80a288f13841b6f6d56cc38e2f43bbc03 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Fri, 27 Aug 2021 18:01:34 +0200
Subject: start using `<template>' tag

---
 html/import_frame.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'html/import_frame.html')

diff --git a/html/import_frame.html b/html/import_frame.html
index c86c3de..0511e6c 100644
--- a/html/import_frame.html
+++ b/html/import_frame.html
@@ -1,10 +1,10 @@
-<div style="display: none;">
-  <li id="import_li_template">
+<template>
+  <li id="import_li">
     <span></span>
     <input type="checkbox" style="display: inline;" checked></input>
     <span></span>
   </li>
-</div>
+</template>
 <h2> Settings import </h2>
 <input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input>
 <span> Loading... </span>
-- 
cgit v1.2.3


From 453ba03962ececcdff9264bea606b7bc488c1803 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 1 Sep 2021 11:45:06 +0200
Subject: add styling for popup page\n\nThis does not include styling for
 contents of the import dialog

---
 copyright               |   4 +
 html/DOM_helpers.js     |   2 +-
 html/back_button.css    |  50 +++++++
 html/base.css           |  22 ++-
 html/display-panel.html | 365 ++++++++++++++++++++++++++++++++++++++----------
 html/display-panel.js   | 174 ++++++++++++-----------
 html/import_frame.html  |   1 -
 html/options.html       |  95 +++----------
 html/options_main.js    |   8 +-
 html/table.css          |  46 ++++++
 10 files changed, 532 insertions(+), 235 deletions(-)
 create mode 100644 html/back_button.css
 create mode 100644 html/table.css

(limited to 'html/import_frame.html')

diff --git a/copyright b/copyright
index 75be239..58993a6 100644
--- a/copyright
+++ b/copyright
@@ -31,6 +31,10 @@ Files: *.html README.txt copyright
 Copyright: 2021 Wojtek Kosior <koszko@koszko.org>
 License: GPL-3+ or Alicense-1.0 or CC-BY-SA-4.0
 
+Files: html/*.css
+Copyright: 2021 Wojtek Kosior <koszko@koszko.org>
+License: GPL-3+ or Alicense-1.0 or CC-BY-SA-4.0
+
 Files: html/base.css
 Copyright: 2021 Wojtek Kosior <koszko@koszko.org>
    2021 Nicholas Johnson <nicholasjohnson@posteo.org>
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js
index 392299f..01e2be9 100644
--- a/html/DOM_helpers.js
+++ b/html/DOM_helpers.js
@@ -42,7 +42,7 @@ function clone_template(template_id)
 	    result_object[template_key] = element;
 
 	element.removeAttribute("id");
-	element.removeAttribute("template_key");
+	element.removeAttribute("data-template");
 
 	for (const child of element.children)
 	    to_process.push(child);
diff --git a/html/back_button.css b/html/back_button.css
new file mode 100644
index 0000000..1ddc5da
--- /dev/null
+++ b/html/back_button.css
@@ -0,0 +1,50 @@
+/**
+ * part of Hachette
+ * Style for a "back" button with a CSS arrow image.
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+.back_button {
+    display: block;
+    width: auto;
+    height: auto;
+    background-color: white;
+    border: solid #454 0.4em;
+    border-left: none;
+    border-radius: 0 1.5em 1.5em 0;
+    cursor: pointer;
+}
+
+.back_button:hover {
+    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
+.back_button>div, .back_arrow {
+    width: 2em;
+    height: 0.5em;
+    background-color: #4CAF50;
+    border-radius: 0.3em;
+    margin: 1.15em 0.4em;
+}
+
+.back_button>div::after, .back_arrow::after,
+.back_button>div::before, .back_arrow::before {
+    content: "";
+    display: block;
+    position: relative;
+    background-color: inherit;
+    width: 1.3em;
+    height: 0.5em;
+    transform: rotate(45deg);
+    border-radius: 0.3em;
+    top: 0.3em;
+    right: 0.2em;
+    margin: 0 -1.3em -0.5em 0;
+}
+
+.back_button>div::before, .back_arrow::before {
+    transform: rotate(-45deg);
+    top: -0.3em;
+}
diff --git a/html/base.css b/html/base.css
index 91fd953..0b9c7d3 100644
--- a/html/base.css
+++ b/html/base.css
@@ -6,8 +6,11 @@
  * Redistribution terms are gathered in the `copyright' file.
  */
 
-html {
+body {
     font-family: sans-serif;
+    background-color: #f0f0f0;
+    color: #555;
+    overflow: auto;
 }
 
 textarea {
@@ -18,6 +21,10 @@ input[type="checkbox"], input[type="radio"], .hide {
     display: none;
 }
 
+.camouflage {
+    visibility: hidden;
+}
+
 .show_next:not(:checked)+* {
     display: none;
 }
@@ -42,6 +49,8 @@ button, .button {
     margin: 2px 0px;
     -moz-user-select: none;
     user-select: none;
+    cursor: pointer;
+    font: 400 15px sans-serif;
 }
 
 button.slimbutton, .button.slimbutton {
@@ -64,3 +73,14 @@ aside {
 textarea: {
     resize: none;
 }
+
+.has_bottom_line::after, .has_upper_line::before {
+    content: "";
+    display: block;
+    height: 8px;
+    background: linear-gradient(transparent, #555);
+}
+
+.has_bottom_line::after {
+    background: linear-gradient(#555, transparent);
+}
diff --git a/html/display-panel.html b/html/display-panel.html
index cbd7dc8..4121c30 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -9,117 +9,336 @@
     <title>Hachette - page settings</title>
     <link type="text/css" rel="stylesheet" href="reset.css" />
     <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" />
     <style>
       body {
-	  width: 300px;
-	  height: 300px;
+	  width: max-content;
+	  width: -moz-max-content;
       }
 
-      ul {
-	  padding-inline-start: 15px;
+      .bold, h2 {
+	  font-weight: bold;
       }
 
-      .bold {
-	  font-weight: bold;
+      h2 {
+	  margin: 8px;
+	  font-size: 120%;
+      }
+
+      .top>h2 {
+	  padding-left: calc(0.8*3.2em - 8px);
+      }
+
+      .top {
+	  line-height: calc(0.8*3.6em - 16px);
       }
 
-      .unroll_chbx:not(:checked)+*+label span.triangle:first-child+span.triangle,
-      .unroll_chbx:checked+*+label span.triangle:first-child,
-      .unroll_chbx:not(:checked)+*,
-      .unroll_chbx:not(:checked)+*+label+* {
+      #main_view>.top>h2 {
+	  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;
       }
 
+      .unroll_triangle {
+	  height: 1em;
+	  width: 1em;
+	  display: inline-block;
+      }
+
+      .unroll_triangle::after {
+	  content: "";
+	  width: 0.6em;
+	  height: 0.6em;
+	  background: linear-gradient(-45deg, currentColor 50%, transparent 50%);
+	  display: block;
+	  position: relative;
+	  transform: rotate(-45deg);
+	  top: 0.3em;
+      }
+
+      .unroll_chbx:checked+div>:first-child .unroll_triangle::after {
+	  transform: rotate(45deg);
+	  left: 0.2em;
+	  top: 0.2em;
+      }
+
+      .unroll_chbx:checked+div>:first-child .unroll_block {
+	  display: block;
+      }
+
+      .unroll_chbx:checked+div>:first-child {
+	  line-height: 1.4em;
+      }
+
+      .l2_ul {
+	  border-left: solid #454 5px;
+      }
+
+      .l1_li {
+	  margin-top: 0.3em;
+	  margin-bottom: 0.3em;
+      }
+
+      .l1_li>div {
+	  padding: 0.3em 0.3em 0.3em 0;
+      }
+
+      .l2_li {
+	  padding: 0.3em;
+      }
+
+      #container_for_injected>*:nth-child(odd),
+      .l2_li:nth-child(odd) {
+	  background-color: #e5e5e5;
+      }
+
       #container_for_injected>#none_injected:not(:last-child) {
 	  display: none;
       }
+
+      #page_url_heading>span {
+	  display: inline-block;
+      }
+
+      .back_button {
+	  position: fixed;
+	  z-index: 1;
+	  top: 0;
+	  left: 0;
+	  /* The following scales the entire button. */
+	  font-size: 80%;
+      }
+
+      #show_main_view_radio:checked~.back_button {
+	  margin-left: -3.2em;
+      }
+
+      #show_main_view_radio:not(:checked)~.back_button {
+	  transition: all 0.2s ease-out;
+      }
+
+      pre {
+	  font-family: monospace;
+	  background-color: white;
+	  border-top: dashed #4CAF50 1px;
+	  border-bottom: dashed #4CAF50 1px;
+	  padding: 1px 5px;
+      }
+
+      .matched_pattern {
+	  font-weight: bold;
+      }
+
+      tr.matched_pattern~tr {
+	  color: #777;
+	  font-size: 90%;
+      }
+
+      .padding_inline {
+	  padding-left: 5px;
+	  padding-right: 5px;
+      }
+
+      .header {
+	  border-bottom: dashed #4CAF50 1px;
+	  padding-bottom: 0.3em;
+	  margin-bottom: 0.5em;
+	  text-align: center;
+      }
+
+      .middle {
+	  margin-top: 0.5em;
+	  margin-bottom: 0.5em;
+      }
+
+      .footer {
+	  border-top: dashed #4CAF50 1px;
+	  padding-top: 0.3em;
+	  margin-top: 0.5em;
+	  text-align: center;
+      }
+
+      .active_setting_table {
+	  margin-bottom: 0.5em;
+      }
+
+      .active_setting_table td {
+	  padding: 5px;
+	  vertical-align: middle;
+      }
     </style>
   </head>
   <body>
     <template>
-      <li id="pattern_li">
-	<span></span>
-	<button>View in settings</button>
-      </li>
-      <li id="query_match_li" class="queried_pattern_match" data-template="li">
+      <tr id="pattern_entry" data-template="entry">
+	<td data-template="name"></td>
+	<td>
+	  <div class="button" data-template="button">Add setting</div>
+	</td>
+      </tr>
+
+      <li id="query_match_li" class="l2_li" data-template="li">
 	<div>
 	  <span>pattern:</span>
 	  <span class="bold" data-template="pattern"></span>
-	  <button data-template="btn">Install</button>
+	  <label class="button slimbutton" for="show_install_view_radio" data-template="btn">
+	    Install
+	  </label>
 	</div>
 	<div id="unrollable_component" data-template="unroll_container">
-	  <span data-template="component_label">payload:</span>
 	  <input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
-	  <br data-template="br"/>
-	  <label class="bold" data-template="lbl">
-	    <span data-template="triangle">
-	      <span class="triangle">&#x23F5;</span>
-	      <span class="triangle">&#x23F7;</span>
+	  <div>
+	    <span>payload:
+	      <label class="bold unroll_block" data-template="lbl">
+		<div data-template="triangle" class="unroll_triangle"></div>
+		<span data-template="payload"></span>
+	      </label>
 	    </span>
-	    <span data-template="component"></span>
+	    <div data-template="unroll"></div>
+	  </div>
+	</div>
+      </li>
+
+      <div id="injected_script" data-template="div">
+	<input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
+	<div>
+	  <label data-template="lbl">
+	    <h3><div class="unroll_triangle"></div> script</h3>
 	  </label>
-	  <div data-template="unroll"></div>
+	  <pre data-template="script_contents"></pre>
+	</div>
+      </div>
+
+      <div id="multi_repos_query_result" data-template="div">
+	Results for <span class="bold" data-template="url_span"></span>
+	<ul class="l1_ul" data-template="ul"></ul>
+      </div>
+
+      <li id="single_repo_query_result" class="l1_li" data-template="li">
+	<div>
+	  From <span class="bold" data-template="repo_url"></span>
 	</div>
       </li>
+
+      <ul id="result_patterns_list" class="l2_ul" data-template="ul">
+      </ul>
     </template>
 
-    <input id="show_install_view_chbx" type="checkbox" class="show_hide_next2"></input>
+    <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 id="install_status"></div>
-	  <label for="show_install_chbx" class="bold">Cancel install</label>
-	  <button id="commit_install_but">Commit install</button>
-      -->
     </div>
-    <div id="main_view">
-      <h2 id="page_url_heading"></h2>
-
-      <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>
-      <h3>Privileged page</h3>
-
-      <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>
-      <div>
-	<input id="possible_patterns_chbx" type="checkbox" class="unroll_chbx"></input>
-	<span></span>
-	<label for="possible_patterns_chbx">
-	  <h3>
-	    <span class="triangle">&#x23F5;</span>
-	    <span class="triangle">&#x23F7;</span>
-	    Possible patterns
-	  </h3>
-	</label>
-	<ul id="possible_patterns"></ul>
-
-	<input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+
+    <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div id="injected_view">
+      <div class="top has_bottom_line"><h2>Injected scripts</h2></div>
+      <div id="container_for_injected">
+	<span id="none_injected">None</span>
+      </div>
+    </div>
+
+    <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div>
+      <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div>
+      <div class="padding_inline">
+	<aside>
+	  Patterns higher are more specific and override the ones below.
+	</aside>
+      </div>
+      <div class="table_wrapper">
 	<div>
-	  Matched pattern: <span id="pattern" class="bold">...</span>
-	  <button id="view_pattern" class="hide">
-	    View in settings
-	  </button>
-	  <br/>
-	  Blocked: <span id="blocked" class="bold">...</span>
-	  <br/>
-	  Payload: <span id="payload" class="bold">...</span>
-	  <button id="view_payload" class="hide">
-	    View in settings
-	  </button>
-	  <h3>Injected</h3>
-	  <div id="container_for_injected">
-	    <span id="none_injected">None</span>
+	  <table>
+	    <tbody id="possible_patterns">
+	    </tbody>
+	  </table>
+	</div>
+      </div>
+    </div>
+
+    <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div>
+      <div class="top has_bottom_line"><h2>Queried from repositories</h2></div>
+      <div id="container_for_repo_responses" class="padding_inline">
+      </div>
+    </div>
+
+    <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input>
+    <div id="main_view">
+      <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div>
+      <h3 id="privileged_notice" class="middle hide">Privileged page</h3>
+
+      <div id="page_state" class="hide">
+	<div class="header padding_inline">
+	  <label for="show_patterns_view_radio" class="button">
+	    Edit settings for this page
+	  </label>
+	</div>
+	<div class="middle padding_inline">
+	  <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+	  <div>
+	    <table class="active_setting_table">
+	      <tbody>
+		<tr>
+		  <td>Matched pattern:</td>
+		  <td id="pattern" class="bold">...</td>
+		  <td>
+		    <button id="view_pattern" class="hide">
+		      View in settings
+		    </button>
+		  </td>
+		</tr>
+		<tr>
+		  <td>Scripts blocked:</td>
+		  <td id="blocked" class="bold">...</td>
+		  <td></td>
+		</tr>
+		<tr>
+		  <td>Injected payload:</td>
+		  <td id="payload" class="bold">...</td>
+		  <td id="payload_buttons" class="hide">
+		    <button id="view_payload"> View in settings </button>
+		    <br/>
+		    <label id="view_injected" class="button" for="show_injected_view_radio">
+		      View injected scripts
+		    </label>
+		  </td>
+		</tr>
+	      </tbody>
+	    </table>
+	    <label id="query_pattern" for="show_queried_view_radio" class="button">
+	      Install scripts for this page
+	    </label>
 	  </div>
-	  <input id="query_started_chbx" type="checkbox" class="show_hide_next2"></input>
-	  <div id="container_for_repo_responses">
-	    <h3>Queried from repositories</h3>
+	  <div>
+	    <h3>
+	      Connecting to content script..<span id="loading_point">.</span>
+	    </h3>
+	    <aside id="reload_notice">
+	      Try reloading the page.
+	    </aside>
 	  </div>
-	  <button id="query_pattern">
-	    Search for matching patterns
-	  </button>
 	</div>
-	<h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
       </div>
 
-      <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>
-    </div>_POPUPSCRIPTS_
+      <div class="footer padding_inline">
+	<button id="settings_but" type="button">
+	  Open Hachette settings
+	</button>
+      </div>
+    </div>
+
+    <div class="has_upper_line"></div>
+
+    <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
   </body>
 </html>
diff --git a/html/display-panel.js b/html/display-panel.js
index 54b5578..0c89864 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -20,6 +20,7 @@
  * IMPORT TYPE_PREFIX
  * IMPORT nice_name
  * IMPORT open_in_settings
+ * IMPORT url_matches
  * IMPORT each_url_pattern
  * IMPORT by_id
  * IMPORT get_template
@@ -30,6 +31,16 @@
 let storage;
 let tab_url;
 
+/* Force popup <html>'s reflow on stupid Firefox. */
+if (is_mozilla) {
+    const reflow_forcer =
+	  () => document.documentElement.style.width = "-moz-fit-content";
+    for (const radio of document.querySelectorAll('[name="current_view"]'))
+	radio.addEventListener("change", reflow_forcer);
+}
+
+const show_queried_view_radio = by_id("show_queried_view_radio");
+
 const tab_query = {currentWindow: true, active: true};
 
 async function get_current_tab()
@@ -48,8 +59,21 @@ async function get_current_tab()
 }
 
 const page_url_heading = by_id("page_url_heading");
-const show_privileged_notice_chbx = by_id("show_privileged_notice_chbx");
-const show_page_state_chbx = by_id("show_page_state_chbx");
+const privileged_notice = by_id("privileged_notice");
+const page_state = by_id("page_state");
+
+/* Helper functions to convert string into a list of one-letter <span>'s. */
+function char_to_span(char, doc)
+{
+    const span = document.createElement("span");
+    span.textContent = char;
+    return span;
+}
+
+function to_spans(string, doc=document)
+{
+    return string.split("").map(c => char_to_span(c, doc));
+}
 
 async function show_page_activity_info()
 {
@@ -61,69 +85,65 @@ async function show_page_activity_info()
     }
 
     tab_url = /^([^?#]*)/.exec(tab.url)[1];
-    page_url_heading.textContent = tab_url;
+    to_spans(tab_url).forEach(s => page_url_heading.append(s));
     if (is_privileged_url(tab_url)) {
-	show_privileged_notice_chbx.checked = true;
+	privileged_notice.classList.remove("hide");
 	return;
     }
 
     populate_possible_patterns_list(tab_url);
-    show_page_state_chbx.checked = true;
+    page_state.classList.remove("hide");
 
     try_to_connect(tab.id);
 }
 
-const possible_patterns_ul = by_id("possible_patterns");
-const pattern_li_template = get_template("pattern_li");
-pattern_li_template.removeAttribute("id");
+const possible_patterns_list = by_id("possible_patterns");
 const known_patterns = new Map();
 
 function add_pattern_to_list(pattern)
 {
-    const li = pattern_li_template.cloneNode(true);
-    li.id = `pattern_li_${known_patterns.size}`;
-    known_patterns.set(pattern, li.id);
+    const template = clone_template("pattern_entry");
+    template.name.textContent = pattern;
 
-    const span = li.firstElementChild;
-    span.textContent = pattern;
-
-    const button = span.nextElementSibling;
     const settings_opener = () => open_in_settings(TYPE_PREFIX.PAGE, pattern);
-    button.addEventListener("click", settings_opener);
+    template.button.addEventListener("click", settings_opener);
 
-    possible_patterns_ul.appendChild(li)
+    known_patterns.set(pattern, template);
+    possible_patterns_list.append(template.entry);
 
-    return li.id;
+    return template;
 }
 
 function ensure_pattern_exists(pattern)
 {
-    let id = known_patterns.get(pattern);
+    let entry_object = known_patterns.get(pattern);
     /*
      * As long as pattern computation works well, we should never get into this
      * conditional block. This is just a safety measure. To be removed as part
      * of a bigger rework when we start taking iframes into account.
      */
-    if (id === undefined) {
+    if (entry_object === undefined) {
 	console.log(`unknown pattern: ${pattern}`);
-	id = add_pattern_to_list(pattern);
+	entry_object = add_pattern_to_list(pattern);
     }
 
-    return id;
+    return entry_object;
 }
 
-function set_pattern_li_button_text(li_id, text)
+function style_possible_pattern_entry(pattern, exists_in_settings)
 {
-    by_id(li_id).firstElementChild.nextElementSibling.textContent = text;
+    const [text, class_action] = exists_in_settings ?
+	  ["Edit", "add"] : ["Add", "remove"];
+    const entry_object = ensure_pattern_exists(pattern);
+
+    entry_object.button.textContent = `${text} setting`;
+    entry_object.entry.classList[class_action]("matched_pattern");
 }
 
 function handle_page_change(change)
 {
-    const li_id = ensure_pattern_exists(change.item);
-    if (change.old_val === undefined)
-	set_pattern_li_button_text(li_id, "Edit in settings");
-    if (change.new_val === undefined)
-	set_pattern_li_button_text(li_id, "Add setting");
+    if (url_matches(tab_url, change.item))
+        style_possible_pattern_entry(change.item, change.new_val !== undefined);
 }
 
 function populate_possible_patterns_list(url)
@@ -131,10 +151,8 @@ function populate_possible_patterns_list(url)
     for (const pattern of each_url_pattern(url))
 	add_pattern_to_list(pattern);
 
-    for (const [pattern, settings] of query_all(storage, url)) {
-	set_pattern_li_button_text(ensure_pattern_exists(pattern),
-				   "Edit in settings");
-    }
+    for (const [pattern, settings] of query_all(storage, url))
+	style_possible_pattern_entry(pattern, true);
 
     storage.add_change_listener(handle_page_change, [TYPE_PREFIX.PAGE]);
 }
@@ -160,17 +178,16 @@ function try_to_connect(tab_id)
 	setTimeout(() => monitor_connecting(tab_id), 1000);
 }
 
-const query_started_chbx = by_id("query_started_chbx");
-
-function start_querying_repos(port)
+function start_querying_repos()
 {
+    query_pattern_but.removeEventListener("click", start_querying_repos);
     const repo_urls = storage.get_all_names(TYPE_PREFIX.REPO);
     if (content_script_port)
 	content_script_port.postMessage([TYPE_PREFIX.URL, tab_url, repo_urls]);
-    query_started_chbx.checked = true;
 }
 
-const loading_chbx = by_id("loading_chbx");
+const loading_point = by_id("loading_point");
+const reload_notice = by_id("reload_notice");
 
 function handle_disconnect(tab_id, button_cb)
 {
@@ -184,7 +201,9 @@ function handle_disconnect(tab_id, button_cb)
     if (connected_chbx.checked)
 	return;
 
-    loading_chbx.checked = !loading_chbx.checked;
+    loading_point.classList.toggle("camouflage");
+    reload_notice.classList.remove("hide");
+
     setTimeout(() => try_to_connect(tab_id), 1000);
 }
 
@@ -198,7 +217,8 @@ function monitor_connecting(tab_id)
     else
 	return;
 
-    loading_chbx.checked = !loading_chbx.checked;
+    loading_point.classList.toggle("camouflage");
+    reload_notice.classList.remove("hide");
     try_to_connect(tab_id);
 }
 
@@ -206,11 +226,15 @@ const pattern_span = by_id("pattern");
 const view_pattern_but = by_id("view_pattern");
 const blocked_span = by_id("blocked");
 const payload_span = by_id("payload");
+const payload_buttons_div = by_id("payload_buttons");
 const view_payload_but = by_id("view_payload");
+const view_injected_but = by_id("view_injected");
 const container_for_injected = by_id("container_for_injected");
 
 const queried_items = new Map();
 
+let max_injected_script_id = 0;
+
 function handle_activity_report(message)
 {
     connected_chbx.checked = true;
@@ -236,25 +260,22 @@ function handle_activity_report(message)
 	const components = settings.components;
 	if (components) {
 	    payload_span.textContent = nice_name(...components);
+	    payload_buttons_div.classList.remove("hide");
 	    const settings_opener = () => open_in_settings(...components);
-	    view_payload_but.classList.remove("hide");
 	    view_payload_but.addEventListener("click", settings_opener);
 	} else {
 	    payload_span.textContent = "none";
 	}
     }
     if (type === "script") {
-	const h4 = document.createElement("h4");
-	const pre = document.createElement("pre");
-	h4.textContent = "script";
-	pre.textContent = data;
-
-	container_for_injected.appendChild(h4);
-	container_for_injected.appendChild(pre);
+	const template = clone_template("injected_script");
+	const chbx_id = `injected_script_${max_injected_script_id++}`;
+	template.chbx.id = chbx_id;
+	template.lbl.setAttribute("for", chbx_id);
+	template.script_contents.textContent = data;
+	container_for_injected.appendChild(template.div);
     }
     if (type === "repo_query_action") {
-	query_started_chbx.checked = true;
-
 	const key = data.prefix + data.item;
 	const results = queried_items.get(key) || {};
 	Object.assign(results, data.results);
@@ -274,35 +295,26 @@ const results_lists = new Map();
 
 function create_results_list(url)
 {
-    const list_div = document.createElement("div");
-    const list_head = document.createElement("h4");
-    const list = document.createElement("ul");
+    const cloned_template = clone_template("multi_repos_query_result");
+    cloned_template.url_span.textContent = url;
+    container_for_repo_responses.appendChild(cloned_template.div);
 
-    list_head.textContent = url;
-    list_div.appendChild(list_head);
-    list_div.appendChild(list);
-    container_for_repo_responses.appendChild(list_div);
+    cloned_template.by_repo = new Map();
+    results_lists.set(url, cloned_template);
 
-    const list_object = {list, by_repo: new Map()};
-
-    results_lists.set(url, list_object);
-
-    return list_object;
+    return cloned_template;
 }
 
 function create_result_item(list_object, repo_url, result)
 {
-    const result_li = document.createElement("li");
-    const repo_url_span = document.createElement("span");
-    const result_item = {result_li, appended: null};
-
-    repo_url_span.textContent = repo_url;
-    result_li.appendChild(repo_url_span);
+    const cloned_template = clone_template("single_repo_query_result");
+    cloned_template.repo_url.textContent = repo_url;
+    cloned_template.appended = null;
 
-    list_object.list.appendChild(result_li);
-    list_object.by_repo.set(repo_url, result_item);
+    list_object.ul.appendChild(cloned_template.li);
+    list_object.by_repo.set(repo_url, cloned_template);
 
-    return result_item;
+    return cloned_template;
 }
 
 function set_appended(result_item, element)
@@ -310,7 +322,7 @@ function set_appended(result_item, element)
     if (result_item.appended)
 	result_item.appended.remove();
     result_item.appended = element;
-    result_item.result_li.appendChild(element);
+    result_item.li.appendChild(element);
 }
 
 function show_message(result_item, text)
@@ -333,11 +345,9 @@ function unroll_chbx_first_checked(entry_object)
     entry_object.chbx.removeEventListener("change", entry_object.unroll_cb);
     delete entry_object.unroll_cb;
 
-    entry_object.unroll.textContent = "preview not implemented...";
+    entry_object.unroll.innerHTML = "preview not implemented...<br />(consider contributing)";
 }
 
-const show_install_chbx = by_id("show_install_view_chbx");
-
 let import_frame;
 let install_target = null;
 
@@ -463,7 +473,6 @@ function record_fetched_install_dep(prefix, item, repo_url, result)
 
 function install_clicked(entry_object)
 {
-    show_install_chbx.checked = true;
     import_frame.show_loading();
 
     install_target = {
@@ -483,25 +492,24 @@ var max_query_result_id = 0;
 
 function show_query_successful_result(result_item, repo_url, result)
 {
-    const ul = document.createElement("ul");
-
-    set_appended(result_item, ul);
+    const cloned_ul_template = clone_template("result_patterns_list");
+    set_appended(result_item, cloned_ul_template.ul);
 
     for (const match of result) {
 	const entry_object = clone_template("query_match_li");
 
 	entry_object.pattern.textContent = match.pattern;
 
-	ul.appendChild(entry_object.li);
+	cloned_ul_template.ul.appendChild(entry_object.li);
 
 	if (!match.payload) {
 	    entry_object.payload.textContent = "(none)";
-	    for (const key of ["chbx", "br", "triangle", "unroll"])
+	    for (const key of ["chbx", "triangle", "unroll"])
 		entry_object[key].remove();
 	    continue;
 	}
 
-	entry_object.component.textContent = nice_name(...match.payload);
+	entry_object.payload.textContent = nice_name(...match.payload);
 
 	const install_cb = () => install_clicked(entry_object);
 	entry_object.btn.addEventListener("click", install_cb);
@@ -544,7 +552,7 @@ async function main()
 {
     storage = await get_remote_storage();
     import_frame = await get_import_frame();
-    import_frame.onclose = () => show_install_chbx.checked = false;
+    import_frame.onclose = () => show_queried_view_radio.checked = true;
     show_page_activity_info();
 }
 
diff --git a/html/import_frame.html b/html/import_frame.html
index 0511e6c..835977d 100644
--- a/html/import_frame.html
+++ b/html/import_frame.html
@@ -5,7 +5,6 @@
     <span></span>
   </li>
 </template>
-<h2> Settings import </h2>
 <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>
diff --git a/html/options.html b/html/options.html
index e0c3c23..13a8973 100644
--- a/html/options.html
+++ b/html/options.html
@@ -9,11 +9,9 @@
     <title>Hachette options</title>
     <link type="text/css" rel="stylesheet" href="reset.css" />
     <link type="text/css" rel="stylesheet" href="base.css" />
+    <link type="text/css" rel="stylesheet" href="table.css" />
     <style>
       body {
-	  background-color: #f0f0f0;
-	  color: #555;
-	  overflow: auto;
 	  width: 100%;
       }
 
@@ -37,6 +35,10 @@
 	  font-size: 130%;
 	  padding: 10px;
 	  display: inline-block;
+	  cursor: pointer;
+      }
+
+      #tab_heads {
 	  -moz-user-select: none;
 	  user-select: none;
       }
@@ -49,13 +51,6 @@
 	  border-radius: 0;
       }
 
-      #tab_heads::after {
-	  display: block;
-	  height: 8px;
-	  content: "";
-	  background: linear-gradient(#555, transparent);
-      }
-
       div.tab {
 	  min-width: 50vw;
 	  width: fit-content;
@@ -86,77 +81,36 @@
 	  width: fit-content;
       }
 
-      div.ul_container {
-	  background-color: #f0f0f0;
-	  width: -moz-fit-content;
-	  width: fit-content;
-	  margin: 6px 0;
-      }
-
-      div.ul_container::after, div.ul_container::before {
-	  display: block;
-	  height: 6px;
-	  content: "";
-	  background: linear-gradient(transparent, #555);
-      }
-
-      div.ul_container::after {
-	  background: linear-gradient(#555, transparent);
-      }
-
-      .work_li div.ul_container::before {
+      .work_li .table_wrapper::before {
 	  background: linear-gradient(#e0f0f0, #555);
       }
 
-      .work_li div.ul_container::after {
+      .work_li .table_wrapper::after {
 	  background: linear-gradient(#555, #e0f0f0);
       }
 
-      div.ul_container>.always_scrollbar{
+      .table_wrapper>.always_scrollbar{
 	  border-left: solid #454 8px;
 	  max-height: 80vh;
 	  overflow-y: scroll;
       }
 
-      div.ul_container table {
-	  border-collapse: unset;
-      }
-
-      div.ul_container, div.ul_container>*, div.ul_container table>tbody {
-	  width: -moz-min-content;
-	  width: min-content;
-      }
-
-      div.ul_container div.ul_container>.always_scrollbar,
-      .popup_frame div.ul_container>.always_scrollbar {
+      .table_wrapper .table_wrapper>.always_scrollbar,
+      .popup_frame .table_wrapper>.always_scrollbar {
 	  max-height: 60vh;
       }
 
-      .popup_frame div.ul_container table {
+      .popup_frame .table_wrapper table {
 	  min-width: 30vw;
       }
 
-      .popup_frame div.ul_container {
+      .popup_frame .table_wrapper {
 	  margin: 0 auto;
       }
 
-      tr:nth-child(odd) {
-	  background-color: #e5e5e5;
-      }
-
-      td {
-	  vertical-align: middle;
-	  min-width: fit-content;
-	  min-width: -moz-fit-content;
-	  width: 1%;
-      }
-
       tr>td:first-child {
-	  padding: 3px 10px 6px;
 	  max-width: 70vw;
 	  overflow: hidden;
-	  width: 100%;
-	  white-space: nowrap;
       }
 
       tr.work_li>td:first-child {
@@ -198,14 +152,6 @@
 	  min-width: 70vw;
 	  resize: none;
       }
-
-      td>div.button {
-	  margin-right: 4px;
-      }
-
-      input[type="radio"]:not(:checked)+.import_window_content {
-	  display: none;
-      }
     </style>
   </head>
   <body>
@@ -239,7 +185,7 @@
     <input type="radio" name="tabs" id="show_pages" checked></input>
     <input type="radio" name="tabs" id="show_bags"></input>
     <input type="radio" name="tabs" id="show_scripts"></input>
-    <div id="tab_heads">
+    <div id="tab_heads" class="has_bottom_line">
       <label for="show_repos" id="repos_lbl"> Repos </label>
       <label for="show_pages" id="pages_lbl"> Pages </label>
       <label for="show_bags" id="bags_lbl"> Bags </label>
@@ -247,7 +193,7 @@
       <button id="import_but" style="margin-left: 40px;"> Import </button>
     </div>
     <div id="repos" class="tab">
-      <div class="ul_container">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	<div>
 	  <table>
 	    <tbody id="repos_ul">
@@ -270,7 +216,7 @@
       <button id="add_repo_but" type="button"> Add repository </button>
     </div>
     <div id="pages" class="tab">
-      <div class="ul_container">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	<div>
 	  <table>
 	    <tbody id="pages_ul">
@@ -304,7 +250,7 @@
       <button id="add_page_but" type="button"> Add page </button>
     </div>
     <div id="bags" class="tab">
-      <div class="ul_container">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	<div>
 	  <table>
 	    <tbody id="bags_ul">
@@ -313,7 +259,7 @@
 		  <div class="form_grid">
 		    <label for="bag_name_field"> Name: </label>
 		    <input id="bag_name_field"></input>
-		    <div class="ul_container">
+		    <div class="table_wrapper tight_table has_bottom_line has_upper_line">
 		      <div>
 			<table>
 			  <tbody id="bag_components_ul">
@@ -341,7 +287,7 @@
       <button id="add_bag_but" type="button"> Add bag </button>
     </div>
     <div id="scripts" class="tab">
-      <div class="ul_container">
+      <div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	<div>
 	  <table>
 	    <tbody id="scripts_ul">
@@ -375,7 +321,7 @@
 
     <div id="chbx_components_window" class="hide popup" position="absolute">
       <div class="popup_frame">
-	<div class="ul_container">
+	<div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	  <div>
 	    <table>
 	      <tbody id="chbx_components_ul">
@@ -390,7 +336,7 @@
 
     <div id="radio_components_window" class="hide popup" position="absolute">
       <div class="popup_frame">
-	<div class="ul_container">
+	<div class="table_wrapper tight_table has_bottom_line has_upper_line">
 	  <div class="always_scrollbar">
 	    <table>
 	      <tbody id="radio_components_ul">
@@ -411,6 +357,7 @@
 
     <div id="import_window" class="hide popup" position="absolute">
       <div class="popup_frame">
+	<h2> Settings import </h2>
 	<IMPORT html/import_frame.html />
       </div>
     </div>
diff --git a/html/options_main.js b/html/options_main.js
index 8067fe7..03505a5 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -77,8 +77,12 @@ function add_li(prefix, item, at_the_end=false)
 	    break;
 	}
     }
-    if (!li.parentElement)
-	ul.ul.appendChild(li);
+    if (!li.parentElement) {
+	if (ul.work_li !== ul.ul.lastElementChild)
+	    ul.ul.appendChild(li);
+	else
+	    ul.work_li.before(li);
+    }
 
     list_set_scrollbar(ul.ul);
 }
diff --git a/html/table.css b/html/table.css
new file mode 100644
index 0000000..6296f83
--- /dev/null
+++ b/html/table.css
@@ -0,0 +1,46 @@
+.table_wrapper {
+    display: block;
+    background-color: #f0f0f0;
+    margin: 6px 0;
+}
+
+.table_wrapper table {
+    border-collapse: unset;
+    width: 100%;
+}
+
+.table_wrapper.tight_table,
+.table_wrapper.tight_table>*,
+.table_wrapper.tight_table>*>table {
+    width: -moz-min-content;
+    width: min-content;
+}
+
+tr:nth-child(odd) {
+    background-color: #e5e5e5;
+}
+
+td {
+    vertical-align: middle;
+    min-width: fit-content;
+    min-width: -moz-fit-content;
+}
+
+.tight_table td {
+    width: 1%;
+}
+
+td:first-child {
+    padding: 3px 10px 6px;
+    white-space: nowrap;
+}
+
+.tight_table td:first-child {
+    width: 100%;
+}
+
+td>div.button {
+    margin-right: 4px;
+    white-space: nowrap;
+    float: right;
+}
-- 
cgit v1.2.3


From 4b59dced912fb9b50ff041c67f0f72cbbad56b6c Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 1 Sep 2021 14:14:51 +0200
Subject: add styling to settings install(import) dialog

---
 html/base.css           | 19 +++++++++++++
 html/display-panel.html | 27 +++++-------------
 html/display-panel.js   |  1 -
 html/import_frame.html  | 33 +++++++++++++++++-----
 html/import_frame.js    | 74 +++++++++++++++++++++++--------------------------
 html/options.html       | 20 ++++++-------
 html/options_main.js    |  6 +++-
 html/table.css          |  1 -
 8 files changed, 102 insertions(+), 79 deletions(-)

(limited to 'html/import_frame.html')

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 {
-- 
cgit v1.2.3


From 6247f163d3ca89d5570450ac7ac8fd18f73bb74b Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Thu, 2 Sep 2021 18:35:49 +0200
Subject: 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).

---
 background/main.js                |   6 +-
 background/page_actions_server.js |  11 ++--
 build.sh                          |  11 ++++
 common/observable.js              |  28 ++++-----
 common/storage_light.js           | 129 ++++++++++++++++++++++++++++++++++++++
 common/storage_raw.js             |  11 +++-
 content/main.js                   |   2 +-
 content/page_actions.js           |   2 +-
 html/MOZILLA_scrollbar_fix.css    |  46 ++++++++++++++
 html/base.css                     |   8 +++
 html/default_blocking_policy.html |  18 ++++++
 html/default_blocking_policy.js   |  47 ++++++++++++++
 html/display-panel.html           |  24 ++++---
 html/display-panel.js             |   5 +-
 html/import_frame.html            |   7 +++
 html/options.html                 |   1 +
 html/options_main.js              |   3 +
 17 files changed, 322 insertions(+), 37 deletions(-)
 create mode 100644 common/storage_light.js
 create mode 100644 html/MOZILLA_scrollbar_fix.css
 create mode 100644 html/default_blocking_policy.html
 create mode 100644 html/default_blocking_policy.js

(limited to 'html/import_frame.html')

diff --git a/background/main.js b/background/main.js
index 5d6e680..b1c252a 100644
--- a/background/main.js
+++ b/background/main.js
@@ -9,6 +9,7 @@
  * IMPORTS_START
  * IMPORT TYPE_PREFIX
  * IMPORT get_storage
+ * IMPORT light_storage
  * IMPORT start_storage_server
  * IMPORT start_page_actions_server
  * IMPORT browser
@@ -50,6 +51,7 @@ browser.runtime.onInstalled.addListener(init_ext);
 
 
 let storage;
+let policy_observable = {};
 
 function on_headers_received(details)
 {
@@ -58,7 +60,7 @@ function on_headers_received(details)
 	return;
 
     const [pattern, settings] = query_best(storage, details.url);
-    const allow = !!(settings && settings.allow);
+    const allow = !!(settings ? settings.allow : policy_observable.value);
     const nonce = gen_nonce();
     const policy = {allow, url, nonce};
 
@@ -114,6 +116,8 @@ async function start_webRequest_operations()
 	{urls: ["<all_urls>"], types: all_types},
 	extra_opts.concat("requestHeaders")
     );
+
+    policy_observable = await light_storage.observe_var("default_allow");
 }
 
 start_webRequest_operations();
diff --git a/background/page_actions_server.js b/background/page_actions_server.js
index 58a0073..b0db5f5 100644
--- a/background/page_actions_server.js
+++ b/background/page_actions_server.js
@@ -8,6 +8,7 @@
 /*
  * IMPORTS_START
  * IMPORT get_storage
+ * IMPORT light_storage
  * IMPORT TYPE_PREFIX
  * IMPORT CONNECTION_TYPE
  * IMPORT browser
@@ -20,17 +21,17 @@
 
 var storage;
 var handler;
+let policy_observable;
 
 function send_actions(url, port)
 {
-    const [pattern, settings] = query_best(storage, url);
+    let [pattern, settings] = query_best(storage, url);
+    if (!settings)
+	settings = {allow: policy_observable && policy_observable.value};
     const repos = storage.get_all(TYPE_PREFIX.REPO);
 
     port.postMessage(["settings", [pattern, settings, repos]]);
 
-    if (settings === undefined)
-	return;
-
     let components = settings.components;
     let processed_bags = new Set();
 
@@ -127,6 +128,8 @@ async function start_page_actions_server()
     storage = await get_storage();
 
     listen_for_connection(CONNECTION_TYPE.PAGE_ACTIONS, new_connection);
+
+    policy_observable = await light_storage.observe_var("default_allow");
 }
 
 /*
diff --git a/build.sh b/build.sh
index 31f3dec..0659ed1 100755
--- a/build.sh
+++ b/build.sh
@@ -291,6 +291,17 @@ EOF
     cp html/*.css $BUILDDIR/html
     mkdir $BUILDDIR/icons
     cp icons/*.png $BUILDDIR/icons
+
+    if [ "$BROWSER" = "chromium" ]; then
+	for MOZILLA_FILE in $(find $BUILDDIR -name "MOZILLA_*"); do
+	    echo > "$MOZILLA_FILE"
+	done
+    fi
+    if [ "$BROWSER" = "mozilla" ]; then
+	for CHROMIUM_FILE in $(find $BUILDDIR -name "CHROMIUM_*"); do
+	    echo > "$CHROMIUM_FILE"
+	done
+    fi
 }
 
 main "$@"
diff --git a/common/observable.js b/common/observable.js
index 1fb0b0a..02f1c1b 100644
--- a/common/observable.js
+++ b/common/observable.js
@@ -6,28 +6,22 @@
  * Redistribution terms are gathered in the `copyright' file.
  */
 
-function make()
-{
-    return new Set();
-}
+const make = (value=undefined) => ({value, listeners: new Set()});
+const subscribe = (observable, cb) => observable.listeners.add(cb);
+const unsubscribe = (observable, cb) => observable.listeners.delete(cb);
 
-function subscribe(observable, cb)
-{
-    observable.add(cb);
-}
-
-function unsubscribe(observable, cb)
-{
-    observable.delete(cb);
-}
+const silent_set = (observable, value) => observable.value = value;
+const broadcast = (observable, ...values) =>
+      observable.listeners.forEach(cb => cb(...values));
 
-function broadcast(observable, event)
+function set(observable, value)
 {
-    for (const callback of observable)
-	callback(event);
+    const old_value = observable.value;
+    silent_set(observable, value);
+    broadcast(observable, value, old_value);
 }
 
-const observables = {make, subscribe, unsubscribe, broadcast};
+const observables = {make, subscribe, unsubscribe, broadcast, silent_set, set};
 
 /*
  * EXPORTS_START
diff --git a/common/storage_light.js b/common/storage_light.js
new file mode 100644
index 0000000..067bf0c
--- /dev/null
+++ b/common/storage_light.js
@@ -0,0 +1,129 @@
+/**
+ * part of Hachette
+ * Storage manager, lighter than the previous one.
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+/*
+ * IMPORTS_START
+ * IMPORT TYPE_PREFIX
+ * IMPORT raw_storage
+ * IMPORT is_mozilla
+ * IMPORT observables
+ */
+
+const reg_spec = new Set(["\\", "[", "]", "(", ")", "{", "}", ".", "*", "+"]);
+const escape_reg_special = c => reg_spec.has(c) ? "\\" + c : c;
+
+function make_regex(name)
+{
+    return new RegExp(`^${name.split("").map(escape_reg_special).join("")}\$`);
+}
+
+const listeners_by_callback = new Map();
+
+function listen(callback, prefix, name)
+{
+    let by_prefix = listeners_by_callback.get(callback);
+    if (!by_prefix) {
+	by_prefix = new Map();
+	listeners_by_callback.set(callback, by_prefix);
+    }
+
+    let by_name = by_prefix.get(prefix);
+    if (!by_name) {
+	by_name = new Map();
+	by_prefix.set(prefix, by_name);
+    }
+
+    let name_reg = by_name.get(name);
+    if (!name_reg) {
+	name_reg = name.test ? name : make_regex(name);
+	by_name.set(name, name_reg);
+    }
+}
+
+function no_listen(callback, prefix, name)
+{
+    const by_prefix = listeners_by_callback.get(callback);
+    if (!by_prefix)
+	return;
+
+    const by_name = by_prefix.get(prefix);
+    if (!by_name)
+	return;
+
+    const name_reg = by_name.get(name);
+    if (!name_reg)
+	return;
+
+    by_name.delete(name);
+
+    if (by_name.size === 0)
+	by_prefix.delete(prefix);
+
+    if (by_prefix.size === 0)
+	listeners_by_callback.delete(callback);
+}
+
+function storage_change_callback(changes, area)
+{
+    if (is_mozilla && area !== "local")
+    {console.log("area", area);return;}
+
+    for (const item of Object.keys(changes)) {
+	for (const [callback, by_prefix] of listeners_by_callback.entries()) {
+	    const by_name = by_prefix.get(item[0]);
+	    if (!by_name)
+		continue;
+
+	    for (const reg of by_name.values()) {
+		if (!reg.test(item.substring(1)))
+		    continue;
+
+		try {
+		    callback(item, changes[item]);
+		} catch(e) {
+		    console.error(e);
+		}
+	    }
+	}
+    }
+}
+
+raw_storage.listen(storage_change_callback);
+
+
+const created_observables = new Map();
+
+async function observe(prefix, name)
+{
+    const observable = observables.make();
+    const callback = (it, ch) => observables.set(observable, ch.newValue);
+    listen(callback, prefix, name);
+    created_observables.set(observable, [callback, prefix, name]);
+    observables.silent_set(observable, await raw_storage.get(prefix + name));
+
+    return observable;
+}
+
+const observe_var = name => observe(TYPE_PREFIX.VAR, name);
+
+function no_observe(observable)
+{
+    no_listen(...created_observables.get(observable) || []);
+    created_observables.delete(observable);
+}
+
+const light_storage = {};
+Object.assign(light_storage, raw_storage);
+Object.assign(light_storage,
+	      {listen, no_listen, observe, observe_var, no_observe});
+
+/*
+ * EXPORTS_START
+ * EXPORT light_storage
+ * EXPORTS_END
+ */
diff --git a/common/storage_raw.js b/common/storage_raw.js
index 9ce3980..4c02ee4 100644
--- a/common/storage_raw.js
+++ b/common/storage_raw.js
@@ -26,8 +26,9 @@ async function get(key)
 
 async function set(key_or_object, value)
 {
-    return browser.storage.local.set(typeof key_or_object === "object" ?
-				     key_or_object : {[key]: value});
+    const arg = typeof key_or_object === "object" ?
+	  key_or_object : {[key_or_object]: value};
+    return browser.storage.local.set(arg);
 }
 
 async function set_var(name, value)
@@ -40,7 +41,11 @@ async function get_var(name)
     return get(TYPE_PREFIX.VAR + name);
 }
 
-const raw_storage = {get, set, get_var, set_var};
+const on_changed = browser.storage.onChanged || browser.storage.local.onChanged;
+const listen = cb => on_changed.addListener(cb);
+const no_listen = cb => on_changed.removeListener(cb);
+
+const raw_storage = {get, set, get_var, set_var, listen, no_listen};
 
 /*
  * EXPORTS_START
diff --git a/content/main.js b/content/main.js
index 6c97350..17b6b98 100644
--- a/content/main.js
+++ b/content/main.js
@@ -123,7 +123,7 @@ if (!is_privileged_url(document.URL)) {
     }
 
     if (!policy) {
-	console.warn("Using default policy!");
+	console.warn("Using fallback policy!");
 	policy = {allow: false, nonce: gen_nonce()};
     }
 
diff --git a/content/page_actions.js b/content/page_actions.js
index 6a6b3a0..bf76790 100644
--- a/content/page_actions.js
+++ b/content/page_actions.js
@@ -36,7 +36,7 @@ function handle_message(message)
     }
     if (action === "settings") {
 	report_settings(data);
-	policy_received_callback({url, allow: !!data[1] && data[1].allow});
+	policy_received_callback({url, allow: data[1].allow});
     }
 }
 
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) {
-- 
cgit v1.2.3