add a repo querying HTML interface

16 files changed, 885 insertions, 160 deletions

diff --git a/common/entities.js b/common/entities.js
index b70661f..3ccbf04 100644
--- a/common/entities.js
+++ b/common/entities.js
@@ -101,6 +101,17 @@ function get_newest_version(versioned_item)
 #EXPORT get_newest_version AS get_newest
 
 /*
+ * Returns true if the argument is a nonempty array of numbers without trailing
+ * zeros.
+ */
+function is_valid_version(version) {
+    return Array.isArray(version) && version.length > 0 &&
+	version.every(n => typeof n === "number") &&
+	version[version.length - 1] !== 0;
+}
+#EXPORT is_valid_version
+
+/*
  * item is a definition of a resource or mapping. Yield all file references
  * (objects with `file` and `sha256` properties) this definition has.
  */
diff --git a/html/DOM_helpers.js b/html/DOM_helpers.js
index 88092e5..9e64956 100644
--- a/html/DOM_helpers.js
+++ b/html/DOM_helpers.js
@@ -85,3 +85,50 @@ function clone_template(template_id)
     return result_object;
 }
 #EXPORT clone_template
+
+function Showable(on_show_cb, on_hide_cb) {
+    this.shown = false;
+
+    /*
+     * Wrap the requested callback into one that only executes it if showable is
+     * not shown.
+     */
+    this.when_hidden = cb => {
+	const wrapped_cb = (...args) => {
+	    if (!this.shown)
+		return cb(...args);
+	}
+	return wrapped_cb;
+    }
+
+    this.show = () => {
+	if (this.shown)
+	    return false;
+
+	this.shown = true;
+
+	try {
+	    on_show_cb();
+	} catch(e) {
+	    console.error(e);
+	}
+
+	return true;
+    }
+
+    this.hide = () => {
+	if (!this.shown)
+	    return false;
+
+	this.shown = false;
+
+	try {
+	    on_hide_cb();
+	} catch(e) {
+	    console.error(e);
+	}
+
+	return true;
+    }
+}
+#EXPORT Showable
diff --git a/html/base.css b/html/base.css
index df6213a..dd08387 100644
--- a/html/base.css
+++ b/html/base.css
@@ -88,11 +88,11 @@ body {
     --line-height: 0.4em;
 }
 
-div.bottom_line {
+div.top_line {
     height: var(--line-height);
     background: linear-gradient(#555, transparent);
 }
-div.top_line {
+div.bottom_line {
     height: var(--line-height);
     background: linear-gradient(transparent, #555);
 }
diff --git a/html/dialog.js b/html/dialog.js
index a4e275f..fbea657 100644
--- a/html/dialog.js
+++ b/html/dialog.js
@@ -41,17 +41,14 @@
  * proprietary program, I am not going to enforce this in court.
  */
 
-#FROM html/DOM_helpers.js IMPORT clone_template
+#FROM html/DOM_helpers.js IMPORT clone_template, Showable
 
 function make(on_dialog_show, on_dialog_hide)
 {
     const dialog_context = clone_template("dialog");
-    Object.assign(dialog_context, {
-	on_dialog_show,
-	on_dialog_hide,
-	shown: false,
-	queue: [],
-    });
+    dialog_context.queue = [];
+
+    Showable.call(dialog_context, on_dialog_show, on_dialog_hide);
 
     for (const [id, val] of [["yes", true], ["no", false], ["ok", undefined]]) {
 	const but = dialog_context[`${id}_but`];
@@ -74,12 +71,7 @@ function close_dialog(dialog_context, event)
     if (dialog_context.queue.length > 0) {
 	process_queue_item(dialog_context);
     } else {
-	dialog_context.shown = false;
-	try {
-	    dialog_context.on_dialog_hide();
-	} catch(e) {
-	    console.error(e);
-	}
+	dialog_context.hide();
     }
 
     resolve(event ? event.target.haketilo_dialog_result : undefined);
@@ -104,15 +96,8 @@ async function show_dialog(dialog_context, shown_buts_id, msg)
     const result_prom = new Promise(cb => resolve = cb);
     dialog_context.queue.push([shown_buts_id, msg, resolve]);
 
-    if (!dialog_context.shown) {
+    if (dialog_context.show())
 	process_queue_item(dialog_context);
-	dialog_context.shown = true;
-	try {
-	    dialog_context.on_dialog_show();
-	} catch(e) {
-	    console.error(e);
-	}
-    }
 
     return await result_prom;
 }
@@ -129,17 +114,3 @@ const ask = (ctx, ...msg) => show_dialog(ctx, "ask_buts", msg);
 
 const loader = (ctx, ...msg) => show_dialog(ctx, null, msg);
 #EXPORT loader
-
-/*
- * Wrapper the requested callback into one that only executes it if dialog is
- * not shown.
- */
-function when_hidden(ctx, cb)
-{
-    function wrapped_cb(...args) {
-	if (!ctx.shown)
-	    return cb(...args);
-    }
-    return wrapped_cb;
-}
-#EXPORT when_hidden
diff --git a/html/install.html b/html/install.html
index b8d0927..0146a8d 100644
--- a/html/install.html
+++ b/html/install.html
@@ -67,7 +67,7 @@
   }
 
   .install_bottom_buttons {
-      margin: 1em auto;
+      margin: 1em;
       text-align: center;
   }
 </style>
@@ -95,6 +95,7 @@
       </div>
     </div>
   </div>
+
   <li id="install_list_entry" data-template="main_li"
       class="install_entry_li">
     <div class="install_item_info">
diff --git a/html/install.js b/html/install.js
index dbc490d..e972924 100644
--- a/html/install.js
+++ b/html/install.js
@@ -46,8 +46,9 @@
 #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 html/DOM_helpers.js IMPORT clone_template, Showable
+#FROM common/entities.js  IMPORT item_id_string, version_string, get_files, \
+                                 is_valid_version
 #FROM common/misc.js      IMPORT sha256_async AS sha256
 
 const coll = new Intl.Collator();
@@ -78,7 +79,7 @@ function ItemEntry(install_view, item) {
     }
 
     let preview_cb = () => install_view.preview_item(item.def);
-    preview_cb = dialog.when_hidden(install_view.dialog_ctx, preview_cb);
+    preview_cb = install_view.dialog_ctx.when_hidden(preview_cb);
     this.details_but.addEventListener("click", preview_cb);
 }
 
@@ -114,8 +115,9 @@ async function init_work() {
 }
 
 function InstallView(tab_id, on_view_show, on_view_hide) {
+    Showable.call(this, 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) {
@@ -154,8 +156,8 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
 	this[container_name].prepend(preview_ctx.main_div);
     }
 
-    const back_cb = dialog.when_hidden(this.dialog_ctx,
-				       () => show_container("install_preview"));
+    let back_cb = () => show_container("install_preview");
+    back_cb = this.dialog_ctx.when_hidden(back_cb);
     for (const type of ["resource", "mapping"])
 	this[`${type}_back_but`].addEventListener("click", back_cb);
 
@@ -189,17 +191,18 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
 			    "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);
-	    }
+	if (!is_valid_version(response.json.api_schema_version)) {
+	    var bad_api_ver = "";
+	} else if (response.json.api_schema_version > [1]) {
+	    var bad_api_ver =
+		` (${version_string(response.json.api_schema_version)})`;
+	} else {
+	    var bad_api_ver = false;
+	}
 
+	if (bad_api_ver !== false) {
 	    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.`;
+	    const msg = `${captype} ${item_id_string(id, ver)} was served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`;
 	    return work.err(null, msg);
 	}
 
@@ -256,23 +259,16 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
 	return items;
     }
 
+    const show_super = this.show;
     this.show = async (repo_url, item_type, item_id, item_ver) => {
-	if (this.shown)
+	if (!show_super())
 	    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);
@@ -288,7 +284,7 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
 
 	    await dialog_prom;
 
-	    hide();
+	    this.hide();
 	    return;
 	}
 
@@ -419,35 +415,22 @@ function InstallView(tab_id, on_view_show, on_view_hide) {
 
 	await dialog_prom;
 
-	hide();
+	this.hide();
     }
 
-    const hide = () => {
-	if (!this.shown)
+    const hide_super = this.hide;
+    this.hide = () => {
+	if (!hide_super())
 	    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);
+    const hide_cb = this.dialog_ctx.when_hidden(this.hide);
     this.cancel_but.addEventListener("click", hide_cb);
 
-    const install_cb = dialog.when_hidden(this.dialog_ctx, perform_install);
+    const install_cb = this.dialog_ctx.when_hidden(perform_install);
     this.install_but.addEventListener("click", install_cb);
 }
+#EXPORT InstallView
diff --git a/html/repo_query.html b/html/repo_query.html
new file mode 100644
index 0000000..73b0f00
--- /dev/null
+++ b/html/repo_query.html
@@ -0,0 +1,148 @@
+#IF !REPO_QUERY_LOADED
+#DEFINE REPO_QUERY_LOADED
+<!--
+    SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+    Show available repositories and allow querying them for resources.
+
+    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/install.html
+
+#LOADCSS html/reset.css
+#LOADCSS html/base.css
+#LOADCSS html/grid.css
+<style>
+  .repo_query_top_text {
+      text-align: center;
+      margin: 0.4em;
+  }
+  .repo_queried_url {
+      text-decoration: underline;
+  }
+
+  .repo_query_repo_li {
+      margin: 0;
+      background-color:#dadada;
+  }
+  .repo_query_repo_li > .repo_query_entry {
+      padding: 0.2em;
+  }
+  .repo_query_repo_li > .repo_query_results_list {
+      background-color: #f0f0f0;
+  }
+
+  .repo_query_result_li {
+      margin: 0;
+      padding: 0.2em;
+  }
+  .repo_query_result_li:nth-child(2n) {
+      background-color:#dadada;
+  }
+
+  .repo_query_entry {
+      display: flex;
+      align-items: center;
+  }
+  .repo_query_entry_info {
+      display: grid;
+      grid-template-columns: auto;
+      flex: 1 1 auto;
+      min-width: 0;
+  }
+  .repo_query_entry_info > * {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+  }
+  .repo_query_entry button {
+      white-space: nowrap;
+  }
+
+  .repo_query_mapping_id {
+      font-size: 80%;
+      font-style: italic;
+  }
+
+  .repo_query_bottom_buttons {
+      margin: 1em;
+      text-align: center;
+  }
+</style>
+<template>
+  <div id="repo_query" data-template="main_div"
+       class="grid_1 repo_query_main_div">
+    <div data-template="repos_list_container">
+      <div class="repo_query_top_text">
+	Browsing custom resources for
+	<span data-template="url_span" class="repo_queried_url"></span>.
+      </div>
+      <ul data-template="repos_list"></ul>
+      <div class="repo_query_bottom_buttons">
+	<button data-template="cancel_but">Cancel</button>
+      </div>
+    </div>
+    <div data-template="install_view_container" class="hide">
+      <!-- Install view will be dynamically inserted here. -->
+    </div>
+  </div>
+
+  <li id="repo_query_single_repo" data-template="main_li"
+      class="repo_query_repo_li">
+    <div class="top_line"></div>
+    <div class="repo_query_entry">
+      <div class="repo_query_entry_info">
+	<label data-template="repo_url_label"></label>
+      </div>
+      <span class="repo_query_buttons">
+	<button data-template="show_results_but">
+	  Show results
+	</button>
+	<button data-template="hide_results_but" class="hide">
+	  Hide results
+	</button>
+      </span>
+    </div>
+    <div data-template="list_container" class="hide repo_query_results_list">
+      <span data-template="info_span">Querying repository...</span>
+      <ul data-template="results_list" class="hide"></ul>
+    </div>
+  </li>
+
+  <li id="repo_query_single_result" data-template="main_li"
+      class="repo_query_entry repo_query_result_li">
+    <div class="repo_query_entry_info">
+      <span data-template="mapping_name"></span>
+      <span data-template="mapping_id" class="repo_query_mapping_id"></span>
+    </div>
+    <span><button data-template="install_but">Install preview</button></span>
+  </li>
+</template>
+#ENDIF
diff --git a/html/repo_query.js b/html/repo_query.js
new file mode 100644
index 0000000..8f33356
--- /dev/null
+++ b/html/repo_query.js
@@ -0,0 +1,210 @@
+/**
+ * This file is part of Haketilo.
+ *
+ * Function: Show available repositories and allow querying them for resources.
+ *
+ * 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
+
+#FROM common/browser.js   IMPORT browser
+#FROM html/DOM_helpers.js IMPORT clone_template, Showable
+#FROM common/entities.js  IMPORT item_id_string, version_string, \
+                                 is_valid_version
+#FROM html/install.js     IMPORT InstallView
+
+const coll = new Intl.Collator();
+
+function ResultEntry(repo_entry, mapping_ref) {
+    Object.assign(this, clone_template("repo_query_single_result"));
+    Object.assign(this, {repo_entry, mapping_ref});
+
+    this.mapping_name.innerText = mapping_ref.long_name;
+    this.mapping_id.innerText = item_id_string(mapping_ref);
+
+    const iv = repo_entry.query_view.install_view;
+
+    function start_install() {
+	iv.show(repo_entry.repo_url, "mapping",
+		mapping_ref.identifier, mapping_ref.version);
+    }
+
+    const cb = repo_entry.query_view.install_view.when_hidden(start_install);
+    this.install_but.addEventListener("click", cb);
+}
+
+function RepoEntry(query_view, repo_url) {
+    Object.assign(this, clone_template("repo_query_single_repo"));
+    Object.assign(this, {query_view, repo_url});
+    this.results_shown_before = false;
+
+    this.repo_url_label.innerText = repo_url;
+
+    const query_results = async () => {
+	const msg = [
+	    "repo_query",
+	    `${repo_url}query?url=${encodeURIComponent(query_view.url)}`
+	];
+	const response = await browser.tabs.sendMessage(query_view.tab_id, msg);
+
+	if ("error" in response)
+	    throw "Failure to communicate with repository :(";
+
+	if (!response.ok)
+	    throw `Repository sent HTTP code ${response.status} :(`;
+	if ("error_json" in response)
+	    throw "Repository's response is not valid JSON :(";
+
+	if (!is_valid_version(response.json.api_schema_version)) {
+	    var bad_api_ver = "";
+	} else if (response.json.api_schema_version > [1]) {
+	    var bad_api_ver =
+		` (${version_string(response.json.api_schema_version)})`;
+	} else {
+	    var bad_api_ver = false;
+	}
+
+	if (bad_api_ver !== false)
+	    throw `Results were served using unsupported Hydrilla API version${bad_api_ver}. You might need to update Haketilo.`;
+
+	/* TODO: here we should perform JSON schema validation! */
+
+	return response.json.mappings;
+    }
+
+    const populate_results = async () => {
+	this.results_shown_before = true;
+
+	try {
+	    var results = await query_results();
+	} catch(e) {
+	    this.info_span.innerText = e;
+	    return;
+	}
+
+	this.info_span.remove();
+	this.results_list.classList.remove("hide");
+
+	this.result_entries = results.map(ref => new ResultEntry(this, ref));
+
+	const to_append = this.result_entries.length > 0 ?
+	      this.result_entries.map(re => re.main_li) :
+	      ["No results :("];
+
+	this.results_list.append(...to_append);
+    }
+
+    let show_results = () => {
+	if (!query_view.shown)
+	    return;
+
+	if (!this.results_shown_before)
+	    populate_results();
+
+	this.list_container.classList.remove("hide");
+	this.hide_results_but.classList.remove("hide");
+	this.show_results_but.classList.add("hide");
+    }
+    show_results = query_view.install_view.when_hidden(show_results);
+
+    let hide_results = () => {
+	if (!query_view.shown)
+	    return;
+
+	this.list_container.classList.add("hide");
+	this.hide_results_but.classList.add("hide");
+	this.show_results_but.classList.remove("hide");
+    }
+    hide_results = query_view.install_view.when_hidden(hide_results);
+
+    this.show_results_but.addEventListener("click", show_results);
+    this.hide_results_but.addEventListener("click", hide_results);
+}
+
+const container_ids = ["repos_list_container", "install_view_container"];
+
+function RepoQueryView(tab_id, on_view_show, on_view_hide) {
+    Showable.call(this, on_view_show, on_view_hide);
+
+    Object.assign(this, clone_template("repo_query"));
+    this.tab_id = tab_id;
+
+    const show_container = name => {
+	for (const cid of container_ids) {
+	    if (cid !== name)
+		this[cid].classList.add("hide");
+	}
+	this[name].classList.remove("hide");
+    }
+
+    this.install_view = new InstallView(
+	tab_id,
+	() => show_container("install_view_container"),
+	() => show_container("repos_list_container")
+    );
+    this.install_view_container.prepend(this.install_view.main_div);
+
+    const show_super = this.show;
+    this.show = async url => {
+	if (!show_super())
+	    return;
+
+	this.url = url;
+	this.url_span.innerText = url;
+
+	[...this.repos_list.children].forEach(c => c.remove());
+
+	const repo_urls = await haketilodb.get_repos();
+	repo_urls.sort((a, b) => coll.compare(a, b));
+	this.repo_entries = repo_urls.map(ru => new RepoEntry(this, ru));
+
+	if (repo_urls.length === 0) {
+	    const info_li = document.createElement("li");
+	    info_li.innerText = "You have no repositories configured :(";
+	    this.repos_list.append(info_li);
+	    return;
+	}
+
+	this.repos_list.append(...this.repo_entries.map(re => re.main_li));
+    }
+
+    this.cancel_but.addEventListener("click",
+				     this.install_view.when_hidden(this.hide));
+}
+#EXPORT RepoQueryView
diff --git a/html/settings.html b/html/settings.html
index f318e2c..ce19e55 100644
--- a/html/settings.html
+++ b/html/settings.html
@@ -115,14 +115,14 @@
 #INCLUDE html/item_preview.html
 #INCLUDE html/text_entry_list.html
 #INCLUDE html/payload_create.html
-    <ul id="tab_heads" class="has_bottom_line">
+    <ul id="tab_heads">
       <li id="blocking_head"> Blocking </li>
       <li id="mappings_head"> Mappings </li>
       <li id="resources_head"> Resources </li>
       <li id="new_payload_head" class="active_head"> New payload </li>
       <li id="repos_head"> Repositories </li>
     </ul>
-    <div id="top_menu_line" class="bottom_line"></div>
+    <div id="top_menu_line" class="top_line"></div>
     <div id="blocking_tab" class="tab">
       <div id="blocking_editable_container" class="grid_2">
 	<div id="blocking_list_container">
diff --git a/html/text_entry_list.js b/html/text_entry_list.js
index 8cef08f..0ea2862 100644
--- a/html/text_entry_list.js
+++ b/html/text_entry_list.js
@@ -162,11 +162,11 @@ function Entry(text, list, entry_idx) {
 	[this.cancel_but,       this.make_noneditable],
 	[this.noneditable_view, this.make_editable],
     ])
-	node.addEventListener("click", dialog.when_hidden(list.dialog_ctx, cb));
+	node.addEventListener("click", list.dialog_ctx.when_hidden(cb));
 
     const enter_cb = e => (e.key === 'Enter') && enter_hit();
     this.input.addEventListener("keypress",
-				dialog.when_hidden(list.dialog_ctx, enter_cb));
+				list.dialog_ctx.when_hidden(enter_cb));
 
     if (entry_idx > 0) {
 	const prev_text = list.shown_texts[entry_idx - 1];
@@ -227,8 +227,7 @@ function TextEntryList(dialog_ctx, destroy_cb,
 
     const add_new = () => new Entry(null, this, 0);
 
-    this.new_but.addEventListener("click",
-				  dialog.when_hidden(dialog_ctx, add_new));
+    this.new_but.addEventListener("click", dialog_ctx.when_hidden(add_new));
 }
 
 async function repo_list(dialog_ctx) {
diff --git a/test/server.py b/test/server.py
index 9cab5cc..0963b5b 100755
--- a/test/server.py
+++ b/test/server.py
@@ -31,6 +31,7 @@ wrapping the classes in proxy_core.py
 from pathlib import Path
 from urllib.parse import parse_qs
 from threading import Thread
+import traceback
 
 from .proxy_core import ProxyRequestHandler, ThreadingHTTPServer
 from .misc_constants import *
@@ -84,8 +85,10 @@ class RequestHijacker(ProxyRequestHandler):
                 status_code, headers = 404, {'Content-Type': 'text/plain'}
                 resp_body = b'Handler for this URL not found.'
 
-        except Exception as e:
-            status_code, headers, resp_body = 500, {'Content-Type': 'text/plain'}, b'Internal Error:\n' + repr(e).encode()
+        except Exception:
+            status_code = 500
+            headers     = {'Content-Type': 'text/plain'}
+            resp_body   = b'Internal Error:\n' + traceback.format_exc().encode()
 
         headers['Content-Length'] = str(len(resp_body))
         self.send_response(status_code)
diff --git a/test/unit/test_install.py b/test/unit/test_install.py
index cb8fe36..303d31a 100644
--- a/test/unit/test_install.py
+++ b/test/unit/test_install.py
@@ -25,31 +25,21 @@ from ..extension_crafting import ExtraHTML
 from ..script_loader import load_script
 from .utils import *
 
-def content_script():
-    script = load_script('content/repo_query_cacher.js')
-    return f'{script}; {tab_id_asker}; start();'
-
-def background_script():
-    script = load_script('background/broadcast_broker.js',
-                         '#IMPORT background/CORS_bypass_server.js')
-    return f'{script}; {tab_id_responder}; start(); CORS_bypass_server.start();'
-
 def setup_view(driver, execute_in_page):
-    tab_id = run_content_script_in_new_window(driver, 'https://gotmyowndoma.in')
+    mock_cacher(execute_in_page)
 
     execute_in_page(load_script('html/install.js'))
     container_ids, containers_objects = execute_in_page(
         '''
         const cb_calls = [];
-        const install_view = new InstallView(arguments[0],
+        const install_view = new InstallView(0,
                                              () => cb_calls.push("show"),
                                              () => cb_calls.push("hide"));
         document.body.append(install_view.main_div);
         const ets = () => install_view.item_entries;
         const shw = slice => [cb_calls.slice(slice || 0), install_view.shown];
         returnval([container_ids, container_ids.map(cid => install_view[cid])]);
-        ''',
-        tab_id)
+        ''')
 
     containers = dict(zip(container_ids, containers_objects))
 
@@ -60,8 +50,7 @@ def setup_view(driver, execute_in_page):
     return containers, assert_container_displayed
 
 install_ext_data = {
-    'content_script': content_script,
-    'background_script': background_script,
+    'background_script': broker_js,
     'extra_html': ExtraHTML('html/install.html', {}),
     'navigate_to': 'html/install.html'
 }
@@ -148,7 +137,7 @@ def test_install_normal_usage(driver, execute_in_page, complex_variant):
 
     execute_in_page('returnval(install_view.install_but);').click()
     installed = lambda d: 'ly installed!' in containers['dialog_container'].text
-    WebDriverWait(driver, 10000).until(installed)
+    WebDriverWait(driver, 10).until(installed)
 
     assert execute_in_page('returnval(shw(2));') == [['show'], True]
     execute_in_page('returnval(install_view.dialog_ctx.ok_but);').click()
@@ -188,10 +177,15 @@ def test_install_normal_usage(driver, execute_in_page, complex_variant):
     # All items are up to date - verify dialog is instead shown in this case.
     execute_in_page('install_view.show(...arguments);',
                     'https://hydril.la/', 'mapping', root_mapping_id)
-    assert execute_in_page('returnval(shw(6));') == [['show'], True]
-    assert_container_displayed('dialog_container')
+
+    fetched = lambda d: 'Fetching ' not in containers['dialog_container'].text
+    WebDriverWait(driver, 10).until(fetched)
+
     assert 'Nothing to do - packages already installed.' \
         in containers['dialog_container'].text
+    assert_container_displayed('dialog_container')
+
+    assert execute_in_page('returnval(shw(6));') == [['show'], True]
     execute_in_page('returnval(install_view.dialog_ctx.ok_but);').click()
     assert execute_in_page('returnval(shw(6));') == [['show', 'hide'], False]
 
diff --git a/test/unit/test_repo_query.py b/test/unit/test_repo_query.py
new file mode 100644
index 0000000..dd57452
--- /dev/null
+++ b/test/unit/test_repo_query.py
@@ -0,0 +1,278 @@
+# SPDX-License-Identifier: CC0-1.0
+
+"""
+Haketilo unit tests - .............
+"""
+
+# This file is part of Haketilo
+#
+# Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the CC0 1.0 Universal License as published by
+# the Creative Commons Corporation.
+#
+# 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
+# CC0 1.0 Universal License for more details.
+
+import pytest
+import json
+from selenium.webdriver.support.ui import WebDriverWait
+
+from ..extension_crafting import ExtraHTML
+from ..script_loader import load_script
+
+from ..extension_crafting import ExtraHTML
+from ..script_loader import load_script
+from .utils import *
+
+repo_urls = [f'https://hydril.la/{s}' for s in ('', '1/', '2/', '3/', '4/')]
+
+queried_url = 'https://example_a.com/something'
+
+def setup_view(execute_in_page, repo_urls):
+    mock_cacher(execute_in_page)
+
+    execute_in_page(load_script('html/repo_query.js'))
+    execute_in_page(
+        '''
+        const repo_proms = arguments[0].map(url => haketilodb.set_repo(url));
+
+        const cb_calls = [];
+        const view = new RepoQueryView(0,
+                                       () => cb_calls.push("show"),
+                                       () => cb_calls.push("hide"));
+        document.body.append(view.main_div);
+        const shw = slice => [cb_calls.slice(slice || 0), view.shown];
+
+        returnval(Promise.all(repo_proms));
+        ''',
+        repo_urls)
+
+repo_query_ext_data = {
+    'background_script': broker_js,
+    'extra_html': ExtraHTML('html/repo_query.html', {}),
+    'navigate_to': 'html/repo_query.html'
+}
+
+@pytest.mark.ext_data(repo_query_ext_data)
+@pytest.mark.usefixtures('webextension')
+def test_repo_query_normal_usage(driver, execute_in_page):
+    """
+    Test of using the repo query view to browse results from repository and to
+    start installation.
+    """
+    setup_view(execute_in_page, repo_urls)
+
+    assert execute_in_page('returnval(shw());') == [[], False]
+
+    execute_in_page('view.show(arguments[0]);', queried_url)
+
+    assert execute_in_page('returnval(shw());') == [['show'], True]
+
+    def get_repo_entries(driver):
+        return execute_in_page(
+            f'returnval((view.repo_entries || []).map({nodes_props_code}));'
+        )
+
+    repo_entries = WebDriverWait(driver, 10).until(get_repo_entries)
+
+    assert len(repo_urls) == len(repo_entries)
+
+    for url, entry in reversed(list(zip(repo_urls, repo_entries))):
+        assert url in entry['main_li'].text
+
+    but_ids = ('show_results_but', 'hide_results_but')
+    for but_idx in (0, 1, 0):
+        assert bool(but_idx) == entry['list_container'].is_displayed()
+
+        assert not entry[but_ids[1 - but_idx]].is_displayed()
+
+        entry[but_ids[but_idx]].click()
+
+    def get_mapping_entries(driver):
+        return execute_in_page(
+            f'''{{
+            const result_entries = (view.repo_entries[0].result_entries || []);
+            returnval(result_entries.map({nodes_props_code}));
+            }}''')
+
+    mapping_entries = WebDriverWait(driver, 10).until(get_mapping_entries)
+
+    assert len(mapping_entries) == 3
+
+    expected_names = ['MAPPING_ABCD', 'MAPPING_ABCD-DEFG-GHIJ', 'MAPPING_A']
+
+    for name, entry in zip(expected_names, mapping_entries):
+        assert entry['mapping_name'].text == name
+        assert entry['mapping_id'].text == f'{name.lower()}-2022.5.11'
+
+    containers = execute_in_page(
+        '''{
+        const reductor = (acc, k) => Object.assign(acc, {[k]: view[k]});
+        returnval(container_ids.reduce(reductor, {}));
+        }''')
+
+    for id, container in containers.items():
+        assert (id == 'repos_list_container') == container.is_displayed()
+
+    entry['install_but'].click()
+
+    for id, container in containers.items():
+        assert (id == 'install_view_container') == container.is_displayed()
+
+    execute_in_page('returnval(view.install_view.cancel_but);').click()
+
+    for id, container in containers.items():
+        assert (id == 'repos_list_container') == container.is_displayed()
+
+    assert execute_in_page('returnval(shw());') == [['show'], True]
+    execute_in_page('returnval(view.cancel_but);').click()
+    assert execute_in_page('returnval(shw());') == [['show', 'hide'], False]
+
+@pytest.mark.ext_data(repo_query_ext_data)
+@pytest.mark.usefixtures('webextension')
+@pytest.mark.parametrize('message', [
+    'browsing_for',
+    'no_repos',
+    'failure_to_communicate',
+    'HTTP_code',
+    'invalid_JSON',
+    'newer_API_version',
+    'invalid_API_version',
+    'querying_repo',
+    'no_results'
+])
+def test_repo_query_messages(driver, execute_in_page, message):
+    """
+    Test of loading and error messages shown in parts of the repo query view.
+    """
+    def has_msg(message, elem=None):
+        def has_msg_and_is_visible(dummy_driver):
+            if elem:
+                return elem.is_displayed() and message in elem.text
+            else:
+                return message in driver.page_source
+        return has_msg_and_is_visible
+
+    def show_and_wait_for_repo_entry():
+        execute_in_page('view.show(arguments[0]);', queried_url)
+        done = lambda d: execute_in_page('returnval(!!view.repo_entries);')
+        WebDriverWait(driver, 10).until(done)
+        execute_in_page(
+            '''
+            if (view.repo_entries.length > 0)
+                view.repo_entries[0].show_results_but.click();
+            ''')
+
+    if message == 'browsing_for':
+        setup_view(execute_in_page, [])
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.url_span.parentNode);')
+        assert has_msg(f'Browsing custom resources for {queried_url}.', elem)(0)
+    elif message == 'no_repos':
+        setup_view(execute_in_page, [])
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repos_list);')
+        done = has_msg('You have no repositories configured :(', elem)
+        WebDriverWait(driver, 10).until(done)
+    elif message == 'failure_to_communicate':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            'browser.tabs.sendMessage = () => Promise.resolve({error: "sth"});'
+        )
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        done = has_msg('Failure to communicate with repository :(', elem)
+        WebDriverWait(driver, 10).until(done)
+    elif message == 'HTTP_code':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            '''
+            const response = {ok: false, status: 405};
+            browser.tabs.sendMessage = () => Promise.resolve(response);
+            ''')
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        done = has_msg('Repository sent HTTP code 405 :(', elem)
+        WebDriverWait(driver, 10).until(done)
+    elif message == 'invalid_JSON':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            '''
+            const response = {ok: true, status: 200, error_json: "sth"};
+            browser.tabs.sendMessage = () => Promise.resolve(response);
+            ''')
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        done = has_msg("Repository's response is not valid JSON :(", elem)
+        WebDriverWait(driver, 10).until(done)
+    elif message == 'newer_API_version':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            '''
+            const response = {
+                ok: true,
+                status: 200,
+                json: {api_schema_version: [1234]}
+            };
+            browser.tabs.sendMessage = () => Promise.resolve(response);
+            ''')
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        msg = 'Results were served using unsupported Hydrilla API version (1234). You might need to update Haketilo.'
+        WebDriverWait(driver, 10).until(has_msg(msg, elem))
+    elif message == 'invalid_API_version':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            '''
+            const response = {
+                ok: true,
+                status: 200,
+                json: {api_schema_version: null}
+            };
+            browser.tabs.sendMessage = () => Promise.resolve(response);
+            ''')
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        msg = 'Results were served using unsupported Hydrilla API version. You might need to update Haketilo.'
+        WebDriverWait(driver, 10).until(has_msg(msg, elem))
+    elif message == 'querying_repo':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            'browser.tabs.sendMessage = () => new Promise(() => {});'
+        )
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].info_span);')
+        assert has_msg('Querying repository...', elem)(0)
+    elif message == 'no_results':
+        setup_view(execute_in_page, repo_urls)
+        execute_in_page(
+            '''
+            const response = {
+                ok: true,
+                status: 200,
+                json: {
+                    api_schema_version: [1],
+                    api_schema_revision: 1,
+                    mappings: []
+                }
+            };
+            browser.tabs.sendMessage = () => Promise.resolve(response);
+            ''')
+        show_and_wait_for_repo_entry()
+
+        elem = execute_in_page('returnval(view.repo_entries[0].results_list);')
+        WebDriverWait(driver, 10).until(has_msg('No results :(', elem))
+    else:
+        raise Exception('made a typo in test function params?')
diff --git a/test/unit/test_repo_query_cacher.py b/test/unit/test_repo_query_cacher.py
index ee9f0fd..b1ce4c8 100644
--- a/test/unit/test_repo_query_cacher.py
+++ b/test/unit/test_repo_query_cacher.py
@@ -22,7 +22,6 @@ import json
 from selenium.webdriver.support.ui import WebDriverWait
 
 from ..script_loader import load_script
-from .utils import *
 
 def content_script():
     script = load_script('content/repo_query_cacher.js')
@@ -39,6 +38,47 @@ def fetch_through_cache(driver, tab_id, url):
         ''',
         tab_id, url)
 
+"""
+tab_id_responder is meant to be appended to background script of a test
+extension.
+"""
+tab_id_responder = '''
+function tell_tab_id(msg, sender, respond_cb) {
+    if (msg[0] === "learn_tab_id")
+        respond_cb(sender.tab.id);
+}
+browser.runtime.onMessage.addListener(tell_tab_id);
+'''
+
+"""
+tab_id_asker is meant to be appended to content script of a test extension.
+"""
+tab_id_asker = '''
+browser.runtime.sendMessage(["learn_tab_id"])
+    .then(tid => window.wrappedJSObject.haketilo_tab = tid);
+'''
+
+def run_content_script_in_new_window(driver, url):
+    """
+    Expect an extension to be loaded which had tab_id_responder and tab_id_asker
+    appended to its background and content scripts, respectively.
+    Open the provided url in a new tab, find its tab id and return it, with
+    current window changed back to the initial one.
+    """
+    initial_handle = driver.current_window_handle
+    handles = driver.window_handles
+    driver.execute_script('window.open(arguments[0], "_blank");', url)
+    WebDriverWait(driver, 10).until(lambda d: d.window_handles is not handles)
+    new_handle = [h for h in driver.window_handles if h not in handles][0]
+
+    driver.switch_to.window(new_handle)
+
+    get_tab_id = lambda d: d.execute_script('return window.haketilo_tab;')
+    tab_id = WebDriverWait(driver, 10).until(get_tab_id)
+
+    driver.switch_to.window(initial_handle)
+    return tab_id
+
 @pytest.mark.ext_data({
     'content_script': content_script,
     'background_script': lambda: bypass_js() + ';' + tab_id_responder
diff --git a/test/unit/utils.py b/test/unit/utils.py
index 90a2ab7..6f0236d 100644
--- a/test/unit/utils.py
+++ b/test/unit/utils.py
@@ -202,43 +202,49 @@ def are_scripts_allowed(driver, nonce=None):
             ''',
             nonce)
 
-"""
-tab_id_responder is meant to be appended to background script of a test
-extension.
-"""
-tab_id_responder = '''
-function tell_tab_id(msg, sender, respond_cb) {
-    if (msg[0] === "learn_tab_id")
-        respond_cb(sender.tab.id);
-}
-browser.runtime.onMessage.addListener(tell_tab_id);
-'''
-
-"""
-tab_id_asker is meant to be appended to content script of a test extension.
-"""
-tab_id_asker = '''
-browser.runtime.sendMessage(["learn_tab_id"])
-    .then(tid => window.wrappedJSObject.haketilo_tab = tid);
-'''
-
-def run_content_script_in_new_window(driver, url):
+def mock_cacher(execute_in_page):
     """
-    Expect an extension to be loaded which had tab_id_responder and tab_id_asker
-    appended to its background and content scripts, respectively.
-    Open the provided url in a new tab, find its tab id and return it, with
-    current window changed back to the initial one.
+    Some parts of code depend on content/repo_query_cacher.js and
+    background/CORS_bypass_server.js running in their appropriate contexts. This
+    function modifies the relevant browser.runtime.sendMessage function to
+    perform fetch(), bypassing the cacher.
     """
-    initial_handle = driver.current_window_handle
-    handles = driver.window_handles
-    driver.execute_script('window.open(arguments[0], "_blank");', url)
-    WebDriverWait(driver, 10).until(lambda d: d.window_handles is not handles)
-    new_handle = [h for h in driver.window_handles if h not in handles][0]
-
-    driver.switch_to.window(new_handle)
+    execute_in_page(
+        '''{
+        const old_sendMessage = browser.tabs.sendMessage, old_fetch = fetch;
+        async function new_sendMessage(tab_id, msg) {
+            if (msg[0] !== "repo_query")
+                return old_sendMessage(tab_id, msg);
+
+            /* Use snapshotted fetch(), allow other test code to override it. */
+            const response = await old_fetch(msg[1]);
+            if (!response)
+                return {error: "Something happened :o"};
+
+            const result = {ok: response.ok, status: response.status};
+            try {
+                result.json = await response.json();
+            } catch(e) {
+                result.error_json = "" + e;
+            }
+            return result;
+        }
 
-    get_tab_id = lambda d: d.execute_script('return window.haketilo_tab;')
-    tab_id = WebDriverWait(driver, 10).until(get_tab_id)
+        browser.tabs.sendMessage = new_sendMessage;
+        }''')
 
-    driver.switch_to.window(initial_handle)
-    return tab_id
+"""
+Convenience snippet of code to retrieve a copy of given object with only those
+properties present which are DOM nodes. This makes it possible to easily access
+DOM nodes stored in a javascript object that also happens to contain some
+other properties that make it impossible to return from a Selenium script.
+"""
+nodes_props_code = '''\
+(obj => {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (value instanceof Node)
+            result[key] = value;
+    }
+    return result;
+})'''
diff --git a/test/world_wide_library.py b/test/world_wide_library.py
index 31864fb..b3febd7 100644
--- a/test/world_wide_library.py
+++ b/test/world_wide_library.py
@@ -107,15 +107,16 @@ def serve_counter(command, get_params, post_params):
 
 # Mock a Hydrilla repository.
 
+make_handler = lambda txt: lambda c, g, p: (200, {}, txt)
+
 # Mock files in the repository.
 sample_contents = [f'Mi povas manĝi vitron, ĝi ne damaĝas min {i}'
                    for i in range(9)]
-sample_hashes   = [sha256(c.encode()).digest().hex() for c in sample_contents]
+sample_hashes = [sha256(c.encode()).digest().hex() for c in sample_contents]
 
-file_url     = lambda hashed:   f'https://hydril.la/file/sha256-{hashed}'
-file_handler = lambda contents: lambda c, g, p: (200, {}, contents)
+file_url = lambda hashed: f'https://hydril.la/file/sha256-{hashed}'
 
-sample_files_catalog = dict([(file_url(h), file_handler(c))
+sample_files_catalog = dict([(file_url(h), make_handler(c))
                              for h, c in zip(sample_hashes, sample_contents)])
 
 # Mock resources and mappings in the repository.
@@ -145,6 +146,7 @@ for i in range(10):
 
 sample_resources_catalog = {}
 sample_mappings_catalog = {}
+sample_queries = {}
 
 for srt in sample_resource_templates:
     resource = make_sample_resource()
@@ -160,8 +162,8 @@ for srt in sample_resource_templates:
         file_ref = {'file': f'file_{i}', 'sha256': sample_hashes[i]}
         resource[('source_copyright', 'scripts')[i & 1]].append(file_ref)
 
-    # Keeping it simple - just make one corresponding mapping for each resource.
-    payloads = {'https://example.com/*': {'identifier': resource['identifier']}}
+    resource_versions = [resource['version'], resource['version'].copy()]
+    resource_versions[1][-1] += 1
 
     mapping = make_sample_mapping()
     mapping['api_schema_version']  = [1]
@@ -170,20 +172,51 @@ for srt in sample_resource_templates:
     mapping['long_name']           = mapping['identifier'].upper()
     mapping['uuid']                = str(uuid4())
     mapping['source_copyright']    = resource['source_copyright']
-    mapping['payloads']            = payloads
 
-    make_handler = lambda txt: lambda c, g, p: (200, {}, txt)
+    mapping_versions = [mapping['version'], mapping['version'].copy()]
+    mapping_versions[1][-1] += 1
+
+    sufs = [srt["id_suffix"], *[l for l in srt["id_suffix"] if l.isalpha()]]
+    patterns = [f'https://example_{suf}.com/*' for suf in set(sufs)]
+    payloads = {}
+
+    for pat in patterns:
+        payloads[pat] = {'identifier': resource['identifier']}
+
+        queryable_url = pat.replace('*', 'something')
+        if queryable_url not in sample_queries:
+            sample_queries[queryable_url] = []
+
+        sample_queries[queryable_url].append({
+            'identifier': mapping['identifier'],
+            'long_name':  mapping['long_name'],
+            'version':    mapping_versions[1]
+        })
 
-    for item, catalog in [
-        (resource, sample_resources_catalog),
-        (mapping,  sample_mappings_catalog)
+    mapping['payloads'] = payloads
+
+    for item, versions, catalog in [
+        (resource, resource_versions, sample_resources_catalog),
+        (mapping,  mapping_versions,  sample_mappings_catalog)
     ]:
         fmt = f'https://hydril.la/{item["type"]}/{item["identifier"]}%s.json'
         # Make 2 versions of each item so that we can test updates.
-        for i in range(2):
+        for ver in versions:
+            item['version'] = ver
             for fmt_arg in ('', '/' + item_version_string(item)):
                 catalog[fmt % fmt_arg] = make_handler(json.dumps(item))
-            item['version'][-1] += 1
+
+def serve_query(command, get_params, post_params):
+    response = {
+        'api_schema_version':  [1],
+        'api_schema_revision': 1,
+        'mappings':            sample_queries[get_params['url'][0]]
+    }
+
+    return (200, {}, json.dumps(response))
+
+sample_queries_catalog = dict([(f'https://hydril.la/{suf}query', serve_query)
+                               for suf in ('', '1/', '2/', '3/', '4/')])
 
 catalog = {
     'http://gotmyowndoma.in':
@@ -233,5 +266,6 @@ catalog = {
 
     **sample_files_catalog,
     **sample_resources_catalog,
-    **sample_mappings_catalog
+    **sample_mappings_catalog,
+    **sample_queries_catalog
 }