Haketilo

    cp html/*.css $BUILDDIR/html

    ACTIVITY_INFO : "2"

 * IMPORT TYPE_PREFIX

/* Regexes and objest to use as/in schemas for parse_json_with_schema(). */

const nonempty_string_matcher = /.+/;

const matchers = {

    sha256: /^[0-9a-f]{64}$/,

    nonempty_string: nonempty_string_matcher,

    component: [

	new RegExp(`^[${TYPE_PREFIX.SCRIPT}${TYPE_PREFIX.BAG}]$`),

	nonempty_string_matcher

    ]

};

 * EXPORT matchers

	schema.length < 2 || !["ordefault", "or"].includes(schema[1]))

    VAR : "_",

    /* Url prefix is not used in stored settings. */

    URL : "u"

 * IMPORT repo_query

 * IMPORT subscribe_repo_query_results

 * IMPORT unsubscribe_repo_query_results

function report_activity_oneshot(name, data, port)

{

    port.postMessage([name, data]);

}

function report_repo_query_action(update, port)

    report_activity_oneshot("repo_query_action", update, port);

function trigger_repo_query(query_specifier)

    repo_query(...query_specifier);

}

function handle_disconnect(port, report_action)

{

    ports.delete(port)

    unsubscribe_repo_query_results(report_action);

    const report_action = u => report_repo_query_action(u, port);

    subscribe_repo_query_results(report_action);

    port.onDisconnect.addListener(() => handle_disconnect(port, report_action));

 * IMPORT observables

 * IMPORT TYPE_PREFIX

 * IMPORT parse_json_with_schema

 * IMPORT matchers

const paths = {

    [TYPE_PREFIX.PAGE]: "/pattern",

    [TYPE_PREFIX.BAG]: "/bag",

    [TYPE_PREFIX.SCRIPT]: "/script",

    [TYPE_PREFIX.URL]: "/query"

};

const queried_items = new Map();

const observable = observables.make();

function repo_query(prefix, item, repo_urls)

    const key = prefix + item;

    const results = queried_items.get(key) || {};

    queried_items.set(key, results);

    for (const repo_url of repo_urls)

	perform_query_against(key, repo_url, results);

}

const page_schema = {

    pattern: matchers.nonempty_string,

    payload: ["optional", matchers.component, "default", undefined]

};

const bag_schema = {

    name: matchers.nonempty_string,

    components: ["optional", [matchers.component, "repeat"], "default", []]

};

const script_schema = {

    name: matchers.nonempty_string,

    location: matchers.nonempty_string,

    sha256: matchers.sha256,

};

const search_result_schema = [page_schema, "repeat"];

const schemas = {

    [TYPE_PREFIX.PAGE]: page_schema,

    [TYPE_PREFIX.BAG]: bag_schema,

    [TYPE_PREFIX.SCRIPT]: script_schema,

    [TYPE_PREFIX.URL]: search_result_schema

async function perform_query_against(key, repo_url, results)

    if (results[repo_url] !== undefined)

    const prefix = key[0];

    const item = key.substring(1);

    const result = {state: "started"};

    results[repo_url] = result;

    const broadcast_msg = {prefix, item, results: {[repo_url]: result}};

    observables.broadcast(observable, broadcast_msg);

    let state = "connection_error";

    const query_url =

	  `${repo_url}${paths[prefix]}?n=${encodeURIComponent(item)}`;

    try {

	let xhttp = await make_ajax_request("GET", query_url);

	if (xhttp.status === 200) {

	    state = "parse_error";

	    result.response =

		parse_json_with_schema(schemas[prefix], xhttp.responseText);

	    state = "completed";

	}

    } catch (e) {

	console.log(e);

    }

    result.state = state;

    observables.broadcast(observable, broadcast_msg);

function subscribe_repo_query_results(cb)

    observables.subscribe(observable, cb);

    for (const [key, results] of queried_items.entries())

	cb({prefix: key[0], item: key.substring(1), results});

function unsubscribe_repo_query_results(cb)

    observables.unsubscribe(observable, cb);

 * EXPORT repo_query

 * EXPORT subscribe_repo_query_results

 * EXPORT unsubscribe_repo_query_results

Files: *.html README.txt copyright

Files: html/base.css

    },

    {

	"rhttps://hydrilla.koszko.org": {}

/**

 * Hachette operations on DOM elements

 *

 * Copyright (C) 2021 Wojtek Kosior

 * Redistribution terms are gathered in the `copyright' file.

 */

function by_id(id)

{

    return document.getElementById(id);

}

function clone_template(template_id)

{

    const clone = document.getElementById(template_id).cloneNode(true);

    const result_object = {};

    const to_process = [clone];

    while (to_process.length > 0) {

	const element = to_process.pop();

	const template_key = element.getAttribute("data-template");

	if (template_key)

	    result_object[template_key] = element;

	element.removeAttribute("id");

	element.removeAttribute("template_key");

	for (const child of element.children)

	    to_process.push(child);

    }

    return result_object;

}

/*

 * EXPORTS_START

 * EXPORT by_id

 * EXPORT clone_template

 * EXPORTS_END

 */

/**

 * Hachette base styles

 *

 * Copyright (C) 2021 Wojtek Kosior

 * Copyright (C) 2021 Nicholas Johnson

 * Redistribution terms are gathered in the `copyright' file.

 */

input[type="checkbox"], input[type="radio"], .hide {

    display: none;

}

.show_next:not(:checked)+* {

    display: none;

}

.show_hide_next2:not(:checked)+* {

    display: none;

}

.show_hide_next2:checked+*+* {

    display: none;

}

button, .button {

    background-color: #4CAF50;

    border: none;

    border-radius: 8px;

    color: white;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    padding: 6px 12px;

    margin: 2px 0px;

}

button.slimbutton, .button.slimbutton {

    padding: 2px 4px;

    margin: 0;

}

button:hover, .button:hover {

    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

    <link type="text/css" rel="stylesheet" href="base.css" />

      ul {

	  padding-inline-start: 15px;

      .bold {

	  font-weight: bold;

      .unroll_chbx:not(:checked)+*+label span.triangle:first-child+span.triangle,

      .unroll_chbx:checked+*+label span.triangle:first-child,

      .unroll_chbx:not(:checked)+*,

      .unroll_chbx:not(:checked)+*+label+* {

      <li id="query_match_li_template" class="queried_pattern_match" data-template="li">

	<div>

	  <span>pattern:</span>

	  <span class="bold" data-template="pattern"></span>

	  <button data-template="btn">Install</button>

	</div>

	<div id="unrollable_component_template" data-template="unroll_container">

	  <span data-template="component_label">payload:</span>

	  <input type="checkbox" class="unroll_chbx" data-template="chbx"></input>

	  <br data-template="br"/>

	  <label class="bold" data-template="lbl">

	    <span data-template="triangle">

	      <span class="triangle">&#x23F5;</span>

	      <span class="triangle">&#x23F7;</span>

	    </span>

	    <span data-template="component"></span>

	  </label>

	  <div data-template="unroll"></div>

	</div>

      </li>

    <input id="show_install_view_chbx" type="checkbox" class="show_hide_next2"></input>

    <div id="install_view">

      <IMPORT html/import_frame.html />

      <!--

	  <div id="install_status"></div>

	  <label for="show_install_chbx" class="bold">Cancel install</label>

	  <button id="commit_install_but">Commit install</button>

      -->

    </div>

    <div id="main_view">

      <h2 id="page_url_heading"></h2>

      <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>

      <h3>Privileged page</h3>

      <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>

	<input id="possible_patterns_chbx" type="checkbox" class="unroll_chbx"></input>

	<span></span>

	<label for="possible_patterns_chbx">

	  <h3>

	    <span class="triangle">&#x23F5;</span>

	    <span class="triangle">&#x23F7;</span>

	    Possible patterns

	  </h3>

	</label>

	<ul id="possible_patterns"></ul>

	<input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>

	<div>

	  Matched pattern: <span id="pattern" class="bold">...</span>

	  <br/>

	  Blocked: <span id="blocked" class="bold">...</span>

	  <br/>

	  Payload: <span id="payload" class="bold">...</span>

	  <button id="view_payload" class="hide">

	    View in settings

	  </button>

	  <h3>Injected</h3>

	  <div id="container_for_injected">

	    <span id="none_injected">None</span>

	  </div>

	<h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>

      <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>

    </div>_POPUPSCRIPTS_

 *** Using remote storage here seems inefficient, we only resort to that

 *** temporarily, before all storage access gets reworked.

 * IMPORT get_remote_storage

 * IMPORT get_import_frame

 * IMPORT query_all

 * IMPORT by_id

 * IMPORT clone_template

let storage;

let tab_url;

    tab_url = url_item(tab.url);

    page_url_heading.textContent = tab_url;

    if (is_privileged_url(tab_url)) {

    populate_possible_patterns_list(tab_url);

function handle_page_change(change)

    const li_id = ensure_pattern_exists(change.item);

    if (change.old_val === undefined)

	set_pattern_li_button_text(li_id, "Edit in settings");

    if (change.new_val === undefined)

	set_pattern_li_button_text(li_id, "Add setting");

}

function populate_possible_patterns_list(url)

{

    for_each_possible_pattern(url, add_pattern_to_list);

    for (const [pattern, settings] of query_all(storage, url)) {

	set_pattern_li_button_text(ensure_pattern_exists(pattern),

				   "Edit in settings");

    storage.add_change_listener(handle_page_change, [TYPE_PREFIX.PAGE]);

var content_script_port;

    content_script_port = browser.tabs.connect(tab_id, connect_info);

    const disconnect_cb = () => handle_disconnect(tab_id, start_querying_repos);

    content_script_port.onDisconnect.addListener(disconnect_cb);

    content_script_port.onMessage.addListener(handle_activity_report);

    query_pattern_but.addEventListener("click", start_querying_repos);

	setTimeout(() => monitor_connecting(tab_id), 1000);

    const repo_urls = storage.get_all_names(TYPE_PREFIX.REPO);

    if (content_script_port)

	content_script_port.postMessage([TYPE_PREFIX.URL, tab_url, repo_urls]);

    content_script_port = null;

function monitor_connecting(tab_id)

    if (content_script_port)

	content_script_port.disconnect();

    else

	return;

const queried_items = new Map();

	let [pattern, settings] = data;

    if (type === "repo_query_action") {

	query_started_chbx.checked = true;

	const key = data.prefix + data.item;

	const results = queried_items.get(key) || {};

	Object.assign(results, data.results);

	queried_items.set(key, results);

	const action = data.prefix === TYPE_PREFIX.URL ?

	      show_query_result : record_fetched_install_dep;

	for (const [repo_url, result] of Object.entries(data.results))

	    action(data.prefix, data.item, repo_url, result);

    }

}

const container_for_repo_responses = by_id("container_for_repo_responses");

const results_lists = new Map();

function create_results_list(url)

{

    const list_div = document.createElement("div");

    const list_head = document.createElement("h4");

    const list = document.createElement("ul");

    list_head.textContent = url;

    list_div.appendChild(list_head);

    list_div.appendChild(list);

    container_for_repo_responses.appendChild(list_div);

    const list_object = {list, by_repo: new Map()};

    results_lists.set(url, list_object);

    return list_object;

}

function create_result_item(list_object, repo_url, result)

{

    const result_li = document.createElement("li");

    const repo_url_span = document.createElement("span");

    const result_item = {result_li, appended: null};

    repo_url_span.textContent = repo_url;

    result_li.appendChild(repo_url_span);

    list_object.list.appendChild(result_li);

    list_object.by_repo.set(repo_url, result_item);

    return result_item;

}

function set_appended(result_item, element)

{

    if (result_item.appended)

	result_item.appended.remove();

    result_item.appended = element;

    result_item.result_li.appendChild(element);

}

function show_message(result_item, text)

{

    const div = document.createElement("div");

    div.textContent = text;

    set_appended(result_item, div);

}

function showcb(text)

{

    return item => show_message(item, text);

}

function unroll_chbx_first_checked(entry_object)

{

    if (!entry_object.chbx.checked)

	return;

    entry_object.chbx.removeEventListener("change", entry_object.unroll_cb);

    delete entry_object.unroll_cb;

    entry_object.unroll.textContent = "preview not implemented...";

}

const show_install_chbx = by_id("show_install_view_chbx");

let import_frame;

let install_target = null;

function install_abort(error_state)

{

    import_frame.show_error(`Error: ${error_state}`);

    install_target = null;

}

/*

 * Translate objects from the format in which they are sent by Hydrilla to the

 * format in which they are stored in settings.

 */

function translate_script(script_object, repo_url)

{

    return {

	[TYPE_PREFIX.SCRIPT + script_object.name]: {

	    hash: script_object.sha256,

	    url: `${repo_url}/content/${script_object.location}`

	}

    };

}

function translate_bag(bag_object)

{

    return {

	[TYPE_PREFIX.BAG + bag_object.name]: bag_object.components

    };

}

const format_translators = {

    [TYPE_PREFIX.BAG]: translate_bag,

    [TYPE_PREFIX.SCRIPT]: translate_script

};

function install_check_ready()

{

    if (install_target.to_fetch.size > 0)

	return;

    const page_key = [TYPE_PREFIX.PAGE + install_target.pattern];

    const to_install = [{[page_key]: {components: install_target.payload}}];

    for (const key of install_target.fetched) {

	const old_object =

	      queried_items.get(key)[install_target.repo_url].response;

	const new_object =

	      format_translators[key[0]](old_object, install_target.repo_url);

	to_install.push(new_object);

    }

    import_frame.show_selection(to_install);

}

const possible_errors = ["connection_error", "parse_error"];

function fetch_install_deps(components)

{

    const needed = [...components];

    const processed = new Set();

    while (needed.length > 0) {

	const [prefix, item] = needed.pop();

	const key = prefix + item;

	processed.add(key);

	const results = queried_items.get(key);

	let relevant_result = null;

	if (results)

	    relevant_result = results[install_target.repo_url];

	if (!relevant_result) {

	    content_script_port.postMessage([prefix, item,

					     [install_target.repo_url]]);

	    install_target.to_fetch.add(key);

	    continue;

	}

	if (possible_errors.includes(relevant_result.state)) {

	    install_abort(relevant_result.state);

	    return false;

	}

	install_target.fetched.add(key);

	if (prefix !== TYPE_PREFIX.BAG)

	    continue;

	for (const dependency of relevant_result.response.components) {

	    if (processed.has(dependency.join('')))

		continue;

	    needed.push(dependency);

	}

function record_fetched_install_dep(prefix, item, repo_url, result)

{

    const key = prefix + item;

    if (!install_target || repo_url !== install_target.repo_url ||

	!install_target.to_fetch.has(key))

	return;

    if (possible_errors.includes(result.state)) {

	install_abort(result.state);

	return;

    }

    if (result.state !== "completed")

	return;

    install_target.to_fetch.delete(key);

    install_target.fetched.add(key);

    if (prefix === TYPE_PREFIX.BAG &&

	fetch_install_deps(result.response.components) === false)

	return;

    install_check_ready();

}

function install_clicked(entry_object)

{

    show_install_chbx.checked = true;

    import_frame.show_loading();

    install_target = {

	repo_url: entry_object.repo_url,

	pattern: entry_object.match_object.pattern,

	payload: entry_object.match_object.payload,

	fetched: new Set(),

	to_fetch: new Set()

    };

    fetch_install_deps([install_target.payload]);

    install_check_ready();

}

var max_query_result_id = 0;

function show_query_successful_result(result_item, repo_url, result)

{

    const ul = document.createElement("ul");

    set_appended(result_item, ul);

    for (const match of result) {

	const entry_object = clone_template("query_match_li_template");

	entry_object.pattern.textContent = match.pattern;

	ul.appendChild(entry_object.li);

	if (!match.payload) {

	    entry_object.payload.textContent = "(none)";

	    for (const key of ["chbx", "br", "triangle", "unroll"])

		entry_object[key].remove();

	    continue;

	}

	entry_object.component.textContent = nice_name(...match.payload);

	const install_cb = () => install_clicked(entry_object);

	entry_object.btn.addEventListener("click", install_cb);

	const chbx_id = `query_result_${max_query_result_id++}`;

	entry_object.chbx.id = chbx_id;

	entry_object.lbl.setAttribute("for", chbx_id);

	entry_object.unroll_cb = () => unroll_chbx_first_checked(entry_object);

	entry_object.chbx.addEventListener("change", entry_object.unroll_cb);

	entry_object.component_object = match.payload;

	entry_object.match_object = match;

	entry_object.repo_url = repo_url;

    }

}

function show_query_result(url_prefix, url, repo_url, result)

{

    const results_list_object = results_lists.get(url) ||

	  create_results_list(url);

    const result_item = results_list_object.by_repo.get(repo_url) ||

	  create_result_item(results_list_object, repo_url, result);

    const completed_cb =

	  item => show_query_successful_result(item, repo_url, result.response);

    const possible_actions = {

	completed: completed_cb,

	started: showcb("loading..."),

	connection_error: showcb("Error when querying repository."),

	parse_error: showcb("Bad data format received.")

    };

    possible_actions[result.state](result_item, repo_url);

}

async function main()

{

    storage = await get_remote_storage();

    import_frame = await get_import_frame();

    import_frame.onclose = () => show_install_chbx.checked = false;

    show_page_activity_info();

}

main();

<div style="display: none;">

  <li id="import_li_template">

    <span></span>

    <input type="checkbox" style="display: inline;" checked></input>

    <span></span>

  </li>

</div>

<h2> Settings import </h2>

<input id="import_loading_radio" type="radio" name="import_window_content" class="show_next"></input>

<span> Loading... </span>

<input id="import_failed_radio" type="radio" name="import_window_content" class="show_next"></input>

<div>

  <span id="import_errormsg"></span>

  <input id="import_errordetail_chbx" type="checkbox" class="show_next"></input>

  <pre id="import_errordetail"></pre>

  <button id="import_failok_but"> OK </button>

</div>

<input id="import_selection_radio" type="radio" name="import_window_content" class="show_next"></input>

<div>

  <button id="check_all_import_but"> Check all </button>

  <button id="uncheck_all_import_but"> Uncheck all </button>

  <button id="uncheck_colliding_import_but"> Uncheck existing </button>

  <ul id="import_ul">

  </ul>

  <button id="commit_import_but"> OK </button>

  <button id="cancel_import_but"> Cancel </button>

</div>

/**

 * Hachette HTML import frame script

 *

 * Copyright (C) 2021 Wojtek Kosior

 * Redistribution terms are gathered in the `copyright' file.

 */

/*

 * IMPORTS_START

 * IMPORT get_remote_storage

 * IMPORT by_id

 * IMPORT nice_name

 * IMPORT make_once

 * IMPORTS_END

 */

let storage;

const import_li_template = by_id("import_li_template");

import_li_template.removeAttribute("id");

function import_li_id(prefix, item)

{

    return `ili_${prefix}_${item}`;

}

let import_ul = by_id("import_ul");

let import_chbxs_colliding = undefined;

let settings_import_map = undefined;

function add_import_li(prefix, name)

{

    let li = import_li_template.cloneNode(true);

    let name_span = li.firstElementChild;

    let chbx = name_span.nextElementSibling;

    let warning_span = chbx.nextElementSibling;

    li.setAttribute("data-prefix", prefix);

    li.setAttribute("data-name", name);

    li.id = import_li_id(prefix, name);

    name_span.textContent = nice_name(prefix, name);

    if (storage.get(prefix, name) !== undefined) {

	import_chbxs_colliding.push(chbx);

	warning_span.textContent = "(will overwrite existing setting!)";

    }

    import_ul.appendChild(li);

}

function check_all_imports()

{

    for (let li of import_ul.children)

	li.firstElementChild.nextElementSibling.checked = true;

}

function uncheck_all_imports()

{

    for (let li of import_ul.children)

	li.firstElementChild.nextElementSibling.checked = false;

}

function uncheck_colliding_imports()

{

    for (let chbx of import_chbxs_colliding)

	chbx.checked = false;

}

function commit_import()

{

    for (let li of import_ul.children) {

	let chbx = li.firstElementChild.nextElementSibling;

	if (!chbx.checked)

	    continue;

	let prefix = li.getAttribute("data-prefix");

	let name = li.getAttribute("data-name");

	let key = prefix + name;

	let value = settings_import_map.get(key);

	storage.set(prefix, name, value);

    }

    deactivate();

}

const import_loading_radio = by_id("import_loading_radio");

function show_loading()

{

    import_loading_radio.checked = true;

}

const import_failed_radio = by_id("import_failed_radio");

const import_errormsg = by_id("import_errormsg");

const import_errordetail_chbx = by_id("import_errordetail_chbx");

const import_errordetail = by_id("import_errordetail");

function show_error(errormsg, errordetail)

{

    import_failed_radio.checked = true;

    import_errormsg.textContent = errormsg;

    import_errordetail_chbx.checked = errordetail;

    import_errordetail.textContent = errordetail;

}

const import_selection_radio = by_id("import_selection_radio");

function show_selection(settings)

{

    import_selection_radio.checked = true;

    let old_children = import_ul.children;

    while (old_children[0] !== undefined)

	import_ul.removeChild(old_children[0]);

    import_chbxs_colliding = [];

    settings_import_map = new Map();

    for (let setting of settings) {

	let [key, value] = Object.entries(setting)[0];

	let prefix = key[0];

	let name = key.substring(1);

	add_import_li(prefix, name);

	settings_import_map.set(key, value);

    }

}

function deactivate()

{

    /* Let GC free some memory */

    import_chbxs_colliding = undefined;

    settings_import_map = undefined;

    if (exports.onclose)

	exports.onclose();

}

const exports = {show_loading, show_error, show_selection, deactivate};

async function init()

{

    storage = await get_remote_storage();

    by_id("commit_import_but").addEventListener("click", commit_import);

    by_id("check_all_import_but").addEventListener("click", check_all_imports);

    by_id("uncheck_all_import_but")

	.addEventListener("click", uncheck_all_imports);

    by_id("uncheck_colliding_import_but")

	.addEventListener("click", uncheck_colliding_imports);

    by_id("cancel_import_but").addEventListener("click", deactivate);

    by_id("import_failok_but").addEventListener("click", deactivate);

    return exports;

}

const get_import_frame = make_once(init);

/*

 * EXPORTS_START

 * EXPORT get_import_frame

 * EXPORTS_END

 */

    <link type="text/css" rel="stylesheet" href="base.css" />