add a mapping/resources installation dialog

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) {