3 files changed, 418 insertions, 78 deletions

diff --git a/html/preferences_panel/pref.js b/html/preferences_panel/pref.js
index 4642d32..9cecbb6 100644
--- a/html/preferences_panel/pref.js
+++ b/html/preferences_panel/pref.js
@@ -1,7 +1,8 @@
 /**
 * GNU LibreJS - A browser add-on to block nonfree nontrivial JavaScript.
-* *
+*
 * Copyright (C) 2017 Nathan Nichols
+* Copyright (C) 2018 Giorgio maone
 *
 * This file is part of GNU LibreJS.
 *
@@ -19,59 +20,288 @@
 * along with GNU LibreJS.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-var store;
+(() => {
+	"use strict";
 
-function storage_got(items){
-	var inputs = document.getElementsByTagName("input");
+	const LIST_NAMES = ["white", "black"];
 
-	if(items["pref_whitelist"] == "undefined"){
-			items["pref_whitelist"] = "";
-	}
+	var Model = {
+		lists: {},
+		prefs: null,
 
-	if(items["pref_subject"] == "undefined" || items["pref_subject"] == ""){
-			items["pref_subject"] = "Issues with Javascript on your website";
-	}
+		malformedUrl(url) {
+			let error = null;
+			try {
+				let objUrl = new URL(url);
+				url = objUrl.href;
+				if (!objUrl.protocol.startsWith("http")) {
+					error = "Please enter http:// or https:// URLs only";
+				} else if (!/^[^*]+\*?$/.test(url)) {
+					error = "Only one single trailing path wildcard (/*) allowed";
+				}
+			} catch (e) {
+				error = "Invalid URL";
+				if (url && !url.includes("://")) error += ": missing protocol, either http:// or https://";
+				else if (url.endsWith("://")) error += ": missing domain name";
+			}
+			return error;
+		},
 
-	if(items["pref_body"] == "undefined" || items["pref_body"] == ""){
-			items["pref_body"] = "Please consider using a free license for the Javascript on your website. [Message generated by LibreJS. See https://www.gnu.org/software/librejs/ for more information]";
-	}
+		async save(prefs = this.prefs) {
+			if (prefs !== this.prefs) {
+				this.prefs = Object.assign(this.prefs, prefs);
+			}
+			this.saving = true;
+			try {
+				return await browser.storage.local.set(prefs);
+			} finally {
+				this.saving = false;
+			}
+		},
 
-	for(var i = 0; i < inputs.length; i++){
-		if(inputs[i].id.indexOf("pref_") != -1){
-			if(inputs[i].type == "checkbox" && items[inputs[i].id]){
-				inputs[i].checked = true;
+		async addToList(list, ...items) {
+			let other = list === Model.lists.black ? Model.lists.white : Model.lists.black;
+			this.saving = true;
+			try {
+				await Promise.all([
+					other.remove(...items),
+					list.store(...items)
+				]);
+			} finally {
+				this.saving = false;
 			}
-			if(inputs[i].type == "text" && items[inputs[i].id] != undefined){
-				inputs[i].value = items[inputs[i].id];
-			} 
 		}
-	}
+	};
+	Model.loading = (async () => {
+		let prefsNames =  [
+			"whitelist",
+			"blacklist",
+			"subject",
+			"body"
+		];
+		Model.prefs = await browser.storage.local.get(prefsNames.map(name => `pref_${name}`));
+
+		for (let listName of LIST_NAMES) {
+			let prefName = `pref_${listName}list`;
+			await (Model.lists[listName] = new ListStore(prefName, Storage.CSV))
+				.load(Model.prefs[prefName]);
+		}
+	})();
+
+	var Controller = {
+		init() {
+			let widgetsRoot = this.root = document.getElementById("widgets");
+			for (let widget of widgetsRoot.querySelectorAll('[id^="pref_"]')) {
+				if (widget.id in Model.lists) {
+					populateListUI(widget);
+				} else if (widget.id in Model.prefs) {
+					widget.value = Model.prefs[widget.id];
+				}
+			}
+
+			this.populateListUI();
+			this.syncAll();
+
+			for (let ev in Listeners) {
+				widgetsRoot.addEventListener(ev, Listeners[ev]);
+			}
+			document.getElementById("site").onfocus = e => {
+					if (!e.target.value.trim()) {
+						e.target.value = "https://";
+					}
+				};
+
+			browser.storage.onChanged.addListener(changes => {
+				if (!Model.saving &&
+						("pref_whitelist" in changes || "pref_blacklist" in changes)) {
+					setTimeout(() => {
+						this.populateListUI();
+						this.syncAll();
+					}, 10);
+				}
+			});
+		},
+
+		async addSite(list) {
+			let url = document.getElementById("site").value.trim();
+
+			if (url && !Model.malformedUrl(url)) {
+				await this.addToList(list, url);
+			}
+		},
+		async addToList(list, ...items) {
+			await Model.addToList(list, ...items);
+			this.populateListUI();
+			this.syncAll();
+		},
+		async swapSelection(list) {
+			let origin = list === Model.lists.black ? "white" : "black";
+		  await this.addToList(list, ...Array.map(
+				document.querySelectorAll(`select#${origin} option:checked`),
+				option => option.value)
+			);
+		},
+
+		syncAll() {
+			this.syncListsUI();
+			this.syncSiteUI();
+		},
+
+		syncSiteUI() {
+			let widget = document.getElementById("site");
+			let list2button = listName => document.getElementById(`cmd-${listName}list-site`);
+
+			for (let bi of LIST_NAMES.map(list2button)) {
+				bi.disabled = true;
+			}
+
+			let url = widget.value.trim();
+			let malformedUrl = url && Model.malformedUrl(url);
+			widget.classList.toggle("error", !!malformedUrl);
+			document.getElementById("site-error").textContent = malformedUrl || "";
+			if (!url) return;
+			if (url !== widget.value) {
+				widget.value = url;
+			}
+
+			for (let listName of LIST_NAMES) {
+				let list = Model.lists[listName];
+				if (!list.contains(url)) {
+					list2button(listName).disabled = false;
+				}
+			}
+		},
+
+		syncListsUI() {
+			let	total = 0;
+			for (let id of ["black", "white"]) {
+				let selected = document.querySelectorAll(`select#${id} option:checked`).length;
+				let other = id === "black" ? "white" : "black";
+				document.getElementById(`cmd-${other}list`).disabled = selected === 0;
+				total += selected;
+			}
+			document.getElementById("cmd-delete").disabled = total === 0;
+		},
 
+		async deleteSelection() {
+			for (let id of ["black", "white"]) {
+				let selection = document.querySelectorAll(`select#${id} option:checked`);
+				await Model.lists[id].remove(...Array.map(selection, option => option.value));
+			}
+			this.populateListUI();
+			this.syncAll();
+		},
 
-}
-browser.storage.local.get(storage_got);
-
-document.getElementById("save_changes").addEventListener("click", function(){
-	var inputs = document.getElementsByTagName("input");
-	// TODO: validate/sanitize the user inputs
-	var data = {};
-	for(var i = 0; i < inputs.length; i++){
-		if(inputs[i].id.indexOf("pref_") != -1){
-			var input_val = "";
-			if(inputs[i].type == "checkbox"){
-				input_val = inputs[i].checked;
-			} else{
-				if(inputs[i.value] != "undefined"){
-					input_val = inputs[i].value;
-				} else{
-					input_val = "";
+		populateListUI(widget) {
+			if (!widget) {
+				for(let id of ["white", "black"]) {
+					this.populateListUI(document.getElementById(id));
 				}
+				return;
+			}
+			widget.innerHTML = "";
+			let items = [...Model.lists[widget.id].items].sort();
+			let options = new DocumentFragment();
+			for (let item of items) {
+				let option = document.createElement("option");
+				option.value = option.textContent = option.title = item;
+				options.appendChild(option);
+			}
+			widget.appendChild(options);
+		}
+	};
+
+	var KeyEvents = {
+		Delete(e) {
+			if (e.target.matches("#lists select")) {
+				Controller.deleteSelection();
+			}
+		},
+		Enter(e) {
+			if (e.target.id === "site") {
+				e.target.parentElement.querySelector("button[default]").click();
+			}
+		},
+		KeyA(e) {
+			if (e.target.matches("select") && e.ctrlKey) {
+				for (let o of e.target.options) {
+					o.selected = true;
+				}
+				Controller.syncListsUI();
 			}
-			var input_id = inputs[i].id;
-			data[input_id] = input_val;
 		}
 	}
-	console.log(data);
 
-	browser.storage.local.set(data);
-});
+	var Listeners = {
+		async change(e) {
+			let {target} = e;
+			let {id} = target;
+
+			if (id in Model.lists) {
+				Controller.syncListsUI();
+				let selection = target.querySelectorAll("option:checked");
+				if (selection.length === 1) {
+					document.getElementById("site").value = selection[0].value;
+				}
+				return;
+			}
+		},
+
+		click(e) {
+			let {target} = e;
+
+			if (!/^cmd-(white|black|delete)(list-site)?/.test(target.id)) return;
+			e.preventDefault();
+			let cmd = RegExp.$1;
+			if (cmd === "delete") {
+				Controller.deleteSelection();
+				return;
+			}
+			let list = Model.lists[cmd];
+			if (list) {
+				Controller[RegExp.$2 ? "addSite" : "swapSelection"](list);
+				return;
+			}
+		},
+
+		keypress(e) {
+			let {code} = e;
+			if (code && typeof KeyEvents[code] === "function") {
+				if (KeyEvents[code](e) === false) {
+					e.preventDefault();
+				}
+				return;
+			}
+		},
+
+		async input(e) {
+			let {target} = e;
+			let {id} = target;
+			if (!id) return;
+
+			if (id === "site") {
+				Controller.syncSiteUI();
+				let url = target.value;
+				if (url) {
+					let o = document.querySelector(`#lists select option[value="${url}"]`);
+					if (o)	{
+						o.scrollIntoView();
+						o.selected = true;
+					}
+				}
+				return;
+			}
+
+			if (id.startsWith("pref_")) {
+				await Model.save({[id]: target.value});
+				return;
+			}
+		}
+	};
+
+	window.addEventListener("DOMContentLoaded", async e => {
+		await Model.loading;
+		Controller.init();
+	});
+
+})();
diff --git a/html/preferences_panel/preferences_panel.html b/html/preferences_panel/preferences_panel.html
index 2d01f94..effb724 100644
--- a/html/preferences_panel/preferences_panel.html
+++ b/html/preferences_panel/preferences_panel.html
@@ -1,10 +1,13 @@
+<!doctype html>
 <html>
-  <head>
+<head>
+<meta charset="utf-8"/>
 <!-- /**
  * GNU LibreJS - A browser add-on to block nonfree nontrivial JavaScript.
  * *
  * Copyright (C) 2011, 2012, 2014 Loic J. Duros
  * Copyright (C) 2014, 2015 Nik Nyby
+ * Copyright (C) 2018 Giorgio Maone
  *
  * This file is part of GNU LibreJS.
  *
@@ -25,43 +28,59 @@
   <title>
     LibreJS preferences
   </title>
+  <link rel="stylesheet" type="text/css" href="./prefs.css"/>
+  <script type="text/javascript" src="/common/Storage.js"></script>
+	<script type="text/javascript" src="pref.js"></script>
   </head>
- 
-  <body>
-    <h3>
-      LibreJS Preferences
-    </h3>
 
-	<table>
-		<tr>
-		    <td><p>Allow all scripts from pages with this text <br> in their URL. (Comma seperated, wildcard is *)</p></td>
-			<td><input id="pref_whitelist" type="text"></input></td>
-		</tr>
-		<!--
+  <body>
+    <div class="libre">
+        <a class="libre"
+           id="ljs-settings"
+           href="https://www.gnu.org/software/librejs/"
+           title="LibreJS Settings">
+           <h1 class="libre">LibreJS</h1>
+        </a>
+        <h3>Settings</h3>
+    </div>
+    <div id="widgets">
+      <fieldset id="section-lists"><legend>Allow or block scripts matching the following URLs ("*" matches any path)</legend>
+        <label>Type a new whitelist / blacklist entry:</label>
+        <div id="new-site">
+          <input type="text" id="site" value="" placeholder="https://www.gnu.org/*">
+          <button id="cmd-whitelist-site" class="white" title="Whitelist this site" default>Whitelist</button>
+          <button id="cmd-blacklist-site" class="red" title="Blacklist this site">Blacklist</button>
+        </div>
+        <div id="site-error" class="error-msg"></div>
+        <div id="lists">
+          <div class="white list-container">
+            <label>Whitelist (always allow)</label>
+            <select id="white" multiple size="10"></select>
+          </div>
+          <div id="commands">
+            <button id="cmd-delete" title="Delete">x</button>
+            <button id="cmd-blacklist" title="Move to blacklist">&raquo;</button>
+            <button id="cmd-whitelist" title="Move to whitelist">&laquo;</button>
+          </div>
+          <div class="black list-container">
+            <label>Blacklist (always block)</label>
+            <select id="black" multiple size="10"></select>
+          </div>
+        </div>
+      </fieldset>
 
-		<tr>
-		    <td><p>Display complaint tab on sites where nonfree nontrivial Javascript detected</p></td>
-			<td><input id="pref_complaint_tab" type="checkbox"></input></td>
-		</tr>
-		<tr>
-		    <td><p>Display notifications of the JavaScript code being analyzed by LibreJS</p></td>
-			<td><input id="pref_notify_analyze" type="checkbox"></input></td>
-		</tr>
+      <fieldset id="section-complaint"><legend>Complaint email defaults</legend>
+        <label for="pref_subject">Subject</label>
+        <input id="pref_subject" type="text"
+          value="Issues with Javascript on your website"
+          />
+        <label for="pref_body">Body</label>
+        <textarea id="pref_body" rows="5"
+>Please consider using a free license for the Javascript on your website.
 
-		-->
-		<tr>
-		    <td><p>Default complaint email subject</p></td>
-			<td><input id="pref_subject" type="text"></input></td>
-		</tr>
-		<tr>
-		    <td><p>Default complaint email body</p></td>
-			<td><input id="pref_body" type="text"></input></td>
-		</tr>
-		<tr>
-			<td><input type="button" value="Save changes" id="save_changes"></input></td>
-			<td></td>
-		</tr>
-	</table>		
-	<script type="text/javascript" src="pref.js"></script>
+[Message generated by LibreJS. See https://www.gnu.org/software/librejs/ for more information]
+</textarea>
+      </fieldset>
+    </div>
   </body>
 </html>
diff --git a/html/preferences_panel/prefs.css b/html/preferences_panel/prefs.css
new file mode 100644
index 0000000..b52d6c5
--- /dev/null
+++ b/html/preferences_panel/prefs.css
@@ -0,0 +1,91 @@
+@import url("chrome://browser/content/extension.css");
+@import url("/html/common.css");
+h3 {
+  position: absolute;
+  bottom: 0px;
+  left: 240px;
+  font-size: 18px;
+}
+textarea {
+  width: 100%;
+}
+fieldset {
+  border: none;
+  padding: 0;
+  margin-top: 1em;
+  border-top: 1px solid #ccc;
+}
+legend {
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
+label, legend {
+  display: block;
+  font-size: 1.2em;
+}
+
+#lists {
+  display: flex;
+  flex-direction: row;
+}
+.list-container {
+  flex: 3;
+  flex-direction: row;
+}
+.list-container select {
+width: 100%
+}
+
+.black {
+  color: #600;
+}
+.white {
+  color: #060;
+}
+
+#commands {
+  display: flex;
+  justify-content: center;
+  flex: none;
+  flex-flow: column nowrap;
+}
+
+#commands button {
+  font-weight: bold;
+}
+input[type="text"] {
+  width: 100%;
+}
+
+#lists label {
+  font-weight: bold;
+}
+#lists select {
+  color: black;
+}
+#black {
+  background-color: #fcc;
+}
+#white {
+  background-color: #cfc;
+}
+
+#new-site {
+  display: flex;
+  flex 2;
+}
+.error-msg {
+  color: red;
+}
+.error-msg::after {
+  content: "\00A0";
+}
+.error {
+  background: #ffe;
+  color: #800;
+}
+
+#section-complaint {
+  display: none; /* TODO: Complaint to owner UI */
+}