diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/base.css | 7 | ||||
| -rw-r--r-- | html/dialog.js | 14 | ||||
| -rw-r--r-- | html/install.html | 113 | ||||
| -rw-r--r-- | html/install.js | 453 | ||||
| -rw-r--r-- | html/item_list.js | 7 | ||||
| -rw-r--r-- | html/item_preview.js | 15 | ||||
| -rw-r--r-- | html/payload_create.js | 7 | ||||
| -rw-r--r-- | html/settings.html | 5 | ||||
| -rw-r--r-- | html/text_entry_list.js | 10 |
9 files changed, 606 insertions, 25 deletions
diff --git a/html/base.css b/html/base.css index 4575b10..df6213a 100644 --- a/html/base.css +++ b/html/base.css @@ -96,3 +96,10 @@ div.top_line { height: var(--line-height); background: linear-gradient(transparent, #555); } + +.text_center { + text-align: center; +} +.text_right { + text-align: right; +} diff --git a/html/dialog.js b/html/dialog.js index a2406e8..a4e275f 100644 --- a/html/dialog.js +++ b/html/dialog.js @@ -131,11 +131,15 @@ const loader = (ctx, ...msg) => show_dialog(ctx, null, msg); #EXPORT loader /* - * Wrapper around target.addEventListener() that makes the requested callback - * only execute if dialog is not shown. + * Wrapper the requested callback into one that only executes it if dialog is + * not shown. */ -function onevent(ctx, target, event, cb) +function when_hidden(ctx, cb) { - target.addEventListener(event, e => !ctx.shown && cb(e)); + function wrapped_cb(...args) { + if (!ctx.shown) + return cb(...args); + } + return wrapped_cb; } -#EXPORT onevent +#EXPORT when_hidden diff --git a/html/install.html b/html/install.html new file mode 100644 index 0000000..b8d0927 --- /dev/null +++ b/html/install.html @@ -0,0 +1,113 @@ +#IF !INSTALL_LOADED +#DEFINE INSTALL_LOADED +<!-- + SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 + + Install mappings/resources in Haketilo. + + This file is part of Haketilo. + + Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org> + + File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + I, Wojtek Kosior, thereby promise not to sue for violation of this file's + licenses. Although I request that you do not make use of this code in a + proprietary program, I am not going to enforce this in court. + --> + +<!-- + This is not a standalone page. This file is meant to be imported into other + HTML code. + --> + +#INCLUDE html/dialog.html +#INCLUDE html/item_preview.html + +#LOADCSS html/reset.css +#LOADCSS html/base.css +<style> + .install_entry_li { + display: flex; + align-items: center; + margin: 0; + padding: 0.2em; + } + .install_entry_li:nth-child(2n) { + background-color:#dadada; + } + + .install_item_info { + display: grid; + grid-template-columns: auto; + flex: 1 1 auto; + min-width: 0; + } + .install_item_info > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .install_item_more_info { + font-size: 80%; + font-style: italic; + } + + .install_bottom_buttons { + margin: 1em auto; + text-align: center; + } +</style> +<template> + <div id="install_view" data-template="main_div"> + <div data-template="install_preview"> + <ul data-template="to_install_list"></ul> + <div class="install_bottom_buttons"> + <button data-template="install_but">Install</button> + <button data-template="cancel_but">Cancel</button> + </div> + </div> + <div data-template="dialog_container"> + <!-- dialog shall be dynamically inserted here --> + </div> + <div data-template="mapping_preview_container"> + <!-- item preview shall be dynamically inserted here --> + <div class="install_bottom_buttons"> + <button data-template="mapping_back_but">Back</button> + </div> + </div> + <div data-template="resource_preview_container"> + <div class="install_bottom_buttons"> + <button data-template="resource_back_but">Back</button> + </div> + </div> + </div> + <li id="install_list_entry" data-template="main_li" + class="install_entry_li"> + <div class="install_item_info"> + <span data-template="item_name"></span> + <span data-template="item_id" class="install_item_more_info"></span> + <span data-template="update_info" + class="install_item_more_info hide"> + (update from <span data-template="old_ver"></span>) + </span> + </div> + <span class="text_right"> + <button data-template="details_but">Details</button> + </span> + </li> +</template> +#ENDIF diff --git a/html/install.js b/html/install.js new file mode 100644 index 0000000..dbc490d --- /dev/null +++ b/html/install.js @@ -0,0 +1,453 @@ +/** + * This file is part of Haketilo. + * + * Function: Install mappings/resources in Haketilo. + * + * Copyright (C) 2022 Wojtek Kosior + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * As additional permission under GNU GPL version 3 section 7, you + * may distribute forms of that code without the copy of the GNU + * GPL normally required by section 4, provided you include this + * license notice and, in case of non-source distribution, a URL + * through which recipients can access the Corresponding Source. + * If you modify file(s) with this exception, you may extend this + * exception to your version of the file(s), but you are not + * obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + * + * As a special exception to the GPL, any HTML file which merely + * makes function calls to this code, and for that purpose + * includes it by reference shall be deemed a separate work for + * copyright law purposes. If you modify this code, you may extend + * this exception to your version of the code, but you are not + * obligated to do so. If you do not wish to do so, delete this + * exception statement from your version. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + * + * I, Wojtek Kosior, thereby promise not to sue for violation of this file's + * license. Although I request that you do not make use of this code in a + * proprietary program, I am not going to enforce this in court. + */ + +#IMPORT common/indexeddb.js AS haketilodb +#IMPORT html/dialog.js +#IMPORT html/item_preview.js AS ip + +#FROM common/browser.js IMPORT browser +#FROM html/DOM_helpers.js IMPORT clone_template +#FROM common/entities.js IMPORT item_id_string, version_string, get_files +#FROM common/misc.js IMPORT sha256_async AS sha256 + +const coll = new Intl.Collator(); + +/* + * Comparator used to sort items in the order we want them to appear in + * install dialog: first mappings alphabetically, then resources alphabetically. + */ +function compare_items(def1, def2) { + if (def1.type !== def2.type) + return def1.type === "mapping" ? -1 : 1; + + const name_comparison = coll.compare(def1.long_name, def2.long_name); + return name_comparison === 0 ? + coll.compare(def1.identifier, def2.identifier) : name_comparison; +} + +function ItemEntry(install_view, item) { + Object.assign(this, clone_template("install_list_entry")); + this.item_def = item.def; + + this.item_name.innerText = item.def.long_name; + this.item_id.innerText = item_id_string(item.def); + if (item.db_def) { + this.old_ver.innerText = + version_string(item.db_def.version, item.db_def.revision); + this.update_info.classList.remove("hide"); + } + + let preview_cb = () => install_view.preview_item(item.def); + preview_cb = dialog.when_hidden(install_view.dialog_ctx, preview_cb); + this.details_but.addEventListener("click", preview_cb); +} + +const container_ids = [ + "install_preview", + "dialog_container", + "mapping_preview_container", + "resource_preview_container" +]; + +/* + * Work object is used to communicate between asynchronously executing + * functions when computing dependencies tree of an item and when fetching + * files for installation. + */ +async function init_work() { + const work = { + waiting: 0, + is_ok: true, + db: (await haketilodb.get()), + result: [] + }; + + work.err = function (error, user_message) { + if (error) + console.error(error); + work.is_ok = false; + work.reject_cb(user_message); + } + + return [work, + new Promise((...cbs) => [work.resolve_cb, work.reject_cb] = cbs)]; +} + +function InstallView(tab_id, on_view_show, on_view_hide) { + Object.assign(this, clone_template("install_view")); + this.shown = false; + + const show_container = name => { + for (const cid of container_ids) { + if (cid !== name) + this[cid].classList.add("hide"); + } + this[name].classList.remove("hide"); + } + + this.dialog_ctx = dialog.make(() => show_container("dialog_container"), + () => show_container("install_preview")); + this.dialog_container.prepend(this.dialog_ctx.main_div); + + /* Make a link to view a file from the repository. */ + const make_file_link = (preview_ctx, file_ref) => { + const a = document.createElement("a"); + a.href = `${this.repo_url}file/${file_ref.hash_key}`; + a.innerText = file_ref.file; + + return a; + } + + this.previews_ctx = {}; + + this.preview_item = item_def => { + if (!this.shown) + return; + + const fun = ip[`${item_def.type}_preview`]; + const preview_ctx = fun(item_def, this.previews_ctx[item_def.type], + make_file_link); + this.previews_ctx[item_def.type] = preview_ctx; + + const container_name = `${item_def.type}_preview_container`; + show_container(container_name); + this[container_name].prepend(preview_ctx.main_div); + } + + const back_cb = dialog.when_hidden(this.dialog_ctx, + () => show_container("install_preview")); + for (const type of ["resource", "mapping"]) + this[`${type}_back_but`].addEventListener("click", back_cb); + + const process_item = async (work, item_type, id, ver) => { + if (!work.is_ok || work.processed_by_type[item_type].has(id)) + return; + + work.processed_by_type[item_type].add(id); + work.waiting++; + + const url = ver ? + `${this.repo_url}${item_type}/${id}/${ver.join(".")}.json` : + `${this.repo_url}${item_type}/${id}.json`; + const response = + await browser.tabs.sendMessage(tab_id, ["repo_query", url]); + if (!work.is_ok) + return; + + if ("error" in response) { + return work.err(response.error, + "Failure to communicate with repository :("); + } + + if (!response.ok) { + return work.err(null, + `Repository sent HTTP code ${response.status} :(`); + } + + if ("error_json" in response) { + return work.err(response.error_json, + "Repository's response is not valid JSON :("); + } + + if (response.json.api_schema_version > [1]) { + let api_ver = ""; + try { + api_ver = + ` (${version_string(response.json.api_schema_version)})`; + } catch(e) { + console.warn(e); + } + + const captype = item_type[0].toUpperCase() + item_type.substring(1); + const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${api_ver}. You might need to update Haketilo.`; + return work.err(null, msg); + } + + /* TODO: JSON schema validation should be added here. */ + + delete response.json.api_schema_version; + delete response.json.api_schema_revision; + + const files = response.json.source_copyright + .concat(item_type === "resource" ? response.json.scripts : []); + for (const file of files) { + file.hash_key = `sha256-${file.sha256}`; + delete file.sha256; + } + + if (item_type === "mapping") { + for (const res_ref of Object.values(response.json.payloads)) + process_item(work, "resource", res_ref.identifier); + } else { + for (const res_id of (response.json.dependencies || [])) + process_item(work, "resource", res_id); + } + + /* + * At this point we already have JSON definition of the item and we + * triggered processing of its dependencies. We now have to verify if + * the same or newer version of the item is already present in the + * database and if so - omit this item. + */ + const transaction = work.db.transaction(item_type); + try { + var db_def = await haketilodb.idb_get(transaction, item_type, id); + if (!work.is_ok) + return; + } catch(e) { + const msg = "Error accessing Haketilo's internal database :("; + return work.err(e, msg); + } + if (!db_def || db_def.version < response.json.version) + work.result.push({def: response.json, db_def}); + + if (--work.waiting === 0) + work.resolve_cb(work.result); + } + + async function compute_deps(item_type, item_id, item_ver) { + const [work, work_prom] = await init_work(); + work.processed_by_type = {"mapping" : new Set(), "resource": new Set()}; + + process_item(work, item_type, item_id, item_ver); + + const items = await work_prom; + items.sort((i1, i2) => compare_items(i1.def, i2.def)); + return items; + } + + this.show = async (repo_url, item_type, item_id, item_ver) => { + if (this.shown) + return; + + this.shown = true; + + this.repo_url = repo_url; + + dialog.loader(this.dialog_ctx, "Fetching data from repository..."); + + try { + on_view_show(); + } catch(e) { + console.error(e); + } + + try { + var items = await compute_deps(item_type, item_id, item_ver); + } catch(e) { + var dialog_prom = dialog.error(this.dialog_ctx, e); + } + + if (!dialog_prom && items.length === 0) { + const msg = "Nothing to do - packages already installed."; + var dialog_prom = dialog.info(this.dialog_ctx, msg); + } + + if (dialog_prom) { + dialog.close(this.dialog_ctx); + + await dialog_prom; + + hide(); + return; + } + + this.item_entries = items.map(i => new ItemEntry(this, i)); + this.to_install_list.append(...this.item_entries.map(ie => ie.main_li)); + + dialog.close(this.dialog_ctx); + } + + const process_file = async (work, hash_key) => { + if (!work.is_ok) + return; + + work.waiting++; + + try { + var file_uses = await haketilodb.idb_get(work.file_uses_transaction, + "file_uses", hash_key); + if (!work.is_ok) + return; + } catch(e) { + const msg = "Error accessing Haketilo's internal database :("; + return work.err(e, msg); + } + + if (!file_uses) { + const url = `${this.repo_url}file/${hash_key}`; + + try { + var response = await fetch(url); + if (!work.is_ok) + return; + } catch(e) { + const msg = "Failure to communicate with repository :("; + return work.err(e, msg); + } + + if (!response.ok) { + const msg = `Repository sent HTTP code ${response.status} :(`; + return work.err(null, msg); + } + + try { + var text = await response.text(); + if (!work.is_ok) + return; + } catch(e) { + const msg = "Repository's response is not valid text :("; + return work.err(e, msg); + } + + const digest = await sha256(text); + if (!work.is_ok) + return; + if (`sha256-${digest}` !== hash_key) { + const msg = `${url} served a file with different SHA256 cryptographic sum :(`; + return work.err(null, msg); + } + + work.result.push([hash_key, text]); + } + + if (--work.waiting === 0) + work.resolve_cb(work.result); + } + + const get_missing_files = async item_defs => { + const [work, work_prom] = await init_work(); + work.file_uses_transaction = work.db.transaction("file_uses"); + + const processed_files = new Set(); + + for (const item_def of item_defs) { + for (const file of get_files(item_def)) { + if (!processed_files.has(file.hash_key)) { + processed_files.add(file.hash_key); + process_file(work, file.hash_key); + } + } + } + + return processed_files.size > 0 ? work_prom : []; + } + + const perform_install = async () => { + if (!this.show || !this.item_entries) + return; + + dialog.loader(this.dialog_ctx, "Installing..."); + + const item_defs = this.item_entries.map(ie => ie.item_def); + + try { + var files = (await get_missing_files(item_defs)) + .reduce((ac, [hk, txt]) => Object.assign(ac, {[hk]: txt}), {}); + } catch(e) { + var dialog_prom = dialog.error(this.dialog_ctx, e); + } + + if (files !== undefined) { + const data = {files}; + const names = [["mappings", "mapping"], ["resources", "resource"]]; + + for (const [set_name, type] of names) { + const set = {}; + + for (const def of item_defs.filter(def => def.type === type)) + set[def.identifier] = {[version_string(def.version)]: def}; + + data[set_name] = set; + } + + try { + await haketilodb.save_items(data); + } catch(e) { + console.error(e); + const msg = "Error writing to Haketilo's internal database :("; + var dialog_prom = dialog.error(this.dialog_ctx, msg); + } + } + + if (!dialog_prom) { + const msg = "Successfully installed!"; + var dialog_prom = dialog.info(this.dialog_ctx, msg); + } + + dialog.close(this.dialog_ctx); + + await dialog_prom; + + hide(); + } + + const hide = () => { + if (!this.shown) + return; + + this.shown = false; + delete this.item_entries; + [...this.to_install_list.children].forEach(n => n.remove()); + + try { + on_view_hide(); + } catch(e) { + console.error(e); + } + } + + this.when_hidden = cb => { + const wrapped_cb = (...args) => { + if (!this.shown) + return cb(...args); + } + return wrapped_cb; + } + + const hide_cb = dialog.when_hidden(this.dialog_ctx, hide); + this.cancel_but.addEventListener("click", hide_cb); + + const install_cb = dialog.when_hidden(this.dialog_ctx, perform_install); + this.install_but.addEventListener("click", install_cb); +} diff --git a/html/item_list.js b/html/item_list.js index 51950d5..a616713 100644 --- a/html/item_list.js +++ b/html/item_list.js @@ -200,23 +200,22 @@ function on_dialog_hide(list_ctx) async function remove_single_item(item_type, identifier) { - const store = ({resource: "resources", mapping: "mappings"})[item_type]; const transaction_ctx = - await haketilodb.start_items_transaction([store], {}); + await haketilodb.start_items_transaction([item_type], {}); await haketilodb[`remove_${item_type}`](identifier, transaction_ctx); await haketilodb.finalize_transaction(transaction_ctx); } function resource_list() { - return item_list(resource_preview, haketilodb.track.resources, + return item_list(resource_preview, haketilodb.track.resource, id => remove_single_item("resource", id)); } #EXPORT resource_list function mapping_list() { - return item_list(mapping_preview, haketilodb.track.mappings, + return item_list(mapping_preview, haketilodb.track.mapping, id => remove_single_item("mapping", id)); } #EXPORT mapping_list diff --git a/html/item_preview.js b/html/item_preview.js index 474766c..dccf2d4 100644 --- a/html/item_preview.js +++ b/html/item_preview.js @@ -55,6 +55,7 @@ function populate_list(ul, items) } } +/* Link click handler used in make_file_link(). */ async function file_link_clicked(preview_object, file_ref, event) { event.preventDefault(); @@ -71,6 +72,10 @@ async function file_link_clicked(preview_object, file_ref, event) } } +/* + * The default function to use to create file preview link. Links it creates can + * be used to view files from IndexedDB. + */ function make_file_link(preview_object, file_ref) { const a = document.createElement("a"); @@ -82,7 +87,8 @@ function make_file_link(preview_object, file_ref) return a; } -function resource_preview(resource, preview_object, dialog_context) +function resource_preview(resource, preview_object, dialog_context, + make_link_cb=make_file_link) { if (preview_object === undefined) preview_object = clone_template("resource_preview"); @@ -98,7 +104,7 @@ function resource_preview(resource, preview_object, dialog_context) [...preview_object.dependencies.childNodes].forEach(n => n.remove()); populate_list(preview_object.dependencies, resource.dependencies); - const link_maker = file_ref => make_file_link(preview_object, file_ref); + const link_maker = file_ref => make_link_cb(preview_object, file_ref); [...preview_object.scripts.childNodes].forEach(n => n.remove()); populate_list(preview_object.scripts, resource.scripts.map(link_maker)); @@ -113,7 +119,8 @@ function resource_preview(resource, preview_object, dialog_context) } #EXPORT resource_preview -function mapping_preview(mapping, preview_object, dialog_context) +function mapping_preview(mapping, preview_object, dialog_context, + make_link_cb=make_file_link) { if (preview_object === undefined) preview_object = clone_template("mapping_preview"); @@ -138,7 +145,7 @@ function mapping_preview(mapping, preview_object, dialog_context) } } - const link_maker = file_ref => make_file_link(preview_object, file_ref); + const link_maker = file_ref => make_link_cb(preview_object, file_ref); [...preview_object.copyright.childNodes].forEach(n => n.remove()); populate_list(preview_object.copyright, diff --git a/html/payload_create.js b/html/payload_create.js index 503a461..8828809 100644 --- a/html/payload_create.js +++ b/html/payload_create.js @@ -137,12 +137,11 @@ async function save_payload(saving) { const db = await haketilodb.get(); const tx_starter = haketilodb.start_items_transaction; - const tx_ctx = await tx_starter(["resources", "mappings"], saving.files); + const tx_ctx = await tx_starter(["resource", "mapping"], saving.files); - for (const [type, store_name] of - [["resource", "resources"], ["mapping", "mappings"]]) { + for (const type of ["resource", "mapping"]) { if (!saving[`override_${type}`] && - (await haketilodb.idb_get(tx_ctx.transaction, store_name, + (await haketilodb.idb_get(tx_ctx.transaction, type, saving.identifier))) { saving.ask_override = type; return; diff --git a/html/settings.html b/html/settings.html index df5e751..f318e2c 100644 --- a/html/settings.html +++ b/html/settings.html @@ -92,9 +92,6 @@ #repos_list_container, #repos_dialog_container { padding: 0.8em 0.4em 0.4em 0.4em; } - #default_policy_dialog { - text-align: center; - } #blocking_editable_container, #blocking_dialog_container, #repos_list_container, #repos_dialog_container { max-width: var(--content-max-width); @@ -134,7 +131,7 @@ <div id="allowing_list_container"> <h3>Allow scripts on</h3> </div> - <div id="default_policy_dialog" class="grid_col_both"> + <div id="default_policy_dialog" class="grid_col_both text_center"> #INCLUDE html/default_blocking_policy.html </div> </div> diff --git a/html/text_entry_list.js b/html/text_entry_list.js index ff63c79..8cef08f 100644 --- a/html/text_entry_list.js +++ b/html/text_entry_list.js @@ -162,10 +162,11 @@ function Entry(text, list, entry_idx) { [this.cancel_but, this.make_noneditable], [this.noneditable_view, this.make_editable], ]) - dialog.onevent(list.dialog_ctx, node, "click", cb); + node.addEventListener("click", dialog.when_hidden(list.dialog_ctx, cb)); - dialog.onevent(list.dialog_ctx, this.input, "keypress", - e => (e.key === 'Enter') && enter_hit()); + const enter_cb = e => (e.key === 'Enter') && enter_hit(); + this.input.addEventListener("keypress", + dialog.when_hidden(list.dialog_ctx, enter_cb)); if (entry_idx > 0) { const prev_text = list.shown_texts[entry_idx - 1]; @@ -226,7 +227,8 @@ function TextEntryList(dialog_ctx, destroy_cb, const add_new = () => new Entry(null, this, 0); - dialog.onevent(dialog_ctx, this.new_but, "click", add_new); + this.new_but.addEventListener("click", + dialog.when_hidden(dialog_ctx, add_new)); } async function repo_list(dialog_ctx) { |