add new extension's popup page

author: Wojtek Kosior <koszko@koszko.org> 2022-01-26 11:38:21 +0100
committer: Wojtek Kosior <koszko@koszko.org> 2022-01-26 11:38:21 +0100
commit: 42fe44050661ed59198fb166672bfdaa119d4333 (patch)
tree: 35060fc1afdd85aa0c450708e8983a4ec88182b5 /html
parent: b75a5717a084c9e5a727c2e960f2b910abcb5ace (diff)
download: browser-extension-42fe44050661ed59198fb166672bfdaa119d4333.tar.gz
browser-extension-42fe44050661ed59198fb166672bfdaa119d4333.zip
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 = () => {
author	Wojtek Kosior <koszko@koszko.org>	2022-01-26 11:38:21 +0100
committer	Wojtek Kosior <koszko@koszko.org>	2022-01-26 11:38:21 +0100
commit	42fe44050661ed59198fb166672bfdaa119d4333 (patch)
tree	35060fc1afdd85aa0c450708e8983a4ec88182b5 /html
parent	b75a5717a084c9e5a727c2e960f2b910abcb5ace (diff)
download	browser-extension-42fe44050661ed59198fb166672bfdaa119d4333.tar.gz browser-extension-42fe44050661ed59198fb166672bfdaa119d4333.zip