diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/popup.html | 111 | ||||
| -rw-r--r-- | html/popup.js | 140 | ||||
| -rw-r--r-- | html/repo_query.html | 15 | ||||
| -rw-r--r-- | html/repo_query.js | 15 |
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 = () => { |