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
author: Wojtek Kosior <koszko@koszko.org> 2021-08-06 17:17:45 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-08-06 17:17:45 +0200
commit: 792fbe187bdffca4a748e88d66ea29f8936ae5c8 (patch)
tree: 5ccc504bd06cbae6bba12bc4f2e060fa2ad96ec3 /html
parent: 90896bcfeb4e55c78d9a15700a6a4580f0df6365 (diff)
download: browser-extension-792fbe187bdffca4a748e88d66ea29f8936ae5c8.tar.gz
browser-extension-792fbe187bdffca4a748e88d66ea29f8936ae5c8.zip
8 files changed, 711 insertions, 286 deletions
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)
author	Wojtek Kosior <koszko@koszko.org>	2021-08-06 17:17:45 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-08-06 17:17:45 +0200
commit	792fbe187bdffca4a748e88d66ea29f8936ae5c8 (patch)
tree	5ccc504bd06cbae6bba12bc4f2e060fa2ad96ec3 /html
parent	90896bcfeb4e55c78d9a15700a6a4580f0df6365 (diff)
download	browser-extension-792fbe187bdffca4a748e88d66ea29f8936ae5c8.tar.gz browser-extension-792fbe187bdffca4a748e88d66ea29f8936ae5c8.zip