From 5c68551800e477db41ae6fe3a318b2ff2d7a9cb1 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 21 Jul 2021 17:42:21 +0200
Subject: store repository URLs in settings

---
 html/options.html    | 18 ++++++++++++++++++
 html/options_main.js | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 5 deletions(-)

(limited to 'html')

diff --git a/html/options.html b/html/options.html
index bfb9e52..a10b919 100644
--- a/html/options.html
+++ b/html/options.html
@@ -33,12 +33,14 @@
       }
 
       /* tabbed view */
+      #show_repos:not(:checked) ~ #repos,
       #show_pages:not(:checked) ~ #pages,
       #show_bags:not(:checked) ~ #bags,
       #show_scripts:not(:checked) ~ #scripts {
 	  display: none;
       }
 
+      #show_repos:checked ~ #repos_lbl,
       #show_pages:checked ~ #pages_lbl,
       #show_bags:checked ~ #bags_lbl,
       #show_scripts:checked ~ #scripts_lbl {
@@ -124,9 +126,12 @@
     </div>
 
     <!-- Mind the show_*s ids below - their format is assumed in js code -->
+    <input type="radio" name="tabs" id="show_repos"></input>
     <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>
+    <label for="show_repos" id="repos_lbl"
+	   class="tab_head"> Repos </label>
     <label for="show_pages" id="pages_lbl"
 	   class="tab_head"> Pages </label>
     <label for="show_bags" id="bags_lbl"
@@ -134,6 +139,19 @@
     <label for="show_scripts" id="scripts_lbl"
 	   class="tab_head"> Scripts </label>
 
+    <div id="repos">
+      <ul id="repos_ul">
+	<li id="work_repo_li" class="hide">
+	  <label for="repo_url_field">URL: </label>
+	  <input id="repo_url_field"></input>
+	  <br/>
+	  <button id="save_repo_but" type="button"> Save </button>
+	  <button id="discard_repo_but" type="button"> Cancel </button>
+	</li>
+      </ul>
+      <button id="add_repo_but" type="button"> Add repository </button>
+    </div>
+
     <div id="pages">
       <ul id="pages_ul">
 	<li id="work_page_li" class="hide">
diff --git a/html/options_main.js b/html/options_main.js
index e1e6cbe..026b9ba 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -38,7 +38,7 @@ function item_li_id(prefix, item)
     return `li_${prefix}_${item}`;
 }
 
-/* Insert into list of bags/pages/scripts */
+/* Insert into list of bags/pages/scripts/repos */
 function add_li(prefix, item, at_the_end=false)
 {
     let ul = ul_by_prefix[prefix];
@@ -58,6 +58,8 @@ function add_li(prefix, item, at_the_end=false)
     let export_button = remove_button.nextElementSibling;
     export_button.addEventListener("click",
 				   () => export_item(prefix, item));
+    if (prefix === TYPE_PREFIX.REPO)
+	export_button.remove();
 
     if (!at_the_end) {
 	for (let element of ul.ul.children) {
@@ -89,7 +91,7 @@ function radio_li_id(prefix, item)
 
 function add_chbx_li(prefix, name)
 {
-    if (prefix === TYPE_PREFIX.PAGE)
+    if (![TYPE_PREFIX.BAG, TYPE_PREFIX.SCRIPT].includes(prefix))
 	return;
 
     let li = chbx_component_li_template.cloneNode(true);
@@ -109,7 +111,7 @@ var radio_component_none_li = by_id("radio_component_none_li");
 
 function add_radio_li(prefix, name)
 {
-    if (prefix === TYPE_PREFIX.PAGE)
+    if (![TYPE_PREFIX.BAG, TYPE_PREFIX.SCRIPT].includes(prefix))
 	return;
 
     let li = radio_component_li_template.cloneNode(true);
@@ -125,6 +127,18 @@ function add_radio_li(prefix, name)
     radio_components_ul.insertBefore(li, radio_component_none_li);
 }
 
+/* Used to reset edited repo. */
+function reset_work_repo_li(ul, item, _)
+{
+    ul.work_name_input.value = maybe_string(item);
+}
+
+/* Used to get repo data for saving */
+function work_repo_li_data(ul)
+{
+    return [ul.work_name_input.value, {}];
+}
+
 const page_payload_span = by_id("page_payload");
 
 function set_page_components(components)
@@ -461,6 +475,15 @@ const UL_STATE = {
 };
 
 const ul_by_prefix = {
+    [TYPE_PREFIX.REPO] : {
+	ul : by_id("repos_ul"),
+	work_li : by_id("work_repo_li"),
+	work_name_input : by_id("repo_url_field"),
+	reset_work_li : reset_work_repo_li,
+	get_work_li_data : work_repo_li_data,
+	state : UL_STATE.IDLE,
+	edited_item : undefined,
+    },
     [TYPE_PREFIX.PAGE] : {
 	ul : by_id("pages_ul"),
 	work_li : by_id("work_page_li"),
@@ -727,7 +750,7 @@ async function main()
 	discard_but.addEventListener("click", () => cancel_work(prefix));
 	save_but.addEventListener("click", () => save_work(prefix));
 
-	if (prefix === TYPE_PREFIX.SCRIPT)
+	if ([TYPE_PREFIX.REPO, TYPE_PREFIX.SCRIPT].includes(prefix))
 	    continue;
 
 	let ul = ul_by_prefix[prefix];
@@ -772,7 +795,7 @@ function handle_change(change)
 
     let uls_creators = [[ul.ul, item_li_id]];
 
-    if (change.prefix !== TYPE_PREFIX.PAGE) {
+    if ([TYPE_PREFIX.BAG, TYPE_PREFIX.SCRIPT].includes(change.prefix)) {
 	uls_creators.push([chbx_components_ul, chbx_li_id]);
 	uls_creators.push([radio_components_ul, radio_li_id]);
     }
-- 
cgit v1.2.3


From c483ae19e110ef5c1e539883a38fbc79b3dd4e4e Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 21 Jul 2021 22:00:20 +0200
Subject: add ability to query page content from repo and display it in the
 popup

---
 background/page_actions_server.js | 27 ++-----------
 common/ajax.js                    | 39 +++++++++++++++++++
 content/activity_info_server.js   | 23 +++++++++++
 content/main.js                   |  3 ++
 content/repo_query.js             | 80 +++++++++++++++++++++++++++++++++++++++
 html/display-panel.html           | 23 ++++++++---
 html/display-panel.js             | 35 +++++++++++++++--
 7 files changed, 197 insertions(+), 33 deletions(-)
 create mode 100644 common/ajax.js
 create mode 100644 content/repo_query.js

(limited to 'html')

diff --git a/background/page_actions_server.js b/background/page_actions_server.js
index c6800a0..a7a44c1 100644
--- a/background/page_actions_server.js
+++ b/background/page_actions_server.js
@@ -14,6 +14,7 @@
  * IMPORT listen_for_connection
  * IMPORT sha256
  * IMPORT get_query_best
+ * IMPORT make_ajax_request
  * IMPORTS_END
  */
 
@@ -23,9 +24,10 @@ var handler;
 
 function send_actions(url, port)
 {
-    let [pattern, settings] = query_best(url);
+    const [pattern, settings] = query_best(url);
+    const repos = storage.get_all(TYPE_PREFIX.REPO);
 
-    port.postMessage(["settings", [pattern, settings]]);
+    port.postMessage(["settings", [pattern, settings, repos]]);
 
     if (settings === undefined)
 	return;
@@ -85,27 +87,6 @@ async function get_script_text(script_name)
     }
 }
 
-function ajax_callback()
-{
-    if (this.readyState == 4)
-	this.resolve_callback(this);
-}
-
-function initiate_ajax_request(resolve, method, url)
-{
-    var xhttp = new XMLHttpRequest();
-    xhttp.resolve_callback = resolve;
-    xhttp.onreadystatechange = ajax_callback;
-    xhttp.open(method, url, true);
-    xhttp.send();
-}
-
-function make_ajax_request(method, url)
-{
-    return new Promise((resolve, reject) =>
-		       initiate_ajax_request(resolve, method, url));
-}
-
 async function fetch_remote_script(script_data)
 {
     try {
diff --git a/common/ajax.js b/common/ajax.js
new file mode 100644
index 0000000..8082bbe
--- /dev/null
+++ b/common/ajax.js
@@ -0,0 +1,39 @@
+/**
+ * part of Hachette
+ * Wrapping XMLHttpRequest into a Promise.
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+function ajax_callback()
+{
+    if (this.readyState == 4)
+	this.resolve_callback(this);
+}
+
+function initiate_ajax_request(resolve, reject, method, url)
+{
+    const xhttp = new XMLHttpRequest();
+    xhttp.resolve_callback = resolve;
+    xhttp.onreadystatechange = ajax_callback;
+    xhttp.open(method, url, true);
+    try {
+	xhttp.send();
+    } catch(e) {
+	console.log(e);
+	setTimeout(reject, 0);
+    }
+}
+
+function make_ajax_request(method, url)
+{
+    return new Promise((resolve, reject) =>
+		       initiate_ajax_request(resolve, reject, method, url));
+}
+
+/*
+ * EXPORTS_START
+ * EXPORT make_ajax_request
+ * EXPORTS_END
+ */
diff --git a/content/activity_info_server.js b/content/activity_info_server.js
index 8435377..a1384e9 100644
--- a/content/activity_info_server.js
+++ b/content/activity_info_server.js
@@ -11,6 +11,8 @@
  * IMPORTS_START
  * IMPORT listen_for_connection
  * IMPORT CONNECTION_TYPE
+ * IMPORT set_repo_query_repos
+ * IMPORT set_repo_query_callback
  * IMPORTS_END
  */
 
@@ -33,9 +35,22 @@ function report_script(script_data)
 
 function report_settings(settings)
 {
+    const [pattern, settings_data, repos] = settings;
+    set_repo_query_repos(repos);
+
     report_activity("settings", settings);
 }
 
+function report_repo_query_result(result)
+{
+    report_activity("repo_query_result", result);
+}
+
+function trigger_repo_query()
+{
+    set_repo_query_callback(report_repo_query_result);
+}
+
 function new_connection(port)
 {
     console.log("new activity info connection!");
@@ -44,6 +59,14 @@ function new_connection(port)
 
     for (const activity of activities)
 	port.postMessage(activity);
+
+    /*
+     * So far the only thing we expect to receive is repo query order. Once more
+     * possibilities arrive, we will need to complicate this listener.
+     */
+    port.onMessage.addListener(trigger_repo_query);
+
+    port.onDisconnect.addListener(() => ports.delete(port));
 }
 
 function start_activity_info_server()
diff --git a/content/main.js b/content/main.js
index 8f8375e..437a32b 100644
--- a/content/main.js
+++ b/content/main.js
@@ -20,6 +20,7 @@
  * IMPORT is_chrome
  * IMPORT is_mozilla
  * IMPORT start_activity_info_server
+ * IMPORT set_repo_query_url
  * IMPORTS_END
  */
 
@@ -129,4 +130,6 @@ if (!is_privileged_url(document.URL)) {
     }
 
     start_activity_info_server();
+
+    set_repo_query_url(document.URL);
 }
diff --git a/content/repo_query.js b/content/repo_query.js
new file mode 100644
index 0000000..b8c8ed9
--- /dev/null
+++ b/content/repo_query.js
@@ -0,0 +1,80 @@
+/**
+ * part of Hachette
+ * Getting available content for site from remote repositories.
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+/*
+ * IMPORTS_START
+ * IMPORT make_ajax_request
+ * IMPORTS_END
+ */
+
+var query_started = false;
+
+var url = undefined;
+var repos = undefined;
+var callback = undefined;
+
+async function query(repo)
+{
+    const [repo_url, data] = repo;
+
+    let response = "Query failed";
+    const query_url = `${repo_url}/query?n=${encodeURIComponent(url)}`;
+
+    try {
+	let xhttp = await make_ajax_request("GET", query_url);
+	if (xhttp.status === 200)
+	    response = xhttp.responseText;
+	console.log(xhttp);
+    } catch (e) {
+	console.log(e);
+    }
+
+    callback([repo_url, response]);
+}
+
+function start_query()
+{
+    if (query_started || !url || !repos || !callback)
+	return;
+
+    query_started = true;
+
+    console.log(`about to query ${url} from ${repos}`);
+
+    for (const repo of repos)
+	query(repo);
+}
+
+function set_repo_query_url(_url)
+{
+    url = _url;
+
+    start_query();
+}
+
+function set_repo_query_repos(_repos)
+{
+    repos = _repos;
+
+    start_query();
+}
+
+function set_repo_query_callback(_callback)
+{
+    callback = _callback;
+
+    start_query();
+}
+
+/*
+ * EXPORTS_START
+ * EXPORT set_repo_query_url
+ * EXPORT set_repo_query_repos
+ * EXPORT set_repo_query_callback
+ * EXPORTS_END
+ */
diff --git a/html/display-panel.html b/html/display-panel.html
index 9b6d619..d8d7f5d 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -21,6 +21,14 @@
 	  display: none;
       }
 
+      .show_hide_next2:not(:checked)+* {
+	  display: none;
+      }
+
+      .show_hide_next2:checked+*+* {
+	  display: none;
+      }
+
       .hide {
 	  display: none;
       }
@@ -34,10 +42,6 @@
       #container_for_injected>#none_injected:not(:last-child) {
 	  display: none;
       }
-
-      input#connected_chbx:checked+div+h3 {
-	  display: none;
-      }
     </style>
   </head>
   <body>
@@ -65,12 +69,19 @@
       </label>
       <ul id="possible_patterns"></ul>
 
-      <input id="connected_chbx" type="checkbox" class="show_next"></input>
+      <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
       <div>
 	<h3>
 	  Matched pattern: <span id="pattern">...</span>
 	  <button id="view_pattern" class="hide">
-	  View in settings
+	    View in settings
+	  </button>
+	  <input id="query_started_chbx" type="checkbox" class="show_hide_next2"></input>
+	  <div id="container_for_repo_responses">
+	    <h3>Queried from repositories</h3>
+	  </div>
+	  <button id="query_pattern">
+	    Search for matching patterns
 	  </button>
 	</h3>
 	<h3>
diff --git a/html/display-panel.js b/html/display-panel.js
index 650c234..1693182 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -144,6 +144,7 @@ function handle_page_info(message)
 }
 
 const connected_chbx = by_id("connected_chbx");
+const query_pattern_but = by_id("query_pattern");
 
 function try_to_connect(tab_id)
 {
@@ -151,21 +152,35 @@ function try_to_connect(tab_id)
     const connect_info = {name: CONNECTION_TYPE.ACTIVITY_INFO, frameId: 0};
     const port = browser.tabs.connect(tab_id, connect_info);
 
-    port.onDisconnect.addListener(port => handle_disconnect(tab_id));
+    const button_cb = (e) => start_querying_repos(port);
+
+    port.onDisconnect.addListener(port => handle_disconnect(tab_id, button_cb));
     port.onMessage.addListener(handle_activity_report);
 
+    query_pattern_but.addEventListener("click", button_cb);
+
     if (is_mozilla)
 	setTimeout(() => monitor_connecting(port, tab_id), 1000);
 }
 
+const query_started_chbx = by_id("query_started_chbx");
+
+function start_querying_repos(port)
+{
+    port.postMessage("dummy (trigger repo querying)");
+    query_started_chbx.checked = true;
+}
+
 const loading_chbx = by_id("loading_chbx");
 
-function handle_disconnect(tab_id)
+function handle_disconnect(tab_id, button_cb)
 {
+    query_pattern_but.removeEventListener("click", button_cb);
+
     if (is_chrome && !browser.runtime.lastError)
 	return;
 
-    /* return if there was no connection initialization failure */
+    /* return if error was not during connection initialization */
     if (connected_chbx.checked)
 	return;
 
@@ -189,6 +204,7 @@ const blocked_span = by_id("blocked");
 const payload_span = by_id("payload");
 const view_payload_but = by_id("view_payload");
 const container_for_injected = by_id("container_for_injected");
+const container_for_repo_responses = by_id("container_for_repo_responses");
 
 function handle_activity_report(message)
 {
@@ -197,7 +213,7 @@ function handle_activity_report(message)
     const [type, data] = message;
 
     if (type === "settings") {
-	let [pattern, settings] = data;
+	let [pattern, settings, repos] = data;
 
 	settings = settings || {};
 	blocked_span.textContent = settings.allow ? "no" : "yes";
@@ -231,6 +247,17 @@ function handle_activity_report(message)
 	container_for_injected.appendChild(h4);
 	container_for_injected.appendChild(pre);
     }
+    if (type === "repo_query_result") {
+	const [repo_url, response_text] = data;
+
+	const h4 = document.createElement("h4");
+	const pre = document.createElement("pre");
+	h4.textContent = repo_url;
+	pre.textContent = response_text;
+
+	container_for_repo_responses.appendChild(h4);
+	container_for_repo_responses.appendChild(pre);
+    }
 }
 
 by_id("settings_but")
-- 
cgit v1.2.3


From 2fa41a54acfa5e25b5ccad5b3c91210cc42ce00d Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Tue, 27 Jul 2021 11:41:43 +0200
Subject: validate settings on import

---
 common/sanitize_JSON.js | 18 +++---------------
 html/options_main.js    | 44 ++++++++++++++++++++++++++++++--------------
 2 files changed, 33 insertions(+), 29 deletions(-)

(limited to 'html')

diff --git a/common/sanitize_JSON.js b/common/sanitize_JSON.js
index 3fc5007..8268d3e 100644
--- a/common/sanitize_JSON.js
+++ b/common/sanitize_JSON.js
@@ -31,7 +31,6 @@ function error_message(cause)
 
 function sanitize_unknown(schema, item)
 {
-    console.log(`sanitize_unknown ${JSON.stringify(schema)}`);
     let error_msg = undefined;
     let schema_options = [];
     let has_default = false;
@@ -89,9 +88,7 @@ function sanitize_unknown(schema, item)
 
 function sanitize_unknown_no_alternatives(schema, item)
 {
-    console.log(`sanitize_unknown_no_alternatives ${JSON.stringify(schema)}`);
     for (const [schema_check, item_check, sanitizer, type_name] of checks) {
-	console.log(`checking ${type_name}`);
 	if (schema_check(schema)) {
 	    if (item_check(item))
 		return sanitizer(schema, item);
@@ -205,7 +202,6 @@ function sanitize_genobj(schema, object)
 
 function sanitize_array(schema, array)
 {
-    console.log(`sanitize_array ${JSON.stringify(schema)}`);
     let min_length = 0;
     let max_length = Infinity;
     let repeat_length = 1;
@@ -231,14 +227,14 @@ function sanitize_array(schema, array)
     }
     if (["repeat", "repeatfull"].includes(schema[schema.length - 1])) {
 	var repeat_directive = schema.pop();
-	repeat = schema.splice(schema.length - repeat_length);
+	var repeat = schema.splice(schema.length - repeat_length);
     } else if (schema.length !== array.length) {
-	throw error_message(`does not not have exactly ${schema.length} items`);
+	throw error_message(`does not have exactly ${schema.length} items`);
     }
 
     if (repeat_directive === "repeatfull" &&
 	(array.length - schema.length) % repeat_length !== 0)
-	throw error_message(`does not not contain a full number of item group repetitions`);
+	throw error_message(`does not contain a full number of item group repetitions`);
 
     if (array.length < min_length)
 	throw error_message(`has less than ${min_length} element${min_length === 1 ? "" : "s"}`);
@@ -246,8 +242,6 @@ function sanitize_array(schema, array)
     if (array.length > max_length)
 	throw error_message(`has more than ${max_length} element${max_length === 1 ? "" : "s"}`);
 
-    console.log(schema, repeat);
-
     for (const item of array) {
 	if (i >= schema.length) {
 	    i = 0;
@@ -268,7 +262,6 @@ function sanitize_array(schema, array)
 
 function sanitize_regex(schema, string)
 {
-    console.log(`sanitize_regex ${schema}`);
     if (schema.test(string))
 	return string;
 
@@ -279,7 +272,6 @@ const string_spec_regex = /^string(:(.*))?$/;
 
 function sanitize_string(schema, string)
 {
-    console.log(`sanitize_string ${JSON.stringify(schema)}`);
     const regex = string_spec_regex.exec(schema)[2];
 
     if (regex === undefined)
@@ -290,7 +282,6 @@ function sanitize_string(schema, string)
 
 function sanitize_object(schema, object)
 {
-    console.log(`sanitize_object ${JSON.stringify(schema)}`);
     const result = {};
 
     for (let [key, entry_schema] of Object.entries(schema)) {
@@ -304,7 +295,6 @@ function sanitize_object(schema, object)
 
 function sanitize_object_entry(result, key, entry_schema, object)
 {
-    console.log(`sanitize_object_entry ${JSON.stringify(entry_schema)}`);
     let optional = false;
     let has_default = false;
     let _default = undefined;
@@ -347,7 +337,6 @@ function sanitize_object_entry(result, key, entry_schema, object)
 
 function take_literal(schema, item)
 {
-    console.log(`take_literal ${JSON.stringify(schema)}`);
     return item;
 }
 
@@ -357,7 +346,6 @@ function take_literal(schema, item)
  */
 function discard(schema, item)
 {
-    console.log(`discard ${JSON.stringify(schema)}`);
     return discard;
 }
 
diff --git a/html/options_main.js b/html/options_main.js
index 026b9ba..6aed8bb 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -12,6 +12,7 @@
  * IMPORT TYPE_NAME
  * IMPORT list_prefixes
  * IMPORT nice_name
+ * IMPORT parse_json_with_schema
  * IMPORTS_END
  */
 
@@ -223,6 +224,7 @@ function reset_work_bag_li(ul, item, components)
     ul.work_li.insertBefore(bag_components_ul, old_components_ul);
     ul.work_li.removeChild(old_components_ul);
 
+    console.log("bag components", components);
     add_bag_components(components);
 }
 
@@ -543,6 +545,32 @@ function read_file(file)
 		       _read_file(file, resolve, reject));
 }
 
+const url_regex = /^[a-z0-9]+:\/\/[^/]+\.[^/]{2}(\/[^?#]*)?$/;
+const sha256_regex = /^[0-9a-f]{64}$/;
+const component_schema = [
+    new RegExp(`^[${TYPE_PREFIX.SCRIPT}${TYPE_PREFIX.BAG}]$`),
+    /.+/
+];
+
+const settings_schema = [
+    [{}, "matchentry", "minentries", 1,
+     new RegExp(`^${TYPE_PREFIX.SCRIPT}`), {
+	 /* script data */
+	 "url":    ["optional", url_regex],
+	 "sha256": ["optional", sha256_regex],
+	 "text":   ["optional", "string"]
+     },
+     new RegExp(`^${TYPE_PREFIX.BAG}`), [
+	 "optional",
+	 [component_schema, "repeat"],
+	 "default", undefined
+     ],
+     new RegExp(`^${TYPE_PREFIX.PAGE}`), {
+	 /* page data */
+	 "components": ["optional", component_schema]
+     }], "repeat"
+]
+
 async function import_from_file(event)
 {
     let files = event.target.files;
@@ -555,30 +583,18 @@ async function import_from_file(event)
     let result = undefined;
 
     try {
-	result = JSON.parse(await read_file(files[0]));
+	result = parse_json_with_schema(settings_schema,
+					await read_file(files[0]));
     } catch(e) {
 	bad_file_errormsg.textContent = "" + e;
 	import_failed_radio.checked = true;
 	return;
     }
 
-    let errormsg = validate_settings(result);
-    if (errormsg !== false) {
-	bad_file_errormsg.textContent = errormsg;
-	import_failed_radio.checked = true;
-	return;
-    }
-
     populate_import_list(result);
     import_selection_radio.checked = true;
 }
 
-function validate_settings(settings)
-{
-    // TODO
-    return false;
-}
-
 function import_li_id(prefix, item)
 {
     return `ili_${prefix}_${item}`;
-- 
cgit v1.2.3


From 792fbe187bdffca4a748e88d66ea29f8936ae5c8 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Fri, 6 Aug 2021 17:17:45 +0200
Subject: Facilitate installation of scripts from the repository

This commit includes:
* removal of page_info_server
* running of storage client in popup context
* extraction of some common CSS to a separate file
* extraction of scripts import view to a separate file
* addition of a facility to conveniently clone complex structures from DOM (in DOM_helpers.js)
* addition of hydrilla repo url to default settings
* other minor changes
and of course changes related to the actual installation of scripts from the repo
---
 background/main.js              |   2 -
 background/page_info_server.js  |  72 --------
 build.sh                        |   1 +
 common/connection_types.js      |   3 +-
 common/misc.js                  |  14 ++
 common/sanitize_JSON.js         |   2 +-
 common/stored_types.js          |   4 +-
 content/activity_info_server.js |  32 +++-
 content/main.js                 |   3 -
 content/repo_query.js           | 111 ++++++++----
 copyright                       |   4 +-
 default_settings.json           |   3 +
 html/DOM_helpers.js             |  41 +++++
 html/base.css                   |  44 +++++
 html/display-panel.html         | 123 +++++++------
 html/display-panel.js           | 392 ++++++++++++++++++++++++++++++++++------
 html/import_frame.html          |  27 +++
 html/import_frame.js            | 163 +++++++++++++++++
 html/options.html               |  47 +----
 html/options_main.js            | 160 +++-------------
 20 files changed, 830 insertions(+), 418 deletions(-)
 delete mode 100644 background/page_info_server.js
 create mode 100644 html/DOM_helpers.js
 create mode 100644 html/base.css
 create mode 100644 html/import_frame.html
 create mode 100644 html/import_frame.js

(limited to 'html')

diff --git a/background/main.js b/background/main.js
index ffa814e..7c50fd5 100644
--- a/background/main.js
+++ b/background/main.js
@@ -12,7 +12,6 @@
  * IMPORT start_storage_server
  * IMPORT start_page_actions_server
  * IMPORT start_policy_injector
- * IMPORT start_page_info_server
  * IMPORT browser
  * IMPORTS_END
  */
@@ -20,7 +19,6 @@
 start_storage_server();
 start_page_actions_server();
 start_policy_injector();
-start_page_info_server();
 
 async function init_ext(install_details)
 {
diff --git a/background/page_info_server.js b/background/page_info_server.js
deleted file mode 100644
index e915011..0000000
--- a/background/page_info_server.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * part of Hachette
- * Serving of storage data corresponding to requested urls (server side).
- *
- * Copyright (C) 2021 Wojtek Kosior
- * Redistribution terms are gathered in the `copyright' file.
- */
-
-/*
- * IMPORTS_START
- * IMPORT listen_for_connection
- * IMPORT get_storage
- * IMPORT query_all
- * IMPORT TYPE_PREFIX
- * IMPORT CONNECTION_TYPE
- * IMPORT url_matches
- * IMPORTS_END
- */
-
-var storage;
-
-function handle_change(connection_data, change)
-{
-    if (change.prefix !== TYPE_PREFIX.PAGE)
-	return;
-
-    connection_data.port.postMessage(["change", change]);
-}
-
-async function handle_subscription(connection_data, message)
-{
-    const [action, url] = message;
-    if (action === "unsubscribe") {
-	connection_data.subscribed.delete(url);
-	return;
-    }
-
-    connection_data.subscribed.add(url);
-    connection_data.port.postMessage(["new_url", query_all(storage, url)]);
-}
-
-function new_connection(port)
-{
-    console.log("new page info connection!");
-
-    const connection_data = {
-	subscribed : new Set(),
-	port
-    };
-
-    let _handle_change = change => handle_change(connection_data, change);
-
-    storage.add_change_listener(_handle_change);
-
-    port.onMessage.addListener(m => handle_subscription(connection_data, m));
-    port.onDisconnect.addListener(
-	() => storage.remove_change_listener(_handle_change)
-    );
-}
-
-async function start_page_info_server()
-{
-    storage = await get_storage();
-
-    listen_for_connection(CONNECTION_TYPE.PAGE_INFO, new_connection);
-}
-
-/*
- * EXPORTS_START
- * EXPORT start_page_info_server
- * EXPORTS_END
- */
diff --git a/build.sh b/build.sh
index d940176..675dc2c 100755
--- a/build.sh
+++ b/build.sh
@@ -273,6 +273,7 @@ $(map_get EXPORTCODES $FILEKEY)
     fi
 
     cp -r copyright licenses/ $BUILDDIR
+    cp html/*.css $BUILDDIR/html
     mkdir $BUILDDIR/icons
     cp icons/*.png $BUILDDIR/icons
 }
diff --git a/common/connection_types.js b/common/connection_types.js
index 41bde75..88c6964 100644
--- a/common/connection_types.js
+++ b/common/connection_types.js
@@ -13,8 +13,7 @@
 const CONNECTION_TYPE = {
     REMOTE_STORAGE : "0",
     PAGE_ACTIONS : "1",
-    PAGE_INFO : "2",
-    ACTIVITY_INFO : "3"
+    ACTIVITY_INFO : "2"
 };
 
 /*
diff --git a/common/misc.js b/common/misc.js
index a59ec14..7158d32 100644
--- a/common/misc.js
+++ b/common/misc.js
@@ -12,6 +12,7 @@
  * IMPORT browser
  * IMPORT is_chrome
  * IMPORT TYPE_NAME
+ * IMPORT TYPE_PREFIX
  * IMPORTS_END
  */
 
@@ -154,6 +155,18 @@ function sign_policy(policy, now, hours_offset) {
     return gen_unique(time + policy);
 }
 
+/* Regexes and objest to use as/in schemas for parse_json_with_schema(). */
+const nonempty_string_matcher = /.+/;
+
+const matchers = {
+    sha256: /^[0-9a-f]{64}$/,
+    nonempty_string: nonempty_string_matcher,
+    component: [
+	new RegExp(`^[${TYPE_PREFIX.SCRIPT}${TYPE_PREFIX.BAG}]$`),
+	nonempty_string_matcher
+    ]
+};
+
 /*
  * EXPORTS_START
  * EXPORT gen_nonce
@@ -165,5 +178,6 @@ function sign_policy(policy, now, hours_offset) {
  * EXPORT nice_name
  * EXPORT open_in_settings
  * EXPORT is_privileged_url
+ * EXPORT matchers
  * EXPORTS_END
  */
diff --git a/common/sanitize_JSON.js b/common/sanitize_JSON.js
index 8268d3e..8b86d2d 100644
--- a/common/sanitize_JSON.js
+++ b/common/sanitize_JSON.js
@@ -37,7 +37,7 @@ function sanitize_unknown(schema, item)
     let _default = undefined;
 
     if (!Array.isArray(schema) || schema[1] === "matchentry" ||
-	schema.length < 2 || !["ordefault", "or"].includes(schema))
+	schema.length < 2 || !["ordefault", "or"].includes(schema[1]))
 	return sanitize_unknown_no_alternatives(schema, item);
 
     if ((schema.length & 1) !== 1) {
diff --git a/common/stored_types.js b/common/stored_types.js
index 304842b..bfceba6 100644
--- a/common/stored_types.js
+++ b/common/stored_types.js
@@ -18,7 +18,9 @@ const TYPE_PREFIX = {
     PAGE : "p",
     BAG : "b",
     SCRIPT : "s",
-    VAR : "_"
+    VAR : "_",
+    /* Url prefix is not used in stored settings. */
+    URL : "u"
 };
 
 const TYPE_NAME = {
diff --git a/content/activity_info_server.js b/content/activity_info_server.js
index a1384e9..81a25fb 100644
--- a/content/activity_info_server.js
+++ b/content/activity_info_server.js
@@ -11,14 +11,20 @@
  * IMPORTS_START
  * IMPORT listen_for_connection
  * IMPORT CONNECTION_TYPE
- * IMPORT set_repo_query_repos
- * IMPORT set_repo_query_callback
+ * IMPORT repo_query
+ * IMPORT subscribe_repo_query_results
+ * IMPORT unsubscribe_repo_query_results
  * IMPORTS_END
  */
 
 var activities = [];
 var ports = new Set();
 
+function report_activity_oneshot(name, data, port)
+{
+    port.postMessage([name, data]);
+}
+
 function report_activity(name, data)
 {
     const activity = [name, data];
@@ -35,20 +41,23 @@ function report_script(script_data)
 
 function report_settings(settings)
 {
-    const [pattern, settings_data, repos] = settings;
-    set_repo_query_repos(repos);
-
     report_activity("settings", settings);
 }
 
-function report_repo_query_result(result)
+function report_repo_query_action(update, port)
 {
-    report_activity("repo_query_result", result);
+    report_activity_oneshot("repo_query_action", update, port);
 }
 
-function trigger_repo_query()
+function trigger_repo_query(query_specifier)
 {
-    set_repo_query_callback(report_repo_query_result);
+    repo_query(...query_specifier);
+}
+
+function handle_disconnect(port, report_action)
+{
+    ports.delete(port)
+    unsubscribe_repo_query_results(report_action);
 }
 
 function new_connection(port)
@@ -60,13 +69,16 @@ function new_connection(port)
     for (const activity of activities)
 	port.postMessage(activity);
 
+    const report_action = u => report_repo_query_action(u, port);
+    subscribe_repo_query_results(report_action);
+
     /*
      * So far the only thing we expect to receive is repo query order. Once more
      * possibilities arrive, we will need to complicate this listener.
      */
     port.onMessage.addListener(trigger_repo_query);
 
-    port.onDisconnect.addListener(() => ports.delete(port));
+    port.onDisconnect.addListener(() => handle_disconnect(port, report_action));
 }
 
 function start_activity_info_server()
diff --git a/content/main.js b/content/main.js
index 437a32b..8f8375e 100644
--- a/content/main.js
+++ b/content/main.js
@@ -20,7 +20,6 @@
  * IMPORT is_chrome
  * IMPORT is_mozilla
  * IMPORT start_activity_info_server
- * IMPORT set_repo_query_url
  * IMPORTS_END
  */
 
@@ -130,6 +129,4 @@ if (!is_privileged_url(document.URL)) {
     }
 
     start_activity_info_server();
-
-    set_repo_query_url(document.URL);
 }
diff --git a/content/repo_query.js b/content/repo_query.js
index b8c8ed9..3708108 100644
--- a/content/repo_query.js
+++ b/content/repo_query.js
@@ -9,72 +9,105 @@
 /*
  * IMPORTS_START
  * IMPORT make_ajax_request
+ * IMPORT observables
+ * IMPORT TYPE_PREFIX
+ * IMPORT parse_json_with_schema
+ * IMPORT matchers
  * IMPORTS_END
  */
 
-var query_started = false;
+const paths = {
+    [TYPE_PREFIX.PAGE]: "/pattern",
+    [TYPE_PREFIX.BAG]: "/bag",
+    [TYPE_PREFIX.SCRIPT]: "/script",
+    [TYPE_PREFIX.URL]: "/query"
+};
 
-var url = undefined;
-var repos = undefined;
-var callback = undefined;
+const queried_items = new Map();
+const observable = observables.make();
 
-async function query(repo)
+function repo_query(prefix, item, repo_urls)
 {
-    const [repo_url, data] = repo;
+    const key = prefix + item;
 
-    let response = "Query failed";
-    const query_url = `${repo_url}/query?n=${encodeURIComponent(url)}`;
+    const results = queried_items.get(key) || {};
+    queried_items.set(key, results);
 
-    try {
-	let xhttp = await make_ajax_request("GET", query_url);
-	if (xhttp.status === 200)
-	    response = xhttp.responseText;
-	console.log(xhttp);
-    } catch (e) {
-	console.log(e);
-    }
+    for (const repo_url of repo_urls)
+	perform_query_against(key, repo_url, results);
+}
 
-    callback([repo_url, response]);
+const page_schema = {
+    pattern: matchers.nonempty_string,
+    payload: ["optional", matchers.component, "default", undefined]
+};
+const bag_schema = {
+    name: matchers.nonempty_string,
+    components: ["optional", [matchers.component, "repeat"], "default", []]
+};
+const script_schema = {
+    name: matchers.nonempty_string,
+    location: matchers.nonempty_string,
+    sha256: matchers.sha256,
+};
+const search_result_schema = [page_schema, "repeat"];
+
+const schemas = {
+    [TYPE_PREFIX.PAGE]: page_schema,
+    [TYPE_PREFIX.BAG]: bag_schema,
+    [TYPE_PREFIX.SCRIPT]: script_schema,
+    [TYPE_PREFIX.URL]: search_result_schema
 }
 
-function start_query()
+async function perform_query_against(key, repo_url, results)
 {
-    if (query_started || !url || !repos || !callback)
+    if (results[repo_url] !== undefined)
 	return;
 
-    query_started = true;
+    const prefix = key[0];
+    const item = key.substring(1);
+    const result = {state: "started"};
+    results[repo_url] = result;
 
-    console.log(`about to query ${url} from ${repos}`);
+    const broadcast_msg = {prefix, item, results: {[repo_url]: result}};
+    observables.broadcast(observable, broadcast_msg);
 
-    for (const repo of repos)
-	query(repo);
-}
+    let state = "connection_error";
+    const query_url =
+	  `${repo_url}${paths[prefix]}?n=${encodeURIComponent(item)}`;
 
-function set_repo_query_url(_url)
-{
-    url = _url;
+    try {
+	let xhttp = await make_ajax_request("GET", query_url);
+	if (xhttp.status === 200) {
+	    state = "parse_error";
+	    result.response =
+		parse_json_with_schema(schemas[prefix], xhttp.responseText);
+	    state = "completed";
+	}
+    } catch (e) {
+	console.log(e);
+    }
 
-    start_query();
+    result.state = state;
+    observables.broadcast(observable, broadcast_msg);
 }
 
-function set_repo_query_repos(_repos)
+function subscribe_repo_query_results(cb)
 {
-    repos = _repos;
-
-    start_query();
+    observables.subscribe(observable, cb);
+    for (const [key, results] of queried_items.entries())
+	cb({prefix: key[0], item: key.substring(1), results});
 }
 
-function set_repo_query_callback(_callback)
+function unsubscribe_repo_query_results(cb)
 {
-    callback = _callback;
-
-    start_query();
+    observables.unsubscribe(observable, cb);
 }
 
 /*
  * EXPORTS_START
- * EXPORT set_repo_query_url
- * EXPORT set_repo_query_repos
- * EXPORT set_repo_query_callback
+ * EXPORT repo_query
+ * EXPORT subscribe_repo_query_results
+ * EXPORT unsubscribe_repo_query_results
  * EXPORTS_END
  */
diff --git a/copyright b/copyright
index 96de092..05a16aa 100644
--- a/copyright
+++ b/copyright
@@ -20,11 +20,11 @@ Copyright: 2021 Wojtek Kosior <koszko@koszko.org>
    2021 jahoti <jahoti@tilde.team>
 License: GPL-3+-javascript or Alicense-1.0
 
-Files: README.txt copyright
+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
+Files: html/base.css
 Copyright: 2021 Wojtek Kosior <koszko@koszko.org>
    2021 Nicholas Johnson <nicholasjohnson@posteo.org>
 License: GPL-3+ or Alicense-1.0 or CC-BY-SA-4.0
diff --git a/default_settings.json b/default_settings.json
index 8656381..14856fe 100644
--- a/default_settings.json
+++ b/default_settings.json
@@ -43,5 +43,8 @@
 	"phttps://www.worldcat.org/title/**": {
 	    "components": ["s", "worldcat (library holdings)"]
 	}
+    },
+    {
+	"rhttps://hydrilla.koszko.org": {}
     }
 ]
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js
new file mode 100644
index 0000000..2bff966
--- /dev/null
+++ b/html/DOM_helpers.js
@@ -0,0 +1,41 @@
+/**
+ * Hachette operations on DOM elements
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+function by_id(id)
+{
+    return document.getElementById(id);
+}
+
+function clone_template(template_id)
+{
+    const clone = document.getElementById(template_id).cloneNode(true);
+    const result_object = {};
+    const to_process = [clone];
+
+    while (to_process.length > 0) {
+	const element = to_process.pop();
+	const template_key = element.getAttribute("data-template");
+
+	if (template_key)
+	    result_object[template_key] = element;
+
+	element.removeAttribute("id");
+	element.removeAttribute("template_key");
+
+	for (const child of element.children)
+	    to_process.push(child);
+    }
+
+    return result_object;
+}
+
+/*
+ * EXPORTS_START
+ * EXPORT by_id
+ * EXPORT clone_template
+ * EXPORTS_END
+ */
diff --git a/html/base.css b/html/base.css
new file mode 100644
index 0000000..2256833
--- /dev/null
+++ b/html/base.css
@@ -0,0 +1,44 @@
+/**
+ * Hachette base styles
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Copyright (C) 2021 Nicholas Johnson
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+input[type="checkbox"], input[type="radio"], .hide {
+    display: none;
+}
+
+.show_next:not(:checked)+* {
+    display: none;
+}
+
+.show_hide_next2:not(:checked)+* {
+    display: none;
+}
+
+.show_hide_next2:checked+*+* {
+    display: none;
+}
+
+button, .button {
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    padding: 6px 12px;
+    margin: 2px 0px;
+}
+
+button.slimbutton, .button.slimbutton {
+    padding: 2px 4px;
+    margin: 0;
+}
+
+button:hover, .button:hover {
+    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
diff --git a/html/display-panel.html b/html/display-panel.html
index d8d7f5d..1b9c77b 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -7,35 +7,25 @@
   <head>
     <meta charset="utf-8"/>
     <title>Hachette - page settings</title>
+    <link type="text/css" rel="stylesheet" href="base.css" />
     <style>
-      input[type="radio"], input[type="checkbox"] {
-	  display: none;
-      }
-
       body {
 	  width: 300px;
 	  height: 300px;
       }
 
-      .show_next:not(:checked)+* {
-	  display: none;
+      ul {
+	  padding-inline-start: 15px;
       }
 
-      .show_hide_next2:not(:checked)+* {
-	  display: none;
+      .bold {
+	  font-weight: bold;
       }
 
-      .show_hide_next2:checked+*+* {
-	  display: none;
-      }
-
-      .hide {
-	  display: none;
-      }
-
-      #possible_patterns_chbx:not(:checked)+label span#triangle:first-child+span,
-      #possible_patterns_chbx:not(:checked)+label+*,
-      #possible_patterns_chbx:checked+label span#triangle:first-child {
+      .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+* {
 	  display: none;
       }
 
@@ -51,31 +41,73 @@
 	<span></span>
 	<button>View in settings</button>
       </li>
+      <li id="query_match_li_template" class="queried_pattern_match" data-template="li">
+	<div>
+	  <span>pattern:</span>
+	  <span class="bold" data-template="pattern"></span>
+	  <button data-template="btn">Install</button>
+	</div>
+	<div id="unrollable_component_template" 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>
+	    </span>
+	    <span data-template="component"></span>
+	  </label>
+	  <div data-template="unroll"></div>
+	</div>
+      </li>
     </div>
 
-    <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_install_view_chbx" type="checkbox" class="show_hide_next2"></input>
+    <div id="install_view">
+      <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_page_state_chbx" type="checkbox" class="show_next"></input>
-    <div>
-      <input id="possible_patterns_chbx" type="checkbox"></input>
-      <label for="possible_patterns_chbx">
-	<h3>
-	  <span id="triangle">&#x23F5;</span><span>&#x23F7;</span>
-	  Possible patterns
-	</h3>
-      </label>
-      <ul id="possible_patterns"></ul>
+      <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>
+      <h3>Privileged page</h3>
 
-      <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+      <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>
       <div>
-	<h3>
-	  Matched pattern: <span id="pattern">...</span>
+	<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>
+	<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>
+	  </div>
 	  <input id="query_started_chbx" type="checkbox" class="show_hide_next2"></input>
 	  <div id="container_for_repo_responses">
 	    <h3>Queried from repositories</h3>
@@ -83,24 +115,11 @@
 	  <button id="query_pattern">
 	    Search for matching patterns
 	  </button>
-	</h3>
-	<h3>
-	  Blocked: <span id="blocked">...</span>
-	</h3>
-	<h3>
-	  Payload: <span id="payload">...</span>
-	  <button id="view_payload" class="hide">
-	    View in settings
-	  </button>
-	</h3>
-	<h3>Injected</h3>
-	<div id="container_for_injected">
-	  <span id="none_injected">None</span>
 	</div>
+	<h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
       </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>_POPUPSCRIPTS_
+      <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>
+    </div>_POPUPSCRIPTS_
   </body>
 </html>
diff --git a/html/display-panel.js b/html/display-panel.js
index 1693182..b4d9abb 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -10,6 +10,11 @@
  * IMPORT browser
  * IMPORT is_chrome
  * IMPORT is_mozilla
+ *** Using remote storage here seems inefficient, we only resort to that
+ *** temporarily, before all storage access gets reworked.
+ * IMPORT get_remote_storage
+ * IMPORT get_import_frame
+ * IMPORT query_all
  * IMPORT CONNECTION_TYPE
  * IMPORT url_item
  * IMPORT is_privileged_url
@@ -17,13 +22,13 @@
  * IMPORT nice_name
  * IMPORT open_in_settings
  * IMPORT for_each_possible_pattern
+ * IMPORT by_id
+ * IMPORT clone_template
  * IMPORTS_END
  */
 
-function by_id(id)
-{
-    return document.getElementById(id);
-}
+let storage;
+let tab_url;
 
 const tab_query = {currentWindow: true, active: true};
 
@@ -55,28 +60,19 @@ async function show_page_activity_info()
 	return;
     }
 
-    const url = url_item(tab.url);
-    page_url_heading.textContent = url;
-    if (is_privileged_url(url)) {
+    tab_url = url_item(tab.url);
+    page_url_heading.textContent = tab_url;
+    if (is_privileged_url(tab_url)) {
 	show_privileged_notice_chbx.checked = true;
 	return;
     }
 
-    populate_possible_patterns_list(url);
+    populate_possible_patterns_list(tab_url);
     show_page_state_chbx.checked = true;
 
     try_to_connect(tab.id);
 }
 
-function populate_possible_patterns_list(url)
-{
-    for_each_possible_pattern(url, add_pattern_to_list);
-
-    const port = browser.runtime.connect({name: CONNECTION_TYPE.PAGE_INFO});
-    port.onMessage.addListener(handle_page_info);
-    port.postMessage(["subscribe", url]);
-}
-
 const possible_patterns_ul = by_id("possible_patterns");
 const pattern_li_template = by_id("pattern_li_template");
 pattern_li_template.removeAttribute("id");
@@ -121,53 +117,55 @@ function set_pattern_li_button_text(li_id, text)
     by_id(li_id).firstElementChild.nextElementSibling.textContent = text;
 }
 
-function handle_page_info(message)
+function handle_page_change(change)
 {
-    const [type, data] = message;
+    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 (type === "change") {
-	const li_id = ensure_pattern_exists(data.item);
-	if (data.old_val === undefined)
-	    set_pattern_li_button_text(li_id, "Edit in settings");
-	if (data.new_val === undefined)
-	    set_pattern_li_button_text(li_id, "Add setting");
-    }
+function populate_possible_patterns_list(url)
+{
+    for_each_possible_pattern(url, add_pattern_to_list);
 
-    if (type === "new_url") {
-	for (const li_id of known_patterns.values())
-	    set_pattern_li_button_text(li_id, "Add setting");
-	for (const [pattern, settings] of data) {
-	    set_pattern_li_button_text(ensure_pattern_exists(pattern),
-				       "Edit in settings")
-	}
+    for (const [pattern, settings] of query_all(storage, url)) {
+	set_pattern_li_button_text(ensure_pattern_exists(pattern),
+				   "Edit in settings");
     }
+
+    storage.add_change_listener(handle_page_change, [TYPE_PREFIX.PAGE]);
 }
 
 const connected_chbx = by_id("connected_chbx");
 const query_pattern_but = by_id("query_pattern");
 
+var content_script_port;
+
 function try_to_connect(tab_id)
 {
     /* This won't connect to iframes. We'll add support for them later */
     const connect_info = {name: CONNECTION_TYPE.ACTIVITY_INFO, frameId: 0};
-    const port = browser.tabs.connect(tab_id, connect_info);
+    content_script_port = browser.tabs.connect(tab_id, connect_info);
 
-    const button_cb = (e) => start_querying_repos(port);
+    const disconnect_cb = () => handle_disconnect(tab_id, start_querying_repos);
+    content_script_port.onDisconnect.addListener(disconnect_cb);
+    content_script_port.onMessage.addListener(handle_activity_report);
 
-    port.onDisconnect.addListener(port => handle_disconnect(tab_id, button_cb));
-    port.onMessage.addListener(handle_activity_report);
-
-    query_pattern_but.addEventListener("click", button_cb);
+    query_pattern_but.addEventListener("click", start_querying_repos);
 
     if (is_mozilla)
-	setTimeout(() => monitor_connecting(port, tab_id), 1000);
+	setTimeout(() => monitor_connecting(tab_id), 1000);
 }
 
 const query_started_chbx = by_id("query_started_chbx");
 
 function start_querying_repos(port)
 {
-    port.postMessage("dummy (trigger repo querying)");
+    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;
 }
 
@@ -176,6 +174,7 @@ const loading_chbx = by_id("loading_chbx");
 function handle_disconnect(tab_id, button_cb)
 {
     query_pattern_but.removeEventListener("click", button_cb);
+    content_script_port = null;
 
     if (is_chrome && !browser.runtime.lastError)
 	return;
@@ -188,12 +187,16 @@ function handle_disconnect(tab_id, button_cb)
     setTimeout(() => try_to_connect(tab_id), 1000);
 }
 
-function monitor_connecting(port, tab_id)
+function monitor_connecting(tab_id)
 {
     if (connected_chbx.checked)
 	return;
 
-    port.disconnect();
+    if (content_script_port)
+	content_script_port.disconnect();
+    else
+	return;
+
     loading_chbx.checked = !loading_chbx.checked;
     try_to_connect(tab_id);
 }
@@ -204,7 +207,8 @@ const blocked_span = by_id("blocked");
 const payload_span = by_id("payload");
 const view_payload_but = by_id("view_payload");
 const container_for_injected = by_id("container_for_injected");
-const container_for_repo_responses = by_id("container_for_repo_responses");
+
+const queried_items = new Map();
 
 function handle_activity_report(message)
 {
@@ -213,7 +217,7 @@ function handle_activity_report(message)
     const [type, data] = message;
 
     if (type === "settings") {
-	let [pattern, settings, repos] = data;
+	let [pattern, settings] = data;
 
 	settings = settings || {};
 	blocked_span.textContent = settings.allow ? "no" : "yes";
@@ -247,20 +251,300 @@ function handle_activity_report(message)
 	container_for_injected.appendChild(h4);
 	container_for_injected.appendChild(pre);
     }
-    if (type === "repo_query_result") {
-	const [repo_url, response_text] = data;
+    if (type === "repo_query_action") {
+	query_started_chbx.checked = true;
 
-	const h4 = document.createElement("h4");
-	const pre = document.createElement("pre");
-	h4.textContent = repo_url;
-	pre.textContent = response_text;
+	const key = data.prefix + data.item;
+	const results = queried_items.get(key) || {};
+	Object.assign(results, data.results);
+	queried_items.set(key, results);
+
+	const action = data.prefix === TYPE_PREFIX.URL ?
+	      show_query_result : record_fetched_install_dep;
+
+	for (const [repo_url, result] of Object.entries(data.results))
+	    action(data.prefix, data.item, repo_url, result);
+    }
+}
+
+const container_for_repo_responses = by_id("container_for_repo_responses");
+
+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");
+
+    list_head.textContent = url;
+    list_div.appendChild(list_head);
+    list_div.appendChild(list);
+    container_for_repo_responses.appendChild(list_div);
+
+    const list_object = {list, by_repo: new Map()};
+
+    results_lists.set(url, list_object);
+
+    return list_object;
+}
+
+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);
+
+    list_object.list.appendChild(result_li);
+    list_object.by_repo.set(repo_url, result_item);
+
+    return result_item;
+}
+
+function set_appended(result_item, element)
+{
+    if (result_item.appended)
+	result_item.appended.remove();
+    result_item.appended = element;
+    result_item.result_li.appendChild(element);
+}
+
+function show_message(result_item, text)
+{
+    const div = document.createElement("div");
+    div.textContent = text;
+    set_appended(result_item, div);
+}
+
+function showcb(text)
+{
+    return item => show_message(item, text);
+}
+
+function unroll_chbx_first_checked(entry_object)
+{
+    if (!entry_object.chbx.checked)
+	return;
+
+    entry_object.chbx.removeEventListener("change", entry_object.unroll_cb);
+    delete entry_object.unroll_cb;
+
+    entry_object.unroll.textContent = "preview not implemented...";
+}
+
+const show_install_chbx = by_id("show_install_view_chbx");
+
+let import_frame;
+let install_target = null;
+
+function install_abort(error_state)
+{
+    import_frame.show_error(`Error: ${error_state}`);
+    install_target = null;
+}
+
+/*
+ * Translate objects from the format in which they are sent by Hydrilla to the
+ * format in which they are stored in settings.
+ */
 
-	container_for_repo_responses.appendChild(h4);
-	container_for_repo_responses.appendChild(pre);
+function translate_script(script_object, repo_url)
+{
+    return {
+	[TYPE_PREFIX.SCRIPT + script_object.name]: {
+	    hash: script_object.sha256,
+	    url: `${repo_url}/content/${script_object.location}`
+	}
+    };
+}
+
+function translate_bag(bag_object)
+{
+    return {
+	[TYPE_PREFIX.BAG + bag_object.name]: bag_object.components
+    };
+}
+
+const format_translators = {
+    [TYPE_PREFIX.BAG]: translate_bag,
+    [TYPE_PREFIX.SCRIPT]: translate_script
+};
+
+function install_check_ready()
+{
+    if (install_target.to_fetch.size > 0)
+	return;
+
+    const page_key = [TYPE_PREFIX.PAGE + install_target.pattern];
+    const to_install = [{[page_key]: {components: install_target.payload}}];
+
+    for (const key of install_target.fetched) {
+	const old_object =
+	      queried_items.get(key)[install_target.repo_url].response;
+	const new_object =
+	      format_translators[key[0]](old_object, install_target.repo_url);
+	to_install.push(new_object);
+    }
+
+    import_frame.show_selection(to_install);
+}
+
+const possible_errors = ["connection_error", "parse_error"];
+
+function fetch_install_deps(components)
+{
+    const needed = [...components];
+    const processed = new Set();
+
+    while (needed.length > 0) {
+	const [prefix, item] = needed.pop();
+	const key = prefix + item;
+	processed.add(key);
+	const results = queried_items.get(key);
+	let relevant_result = null;
+
+	if (results)
+	    relevant_result = results[install_target.repo_url];
+
+	if (!relevant_result) {
+	    content_script_port.postMessage([prefix, item,
+					     [install_target.repo_url]]);
+	    install_target.to_fetch.add(key);
+	    continue;
+	}
+
+	if (possible_errors.includes(relevant_result.state)) {
+	    install_abort(relevant_result.state);
+	    return false;
+	}
+
+	install_target.fetched.add(key);
+
+	if (prefix !== TYPE_PREFIX.BAG)
+	    continue;
+
+	for (const dependency of relevant_result.response.components) {
+	    if (processed.has(dependency.join('')))
+		continue;
+	    needed.push(dependency);
+	}
     }
 }
 
+function record_fetched_install_dep(prefix, item, repo_url, result)
+{
+    const key = prefix + item;
+
+    if (!install_target || repo_url !== install_target.repo_url ||
+	!install_target.to_fetch.has(key))
+	return;
+
+    if (possible_errors.includes(result.state)) {
+	install_abort(result.state);
+	return;
+    }
+
+    if (result.state !== "completed")
+	return;
+
+    install_target.to_fetch.delete(key);
+    install_target.fetched.add(key);
+
+    if (prefix === TYPE_PREFIX.BAG &&
+	fetch_install_deps(result.response.components) === false)
+	return;
+
+    install_check_ready();
+}
+
+function install_clicked(entry_object)
+{
+    show_install_chbx.checked = true;
+    import_frame.show_loading();
+
+    install_target = {
+	repo_url: entry_object.repo_url,
+	pattern: entry_object.match_object.pattern,
+	payload: entry_object.match_object.payload,
+	fetched: new Set(),
+	to_fetch: new Set()
+    };
+
+    fetch_install_deps([install_target.payload]);
+
+    install_check_ready();
+}
+
+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);
+
+    for (const match of result) {
+	const entry_object = clone_template("query_match_li_template");
+
+	entry_object.pattern.textContent = match.pattern;
+
+	ul.appendChild(entry_object.li);
+
+	if (!match.payload) {
+	    entry_object.payload.textContent = "(none)";
+	    for (const key of ["chbx", "br", "triangle", "unroll"])
+		entry_object[key].remove();
+	    continue;
+	}
+
+	entry_object.component.textContent = nice_name(...match.payload);
+
+	const install_cb = () => install_clicked(entry_object);
+	entry_object.btn.addEventListener("click", install_cb);
+
+	const chbx_id = `query_result_${max_query_result_id++}`;
+	entry_object.chbx.id = chbx_id;
+	entry_object.lbl.setAttribute("for", chbx_id);
+
+	entry_object.unroll_cb = () => unroll_chbx_first_checked(entry_object);
+	entry_object.chbx.addEventListener("change", entry_object.unroll_cb);
+
+	entry_object.component_object = match.payload;
+	entry_object.match_object = match;
+	entry_object.repo_url = repo_url;
+    }
+}
+
+function show_query_result(url_prefix, url, repo_url, result)
+{
+    const results_list_object = results_lists.get(url) ||
+	  create_results_list(url);
+    const result_item = results_list_object.by_repo.get(repo_url) ||
+	  create_result_item(results_list_object, repo_url, result);
+
+    const completed_cb =
+	  item => show_query_successful_result(item, repo_url, result.response);
+    const possible_actions = {
+	completed: completed_cb,
+	started: showcb("loading..."),
+	connection_error: showcb("Error when querying repository."),
+	parse_error: showcb("Bad data format received.")
+    };
+    possible_actions[result.state](result_item, repo_url);
+}
+
 by_id("settings_but")
     .addEventListener("click", (e) => browser.runtime.openOptionsPage());
 
-show_page_activity_info();
+async function main()
+{
+    storage = await get_remote_storage();
+    import_frame = await get_import_frame();
+    import_frame.onclose = () => show_install_chbx.checked = false;
+    show_page_activity_info();
+}
+
+main();
diff --git a/html/import_frame.html b/html/import_frame.html
new file mode 100644
index 0000000..c86c3de
--- /dev/null
+++ b/html/import_frame.html
@@ -0,0 +1,27 @@
+<div style="display: none;">
+  <li id="import_li_template">
+    <span></span>
+    <input type="checkbox" style="display: inline;" checked></input>
+    <span></span>
+  </li>
+</div>
+<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>
+<div>
+  <span id="import_errormsg"></span>
+  <input id="import_errordetail_chbx" type="checkbox" class="show_next"></input>
+  <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>
+  <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
new file mode 100644
index 0000000..4075433
--- /dev/null
+++ b/html/import_frame.js
@@ -0,0 +1,163 @@
+/**
+ * Hachette HTML import frame script
+ *
+ * Copyright (C) 2021 Wojtek Kosior
+ * Redistribution terms are gathered in the `copyright' file.
+ */
+
+/*
+ * IMPORTS_START
+ * IMPORT get_remote_storage
+ * IMPORT by_id
+ * IMPORT nice_name
+ * IMPORT make_once
+ * IMPORTS_END
+ */
+
+let storage;
+
+const import_li_template = by_id("import_li_template");
+import_li_template.removeAttribute("id");
+
+function import_li_id(prefix, item)
+{
+    return `ili_${prefix}_${item}`;
+}
+
+let import_ul = by_id("import_ul");
+let import_chbxs_colliding = undefined;
+let settings_import_map = undefined;
+
+function add_import_li(prefix, name)
+{
+    let li = import_li_template.cloneNode(true);
+    let name_span = li.firstElementChild;
+    let chbx = name_span.nextElementSibling;
+    let warning_span = chbx.nextElementSibling;
+
+    li.setAttribute("data-prefix", prefix);
+    li.setAttribute("data-name", name);
+    li.id = import_li_id(prefix, name);
+    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_ul.appendChild(li);
+}
+
+function check_all_imports()
+{
+    for (let li of import_ul.children)
+	li.firstElementChild.nextElementSibling.checked = true;
+}
+
+function uncheck_all_imports()
+{
+    for (let li of import_ul.children)
+	li.firstElementChild.nextElementSibling.checked = false;
+}
+
+function uncheck_colliding_imports()
+{
+    for (let chbx of import_chbxs_colliding)
+	chbx.checked = false;
+}
+
+function commit_import()
+{
+    for (let li of import_ul.children) {
+	let chbx = li.firstElementChild.nextElementSibling;
+
+	if (!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);
+    }
+
+    deactivate();
+}
+
+const import_loading_radio = by_id("import_loading_radio");
+
+function show_loading()
+{
+    import_loading_radio.checked = true;
+}
+
+const import_failed_radio = by_id("import_failed_radio");
+const import_errormsg = by_id("import_errormsg");
+const import_errordetail_chbx = by_id("import_errordetail_chbx");
+const import_errordetail = by_id("import_errordetail");
+
+function show_error(errormsg, errordetail)
+{
+    import_failed_radio.checked = true;
+    import_errormsg.textContent = errormsg;
+    import_errordetail_chbx.checked = errordetail;
+    import_errordetail.textContent = errordetail;
+}
+
+const import_selection_radio = by_id("import_selection_radio");
+
+function show_selection(settings)
+{
+    import_selection_radio.checked = true;
+
+    let old_children = import_ul.children;
+    while (old_children[0] !== undefined)
+	import_ul.removeChild(old_children[0]);
+
+    import_chbxs_colliding = [];
+    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);
+	settings_import_map.set(key, value);
+    }
+}
+
+function deactivate()
+{
+    /* Let GC free some memory */
+    import_chbxs_colliding = undefined;
+    settings_import_map = undefined;
+
+    if (exports.onclose)
+	exports.onclose();
+}
+
+const exports = {show_loading, show_error, show_selection, deactivate};
+
+async function init()
+{
+    storage = await get_remote_storage();
+
+    by_id("commit_import_but").addEventListener("click", commit_import);
+    by_id("check_all_import_but").addEventListener("click", check_all_imports);
+    by_id("uncheck_all_import_but")
+	.addEventListener("click", uncheck_all_imports);
+    by_id("uncheck_colliding_import_but")
+	.addEventListener("click", uncheck_colliding_imports);
+    by_id("cancel_import_but").addEventListener("click", deactivate);
+    by_id("import_failok_but").addEventListener("click", deactivate);
+
+    return exports;
+}
+
+const get_import_frame = make_once(init);
+
+/*
+ * EXPORTS_START
+ * EXPORT get_import_frame
+ * EXPORTS_END
+ */
diff --git a/html/options.html b/html/options.html
index a10b919..2246f9a 100644
--- a/html/options.html
+++ b/html/options.html
@@ -8,11 +8,8 @@
   <head>
     <meta charset="utf-8"/>
     <title>Hachette options</title>
+    <link type="text/css" rel="stylesheet" href="base.css" />
     <style>
-      input[type="checkbox"], input[type="radio"], .hide, .popup.hide {
-	  display: none;
-      }
-
       /* pages list */
       #page_components_ul {
 	  max-height: 80vh;
@@ -78,23 +75,6 @@
       input[type="radio"]:not(:checked)+.import_window_content {
 	  display: none;
       }
-
-      /* buttons */
-      button {
-          background-color: #4CAF50;
-          border: none;
-          border-radius: 8px;
-          color: white;
-          padding: 6px 12px;
-          text-align: center;
-          text-decoration: none;
-          display: inline-block;
-          margin: 2px 0px;
-      }
-
-    button:hover {
-        box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
-    }
     </style>
   </head>
   <body>
@@ -118,11 +98,6 @@
 	<input type="radio" style="display: inline;" name="page_components"></input>
 	<span></span>
       </li>
-      <li id="import_li_template">
-	<span></span>
-	<input type="checkbox" style="display: inline;" checked></input>
-	<span></span>
-      </li>
     </div>
 
     <!-- Mind the show_*s ids below - their format is assumed in js code -->
@@ -243,25 +218,7 @@
 
     <div id="import_window" class="hide popup" position="absolute">
       <div class="popup_frame">
-	<h2> Settings import </h2>
-	<input id="import_loading_radio" type="radio" name="import_window_content"></input>
-	<span class="import_window_content"> Loading... </span>
-	<input id="import_failed_radio" type="radio" name="import_window_content"></input>
-	<div class="import_window_content">
-	  <span> Bad file :( </span>
-	  <pre id="bad_file_errormsg"></pre>
-	  <button id="import_failok_but"> OK </button>
-	</div>
-	<input id="import_selection_radio" type="radio" name="import_window_content"></input>
-	<div class="import_window_content">
-	  <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>
-	  <button id="commit_import_but"> OK </button>
-	  <button id="cancel_import_but"> Cancel </button>
-	</div>
+	<IMPORT html/import_frame.html />
       </div>
     </div>
 
diff --git a/html/options_main.js b/html/options_main.js
index 6aed8bb..830c860 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -13,26 +13,23 @@
  * IMPORT list_prefixes
  * IMPORT nice_name
  * IMPORT parse_json_with_schema
+ * IMPORT by_id
+ * IMPORT matchers
+ * IMPORT get_import_frame
  * IMPORTS_END
  */
 
 var storage;
-function by_id(id)
-{
-    return document.getElementById(id);
-}
 
 const item_li_template = by_id("item_li_template");
 const bag_component_li_template = by_id("bag_component_li_template");
 const chbx_component_li_template = by_id("chbx_component_li_template");
 const radio_component_li_template = by_id("radio_component_li_template");
-const import_li_template = by_id("import_li_template");
 /* Make sure they are later cloned without id. */
 item_li_template.removeAttribute("id");
 bag_component_li_template.removeAttribute("id");
 chbx_component_li_template.removeAttribute("id");
 radio_component_li_template.removeAttribute("id");
-import_li_template.removeAttribute("id");
 
 function item_li_id(prefix, item)
 {
@@ -224,7 +221,6 @@ function reset_work_bag_li(ul, item, components)
     ul.work_li.insertBefore(bag_components_ul, old_components_ul);
     ul.work_li.removeChild(old_components_ul);
 
-    console.log("bag components", components);
     add_bag_components(components);
 }
 
@@ -519,12 +515,6 @@ const ul_by_prefix = {
     }
 }
 
-const import_window = by_id("import_window");
-const import_loading_radio = by_id("import_loading_radio");
-const import_failed_radio = by_id("import_failed_radio");
-const import_selection_radio = by_id("import_selection_radio");
-const bad_file_errormsg = by_id("bad_file_errormsg");
-
 /*
  * Newer browsers could utilise `text' method of File objects.
  * Older ones require FileReader.
@@ -545,31 +535,30 @@ function read_file(file)
 		       _read_file(file, resolve, reject));
 }
 
-const url_regex = /^[a-z0-9]+:\/\/[^/]+\.[^/]{2}(\/[^?#]*)?$/;
-const sha256_regex = /^[0-9a-f]{64}$/;
-const component_schema = [
-    new RegExp(`^[${TYPE_PREFIX.SCRIPT}${TYPE_PREFIX.BAG}]$`),
-    /.+/
-];
+const url_regex = /^[a-z0-9]+:\/\/[^/]+\.[^/]{2,}(\/[^?#]*)?$/;
+const empty_regex = /^$/;
 
 const settings_schema = [
     [{}, "matchentry", "minentries", 1,
      new RegExp(`^${TYPE_PREFIX.SCRIPT}`), {
 	 /* script data */
-	 "url":    ["optional", url_regex],
-	 "sha256": ["optional", sha256_regex],
+	 "url":    ["optional", url_regex, "or", empty_regex],
+	 "sha256": ["optional", matchers.sha256, "or", empty_regex],
 	 "text":   ["optional", "string"]
      },
      new RegExp(`^${TYPE_PREFIX.BAG}`), [
 	 "optional",
-	 [component_schema, "repeat"],
+	 [matchers.component, "repeat"],
 	 "default", undefined
      ],
      new RegExp(`^${TYPE_PREFIX.PAGE}`), {
 	 /* page data */
-	 "components": ["optional", component_schema]
+	 "components": ["optional", matchers.component]
      }], "repeat"
-]
+];
+
+const import_window = by_id("import_window");
+let import_frame;
 
 async function import_from_file(event)
 {
@@ -578,86 +567,17 @@ async function import_from_file(event)
 	return;
 
     import_window.classList.remove("hide");
-    import_loading_radio.checked = true;
-
-    let result = undefined;
+    import_frame.show_loading();
 
     try {
-	result = parse_json_with_schema(settings_schema,
-					await read_file(files[0]));
+	const file = await read_file(files[0]);
+	var result = parse_json_with_schema(settings_schema, file);
     } catch(e) {
-	bad_file_errormsg.textContent = "" + e;
-	import_failed_radio.checked = true;
+	import_frame.show_error("Bad file :(", "" + e);
 	return;
     }
 
-    populate_import_list(result);
-    import_selection_radio.checked = true;
-}
-
-function import_li_id(prefix, item)
-{
-    return `ili_${prefix}_${item}`;
-}
-
-let import_ul = by_id("import_ul");
-let import_chbxs_colliding = undefined;
-let settings_import_map = undefined;
-
-function populate_import_list(settings)
-{
-    let old_children = import_ul.children;
-    while (old_children[0] !== undefined)
-	import_ul.removeChild(old_children[0]);
-
-    import_chbxs_colliding = [];
-    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);
-	settings_import_map.set(key, value);
-    }
-}
-
-function add_import_li(prefix, name)
-{
-    let li = import_li_template.cloneNode(true);
-    let name_span = li.firstElementChild;
-    let chbx = name_span.nextElementSibling;
-    let warning_span = chbx.nextElementSibling;
-
-    li.setAttribute("data-prefix", prefix);
-    li.setAttribute("data-name", name);
-    li.id = import_li_id(prefix, name);
-    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_ul.appendChild(li);
-}
-
-function check_all_imports()
-{
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = true;
-}
-
-function uncheck_all_imports()
-{
-    for (let li of import_ul.children)
-	li.firstElementChild.nextElementSibling.checked = false;
-}
-
-function uncheck_colliding_imports()
-{
-    for (let chbx of import_chbxs_colliding)
-	chbx.checked = false;
+    import_frame.show_selection(result);
 }
 
 const file_opener_form = by_id("file_opener_form");
@@ -665,9 +585,6 @@ const file_opener_form = by_id("file_opener_form");
 function hide_import_window()
 {
     import_window.classList.add("hide");
-    /* Let GC free some memory */
-    import_chbxs_colliding = undefined;
-    settings_import_map = undefined;
 
     /*
      * Reset file <input>. Without this, a second attempt to import the same
@@ -676,43 +593,16 @@ function hide_import_window()
     file_opener_form.reset();
 }
 
-function commit_import()
-{
-    for (let li of import_ul.children) {
-	let chbx = li.firstElementChild.nextElementSibling;
-
-	if (!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);
-    }
-
-    hide_import_window();
-}
-
-function initialize_import_facility()
+async function initialize_import_facility()
 {
     let import_but = by_id("import_but");
     let file_opener = by_id("file_opener");
-    let import_failok_but = by_id("import_failok_but");
-    let check_all_import_but = by_id("check_all_import_but");
-    let uncheck_all_import_but = by_id("uncheck_all_import_but");
-    let uncheck_existing_import_but = by_id("uncheck_existing_import_but");
-    let commit_import_but = by_id("commit_import_but");
-    let cancel_import_but = by_id("cancel_import_but");
+
     import_but.addEventListener("click", () => file_opener.click());
     file_opener.addEventListener("change", import_from_file);
-    import_failok_but.addEventListener("click", hide_import_window);
-    check_all_import_but.addEventListener("click", check_all_imports);
-    uncheck_all_import_but.addEventListener("click", uncheck_all_imports);
-    uncheck_colliding_import_but
-	.addEventListener("click", uncheck_colliding_imports);
-    commit_import_but.addEventListener("click", commit_import);
-    cancel_import_but.addEventListener("click", hide_import_window);
+
+    import_frame = await get_import_frame();
+    import_frame.onclose = hide_import_window;
 }
 
 /*
@@ -784,9 +674,9 @@ async function main()
 
     jump_to_item(document.URL);
 
-    initialize_import_facility();
-
     storage.add_change_listener(handle_change);
+
+    await initialize_import_facility();
 }
 
 function handle_change(change)
-- 
cgit v1.2.3