show some settings of the current page in the popup

author: Wojtek Kosior <koszko@koszko.org> 2021-07-06 18:25:34 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-07-06 18:25:34 +0200
commit: b7e2870ff58ef85370781aa04e9e0126988e39fd (patch)
tree: 16df903db70aac294188e24b69916cd22ea779f1 /html
parent: d0ae39390fba3822aed4a498aafcdfa61289448b (diff)
download: browser-extension-b7e2870ff58ef85370781aa04e9e0126988e39fd.tar.gz
browser-extension-b7e2870ff58ef85370781aa04e9e0126988e39fd.zip
3 files changed, 309 insertions, 8 deletions
diff --git a/html/display-panel.html b/html/display-panel.html
index 5e5580e..9b6d619 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -6,9 +6,90 @@
 <html>
   <head>
     <meta charset="utf-8"/>
-    <title>Myext popup</title>
+    <title>Hachette - page settings</title>
+    <style>
+      input[type="radio"], input[type="checkbox"] {
+	  display: none;
+      }
+
+      body {
+	  width: 300px;
+	  height: 300px;
+      }
+
+      .show_next:not(:checked)+* {
+	  display: none;
+      }
+
+      .hide {
+	  display: none;
+      }
+
+      #possible_patterns_chbx:not(:checked)+label span#triangle:first-child+span,
+      #possible_patterns_chbx:not(:checked)+label+*,
+      #possible_patterns_chbx:checked+label span#triangle:first-child {
+	  display: none;
+      }
+
+      #container_for_injected>#none_injected:not(:last-child) {
+	  display: none;
+      }
+
+      input#connected_chbx:checked+div+h3 {
+	  display: none;
+      }
+    </style>
   </head>
   <body>
-    <button id="settings_but" type="button">Settings</button>_POPUPSCRIPTS_
+    <!-- The invisible div below is for elements that will be cloned. -->
+    <div class="hide">
+      <li id="pattern_li_template">
+	<span></span>
+	<button>View in settings</button>
+      </li>
+    </div>
+
+    <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>
+    <div>
+      <input id="possible_patterns_chbx" type="checkbox"></input>
+      <label for="possible_patterns_chbx">
+	<h3>
+	  <span id="triangle">&#x23F5;</span><span>&#x23F7;</span>
+	  Possible patterns
+	</h3>
+      </label>
+      <ul id="possible_patterns"></ul>
+
+      <input id="connected_chbx" type="checkbox" class="show_next"></input>
+      <div>
+	<h3>
+	  Matched pattern: <span id="pattern">...</span>
+	  <button id="view_pattern" class="hide">
+	  View in settings
+	  </button>
+	</h3>
+	<h3>
+	  Blocked: <span id="blocked">...</span>
+	</h3>
+	<h3>
+	  Payload: <span id="payload">...</span>
+	  <button id="view_payload" class="hide">
+	    View in settings
+	  </button>
+	</h3>
+	<h3>Injected</h3>
+	<div id="container_for_injected">
+	  <span id="none_injected">None</span>
+	</div>
+      </div>
+      <h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
+    </div>
+
+    <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>_POPUPSCRIPTS_
   </body>
 </html>
diff --git a/html/display-panel.js b/html/display-panel.js
index 4a4cdcd..9ae35fd 100644
--- a/html/display-panel.js
+++ b/html/display-panel.js
@@ -8,8 +8,232 @@
 /*
  * IMPORTS_START
  * IMPORT browser
+ * IMPORT is_chrome
+ * IMPORT is_mozilla
+ * IMPORT CONNECTION_TYPE
+ * IMPORT url_item
+ * IMPORT is_privileged_url
+ * IMPORT TYPE_PREFIX
+ * IMPORT nice_name
+ * IMPORT open_in_settings
+ * IMPORT for_each_possible_pattern
  * IMPORTS_END
  */
 
-document.getElementById("settings_but")
+function by_id(id)
+{
+    return document.getElementById(id);
+}
+
+const tab_query = {currentWindow: true, active: true};
+
+async function get_current_tab()
+{
+    /* Fix for fact that Chrome does not use promises here */
+    const promise = is_chrome ?
+	  new Promise((resolve, reject) =>
+		      browser.tabs.query(tab_query, tab => resolve(tab))) :
+	  browser.tabs.query(tab_query);
+
+    try {
+	return (await promise)[0];
+    } catch(e) {
+	console.log(e);
+    }
+}
+
+const page_url_heading = by_id("page_url_heading");
+const show_privileged_notice_chbx = by_id("show_privileged_notice_chbx");
+const show_page_state_chbx = by_id("show_page_state_chbx");
+
+async function show_page_activity_info()
+{
+    const tab = await get_current_tab();
+
+    if (tab === undefined) {
+	page_url_heading.textContent = "unknown page";
+	return;
+    }
+
+    const url = url_item(tab.url);
+    page_url_heading.textContent = url;
+    if (is_privileged_url(url)) {
+	show_privileged_notice_chbx.checked = true;
+	return;
+    }
+
+    populate_possible_patterns_list(url);
+    show_page_state_chbx.checked = true;
+
+    try_to_connect(tab.id);
+}
+
+function populate_possible_patterns_list(url)
+{
+    for_each_possible_pattern(url, add_pattern_to_list);
+
+    const port = browser.runtime.connect({name: CONNECTION_TYPE.PAGE_INFO});
+    port.onMessage.addListener(handle_page_info);
+    port.postMessage(["subscribe", url]);
+}
+
+const possible_patterns_ul = by_id("possible_patterns");
+const pattern_li_template = by_id("pattern_li_template");
+pattern_li_template.removeAttribute("id");
+const known_patterns = new Map();
+
+function add_pattern_to_list(pattern)
+{
+    const li = pattern_li_template.cloneNode(true);
+    li.id = `pattern_li_${known_patterns.size}`;
+    known_patterns.set(pattern, li.id);
+
+    const span = li.firstElementChild;
+    span.textContent = pattern;
+
+    const button = span.nextElementSibling;
+    const settings_opener = () => open_in_settings(TYPE_PREFIX.PAGE, pattern);
+    button.addEventListener("click", settings_opener);
+
+    possible_patterns_ul.appendChild(li)
+
+    return li.id;
+}
+
+function ensure_pattern_exists(pattern)
+{
+    let id = known_patterns.get(pattern);
+    /*
+     * As long as pattern computation works well, we should never get into this
+     * conditional block. This is just a safety measure. To be removed as part
+     * of a bigger rework when we start taking iframes into account.
+     */
+    if (id === undefined) {
+	console.log(`unknown pattern: ${pattern}`);
+	id = add_pattern_to_list(pattern);
+    }
+
+    return id;
+}
+
+function set_pattern_li_button_text(li_id, text)
+{
+    by_id(li_id).firstElementChild.nextElementSibling.textContent = text;
+}
+
+function handle_page_info(message)
+{
+    const [type, data] = message;
+
+    if (type === "change") {
+	const li_id = ensure_pattern_exists(data.item);
+	if (data.old_val === undefined)
+	    set_pattern_li_button_text(li_id, "Edit in settings");
+	if (data.new_val === undefined)
+	    set_pattern_li_button_text(li_id, "Add setting");
+    }
+
+    if (type === "new_url") {
+	for (const li_id of known_patterns.values())
+	    set_pattern_li_button_text(li_id, "Add setting");
+	for (const [pattern, settings] of data) {
+	    set_pattern_li_button_text(ensure_pattern_exists(pattern),
+				       "Edit in settings")
+	}
+    }
+}
+
+const connected_chbx = by_id("connected_chbx");
+
+function try_to_connect(tab_id)
+{
+    /* This won't connect to iframes. We'll add support for them later */
+    const connect_info = {name: CONNECTION_TYPE.ACTIVITY_INFO, frameId: 0};
+    const port = browser.tabs.connect(tab_id, connect_info);
+
+    port.onDisconnect.addListener(port => handle_disconnect(tab_id));
+    port.onMessage.addListener(handle_activity_report);
+
+    if (is_mozilla)
+	setTimeout(() => monitor_connecting(port, tab_id), 1000);
+}
+
+const loading_chbx = by_id("loading_chbx");
+
+function handle_disconnect(tab_id)
+{
+    if (is_chrome && !browser.runtime.lastError)
+	return;
+
+    /* return if there was no connection initialization failure */
+    if (connected_chbx.checked)
+	return;
+
+    loading_chbx.checked = !loading_chbx.checked;
+    setTimeout(() => try_to_connect(tab_id), 1000);
+}
+
+function monitor_connecting(port, tab_id)
+{
+    if (connected_chbx.checked)
+	return;
+
+    port.disconnect();
+    loading_chbx.checked = !loading_chbx.checked;
+    try_to_connect(tab_id);
+}
+
+const pattern_span = by_id("pattern");
+const view_pattern_but = by_id("view_pattern");
+const blocked_span = by_id("blocked");
+const payload_span = by_id("payload");
+const view_payload_but = by_id("view_payload");
+const container_for_injected = by_id("container_for_injected");
+
+function handle_activity_report(message)
+{
+    connected_chbx.checked = true;
+
+    const [type, data] = message;
+
+    if (type === "settings") {
+	let [pattern, settings] = data;
+
+	settings = settings || {};
+	blocked_span.textContent = settings.allow ? "no" : "yes";
+
+	if (pattern) {
+	    pattern_span.textContent = pattern;
+	    const settings_opener =
+		  () => open_in_settings(TYPE_PREFIX.PAGE, pattern);
+	    view_pattern_but.classList.remove("hide");
+	    view_pattern_but.addEventListener("click", settings_opener);
+	} else {
+	    pattern_span.textContent = "none";
+	}
+
+	const components = settings.components;
+	if (components) {
+	    payload_span.textContent = nice_name(...components);
+	    const settings_opener = () => open_in_settings(...components);
+	    view_payload_but.classList.remove("hide");
+	    view_payload_but.addEventListener("click", settings_opener);
+	} else {
+	    payload_span.textContent = "none";
+	}
+    }
+    if (type === "script") {
+	const h4 = document.createElement("h4");
+	const pre = document.createElement("pre");
+	h4.textContent = "script";
+	pre.textContent = data;
+
+	container_for_injected.appendChild(h4);
+	container_for_injected.appendChild(pre);
+    }
+}
+
+by_id("settings_but")
     .addEventListener("click", (e) => browser.runtime.openOptionsPage());
+
+show_page_activity_info();
diff --git a/html/options_main.js b/html/options_main.js
index 9c66a27..f7adf39 100644
--- a/html/options_main.js
+++ b/html/options_main.js
@@ -12,6 +12,7 @@
  * IMPORT TYPE_NAME
  * IMPORT list_prefixes
  * IMPORT url_extract_target
+ * IMPORT nice_name
  * IMPORTS_END
  */
 
@@ -21,11 +22,6 @@ function by_id(id)
     return document.getElementById(id);
 }
 
-function nice_name(prefix, name)
-{
-    return `${name} (${TYPE_NAME[prefix]})`;
-}
-
 const item_li_template = by_id("item_li_template");
 const bag_component_li_template = by_id("bag_component_li_template");
 const chbx_component_li_template = by_id("chbx_component_li_template");
author	Wojtek Kosior <koszko@koszko.org>	2021-07-06 18:25:34 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-07-06 18:25:34 +0200
commit	b7e2870ff58ef85370781aa04e9e0126988e39fd (patch)
tree	16df903db70aac294188e24b69916cd22ea779f1 /html
parent	d0ae39390fba3822aed4a498aafcdfa61289448b (diff)
download	browser-extension-b7e2870ff58ef85370781aa04e9e0126988e39fd.tar.gz browser-extension-b7e2870ff58ef85370781aa04e9e0126988e39fd.zip