UI rewrite for better responsiveness, simplicity and ease of CSS styling.

4 files changed, 294 insertions, 358 deletions

diff --git a/html/display_panel/content/display-panel.html b/html/display_panel/content/display-panel.html
index 0fc18a7..2ed0c9c 100644
--- a/html/display_panel/content/display-panel.html
+++ b/html/display_panel/content/display-panel.html
@@ -41,35 +41,61 @@
                    <h1 class="libre">LibreJS</h1>
                 </a>
             </div>
-            <div>
-                <a target="_blank" href="https://www.gnu.org/software/librejs/"
-                   id="librejs-web-link">gnu.org/software/librejs</a>
-            </div>
-            <div>
-                <strong>LibreJS <span id="version"></span></strong>
-            </div>
         </div>
         <div id="buttons" class="title-area">
-            <table id="buttons_table">
-            </table>
+          <div>
+              <a target="_blank" href="https://www.gnu.org/software/librejs/"
+                 id="librejs-web-link">gnu.org/software/librejs</a>
+          </div>
+          <div>
+              <strong>LibreJS <span id="version"></span></strong>
+          </div>
+          <button id="complain">Complain to site owner</button>
+         	<button id="report-tab">Show this report in a new tab</button>
         </div>
     </div>
     <div id="info">
-        <div id="whitelisted">
-            <h2 class="blocked-js"></h2>
-            <ul class="blocked-js"></ul>
+        <div id="site">
+          <h2 class="site">This whole site <span></span></h2>
+          <div class="buttons">
+            <button class="whitelist" name="*">Whitelist</button>
+            <button class="blacklist" name="*">Blacklist</button>
+            <button class="forget" name="*">Forget</button>
+          </div>
+        </div>
+        <div id="unknown" class="unknown-js">
+          <h2></h2>
+          <p id="must-reload">
+            LibreJS will decide whether blocking these scripts next time this page is loaded. <button id="reload">Reload it now</button>
+          </p>
+          <ul>
+            <li id="li-template">
+                <a class="script-url" href="#"></a>:
+                <p class="reason"></p>
+                <div class="buttons">
+                  <button class="whitelist">Whitelist</button>
+                  <button class="blacklist">Blacklist</button>
+                  <button class="forget">Forget</button>
+                  <button class="forget" name="*">Forget <span class="domain"></span></button>
+                </div>
+              </li>
+          </ul>
+        </div>
+        <div id="whitelisted" class="accepted-js">
+            <h2></h2>
+            <ul></ul>
         </div>
-        <div id="accepted">
-            <h2 class="blocked-js"></h2>
-            <ul class="blocked-js"></ul>
+        <div id="accepted" class="accepted-js">
+            <h2></h2>
+            <ul></ul>
         </div>
-        <div id="blocked">
-            <h2 class="blocked-js"></h2>
-            <ul class="blocked-js"></ul>
+        <div id="blocked" class="blocked-js">
+            <h2></h2>
+            <ul></ul>
         </div>
-        <div id="blacklisted">
-            <h2 class="blocked-js"></h2>
-            <ul class="blocked-js"></ul>
+        <div id="blacklisted" class="blocked-js">
+            <h2></h2>
+            <ul></ul>
         </div>
     </div>
 </body>
diff --git a/html/display_panel/content/main_panel.js b/html/display_panel/content/main_panel.js
index 8622493..a6e19dc 100644
--- a/html/display_panel/content/main_panel.js
+++ b/html/display_panel/content/main_panel.js
@@ -1,247 +1,172 @@
- /**
- * GNU LibreJS - A browser add-on to block nonfree nontrivial JavaScript.
- * *
- * Copyright (C) 2017, 2018 NateN1222 <nathannichols454@gmail.com>
- * Copyright (C) 2018 Ruben Rodriguez <ruben@gnu.org>
- * Copyright (C) 2018 Giorgio Maone <giorgio@maone.net>
- *
- * 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  <http://www.gnu.org/licenses/>.
- *
- */
-
 /**
-*	
-*	Sets global variable "webex" to either "chrome" or "browser" for
-*	use on Chrome or a Firefox variant.
+* GNU LibreJS - A browser add-on to block nonfree nontrivial JavaScript.
+* *
+* Copyright (C) 2017, 2018 NateN1222 <nathannichols454@gmail.com>
+* Copyright (C) 2018 Ruben Rodriguez <ruben@gnu.org>
+* Copyright (C) 2018 Giorgio Maone <giorgio@maone.net>
+*
+* 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.
 *
-*	Change this to support a new browser that isn't Chrome or Firefox,
-*	given that it supports webExtensions.
+* 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  <http://www.gnu.org/licenses/>.
 *
-*	(Use the variable "webex" for all API calls after calling this)
 */
 
-var PRINT_DEBUG = false;
-function dbg_print(a,b){
-	if(PRINT_DEBUG == true){
-		if(b === undefined){
-			console.log(a);
-		} else{
-			console.log(a,b);
-		}
-	}
-}
-
-var webex;
-function set_webex(){
-	if(typeof(browser) == "undefined"){
-		webex = chrome;
-	} else{
-		webex = browser;
-	}
+var fromTab = window.location.hash.match(/^#fromTab=(\d+)/) && RegExp.$1;
+if (fromTab) {
+  let browserStyle = document.createElement("link");
+  browserStyle.rel = "stylesheet";
+  browserStyle.href = "chrome://browser/content/extension.css";
+  document.head.appendChild(browserStyle);
+  document.documentElement.classList.add("tab");
 }
-set_webex();
-
 
-var myPort = webex.runtime.connect({name:"port-from-cs"});
-var current_blocked_data;
+var myPort = browser.runtime.connect({name: "port-from-cs"});
+var currentReport;
 
+// Sends a message that tells the background script the window is open
+myPort.postMessage({"update": true, tabId: parseInt(currentReport && currentReport.tabId || fromTab) || ""});
 
 // Display the actual extension version Number
 document.querySelector("#version").textContent = browser.runtime.getManifest().version;
 
-/*
-*	Makes a button appear that calls a function when you press it.
-*
-*	I copied and pasted this from something else I wrote. It's quite useful.
-*	
-*/
-var button_i = 0;
-function new_debug_button(name_text,callback){
-	if(document.getElementById("abc123_main_div") === null){
-		var to_insert = '<div style="opacity: 0.5; font-size: small; z-index: 2147483647; position: fixed; right: 1%; top: 4%;" id="abc123_main_div"></div>';
-		document.body.insertAdjacentHTML('afterbegin', to_insert);
-	}
-	var button_html = '<input id="abc123_button_' + button_i + '" value="' + name_text +'"type="button"></input><br>';
-	document.getElementById("abc123_main_div").insertAdjacentHTML('afterbegin', button_html);	
-	document.getElementById("abc123_button_"+button_i).addEventListener("click",callback);
-	button_i = button_i + 1;
-}
-
-
+var liTemplate = document.querySelector("#li-template");
+liTemplate.remove();
+
+document.querySelector("#info").addEventListener("click", e => {
+	let button = e.target;
+	if (!button.matches(".buttons > button")) return;
+	let li = button.closest("li");
+	let entry = li && li._scriptEntry || [currentReport.url, "Page's site"];
+	let action = button.className;
+  let site = button.name === "*";
+  if (site) {
+    ([action] = action.split("-"));
+  }
+	myPort.postMessage({[action]: entry, site});
+});
 
+document.querySelector("#report-tab").onclick = e => {
+  myPort.postMessage({report_tab: currentReport});
+  close();
+}
 
+document.querySelector("#complain").onclick = e => {
+  myPort.postMessage({invoke_contact_finder: currentReport});
+  close();
+}
 
+document.querySelector("#reload").onclick = async e => {
+  let {tabId} = currentReport;
+  if (tabId) {
+    await browser.tabs.reload(tabId);
+  }
+};
 
 /* 
-*	Takes in the script data and color of h2 element
-*	Writes to category specified by "name" as used in HTML
-*	(name will probably either be "blacklisted", "whitelisted", "accepted", or "blocked")
+*	Takes in the [[file_id, reason],...] array and the group name for one group
+* of scripts found in this tab, rendering it as a list with management buttons. 
+*	Groups are "unknown", "blacklisted", "whitelisted", "accepted", and "blocked".
 */
-function write_elements(data,name,color){
-	var url = data["url"];
-	var button_html = '<div style="float:left;"><input id="temp" type="button" value="blacklist"></input></div>';
-	var button_html_2 = '<div style="float:left;"><input id="temp2" type="button" value="whitelist"></input></div>';
-	var button_html_3 = '<div style="float:left;"><input id="temp3" type="button" value="forget preference"></input></div>';
-	var heading = document.getElementById(name).getElementsByTagName("h2")[0];
-	var list = document.getElementById(name).getElementsByTagName("ul")[0];
-	if(typeof(data[name]) == "undefined" || data[name].length == 0){
-		// default message
-		list.innerHTML = "<li>No "+ name +" scripts on this page.</li>"
-		data[name] = [];	
-	} else{
-		heading.innerHTML = "<h2 class='blocked-js'>List of <div style='display:inline; color:"+color+";'>" + name.toUpperCase() + "</div> javascript in " + data["url"]+":</h2>";
-	}
-	// Iterate over data[name] and generate list
-	for(var i = 0; i < data[name].length; i++){
-		list.innerHTML += "<li><a href='"+data[name][i][0]+"'><b>"+data[name][i][0]+ "</a>:</b><br>" + data[name][i][1]+"<br>"+button_html+"\n"+button_html_2+"\n"+button_html_3+"</li>";
-		document.getElementById("temp").id = name+"_"+i;
-		document.getElementById("temp2").id = name+"_2_"+i;
-		document.getElementById("temp3").id = name+"_3_"+i;
-	}
-	if(data[name].length != 0){
-		// add click listeners to the buttons		
-		for(var i = 0; i < data[name].length; i++){
-			// Make sure this causes generate_html to get called again with updated data
-			document.getElementById(name+"_"+i).addEventListener("click",function(info){
-				var temp = current_blocked_data[name][parseInt(info.target.id.match(/\d/g)[0])];
-				console.log("Moving script " + temp[0] + " to blacklist");
-				var script_name = this.parentElement.parentElement.parentElement.parentElement.id;
-				myPort.postMessage({"blacklist": temp});
-			});	
-			document.getElementById(name+"_2_"+i).addEventListener("click",function(info){
-				var temp = current_blocked_data[name][parseInt(info.target.id.match(/\d+/g)[1])];
-				console.log("Moving script " + temp[0] + " to whitelist");
-				var script_name = this.parentElement.parentElement.parentElement.parentElement.id;
-				myPort.postMessage({"whitelist": temp});
-			});	
-
-			document.getElementById(name+"_3_"+i).addEventListener("click",function(info){
-				var temp = current_blocked_data[name][parseInt(info.target.id.match(/\d/g)[1])];
-				console.log("Forget preferences for script " + temp[0]);
-				var script_name = this.parentElement.parentElement.parentElement.parentElement.id;
-				//this.parentElement.parentElement.getElementsByTagName("b")[0].insertAdjacentHTML("beforebegin","<h3>Refresh the page to revaluate this script.</h3>");	
-				myPort.postMessage({"forget": temp});
-			});	
-		}
-	}
+function createList(data, group){
+ var {url} = data;
+ let entries = data[group];
+ let container = document.getElementById(group);
+ let heading = container.querySelector("h2");
+ var list = container.querySelector("ul");
+ list.classList.toggle(group, true);
+ if (Array.isArray(entries) && entries.length) {
+	 heading.innerHTML = `<span class="type-name">${group}</span> scripts in ${url}:`;
+   container.classList.remove("empty");
+ } else {
+	 // default message
+	 list.innerHTML = `<li>No <span class="type-name">${group}</span> scripts on this page.</li>`
+	 entries = data[group] = [];
+   container.classList.add("empty");
+ }
+ // generate list
+ for (let entry of entries) {
+   let [scriptId, reason] = entry;
+	 let li = liTemplate.cloneNode(true);
+	 let a = li.querySelector("a");
+	 a.href = scriptId.split("(")[0];  
+   a.textContent = scriptId;
+	 li.querySelector(".reason").textContent = reason;
+   let bySite = !!reason.match(/https?:\/\/[^/]+\/\*/);
+   li.classList.toggle("by-site", bySite);
+   if (bySite) {
+     let domain = li.querySelector(".forget .domain");
+     if (domain) domain.textContent = RegExp.lastMatch;
+   }
+	 li._scriptEntry = entry;
+	 list.appendChild(li);
+ }
 
 }
 
 /**
-*	displays the button specified by HTML string "button"
-*/
-var template = '<tr><td id="c1"></td><td id="c2"></td></tr>';
-var lr_flag = true;
-var button_num = 0;
-function write_button(button,callback){
-	if(document.getElementById("buttons_table").innerHTML.indexOf(button) != -1){
-		return;	
-	}
-	var id = "buttonno_"+button_num;
-	if(lr_flag){
-		document.getElementById("buttons_table").insertAdjacentHTML("beforeend",template);
-		document.getElementById("c1").insertAdjacentHTML("beforeend","<div id='"+id+"'>" + button + "</div>");
-		document.getElementById("c1").id = "cell_"+button_num;
-	}else{
-		var temp = document.getElementById("c2");
-		temp.id = "cell_"+button_num;
-		temp.insertAdjacentHTML("beforeend","<div id='"+id+"'>" + button + "</div>");
-	}
-
-	button_num = button_num+1;
-	lr_flag = !lr_flag;
-
-	document.getElementById(id).addEventListener("click",callback);
-}
-/**
-* update the HTML of the pop-up window.
+* Updates scripts lists and buttons to act on them.
 * If return_HTML is true, it returns the HTML of the popup window without updating it.
-*	example input: 
-*
-*	var example_input = {
+*	example report argument: 
+* {
 *		"accepted": [["FILENAME 1","REASON 1"],["FILENAME 2","REASON 2"]],
 *		"blocked": [["FILENAME 1","REASON 1"],["FILENAME 2","REASON 2"]],
 *		"whitelisted": [["FILENAME 1","REASON 1"],["FILENAME 2","REASON 2"]],
 *		"blacklisted": [["FILENAME 1","REASON 1"],["FILENAME 2","REASON 2"]],
+*   "unknown": [["FILENAME 1","REASON 1"],["FILENAME 2","REASON 2"]],
 *		"url":"example.com"
 *	};
 *
 */
-function generate_HTML(blocked_data){
-	current_blocked_data = blocked_data;//unused?
-
-	// This should send a message to invoke the content finder
-	var button_complain = '<a id="complain-contact" class="button white" href="#">Complain to site owner</a>';
-	// This should update the persistent options
-    var button_allow_all = '<a id="allow-button" class="button white" href="#">'+"Add page's domain to whitelist"+'</a>';
-	// This will call "Forget preferences" on every script.
-    var button_block_nonfree = '<a id="disallow-button" class="button white" href="#">'+"Remove page's domain from whitelist"+'</a>';
-	// This should send a message that calls "open_popup_tab()" in the background script
-    var button_new_tab = '<a id="open-in-tab" class="button white" href="#">Open this report in a new tab</a>';
-
-	var to_clr = document.getElementsByClassName("blocked-js");
-
-	for(var i = 0; i < to_clr.length; i++){
-		to_clr[i].innerHTML = "";
-	}
-	dbg_print("REGEN HTML:");
-	dbg_print(blocked_data);
-	write_elements(blocked_data,"accepted","green");
-	write_elements(blocked_data,"whitelisted","green");
-	write_elements(blocked_data,"blocked","red");
-	write_elements(blocked_data,"blacklisted","red");
-	
-	if( blocked_data["blacklisted"].length != 0 || blocked_data["blocked"].length != 0 ||
-	blocked_data["whitelisted"].length != 0 || blocked_data["accepted"].length != 0){
-		write_button(button_allow_all,function(){
-			myPort.postMessage({"allow_all": blocked_data});
-		});
-		write_button(button_block_nonfree,function(){
-			myPort.postMessage({"block_all": blocked_data});
-
-		});
-		write_button(button_complain,function(){			
-			myPort.postMessage({"invoke_contact_finder": blocked_data});
-		});
-		write_button(button_new_tab,function(){
-			myPort.postMessage({"open_popup_tab": blocked_data});
-		});
-	} else{
-		write_button(button_new_tab,function(){
-			myPort.postMessage({"open_popup_tab": blocked_data});
-		});
-	}
+function refreshUI(report){
+  console.debug("refreshUI", report);
+  currentReport = report;
+
+  document.querySelector("#site").className = report.siteStatus || "";
+  document.querySelector("#site h2").textContent = 
+    `This site ${report.site}`;
+  
+  for (let toBeErased of document.querySelectorAll("#info h2:not(.site) > *, #info ul > *")) {
+  	toBeErased.remove();
+  }
+  
+  let scriptsCount = 0;
+  for (let group of ["unknown", "accepted", "whitelisted", "blocked", "blacklisted"]) {
+  	if (group in report) createList(report, group);
+    scriptsCount += report[group].length;
+  }
+  
+  for (let b of document.querySelectorAll(`.forget, .whitelist, .blacklist`)) {
+    b.disabled = false;
+  }
+  for (let b of document.querySelectorAll(
+    `.unknown .forget, .accepted .forget, .blocked .forget, 
+     .whitelisted .whitelist, .blacklisted .blacklist`
+   )) {
+    b.disabled = true;
+  } 
+  
+  let noscript = scriptsCount === 0;
+  document.body.classList.toggle("empty", noscript);
 }
 
-myPort.onMessage.addListener(function(m) {
-	if(m["show_info"] !== undefined){
-		generate_HTML(m["show_info"]);
-	}
+myPort.onMessage.addListener(m => {
+  if (m.show_info) {
+    refreshUI(m.show_info);
+  }
 });
-// Sends a message that tells the background script the window is open
-function onGot(tabInfo) {
-	myPort.postMessage({"tab_info": tabInfo});
-}
-var gettingCurrent = webex.tabs.getCurrent(onGot);
-
 
 function print_local_storage(){
-	myPort.postMessage({"printlocalstorage": true});
+ myPort.postMessage({"printlocalstorage": true});
 }
 function delete_local_storage(){
-	myPort.postMessage({"deletelocalstorage":true});
+ myPort.postMessage({"deletelocalstorage":true});
 }
-
-//new_debug_button("Print local storage",print_local_storage);
-//new_debug_button("Clear local storage",delete_local_storage);
diff --git a/html/display_panel/content/panel-styles.css b/html/display_panel/content/panel-styles.css
index c077a31..745c67f 100644
--- a/html/display_panel/content/panel-styles.css
+++ b/html/display_panel/content/panel-styles.css
@@ -68,17 +68,18 @@ ul {
     padding:0;
     list-style:none;
 }
-ul.blocked-js li, ul.accepted-js li, ul.dryrun-js li {
+#info li {
     padding:5px;
     border-bottom:2px solid #CCC;
     margin:0;
+    overflow: hidden;
 }
 
-ul ul {
+#info ul ul {
     margin:10px;
     list-style:disc;
 }
-ul.blocked-js ul li, ul.accepted-js ul li, ul.dryrun-js ul li {
+#info ul ul li {
     padding:5px;
     border-bottom:0;
 }
@@ -86,63 +87,48 @@ ul.blocked-js ul li, ul.accepted-js ul li, ul.dryrun-js ul li {
     clear:both;
 }
 
-/* 
-   Pure JS button styles below taken from:
-   http://webdesignerwall.com/tutorials/css3-gradient-buttons
-   */
-.button {
-    display: inline-block;
-    outline: none;
-    cursor: pointer;
-    text-align: center;
-    text-decoration: none;
-    font-size: 1 em;
-    border-radius: .5em;
-    float:right;
-    padding:10px;
-}
-.small.button {
-    font-size:11px;
-    padding:.5em .5em;
-    margin-top:10px;
-}
-.button:hover {
-    text-decoration: none;
-}
-.button:active {
-    position: relative;
-    top: 1px;
-}
-.orange {
-    color: #fef4e9;
-    border: solid 1px #da7c0c;
-    background: #f78d1d;
-    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
-    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
-}
-.orange:hover {
-    background: #f47c20;
-    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
-    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
-}
-.orange:active {
-    color: #fcd3a5;
-    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
-    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
-}
-.white {
-    background: -moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
-    border: 1px solid #B7B7B7;
-    /*    color: #606060;*/
-    color:#9d0d0d;
-}
-.white:hover {
-    background: -moz-linear-gradient(center top , #FFFFFF, #DCDCDC) repeat scroll 0 0 transparent;
-}
-.white:active {
-    background: -moz-linear-gradient(center top , #EDEDED, #FFFFFF) repeat scroll 0 0 transparent;
-/*color: #999999;*/
-    
+#info .type-name {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+#info .accepted-js .type-name {
+  color: #080;
+}
+
+#info .blocked-js .type-name {
+  color: #800;
+}
+
+#info .unknown-js .type-name {
+  color: #008;
+}
+
+#info .unknown-js .reason {
+  display: none;
+}
+
+.by-site button.forget, button.forget[name="*"] {
+  display: none;
+}
+
+.by-site button.forget[name="*"], #site .forget[name="*"] {
+  display: initial;
+}
+
+
+button.whitelist {
+  color: #080;
+}
+button.blacklist {
+  color: #800;
+}
+button.forget {
+  color: #008;
+}
+
+button:disabled {
+  color: #888 !important;
 }
 
 span.accepted, span.blocked {
@@ -151,9 +137,7 @@ span.accepted, span.blocked {
     font-variant:small-caps;
     font-weight:bold;
 }
-ul.blocked-js li {
-    overflow:hidden;
-}
+
 span.blocked {
     color:#8e0000;
 }
@@ -173,3 +157,17 @@ span.blocked {
     font-size: 14px;
     list-style-type: disc;
 }
+
+
+.empty #site, .unknown-js.empty {
+  display: none;
+}
+
+.tab #must-reload, .tab #buttons, .empty #buttons {
+  display: none;
+}
+
+#buttons button {
+  width: 100%;
+  text-align: center;
+}
diff --git a/main_background.js b/main_background.js
index b02c639..62ff18e 100644
--- a/main_background.js
+++ b/main_background.js
@@ -181,7 +181,12 @@ function createReport(initializer = null) {
 		"unknown": [],
 		url: "",
 	};
-	return initializer ? Object.assign(template, initializer) : template;
+	if (initializer) {
+		template = Object.assign(template, initializer);
+	}
+	template.site = ListStore.siteItem(template.url);
+	template.siteStatus = listManager.getStatus(template.site);
+	return template;
 }
 
 /**
@@ -189,19 +194,12 @@ function createReport(initializer = null) {
 *	by opening a new tab with whatever HTML is in the popup
 *	at the moment.
 */
-function open_popup_tab(data){
-	dbg_print(data);
-	function gotPopup(popupURL){
-		var creating = webex.tabs.create({"url":popupURL},function(a){
-			dbg_print("[TABID:"+a["id"]+"] creating unused data entry from parent window's content");
-			unused_data[a["id"]] = createReport(data);
-		});
-	}
-
-	var gettingPopup = webex.browserAction.getPopup({},gotPopup);
+async function openReportInTab(data) {
+	let popupURL = await browser.browserAction.getPopup({});
+	let tab = await browser.tabs.create({url: `${popupURL}#fromTab=${data.tabId}`});
+	unused_data[tab.id] = createReport(data);
 }
 
-
 /**
 *
 *	Clears local storage (the persistent data)
@@ -246,10 +244,10 @@ function debug_print_local(){
 */
 function updateReport(tabId, oldReport, updateUI = false){
 	let {url} = oldReport;
-	let newReport = createReport({url});
+	let newReport = createReport({url, tabId});
 	for (let property of Object.keys(oldReport)) {
-		if (property === "url") continue;
 		let entries = oldReport[property];
+		if (!Array.isArray(entries)) continue;
 		let defValue = property === "accepted" || property === "blocked" ? property : "unknown";
 		for (let script of entries) {
 			let status = listManager.getStatus(script[0],  defValue);
@@ -278,7 +276,7 @@ function updateReport(tabId, oldReport, updateUI = false){
 *		"url": "https://example.com/js/jquery.js"
 *	}
 *
-*	Returns either "wl" (whitelisted), "bl" (blacklisted) or "unknown".
+*	Returns either "whitelisted, "blacklisted", "blocked", "accepted" or "unknown"
 *
 *	NOTE: This WILL break if you provide inconsistent URLs to it.
 *	Make sure it will use the right URL when refering to a certain script.
@@ -308,11 +306,10 @@ async function addReportEntry(tabId, scriptHashOrUrl, action, update = false) {
 		return true;
 	}
 
-	let entryType, res;
+	let entryType;
 	let scriptName = actionValue[0];
 	try {
 		entryType = listManager.getStatus(scriptName, type);
-		res = entryType.substring(0, 2);
 		let entries = unused_data[tabId][entryType];
 		if(isNew(entries, scriptName)){
 			dbg_print(unused_data);
@@ -322,9 +319,18 @@ async function addReportEntry(tabId, scriptHashOrUrl, action, update = false) {
 		}
 	} catch (e) {
 		console.error("action %o, type %s, entryType %s", action, type, entryType, e);
-		res = "unknown";
+		entryType = "unknown";
+	}
+	
+	if (active_connections[tabId]) {
+		try {
+			active_connections[tabId].postMessage({show_info: unused_data[tabId]});
+		} catch(e) {
+			console.error(e);
+		}
 	}
-	return res;
+	
+	return entryType;
 }
 
 
@@ -364,14 +370,15 @@ function connected(p) {
 		
 		for (let action of ["whitelist", "blacklist", "forget"]) {
 			if (m[action]) {
-				await listManager[action](m[action][0]);
+				let [key] = m[action];
+				if (m.site) key = ListStore.siteItem(key); 
+				await listManager[action](key);
 				update = true;
 			}
 		}
 		
-		// 
-		if(m["open_popup_tab"] !== undefined){
-			open_popup_tab(m["open_popup_tab"]);
+		if(m.report_tab){
+			openReportInTab(m.report_tab);
 		}
 		// a debug feature
 		if(m["printlocalstorage"] !== undefined){
@@ -388,17 +395,7 @@ function connected(p) {
 			console.log("Delete local storage");
 			debug_delete_local();
 		}
-		// Add this domain to the whitelist
-		if(m.allow_all){
-			await listManager.whitelist(ListStore.siteItem(m.allow_all.url));
-			update = true;
-		}
-		// Remove this domain from the whitelist
-		if(m.block_all){
-			await listManager.forget(ListStore.siteItem(m.block_all.url));
-			update = true;
-		}
-		
+	
 		let tabs = await browser.tabs.query({active: true, currentWindow: true});
 		
 		if(contact_finder){
@@ -406,11 +403,11 @@ function connected(p) {
 			dbg_print(`[TABID:${tab.id}] Injecting contact finder`);
 			//inject_contact_finder(tabs[0]["id"]);
 		}
-		if(update){
-			let tab = tabs.pop();
-			dbg_print(`%c updating tab ${tab.id}`, "color: red;");
-			active_connections[tab.id] = p;
-			await updateReport(tab.id, unused_data[tab.id], true);
+		if (update || m.update && unused_data[m.tabId]) {
+			let tabId = "tabId" in m ?  m.tabId : tabs.pop().id;
+			dbg_print(`%c updating tab ${tabId}`, "color: red;");
+			active_connections[tabId] = p;
+			await updateReport(tabId, unused_data[tabId], true);
 		} else {
 			for(let tab of tabs) {
 				if(unused_data[tab.id]){
@@ -419,7 +416,7 @@ function connected(p) {
 					p.postMessage({"show_info": unused_data[tab.id]});
 				} else{
 					// create a new entry
-					let report = unused_data[tab.id] = createReport({"url": tab.url});
+					let report = unused_data[tab.id] = createReport({"url": tab.url, tabId: tab.id});
 					p.postMessage({show_info: report});							
 					dbg_print(`[TABID: ${tab.id}] No data found, creating a new entry for this window.`);	
 				}
@@ -757,14 +754,15 @@ async function get_script(response, url, tabId, whitelisted = false, index = -1)
 	function result(scriptSource) {
 		return index === -1 ? scriptSource : [scriptSource, index];
 	}
-	let report = unused_data[tabId] || (unused_data[tabId] = createReport({url}));
+	let report = unused_data[tabId] || (unused_data[tabId] = createReport({url, tabId}));
 
 	let scriptName = url.split("/").pop();
 	if (whitelisted) {
+		let site = ListStore.siteItem(url); 
 		// Accept without reading script, it was explicitly whitelisted
-		let reason = response.whitelistedSite 
-			? "Site ${response.whitelistedSite} whitelisted by user" 
-			: "Page whitelisted by user";
+		let reason = whitelist.contains(site)
+			? `All ${site} whitelisted by user` 
+			: "Address whitelisted by user";
 			addReportEntry(tabId, url, {"whitelisted": [url, reason], url});
 		return result(`/* LibreJS: script whitelisted by user preference. */\n${response}`);
 	}
@@ -783,13 +781,14 @@ async function get_script(response, url, tabId, whitelisted = false, index = -1)
 			tabId
 		});
 	}
-	let listVerdict = await addReportEntry(tabId, sourceHash, {"url": domain, [verdict ? "accepted" : "blocked"]: [url, reason]});
-	switch(listVerdict) {
-		case "wl": case "bl":
-			let verdictText = listVerdict === "wl" ? "whitelisted" : "blacklisted";
-			return result(`/* LibreJS: script ${verdictText} by user. */\n${response}`);
+	let category = await addReportEntry(tabId, sourceHash, {"url": domain, [verdict ? "accepted" : "blocked"]: [url, reason]});
+	let scriptSource = verdict ? response : editedSource;
+	switch(category) {
+		case "blacklisted":
+		case "whitelisted": 
+			return result(`/* LibreJS: script ${category} by user. */\n${scriptSource}`);
 		default:
-			return result(`/* LibreJS: script aknowledged. */\n${editedSource}`);		
+			return result(`/* LibreJS: script ${category}. */\n${scriptSource}`);		
 	}
 }
 
@@ -849,6 +848,7 @@ var ResponseHandler = {
 		let blacklistedSite = blacklist.contains(site);
 		let blacklisted = blacklistedSite || blacklist.contains(url);
 		let topUrl = request.frameAncestors && request.frameAncestors.pop() || request.documentUrl;
+		
 		if (blacklisted) {
 			if (type === "script") {
 				// abort the request before the response gets fetched
@@ -863,7 +863,6 @@ var ResponseHandler = {
 			});
 		} else {
 			let whitelistedSite = whitelist.contains(site);
-			if (whitelistedSite) response.whitelistedSite = site;
 			if ((response.whitelisted = (whitelistedSite || whitelist.contains(url)))
 					&& type === "script") {
 				// accept the script and stop processing
@@ -872,6 +871,7 @@ var ResponseHandler = {
 				return ResponseProcessor.ACCEPT;
 			}
 		}
+		
 		// it's a page (it's too early to report) or an unknown script:
 		//  let's keep processing
 		return ResponseProcessor.CONTINUE;
@@ -893,7 +893,8 @@ var ResponseHandler = {
 async function handle_script(response, whitelisted){
 	let {text, request} = response;
 	let {url, tabId} = request;
-  return await get_script(text, url, tabId, whitelisted, -2);
+  let edited = await get_script(text, url, tabId, whitelisted, -2);
+	return Array.isArray(edited) ? edited[0] : edited;
 }
 
 /**
@@ -1128,18 +1129,4 @@ function inject_contact_finder(tab_id){
 	var executing = webex.tabs.executeScript(tab_id, {file: "/contact_finder.js"}, executed);
 }
 
-/**
-*	Adds given domain to the whitelist in options
-*/
-async function add_csv_whitelist(domain){
-	return await whitelist.store(`${domain}*`);
-}
-
-/**
-*	removes given domain from the whitelist in options
-*/
-async function remove_csv_whitelist(domain) {
-	return whitelist.remove(`${domain}*`);
-}
-
 init_addon();