aboutsummaryrefslogtreecommitdiff
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/popup.html111
-rw-r--r--html/popup.js140
-rw-r--r--html/repo_query.html15
-rw-r--r--html/repo_query.js15
4 files changed, 268 insertions, 13 deletions
diff --git a/html/popup.html b/html/popup.html
new file mode 100644
index 0000000..ad6c258
--- /dev/null
+++ b/html/popup.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!--
+ SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+ Show details of how Haketilo handled given page and allow querying
+ repositories for custom scripts.
+
+ 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.
+ -->
+<html>
+ <head>
+ <meta charset="utf-8"/>
+ <title>Haketilo popup</title>
+#LOADCSS html/reset.css
+#LOADCSS html/base.css
+#LOADCSS html/grid.css
+ <style>
+#IF TEST
+ html {
+ background-color: #444;
+ }
+#ENDIF
+
+ html, body {
+ width: 400px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ #page_info_container {
+ padding: 0.4em;
+ }
+
+ #info_form, #unprivileged_page_info {
+ display: grid;
+ grid-template-columns: auto;
+ text-align: center;
+ }
+
+ #info_form * {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ }
+
+ #info_form label {
+ padding-bottom: 0.2em;
+ }
+ #info_form label+span, .top_but_container {
+ padding-bottom: 0.5em;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- It contains just templates, we can include it at the top -->
+#INCLUDE html/repo_query.html
+ <div id="page_info_container">
+ <div id="loading_info">
+ Loading page info...
+ </div>
+ <div id="info_form" class="hide">
+ <label>Page URL:</label>
+ <span id="page_url"></span>
+ <label id="privileged_page_info" class="hide">Privileged page</label>
+ <div id="unprivileged_page_info" class="hide">
+ <label>Scripts blocked:</label>
+ <span id="scripts_blocked"></span>
+ <label>Injected payload:</label>
+ <span id="injected_payload"></span>
+ <label>Mapping used:</label>
+ <span id="mapping_used"></span>
+ </div>
+ </div>
+ <div class="text_center top_but_container">
+ <button id="search_resources_but" class="hide">
+ Search for custom resources
+ </button>
+ </div>
+ <div class="text_center">
+ <button id="settings_but">
+ Open settings
+ </button>
+ </div>
+ </div>
+ <div id="repo_query_container" class="hide">
+ <!-- Repo query view will be dynamically inserted here. -->
+ </div>
+#LOADJS html/popup.js
+ </body>
+</html>
diff --git a/html/popup.js b/html/popup.js
new file mode 100644
index 0000000..1efc4b0
--- /dev/null
+++ b/html/popup.js
@@ -0,0 +1,140 @@
+/**
+ * This file is part of Haketilo.
+ *
+ * Function: Show details of how Haketilo handled given page, drive popup.
+ *
+ * Copyright (C) 2021,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.
+ */
+
+#FROM common/browser.js IMPORT browser
+#FROM common/misc.js IMPORT is_privileged_url
+#FROM html/DOM_helpers.js IMPORT by_id
+#FROM html/repo_query.js IMPORT RepoQueryView
+
+const tab_query = {currentWindow: true, active: true};
+
+async function get_current_tab() {
+#IF CHROMIUM
+ const callback = (cb) => browser.tabs.query(tab_query, tab => cb(tab));
+ const promise = new Promise(callback);
+#ELIF MOZILLA
+ const promise = browser.tabs.query(tab_query);
+#ENDIF
+
+ try {
+ return (await promise)[0];
+ } catch(e) {
+ console.log(e);
+ }
+}
+
+async function get_page_info(tab_id) {
+ return browser.tabs.sendMessage(tab_id, ["page_info"]);
+}
+
+function show_page_info(page_info) {
+ by_id("loading_info").remove();
+ by_id("info_form").classList.remove("hide");
+ by_id("page_url").innerText = page_info.url;
+
+ if (page_info.privileged) {
+ by_id("privileged_page_info").classList.remove("hide");
+ } else {
+ by_id("unprivileged_page_info").classList.remove("hide");
+
+ by_id("scripts_blocked").innerText = page_info.allow ? "no" : "yes";
+
+ by_id("injected_payload").innerText = page_info.payload ?
+ page_info.payload.identifier : "None";
+
+ const scripts_fate = page_info.allow ? "allowed" : "blocked";
+
+ if (page_info.mapping === "~allow")
+ var mapping = `None (scripts ${scripts_fate} by a rule)`;
+ else if (page_info.mapping)
+ var mapping = page_info.mapping;
+ else
+ var mapping = `None (scripts ${scripts_fate} by default policy)`;
+ by_id("mapping_used").innerText = mapping;
+ }
+}
+
+function repo_query_showing(show) {
+ for (const [id, i] of [["repo_query", 0], ["page_info", 1]])
+ by_id(`${id}_container`).classList[["add", "remove"][show ^ i]]("hide");
+}
+
+function prepare_repo_query_view(tab_id, page_info) {
+ const repo_query_view = new RepoQueryView(tab_id,
+ () => repo_query_showing(true),
+ () => repo_query_showing(false));
+ by_id("repo_query_container").prepend(repo_query_view.main_div);
+
+ let search_cb = () => repo_query_view.show(page_info.url);
+ search_cb = repo_query_view.when_hidden(search_cb);
+ by_id("search_resources_but").addEventListener("click", search_cb);
+ by_id("search_resources_but").classList.remove("hide");
+}
+
+async function main() {
+ const settings_opener = (e) => browser.runtime.openOptionsPage();
+ by_id("settings_but").addEventListener("click", settings_opener);
+
+ try {
+ var tab = await get_current_tab();
+ var tab_id = tab.id;
+
+ if (is_privileged_url(tab.url))
+ var page_info = {privileged: true, url: tab.url};
+ else
+ var page_info = await get_page_info(tab_id);
+ } catch(e) {
+ console.error(e);
+ }
+
+ if (page_info) {
+ show_page_info(page_info);
+ if (!page_info.privileged)
+ prepare_repo_query_view(tab_id, page_info);
+ } else {
+ by_id("loading_info").innerText =
+ "Page info not avaialable. Try reloading the page.";
+ }
+}
+
+main();
diff --git a/html/repo_query.html b/html/repo_query.html
index 73b0f00..b9c9269 100644
--- a/html/repo_query.html
+++ b/html/repo_query.html
@@ -38,14 +38,16 @@
#LOADCSS html/reset.css
#LOADCSS html/base.css
-#LOADCSS html/grid.css
<style>
.repo_query_top_text {
text-align: center;
- margin: 0.4em;
+ padding: 0.4em;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.repo_queried_url {
text-decoration: underline;
+ white-space: nowrap;
}
.repo_query_repo_li {
@@ -77,10 +79,12 @@
flex: 1 1 auto;
min-width: 0;
}
+
.repo_query_entry_info > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ padding-bottom: 0.1em;
}
.repo_query_entry button {
white-space: nowrap;
@@ -97,12 +101,11 @@
}
</style>
<template>
- <div id="repo_query" data-template="main_div"
- class="grid_1 repo_query_main_div">
+ <div id="repo_query" data-template="main_div" class="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>.
+ 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">
diff --git a/html/repo_query.js b/html/repo_query.js
index 8f33356..a4b8890 100644
--- a/html/repo_query.js
+++ b/html/repo_query.js
@@ -118,16 +118,17 @@ function RepoEntry(query_view, repo_url) {
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 :("];
+ if (this.result_entries.length > 0) {
+ this.results_list.classList.remove("hide");
+ this.info_span.remove();
- this.results_list.append(...to_append);
+ const to_append = this.result_entries.map(re => re.main_li);
+ this.results_list.append(...to_append);
+ } else {
+ this.info_span.innerText = "No results :(";
+ }
}
let show_results = () => {