emply an sh-based build system; make some changes to blocking

author: Wojtek Kosior <koszko@koszko.org> 2021-06-30 12:28:05 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-06-30 12:28:05 +0200
commit: 261548ff184926567a623e90df7954aeef842d59 (patch)
tree: 9b5697a77c758eaae969a8fba8b4edea5ecf59d4 /html
parent: 83a8d263f6efddf4f742bf7a687d10bfd1907ef8 (diff)
download: browser-extension-261548ff184926567a623e90df7954aeef842d59.tar.gz
browser-extension-261548ff184926567a623e90df7954aeef842d59.zip
4 files changed, 640 insertions, 649 deletions
diff --git a/html/display-panel.html b/html/display-panel.html
index 40bb535..5e5580e 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -9,8 +9,6 @@
     <title>Myext popup</title>
   </head>
   <body>
-    <button id="settings_but" type="button">Settings</button>
-    <script src="/common/browser.js"></script>
-    <script src="./display-panel.js"></script>
+    <button id="settings_but" type="button">Settings</button>_POPUPSCRIPTS_
   </body>
 </html>
diff --git a/html/display-panel.js b/html/display-panel.js
index 9bd683c..4a4cdcd 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -5,11 +5,11 @@
  * Redistribution terms are gathered in the `copyright' file.
  */
 
-"use strict";
-
-(() => {
-    const browser = window.browser;
+/*
+ * IMPORTS_START
+ * IMPORT browser
+ * IMPORTS_END
+ */
 
-    document.getElementById("settings_but")
-	.addEventListener("click", (e) => browser.runtime.openOptionsPage());
-})();
+document.getElementById("settings_but")
+    .addEventListener("click", (e) => browser.runtime.openOptionsPage());
diff --git a/html/options.html b/html/options.html
index c380fc4..03978c7 100644
--- a/html/options.html
+++ b/html/options.html
@@ -249,13 +249,6 @@
     <a id="file_downloader" class="hide"></a>
     <form id="file_opener_form" style="visibility: hidden;">
       <input type="file" id="file_opener"></input>
-    </form>
-
-    <script src="/common/connection_types.js"></script>
-    <script src="/common/stored_types.js"></script>
-    <script src="/common/once.js"></script>
-    <script src="/common/browser.js"></script>
-    <script src="/common/storage_client.js"></script>
-    <script src="./options_main.js"></script>
+    </form>_OPTIONSSCRIPTS_
   </body>
 </html>
diff --git a/html/options_main.js b/html/options_main.js
index ef01e60..6f203fa 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -5,746 +5,746 @@
  * Redistribution terms are gathered in the `copyright' file.
  */
 
-"use strict";
-
-(() => {
-    const get_storage = window.get_storage;
-    const TYPE_PREFIX = window.TYPE_PREFIX;
-    const TYPE_NAME = window.TYPE_NAME;
-    const list_prefixes = window.list_prefixes;
-
-    var storage;
-    function by_id(id)
-    {
-	return document.getElementById(id);
-    }
-
-    function nice_name(prefix, name)
-    {
-	return `${name} (${TYPE_NAME[prefix]})`;
-    }
-
-    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)
-    {
-	return `li_${prefix}_${item}`;
-    }
-
-    /* Insert into list of bags/pages/scripts */
-    function add_li(prefix, item, at_the_end=false)
-    {
-	let ul = ul_by_prefix[prefix];
-	let li = item_li_template.cloneNode(true);
-	li.id = item_li_id(prefix, item);
-
-	let span = li.firstElementChild;
-	span.textContent = item;
-
-	let edit_button = span.nextElementSibling;
-	edit_button.addEventListener("click", () => edit_item(prefix, item));
-
-	let remove_button = edit_button.nextElementSibling;
-	remove_button.addEventListener("click",
-				       () => storage.remove(prefix, item));
-
-	let export_button = remove_button.nextElementSibling;
-	export_button.addEventListener("click",
-				       () => export_item(prefix, item));
+/*
+ * IMPORTS_START
+ * IMPORT get_remote_storage
+ * IMPORT TYPE_PREFIX
+ * IMPORT TYPE_NAME
+ * IMPORT list_prefixes
+ * IMPORTS_END
+ */
 
-	if (!at_the_end) {
-	    for (let element of ul.ul.children) {
-		if (element.id < li.id || element.id.startsWith("work_"))
-		    continue;
+var storage;
+function by_id(id)
+{
+    return document.getElementById(id);
+}
+
+function nice_name(prefix, name)
+{
+    return `${name} (${TYPE_NAME[prefix]})`;
+}
+
+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)
+{
+    return `li_${prefix}_${item}`;
+}
+
+/* Insert into list of bags/pages/scripts */
+function add_li(prefix, item, at_the_end=false)
+{
+    let ul = ul_by_prefix[prefix];
+    let li = item_li_template.cloneNode(true);
+    li.id = item_li_id(prefix, item);
+
+    let span = li.firstElementChild;
+    span.textContent = item;
+
+    let edit_button = span.nextElementSibling;
+    edit_button.addEventListener("click", () => edit_item(prefix, item));
+
+    let remove_button = edit_button.nextElementSibling;
+    remove_button.addEventListener("click",
+				   () => storage.remove(prefix, item));
+
+    let export_button = remove_button.nextElementSibling;
+    export_button.addEventListener("click",
+				   () => export_item(prefix, item));
+
+    if (!at_the_end) {
+	for (let element of ul.ul.children) {
+	    if (element.id < li.id || element.id.startsWith("work_"))
+		continue;
 
-		ul.ul.insertBefore(li, element);
-		return;
-	    }
+	    ul.ul.insertBefore(li, element);
+	    return;
 	}
-
-	ul.ul.appendChild(li);
     }
 
-    const chbx_components_ul = by_id("chbx_components_ul");
-    const radio_components_ul = by_id("radio_components_ul");
+    ul.ul.appendChild(li);
+}
 
-    function chbx_li_id(prefix, item)
-    {
-	return `cli_${prefix}_${item}`;
-    }
+const chbx_components_ul = by_id("chbx_components_ul");
+const radio_components_ul = by_id("radio_components_ul");
 
-    function radio_li_id(prefix, item)
-    {
-	return `rli_${prefix}_${item}`;
-    }
+function chbx_li_id(prefix, item)
+{
+    return `cli_${prefix}_${item}`;
+}
 
-    //TODO: refactor the 2 functions below
+function radio_li_id(prefix, item)
+{
+    return `rli_${prefix}_${item}`;
+}
 
-    function add_chbx_li(prefix, name)
-    {
-	if (prefix === TYPE_PREFIX.PAGE)
-	    return;
+//TODO: refactor the 2 functions below
 
-	let li = chbx_component_li_template.cloneNode(true);
-	li.id = chbx_li_id(prefix, name);
-	li.setAttribute("data-prefix", prefix);
-	li.setAttribute("data-name", name);
-
-	let chbx = li.firstElementChild;
-	let span = chbx.nextElementSibling;
-
-	span.textContent = nice_name(prefix, name);
-
-	chbx_components_ul.appendChild(li);
-    }
-
-    var radio_component_none_li = by_id("radio_component_none_li");
+function add_chbx_li(prefix, name)
+{
+    if (prefix === TYPE_PREFIX.PAGE)
+	return;
 
-    function add_radio_li(prefix, name)
-    {
-	if (prefix === TYPE_PREFIX.PAGE)
-	    return;
+    let li = chbx_component_li_template.cloneNode(true);
+    li.id = chbx_li_id(prefix, name);
+    li.setAttribute("data-prefix", prefix);
+    li.setAttribute("data-name", name);
 
-	let li = radio_component_li_template.cloneNode(true);
-	li.id = radio_li_id(prefix, name);
-	li.setAttribute("data-prefix", prefix);
-	li.setAttribute("data-name", name);
+    let chbx = li.firstElementChild;
+    let span = chbx.nextElementSibling;
 
-	let radio = li.firstElementChild;
-	let span = radio.nextElementSibling;
+    span.textContent = nice_name(prefix, name);
 
-	span.textContent = nice_name(prefix, name);
+    chbx_components_ul.appendChild(li);
+}
 
-	radio_components_ul.insertBefore(li, radio_component_none_li);
-    }
-
-    const page_payload_span = by_id("page_payload");
-
-    function set_page_components(components)
-    {
-	if (components === undefined) {
-	    page_payload_span.setAttribute("data-payload", "no");
-	    page_payload_span.textContent = "(None)";
-	} else {
-	    page_payload_span.setAttribute("data-payload", "yes");
-	    let [prefix, name] = components;
-	    page_payload_span.setAttribute("data-prefix", prefix);
-	    page_payload_span.setAttribute("data-name", name);
-	    page_payload_span.textContent = nice_name(prefix, name);
-	}
-    }
+var radio_component_none_li = by_id("radio_component_none_li");
 
-    const page_allow_chbx = by_id("page_allow_chbx");
+function add_radio_li(prefix, name)
+{
+    if (prefix === TYPE_PREFIX.PAGE)
+	return;
 
-    /* Used to reset edited page. */
-    function reset_work_page_li(ul, item, settings)
-    {
-	ul.work_name_input.value = maybe_string(item);
-	settings = settings || {allow: false, components: undefined};
-	page_allow_chbx.checked = !!settings.allow;
+    let li = radio_component_li_template.cloneNode(true);
+    li.id = radio_li_id(prefix, name);
+    li.setAttribute("data-prefix", prefix);
+    li.setAttribute("data-name", name);
 
-	set_page_components(settings.components);
-    }
+    let radio = li.firstElementChild;
+    let span = radio.nextElementSibling;
 
-    function work_page_li_components()
-    {
-	if (page_payload_span.getAttribute("data-payload") === "no")
-	    return undefined;
+    span.textContent = nice_name(prefix, name);
 
-	let prefix = page_payload_span.getAttribute("data-prefix");
-	let name = page_payload_span.getAttribute("data-name");
-	return [prefix, name];
-    }
+    radio_components_ul.insertBefore(li, radio_component_none_li);
+}
 
-    /* Used to get edited page data for saving. */
-    function work_page_li_data(ul)
-    {
-	let url = ul.work_name_input.value;
-	let settings = {
-	    components : work_page_li_components(),
-	    allow : !!page_allow_chbx.checked
-	};
+const page_payload_span = by_id("page_payload");
 
-	return [url, settings];
+function set_page_components(components)
+{
+    if (components === undefined) {
+	page_payload_span.setAttribute("data-payload", "no");
+	page_payload_span.textContent = "(None)";
+    } else {
+	page_payload_span.setAttribute("data-payload", "yes");
+	let [prefix, name] = components;
+	page_payload_span.setAttribute("data-prefix", prefix);
+	page_payload_span.setAttribute("data-name", name);
+	page_payload_span.textContent = nice_name(prefix, name);
     }
+}
 
-    const empty_bag_component_li = by_id("empty_bag_component_li");
-    var bag_components_ul = by_id("bag_components_ul");
-
-    /* Used to construct and update components list of edited bag. */
-    function add_bag_components(components)
-    {
-	for (let component of components) {
-	    let [prefix, name] = component;
-	    let li = bag_component_li_template.cloneNode(true);
-	    li.setAttribute("data-prefix", prefix);
-	    li.setAttribute("data-name", name);
-	    let span = li.firstElementChild;
-	    span.textContent = nice_name(prefix, name);
-	    let remove_but = span.nextElementSibling;
-	    remove_but.addEventListener("click", () =>
-					bag_components_ul.removeChild(li));
-	    bag_components_ul.appendChild(li);
-	}
-
-	bag_components_ul.appendChild(empty_bag_component_li);
-    }
+const page_allow_chbx = by_id("page_allow_chbx");
 
-    /* Used to reset edited bag. */
-    function reset_work_bag_li(ul, item, components)
-    {
-	components = components || [];
+/* Used to reset edited page. */
+function reset_work_page_li(ul, item, settings)
+{
+    ul.work_name_input.value = maybe_string(item);
+    settings = settings || {allow: false, components: undefined};
+    page_allow_chbx.checked = !!settings.allow;
 
-	ul.work_name_input.value = maybe_string(item);
-	let old_components_ul = bag_components_ul;
-	bag_components_ul = old_components_ul.cloneNode(false);
+    set_page_components(settings.components);
+}
 
-	ul.work_li.insertBefore(bag_components_ul, old_components_ul);
-	ul.work_li.removeChild(old_components_ul);
+function work_page_li_components()
+{
+    if (page_payload_span.getAttribute("data-payload") === "no")
+	return undefined;
 
-	add_bag_components(components);
-    }
+    let prefix = page_payload_span.getAttribute("data-prefix");
+    let name = page_payload_span.getAttribute("data-name");
+    return [prefix, name];
+}
 
-    /* Used to get edited bag data for saving. */
-    function work_bag_li_data(ul)
-    {
-	let components_ul = ul.work_name_input.nextElementSibling;
-	let component_li = components_ul.firstElementChild;
+/* Used to get edited page data for saving. */
+function work_page_li_data(ul)
+{
+    let url = ul.work_name_input.value;
+    let settings = {
+	components : work_page_li_components(),
+	allow : !!page_allow_chbx.checked
+    };
 
-	let components = [];
+    return [url, settings];
+}
 
-	/* Last list element is empty li with id set. */
-	while (component_li.id === '') {
-	    components.push([component_li.getAttribute("data-prefix"),
-			     component_li.getAttribute("data-name")]);
-	    component_li = component_li.nextElementSibling;
-	}
+const empty_bag_component_li = by_id("empty_bag_component_li");
+var bag_components_ul = by_id("bag_components_ul");
 
-	return [ul.work_name_input.value, components];
+/* Used to construct and update components list of edited bag. */
+function add_bag_components(components)
+{
+    for (let component of components) {
+	let [prefix, name] = component;
+	let li = bag_component_li_template.cloneNode(true);
+	li.setAttribute("data-prefix", prefix);
+	li.setAttribute("data-name", name);
+	let span = li.firstElementChild;
+	span.textContent = nice_name(prefix, name);
+	let remove_but = span.nextElementSibling;
+	remove_but.addEventListener("click", () =>
+				    bag_components_ul.removeChild(li));
+	bag_components_ul.appendChild(li);
     }
 
-    const script_url_input = by_id("script_url_field");
-    const script_sha256_input = by_id("script_sha256_field");
-    const script_contents_field = by_id("script_contents_field");
+    bag_components_ul.appendChild(empty_bag_component_li);
+}
 
-    function maybe_string(maybe_defined)
-    {
-	return maybe_defined === undefined ? "" : maybe_defined + "";
-    }
+/* Used to reset edited bag. */
+function reset_work_bag_li(ul, item, components)
+{
+    components = components || [];
 
-    /* Used to reset edited script. */
-    function reset_work_script_li(ul, name, data)
-    {
-	ul.work_name_input.value = maybe_string(name);
-	if (data === undefined)
-	    data = {};
-	script_url_input.value = maybe_string(data.url);
-	script_sha256_input.value = maybe_string(data.hash);
-	script_contents_field.value = maybe_string(data.text);
-    }
+    ul.work_name_input.value = maybe_string(item);
+    let old_components_ul = bag_components_ul;
+    bag_components_ul = old_components_ul.cloneNode(false);
 
-    /* Used to get edited script data for saving. */
-    function work_script_li_data(ul)
-    {
-	return [ul.work_name_input.value, {
-	    url : script_url_input.value,
-	    hash : script_sha256_input.value,
-	    text : script_contents_field.value
-	}];
-    }
+    ul.work_li.insertBefore(bag_components_ul, old_components_ul);
+    ul.work_li.removeChild(old_components_ul);
 
-    function cancel_work(prefix)
-    {
-	let ul = ul_by_prefix[prefix];
+    add_bag_components(components);
+}
 
-	if (ul.state === UL_STATE.IDLE)
-	    return;
+/* Used to get edited bag data for saving. */
+function work_bag_li_data(ul)
+{
+    let components_ul = ul.work_name_input.nextElementSibling;
+    let component_li = components_ul.firstElementChild;
 
-	if (ul.state === UL_STATE.EDITING_ENTRY) {
-	    add_li(prefix, ul.edited_item);
-	}
+    let components = [];
 
-	ul.work_li.classList.add("hide");
-	ul.state = UL_STATE.IDLE;
+    /* Last list element is empty li with id set. */
+    while (component_li.id === '') {
+	components.push([component_li.getAttribute("data-prefix"),
+			 component_li.getAttribute("data-name")]);
+	component_li = component_li.nextElementSibling;
     }
 
-    function save_work(prefix)
-    {
-	let ul = ul_by_prefix[prefix];
+    return [ul.work_name_input.value, components];
+}
 
-	if (ul.state === UL_STATE.IDLE)
-	    return;
+const script_url_input = by_id("script_url_field");
+const script_sha256_input = by_id("script_sha256_field");
+const script_contents_field = by_id("script_contents_field");
 
-	let [item, data] = ul.get_work_li_data(ul);
+function maybe_string(maybe_defined)
+{
+    return maybe_defined === undefined ? "" : maybe_defined + "";
+}
 
-	/* Here we fire promises and return without waiting. */
+/* Used to reset edited script. */
+function reset_work_script_li(ul, name, data)
+{
+    ul.work_name_input.value = maybe_string(name);
+    if (data === undefined)
+	data = {};
+    script_url_input.value = maybe_string(data.url);
+    script_sha256_input.value = maybe_string(data.hash);
+    script_contents_field.value = maybe_string(data.text);
+}
 
-	if (ul.state === UL_STATE.EDITING_ENTRY)
-	    storage.replace(prefix, ul.edited_item, item, data);
-	if (ul.state === UL_STATE.ADDING_ENTRY)
-	    storage.set(prefix, item, data);
+/* Used to get edited script data for saving. */
+function work_script_li_data(ul)
+{
+    return [ul.work_name_input.value, {
+	url : script_url_input.value,
+	hash : script_sha256_input.value,
+	text : script_contents_field.value
+    }];
+}
 
-	cancel_work(prefix);
-    }
+function cancel_work(prefix)
+{
+    let ul = ul_by_prefix[prefix];
 
-    function edit_item(prefix, item)
-    {
-	cancel_work(prefix);
+    if (ul.state === UL_STATE.IDLE)
+	return;
 
-	let ul = ul_by_prefix[prefix];
-	let li = by_id(item_li_id(prefix, item));
-	ul.reset_work_li(ul, item, storage.get(prefix, item));
-	ul.ul.insertBefore(ul.work_li, li);
-	ul.ul.removeChild(li);
-	ul.work_li.classList.remove("hide");
-
-	ul.state = UL_STATE.EDITING_ENTRY;
-	ul.edited_item = item;
+    if (ul.state === UL_STATE.EDITING_ENTRY) {
+	add_li(prefix, ul.edited_item);
     }
 
-    const file_downloader = by_id("file_downloader");
+    ul.work_li.classList.add("hide");
+    ul.state = UL_STATE.IDLE;
+}
 
-    function recursively_export_item(prefix, name, added_items, items_data)
-    {
-	let key = prefix + name;
+function save_work(prefix)
+{
+    let ul = ul_by_prefix[prefix];
 
-	if (added_items.has(key))
-	    return;
+    if (ul.state === UL_STATE.IDLE)
+	return;
 
-	let data = storage.get(prefix, name);
-	if (data === undefined) {
-	    console.log(`${TYPE_NAME[prefix]} '${name}' for export not found`);
-	    return;
-	}
+    let [item, data] = ul.get_work_li_data(ul);
 
-	if (prefix !== TYPE_PREFIX.SCRIPT) {
-	    let components = prefix === TYPE_PREFIX.BAG ?
-		data : [data.components];
+    /* Here we fire promises and return without waiting. */
 
-	    for (let [comp_prefix, comp_name] of components) {
-		recursively_export_item(comp_prefix, comp_name,
-					added_items, items_data);
-	    }
-	}
+    if (ul.state === UL_STATE.EDITING_ENTRY)
+	storage.replace(prefix, ul.edited_item, item, data);
+    if (ul.state === UL_STATE.ADDING_ENTRY)
+	storage.set(prefix, item, data);
 
-	items_data.push({[key]: data});
-	added_items.add(key);
-    }
+    cancel_work(prefix);
+}
 
-    function export_item(prefix, name)
-    {
-	let added_items = new Set();
-	let items_data = [];
-	recursively_export_item(prefix, name, added_items, items_data);
-	let file = new Blob([JSON.stringify(items_data)],
-			    {type: "application/json"});
-	let url = URL.createObjectURL(file);
-	file_downloader.setAttribute("href", url);
-	file_downloader.setAttribute("download", prefix + name + ".json");
-	file_downloader.click();
-	file_downloader.removeAttribute("href");
-	URL.revokeObjectURL(url);
-    }
+function edit_item(prefix, item)
+{
+    cancel_work(prefix);
 
-    function add_new_item(prefix)
-    {
-	cancel_work(prefix);
+    let ul = ul_by_prefix[prefix];
+    let li = by_id(item_li_id(prefix, item));
+    ul.reset_work_li(ul, item, storage.get(prefix, item));
+    ul.ul.insertBefore(ul.work_li, li);
+    ul.ul.removeChild(li);
+    ul.work_li.classList.remove("hide");
 
-	let ul = ul_by_prefix[prefix];
-	ul.reset_work_li(ul);
-	ul.work_li.classList.remove("hide");
-	ul.ul.appendChild(ul.work_li);
+    ul.state = UL_STATE.EDITING_ENTRY;
+    ul.edited_item = item;
+}
 
-	ul.state = UL_STATE.ADDING_ENTRY;
-    }
+const file_downloader = by_id("file_downloader");
 
-    const chbx_components_window = by_id("chbx_components_window");
+function recursively_export_item(prefix, name, added_items, items_data)
+{
+    let key = prefix + name;
 
-    function bag_components()
-    {
-	chbx_components_window.classList.remove("hide");
-	radio_components_window.classList.add("hide");
+    if (added_items.has(key))
+	return;
 
-	for (let li of chbx_components_ul.children) {
-	    let chbx = li.firstElementChild;
-	    chbx.checked = false;
-	}
+    let data = storage.get(prefix, name);
+    if (data === undefined) {
+	console.log(`${TYPE_NAME[prefix]} '${name}' for export not found`);
+	return;
     }
 
-    function commit_bag_components()
-    {
-	let selected = [];
-
-	for (let li of chbx_components_ul.children) {
-	    let chbx = li.firstElementChild;
-	    if (!chbx.checked)
-		continue;
-
-	    selected.push([li.getAttribute("data-prefix"),
-			   li.getAttribute("data-name")]);
+    if (prefix !== TYPE_PREFIX.SCRIPT) {
+	let components = prefix === TYPE_PREFIX.BAG ?
+	    data : [data.components];
+
+	for (let [comp_prefix, comp_name] of components) {
+	    recursively_export_item(comp_prefix, comp_name,
+				    added_items, items_data);
 	}
-
-	add_bag_components(selected);
-	cancel_components();
     }
 
-    const radio_components_window = by_id("radio_components_window");
-    var radio_component_none_input = by_id("radio_component_none_input");
-
-    function page_components()
-    {
-	radio_components_window.classList.remove("hide");
-	chbx_components_window.classList.add("hide");
+    items_data.push({[key]: data});
+    added_items.add(key);
+}
+
+function export_item(prefix, name)
+{
+    let added_items = new Set();
+    let items_data = [];
+    recursively_export_item(prefix, name, added_items, items_data);
+    let file = new Blob([JSON.stringify(items_data)],
+			{type: "application/json"});
+    let url = URL.createObjectURL(file);
+    file_downloader.setAttribute("href", url);
+    file_downloader.setAttribute("download", prefix + name + ".json");
+    file_downloader.click();
+    file_downloader.removeAttribute("href");
+    URL.revokeObjectURL(url);
+}
+
+function add_new_item(prefix)
+{
+    cancel_work(prefix);
+
+    let ul = ul_by_prefix[prefix];
+    ul.reset_work_li(ul);
+    ul.work_li.classList.remove("hide");
+    ul.ul.appendChild(ul.work_li);
+
+    ul.state = UL_STATE.ADDING_ENTRY;
+}
+
+const chbx_components_window = by_id("chbx_components_window");
+
+function bag_components()
+{
+    chbx_components_window.classList.remove("hide");
+    radio_components_window.classList.add("hide");
+
+    for (let li of chbx_components_ul.children) {
+	let chbx = li.firstElementChild;
+	chbx.checked = false;
+    }
+}
 
-	radio_component_none_input.checked = true;
+function commit_bag_components()
+{
+    let selected = [];
 
-	let components = work_page_li_components();
-	if (components === undefined)
-	    return;
+    for (let li of chbx_components_ul.children) {
+	let chbx = li.firstElementChild;
+	if (!chbx.checked)
+	    continue;
 
-	let [prefix, item] = components;
-	let li = by_id(radio_li_id(prefix, item));
-	if (li === null)
-	    radio_component_none_input.checked = false;
-	else
-	    li.firstElementChild.checked = true;
+	selected.push([li.getAttribute("data-prefix"),
+		       li.getAttribute("data-name")]);
     }
 
-    function commit_page_components()
-    {
-	let components = null;
+    add_bag_components(selected);
+    cancel_components();
+}
 
-	for (let li of radio_components_ul.children) {
-	    let radio = li.firstElementChild;
-	    if (!radio.checked)
-		continue;
+const radio_components_window = by_id("radio_components_window");
+var radio_component_none_input = by_id("radio_component_none_input");
 
-	    components = [li.getAttribute("data-prefix"),
-			  li.getAttribute("data-name")];
+function page_components()
+{
+    radio_components_window.classList.remove("hide");
+    chbx_components_window.classList.add("hide");
 
-	    if (radio.id === "radio_component_none_input")
-		components = undefined;
+    radio_component_none_input.checked = true;
 
-	    break;
-	}
+    let components = work_page_li_components();
+    if (components === undefined)
+	return;
 
-	if (components !== null)
-	    set_page_components(components);
-	cancel_components();
-    }
+    let [prefix, item] = components;
+    let li = by_id(radio_li_id(prefix, item));
+    if (li === null)
+	radio_component_none_input.checked = false;
+    else
+	li.firstElementChild.checked = true;
+}
 
-    function cancel_components()
-    {
-	chbx_components_window.classList.add("hide");
-	radio_components_window.classList.add("hide");
-    }
+function commit_page_components()
+{
+    let components = null;
 
-    const UL_STATE = {
-	EDITING_ENTRY : 0,
-	ADDING_ENTRY : 1,
-	IDLE : 2
-    };
-
-    const ul_by_prefix = {
-	[TYPE_PREFIX.PAGE] : {
-	    ul : by_id("pages_ul"),
-	    work_li : by_id("work_page_li"),
-	    work_name_input : by_id("page_url_field"),
-	    reset_work_li : reset_work_page_li,
-	    get_work_li_data : work_page_li_data,
-	    select_components : page_components,
-	    commit_components : commit_page_components,
-	    state : UL_STATE.IDLE,
-	    edited_item : undefined,
-	},
-	[TYPE_PREFIX.BAG] : {
-	    ul : by_id("bags_ul"),
-	    work_li : by_id("work_bag_li"),
-	    work_name_input : by_id("bag_name_field"),
-	    reset_work_li : reset_work_bag_li,
-	    get_work_li_data : work_bag_li_data,
-	    select_components : bag_components,
-	    commit_components : commit_bag_components,
-	    state : UL_STATE.IDLE,
-	    edited_item : undefined,
-	},
-	[TYPE_PREFIX.SCRIPT] : {
-	    ul : by_id("scripts_ul"),
-	    work_li : by_id("work_script_li"),
-	    work_name_input : by_id("script_name_field"),
-	    reset_work_li : reset_work_script_li,
-	    get_work_li_data : work_script_li_data,
-	    state : UL_STATE.IDLE,
-	    edited_item : undefined,
-	}
-    }
+    for (let li of radio_components_ul.children) {
+	let radio = li.firstElementChild;
+	if (!radio.checked)
+	    continue;
+
+	components = [li.getAttribute("data-prefix"),
+		      li.getAttribute("data-name")];
+
+	if (radio.id === "radio_component_none_input")
+	    components = undefined;
+
+	break;
+    }
+
+    if (components !== null)
+	set_page_components(components);
+    cancel_components();
+}
+
+function cancel_components()
+{
+    chbx_components_window.classList.add("hide");
+    radio_components_window.classList.add("hide");
+}
+
+const UL_STATE = {
+    EDITING_ENTRY : 0,
+    ADDING_ENTRY : 1,
+    IDLE : 2
+};
+
+const ul_by_prefix = {
+    [TYPE_PREFIX.PAGE] : {
+	ul : by_id("pages_ul"),
+	work_li : by_id("work_page_li"),
+	work_name_input : by_id("page_url_field"),
+	reset_work_li : reset_work_page_li,
+	get_work_li_data : work_page_li_data,
+	select_components : page_components,
+	commit_components : commit_page_components,
+	state : UL_STATE.IDLE,
+	edited_item : undefined,
+    },
+    [TYPE_PREFIX.BAG] : {
+	ul : by_id("bags_ul"),
+	work_li : by_id("work_bag_li"),
+	work_name_input : by_id("bag_name_field"),
+	reset_work_li : reset_work_bag_li,
+	get_work_li_data : work_bag_li_data,
+	select_components : bag_components,
+	commit_components : commit_bag_components,
+	state : UL_STATE.IDLE,
+	edited_item : undefined,
+    },
+    [TYPE_PREFIX.SCRIPT] : {
+	ul : by_id("scripts_ul"),
+	work_li : by_id("work_script_li"),
+	work_name_input : by_id("script_name_field"),
+	reset_work_li : reset_work_script_li,
+	get_work_li_data : work_script_li_data,
+	state : UL_STATE.IDLE,
+	edited_item : undefined,
+    }
+}
+
+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.
+ */
 
-    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");
+function _read_file(file, resolve, reject)
+{
+    let reader = new FileReader();
+
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsText(file);
+}
+
+function read_file(file)
+{
+    return new Promise((resolve, reject) =>
+		       _read_file(file, resolve, reject));
+}
+
+async function import_from_file(event)
+{
+    let files = event.target.files;
+    if (files.length < 1)
+	return;
+
+    import_window.classList.remove("hide");
+    import_loading_radio.checked = true;
+
+    let result = undefined;
+
+    try {
+	result = JSON.parse(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}`;
+}
+
+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;
+}
+
+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;
 
     /*
-     * Newer browsers could utilise `text' method of File objects.
-     * Older ones require FileReader.
+     * Reset file <input>. Without this, a second attempt to import the same
+     * file would result in "change" event on happening on <input> element.
      */
+    file_opener_form.reset();
+}
 
-    function _read_file(file, resolve, reject)
-    {
-	let reader = new FileReader();
+function commit_import()
+{
+    for (let li of import_ul.children) {
+	let chbx = li.firstElementChild.nextElementSibling;
 
-	reader.onload = () => resolve(reader.result);
-	reader.onerror = () => reject(reader.error);
-	reader.readAsText(file);
-    }
-
-    function read_file(file)
-    {
-	return new Promise((resolve, reject) =>
-			   _read_file(file, resolve, reject));
-    }
+	if (!chbx.checked)
+	    continue;
 
-    async function import_from_file(event)
-    {
-	let files = event.target.files;
-	if (files.length < 1)
-	    return;
-
-	import_window.classList.remove("hide");
-	import_loading_radio.checked = true;
-
-	let result = undefined;
-
-	try {
-	    result = JSON.parse(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;
+	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()
+{
+    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);
+}
+
+async function main()
+{
+    storage = await get_remote_storage();
+
+    for (let prefix of list_prefixes) {
+	for (let item of storage.get_all_names(prefix).sort()) {
+	    add_li(prefix, item, true);
+	    add_chbx_li(prefix, item);
+	    add_radio_li(prefix, item);
 	}
 
-	populate_import_list(result);
-	import_selection_radio.checked = true;
-    }
-
-    function validate_settings(settings)
-    {
-	// TODO
-	return false;
-    }
+	let name = TYPE_NAME[prefix];
 
-    function import_li_id(prefix, item)
-    {
-	return `ili_${prefix}_${item}`;
-    }
+	let add_but = by_id(`add_${name}_but`);
+	let discard_but = by_id(`discard_${name}_but`);
+	let save_but = by_id(`save_${name}_but`);
 
-    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);
-	}
-    }
+	add_but.addEventListener("click", () => add_new_item(prefix));
+	discard_but.addEventListener("click", () => cancel_work(prefix));
+	save_but.addEventListener("click", () => save_work(prefix));
 
-    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;
+	if (prefix === TYPE_PREFIX.SCRIPT)
+	    continue;
 
-	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!)";
-	}
+	let ul = ul_by_prefix[prefix];
 
-	import_ul.appendChild(li);
-    }
+	let commit_components_but = by_id(`commit_${name}_components_but`);
+	let cancel_components_but = by_id(`cancel_${name}_components_but`);
+	let select_components_but = by_id(`select_${name}_components_but`);
 
-    function check_all_imports()
-    {
-	for (let li of import_ul.children)
-	    li.firstElementChild.nextElementSibling.checked = true;
+	commit_components_but
+	    .addEventListener("click", ul.commit_components);
+	select_components_but
+	    .addEventListener("click", ul.select_components);
+	cancel_components_but.addEventListener("click", cancel_components);
     }
 
-    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;
-    }
+    initialize_import_facility();
 
-    const file_opener_form = by_id("file_opener_form");
+    storage.add_change_listener(handle_change);
+}
 
-    function hide_import_window()
-    {
-	import_window.classList.add("hide");
-	/* Let GC free some memory */
-	import_chbxs_colliding = undefined;
-	settings_import_map = undefined;
+function handle_change(change)
+{
+    if (change.old_val === undefined) {
+	add_li(change.prefix, change.item);
+	add_chbx_li(change.prefix, change.item);
+	add_radio_li(change.prefix, change.item);
 
-	/*
-	 * Reset file <input>. Without this, a second attempt to import the same
-	 * file would result in "change" event on happening on <input> element.
-	 */
-	file_opener_form.reset();
+	return;
     }
 
-    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();
-    }
+    if (change.new_val !== undefined)
+	return;
 
-    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);
+    let ul = ul_by_prefix[change.prefix];
+    if (ul.state === UL_STATE.EDITING_ENTRY &&
+	ul.edited_item === change.item) {
+	ul.state = UL_STATE.ADDING_ENTRY;
+	return;
     }
 
-    async function main()
-    {
-	storage = await get_storage();
-
-	for (let prefix of list_prefixes) {
-	    for (let item of storage.get_all_names(prefix).sort()) {
-		add_li(prefix, item, true);
-		add_chbx_li(prefix, item);
-		add_radio_li(prefix, item);
-	    }
-
-	    let name = TYPE_NAME[prefix];
-
-	    let add_but = by_id(`add_${name}_but`);
-	    let discard_but = by_id(`discard_${name}_but`);
-	    let save_but = by_id(`save_${name}_but`);
-
-	    add_but.addEventListener("click", () => add_new_item(prefix));
-	    discard_but.addEventListener("click", () => cancel_work(prefix));
-	    save_but.addEventListener("click", () => save_work(prefix));
-
-	    if (prefix === TYPE_PREFIX.SCRIPT)
-		continue;
-
-	    let ul = ul_by_prefix[prefix];
-
-	    let commit_components_but = by_id(`commit_${name}_components_but`);
-	    let cancel_components_but = by_id(`cancel_${name}_components_but`);
-	    let select_components_but = by_id(`select_${name}_components_but`);
-
-	    commit_components_but
-		.addEventListener("click", ul.commit_components);
-	    select_components_but
-		.addEventListener("click", ul.select_components);
-	    cancel_components_but.addEventListener("click", cancel_components);
-	}
-
-	initialize_import_facility();
+    let uls_creators = [[ul.ul, item_li_id]];
 
-	storage.add_change_listener(handle_change);
+    if (change.prefix !== TYPE_PREFIX.PAGE) {
+	uls_creators.push([chbx_components_ul, chbx_li_id]);
+	uls_creators.push([radio_components_ul, radio_li_id]);
     }
 
-    function handle_change(change)
-    {
-	if (change.old_val === undefined) {
-	    add_li(change.prefix, change.item);
-	    add_chbx_li(change.prefix, change.item);
-	    add_radio_li(change.prefix, change.item);
-
-	    return;
-	}
-
-	if (change.new_val !== undefined)
-	    return;
-
-	let ul = ul_by_prefix[change.prefix];
-	if (ul.state === UL_STATE.EDITING_ENTRY &&
-	    ul.edited_item === change.item) {
-	    ul.state = UL_STATE.ADDING_ENTRY;
-	    return;
-	}
-
-	let uls_creators = [[ul.ul, item_li_id]];
-
-	if (change.prefix !== TYPE_PREFIX.PAGE) {
-	    uls_creators.push([chbx_components_ul, chbx_li_id]);
-	    uls_creators.push([radio_components_ul, radio_li_id]);
-	}
-
-	for (let [components_ul, id_creator] of uls_creators) {
-	    let li = by_id(id_creator(change.prefix, change.item));
-	    components_ul.removeChild(li);
-	}
+    for (let [components_ul, id_creator] of uls_creators) {
+	let li = by_id(id_creator(change.prefix, change.item));
+	components_ul.removeChild(li);
     }
+}
 
-    main();
-})();
+main();
author	Wojtek Kosior <koszko@koszko.org>	2021-06-30 12:28:05 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-06-30 12:28:05 +0200
commit	261548ff184926567a623e90df7954aeef842d59 (patch)
tree	9b5697a77c758eaae969a8fba8b4edea5ecf59d4 /html
parent	83a8d263f6efddf4f742bf7a687d10bfd1907ef8 (diff)
download	browser-extension-261548ff184926567a623e90df7954aeef842d59.tar.gz browser-extension-261548ff184926567a623e90df7954aeef842d59.zip