Contact finder / complaint UI overhaul.

1 files changed, 75 insertions, 79 deletions

diff --git a/content/contactFinder.js b/content/contactFinder.js
index 48f9c27..320bd2e 100644
--- a/content/contactFinder.js
+++ b/content/contactFinder.js
@@ -2,6 +2,7 @@
 * GNU LibreJS - A browser add-on to block nonfree nontrivial JavaScript.
 * *
 * Copyright (C) 2017 Nathan Nichols, Loic J. Duros, Nik Nyby
+* Copyright (C) 2018 Giorgio Maone
 *
 * This file is part of GNU LibreJS.
 *
@@ -23,8 +24,12 @@
 // - open the manifest.json
 // - add a comma after the closing bracket of the key "background"
 // - Copy and paste this after it:
-/* 
-	"content_scripts": [{"matches": ["<all_urls>"],"js": ["contact_finder.js"]}]
+/*
+	"content_scripts": [{
+      "matches": ["<all_urls>"],
+      "js": ["/content/contactFinder.js"],
+      "css": ["/content/contactFinder.css"]
+    }]
 */
 // Now, the contact finder will load on every page and you can test it where ever you want.
 
@@ -34,7 +39,7 @@
 //Copyright (C) 2011, 2012, 2014 Loic J. Duros
 //Copyright (C) 2014, 2015 Nik Nyby
 
-console.log("contact_finder.js");
+console.debug("Injecting contact finder in %s", document.URL);
 
 // email address regexp
 var reEmail = /^mailto\:(admin|feedback|webmaster|info|contact|support|comments|team|help)\@[a-z0-9.\-]+\.[a-z]{2,4}$/i;
@@ -121,33 +126,14 @@ var email_regex = new RegExp(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*
 var prefs;
 
 /**
-*
-*	Creates a transparent floating button from a name string and a callback
-*
-*
-*/
-function new_debug_button(name_text,callback){
-	if(document.getElementById("abc123_main_div") !== null){
-		document.getElementById("abc123_main_div").remove();
-	}
-	console.log("adding button");
-	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_complain" value="' + name_text +'" type="button"></input><br>';
-	document.getElementById("abc123_main_div").insertAdjacentHTML('afterbegin', button_html);	document.getElementById("abc123_button_complain").addEventListener("click",callback);
-
-}
-/**
 *	returns input with all elements not of type string removed
 */
 function remove_not_str(a){
-	var new_a = [];	
+	var new_a = [];
 	for(var i in a){
 		if(typeof(a[i]) == "string"){
 			new_a.push(a[i])
-		}	
+		}
 	}
 	return new_a;
 }
@@ -157,7 +143,7 @@ function remove_not_str(a){
 *	Will return either the first regex match from the selected certainty level or all regexes that
 *	match on that certainty level.
 *
-*	certainty_lvl can be "certain" > "probable" > "uncertain" 
+*	certainty_lvl can be "certain" > "probable" > "uncertain"
 */
 function attempt(certainty_lvl, first=true){
 	// There needs to be some kind of max so that people can't troll by for example leaving a comment with a bunch of emails
@@ -165,8 +151,8 @@ function attempt(certainty_lvl, first=true){
 	var fail_flag = true;
 	var flag;
 	var matches = [];
-	var result = [];	
-	var str_under_test = "";	
+	var result = [];
+	var str_under_test = "";
 	for(var i in document.links){
 		if( typeof(document.links[i].innerText) != "string" || typeof(document.links[i].href) != "string"){
 			continue;
@@ -176,10 +162,10 @@ function attempt(certainty_lvl, first=true){
 		for(var j in contactStr){
 			for(var k in contactStr[j][certainty_lvl]){
 				if(flag){
-					result = [];				
+					result = [];
 					result = str_under_test.match(new RegExp(contactStr[j][certainty_lvl][k],"g"));
 					result = remove_not_str(result);
-					if(result !== undefined && typeof(result[0]) == "string" ){				
+					if(result !== undefined && typeof(result[0]) == "string" ){
 						if(first){
 							return {"fail":false,"result":document.links[i]};
 						} else{
@@ -197,7 +183,7 @@ function attempt(certainty_lvl, first=true){
 }
 
 /**
-*	"LibreJS detects contact pages, email addresses that are likely to be owned by the 
+*	"LibreJS detects contact pages, email addresses that are likely to be owned by the
 *	maintainer of the site, Twitter and identi.ca links, and phone numbers."
 */
 function find_contacts(){
@@ -207,19 +193,19 @@ function find_contacts(){
 	var identi = [];
 	var contact_pages = [];
 	var res = attempt("certain");
-	var flag = true;	
+	var flag = true;
 	var type = "";
 	if(res["fail"] == false){
 		type = "certain";
 		res = res["result"];
-		flag = false;	
+		flag = false;
 	}
 	if(flag){
 		res = attempt("probable");
 		if(res["fail"] == false){
 			type = "probable";
 			res = res["result"];
-			flag = false;	
+			flag = false;
 		}
 	}
 	if(flag){
@@ -227,7 +213,7 @@ function find_contacts(){
 		if(res["fail"] == false){
 			type = "uncertain";
 			res = res["result"];
-			flag = false;		
+			flag = false;
 		}
 	}
 	if(flag){
@@ -235,63 +221,73 @@ function find_contacts(){
 	}
 	return [type,res];
 }
-// need to have this so the handler doesn't take too long
-function handler(){
-	var res = find_contacts();
-	if(document.getElementById("librejs_contactfinder") != null){
-		document.getElementById("librejs_contactfinder").remove();
-	}
-	var to_insert;
-	if("fail" in res){
-		to_insert = '<div style="font-size: small; z-index: 2147483647; background-color: #eeeeee;'+
-						'position: fixed; display:inline-block; border: 3px solid #990000; width: 50%;"'+
-						' id="librejs_contactfinder">'+
-						"Contact finder failed.";
-	} else{
-		if(typeof(res[1]) == "string"){
-			to_insert = '<div style="font-size: small; z-index: 2147483647; background-color: #eeeeee;'+
-							'position: fixed; display:inline-block; border: 3px solid #990000; width: 50%;"'+
-							' id="librejs_contactfinder"><b>Result:</b><br>'+
-							res[0] + ": " + '<a href="' + res[1] + '>'+res[1]+'</a>';
-		}
-		if(typeof(res[1]) == "object"){
-			to_insert = '<div style="font-size: small; z-index: 2147483647; background-color: #eeeeee;'+
-							'position: fixed; display:inline-block; border: 3px solid #990000; width: 50%;"'+
-							' id="librejs_contactfinder"><b>Result:</b><br>'+
-							res[0]+": "+res[1].outerHTML;
 
+
+function createWidget(id, tag) {
+  let widget = document.getElementById(id);
+  if (widget)  widget.remove();
+  widget = document.body.appendChild(document.createElement(tag));
+  widget.id = id;
+  return widget;
+}
+
+/**
+*
+*	Creates the contact finder / complain UI as a semi-transparent overlay
+*
+*/
+
+function createOverlay() {
+	let res = find_contacts();
+  let widget = createWidget("_LibreJS_CF_panel", "div");
+  let addHTML = s => widget.insertAdjacentHTML("beforeend", s);
+  widget.innerHTML = "<h3>LibreJS Complaint</h3>";
+  if ("fail" in res){
+    widget.classList.toggle("_LibreJS_CF_fail", true)
+		addHTML("<div>Contact finder failed.</div>");
+	} else {
+    addHTML("<h3>LibreJS</h3><h4>Contact info guessed for this site</h4>");
+		if(typeof(res[1]) === "string") {
+      let a = document.createElement("a");
+      a.href = a.textContent = res[1];
+      widget.appendChild(a);
+		} else if (typeof(res[1]) === "object"){
+			 addHTML(`${res[0]}: ${res[1].outerHTML}`);
 		}
 	}
 
-	var email = document.documentElement.innerText.match(email_regex);
-	if(email != null){
-		var max_i = 0;
-		if(email.length >= 10){
-			max_i = 10;
-		} else{
-			max_i = email.length;
-		}
-		for(var i = 0; i < max_i; i++){
-			var mailto = "mailto:"+email[i]+"?subject="+encodeURI(prefs["pref_subject"])+"&body="+encodeURI(prefs["pref_body"]);
-			to_insert += '<br>' + 'Possible email: <a href="' + mailto + '">'+email[i]+'</a>';
+	let email = document.documentElement.innerText.match(email_regex);
+	if (email != null) {
+    addHTML("<h5>Possible email addresses:</h5>");
+    let list = document.createElement("ul");
+    let max = Math.max(email.length, 10);
+		for (let i = 0; i < max; i++) {
+      let recipient = email[i];
+      let a = document.createElement("a");
+      a.href = `mailto:${recipient}?subject${
+          encodeURIComponent(prefs["pref_subject"])
+        }&body=${
+          encodeURIComponent(prefs["pref_body"])
+        }`;
+      a.textContent = recipient;
+      list.appendChild(document.createElement("li")).appendChild(a);
 		}
+    widget.appendChild(list);
 	}
 
-	to_insert += '</div>';
-
-	setTimeout(function(){document.getElementById("librejs_contactfinder").remove()}, 7500);
-	document.body.insertAdjacentHTML("afterbegin",to_insert);
-	return 0;
-
+  let closeListener = e => {
+    if (!widget.contains(e.target)) {
+      widget.remove();
+      window.removeEventListener("click", closeListener);
+    }
+  };
+  window.addEventListener("click", closeListener);
 }
 
-function main(){
-	new_debug_button("Complain to website",handler);
-}
 
 var myPort = browser.runtime.connect({name:"contact_finder"});
 
 myPort.onMessage.addListener(function(m) {
 	prefs = m;
-	main();
+	createOverlay();
 });