Improved and partially refactored floating dialog.

4 files changed, 203 insertions, 105 deletions

diff --git a/content/contactFinder.css b/content/contactFinder.css
deleted file mode 100644
index e9ce93e..0000000
--- a/content/contactFinder.css
+++ /dev/null
@@ -1,56 +0,0 @@
-#_LibreJS_CF_panel {
-  opacity: 0.8 !important;
-  font-family: sans-serif !important;
-  font-size: 1.2em !important;
-  color: #000 !important;
-  z-index: 2147483647 !important;
-  background-color: #eee !important;
-  position: fixed !important;
-  display:inline-block !important;
-  border: 2px solid #444 !important;
-  text-align: center !important;
-  width: 50% !important;
-  top: 25% !important;
-  bottom: 25% !important;
-  left: 25% !important;
-  right: 25% !important;
-  transition: width .5s !important;
-}
-#_LibreJS_CF_panel:hover {
-  opacity: 1 !important;
-}
-#_LibreJS_CF_panel h3, #LibreJS_CF_panel h4, #LibreJS_CF_panel h5 {
-  font-family: sans-serif !important;
-  color: #000 !important;
-  background: transparent !important;
-  font-weight: bold !important;
-  text-align: center !important;
-  border: none !important;
-  padding: 0 !important;
-  margin: .8em !important;
-}
-
-#_libreJS_CF_panel a {
-  text-decoration: none !important;
-  color: #840 !important;
-  border: none !important;
-}
-
-#_libreJS_CF_panel a:hover {
-  text-decoration: none !important;
-  color: #c60 !important;
-  border-bottom: 1px solid #840 !important;
-}
-
-
-#_LibreJS_CF_panel h3 {
-  font-size: 2em !important;
-}
-
-#_LibreJS_CF_panel h4 {
-  font-size: 1.8em !important;
-}
-
-#_LibreJS_CF_panel h5 {
-  font-size: 1.5em !important;
-}
diff --git a/content/contactFinder.js b/content/contactFinder.js
index 320bd2e..22bf2fc 100644
--- a/content/contactFinder.js
+++ b/content/contactFinder.js
@@ -39,7 +39,13 @@
 //Copyright (C) 2011, 2012, 2014 Loic J. Duros
 //Copyright (C) 2014, 2015 Nik Nyby
 
-console.debug("Injecting contact finder in %s", document.URL);
+function debug(format, ...args) {
+  console.debug(`LibreJS - ${format}`, ...args);
+}
+
+var myPort;
+
+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;
@@ -223,10 +229,10 @@ function find_contacts(){
 }
 
 
-function createWidget(id, tag) {
+function createWidget(id, tag, parent = document.body) {
   let widget = document.getElementById(id);
   if (widget)  widget.remove();
-  widget = document.body.appendChild(document.createElement(tag));
+  widget = parent.appendChild(document.createElement(tag));
   widget.id = id;
   return widget;
 }
@@ -237,57 +243,86 @@ function createWidget(id, tag) {
 *
 */
 
-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}`);
-		}
-	}
+function main() {
+  let overlay = createWidget("_LibreJS_overlay", "div");
+  let frame = createWidget("_LibreJS_frame", "iframe");
 
-	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);
-	}
+  let close = () => {
+    frame.remove();
+    overlay.remove();
+  };
 
   let closeListener = e => {
-    if (!widget.contains(e.target)) {
-      widget.remove();
-      window.removeEventListener("click", closeListener);
+    let t = e.currentTarget;
+    if (t.href) { // link navigation
+      if (t.href !== document.URL) {
+        if (t.href.includes("#")) {
+          window.addEventListener("hashchange", close);
+        }
+        return;
+      }
     }
+    close();
   };
-  window.addEventListener("click", closeListener);
-}
+  let makeCloser = clickable => clickable.addEventListener("click", closeListener);
+
+  makeCloser(overlay);
+
+  let initFrame = () => {
+    debug("initFrame");
+    let res = find_contacts();
+    let contentDoc = frame.contentWindow.document;
+    let {body} = contentDoc;
+    body.id = "_LibreJS_dialog";
+    body.innerHTML = `<h1>LibreJS Complaint</h1><button class='close'>x</button>`;
+    contentDoc.documentElement.appendChild(contentDoc.createElement("base")).target = "_top";
+    let content = body.appendChild(contentDoc.createElement("div"));
+    content.id = "content";
+    let addHTML = s => content.insertAdjacentHTML("beforeend", s);
+    if ("fail" in res) {
+      content.classList.toggle("_LibreJS_fail", true)
+  		addHTML("<div>Could not guess any contact page for this site.</div>");
+  	} else {
+      addHTML("<h3>Contact info guessed for this site</h3>");
+  		if(typeof(res[1]) === "string") {
+        let a = contentDoc.createElement("a");
+        a.href = a.textContent = res[1];
+        content.appendChild(a);
+  		} else if (typeof(res[1]) === "object"){
+  			 addHTML(`${res[0]}: ${res[1].outerHTML}`);
+  		}
+  	}
 
+  	let emails = document.documentElement.textContent.match(email_regex);
+  	if (emails  && (emails = Array.filter(emails, e => !!e)).length) {
+      addHTML("<h5>Possible email addresses:</h5>");
+      let list = contentDoc.createElement("ul");
+  		for (let i = 0, max = Math.min(emails.length, 10); i < max; i++) {
+        let recipient = emails[i];
+        let a = contentDoc.createElement("a");
+        a.href = `mailto:${recipient}?subject${
+            encodeURIComponent(prefs["pref_subject"])
+          }&body=${
+            encodeURIComponent(prefs["pref_body"])
+          }`;
+        a.textContent = recipient;
+        list.appendChild(contentDoc.createElement("li")).appendChild(a);
+  		}
+      content.appendChild(list);
+  	}
+    Array.forEach(contentDoc.querySelectorAll(".close, a"), makeCloser);
+    debug("frame initialized");
+  }
 
-var myPort = browser.runtime.connect({name:"contact_finder"});
 
-myPort.onMessage.addListener(function(m) {
-	prefs = m;
-	createOverlay();
-});
+
+  frame.addEventListener("load", e => {
+    debug("frame loaded");
+    myPort = browser.runtime.connect({name: "contact_finder"}).onMessage.addListener(m => {
+    	prefs = m;
+    	initFrame();
+    });
+  });
+}
+
+main();
diff --git a/content/dialog.css b/content/dialog.css
new file mode 100644
index 0000000..38b6634
--- /dev/null
+++ b/content/dialog.css
@@ -0,0 +1,91 @@
+#_LibreJS_dialog {
+  font-family: sans-serif;
+  font-size: 1.2em;
+  color: #000;
+  background-color: #eee;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+#_LibreJS_dialog .close {
+  -moz-appearance: none;
+  border: 0;
+  position: fixed;
+  top: .2em;
+  right: .2em;
+  font-size: 1em;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: white;
+  background: black;
+  border-radius: 1em;
+  cursor: pointer;
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0;
+}
+#_LibreJS_dialog .close:hover {
+  background: #800;
+}
+
+ #_LibreJS_dialog h1, #_LibreJS_dialog h2, #_LibreJS_dialog h3 {
+  font-family: sans-serif;
+  color: #000;
+  font-weight: bold;
+  text-align: center;
+  border: none;
+  padding: .2em;
+  margin: .2em;
+  display: block;
+}
+
+#_LibreJS_dialog a {
+  text-decoration: none;
+  color: #048;
+  border: none;
+}
+
+#_LibreJS_dialog a:hover {
+  text-decoration: none;
+  color: #06c;
+  border-bottom: 1px solid #048;
+}
+
+#_LibreJS_dialog h1 {
+  font-size: 1.5em;
+  background: #666;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: .2em;
+}
+
+#_LibreJS_dialog h3 {
+  font-size: 1.2em !important
+}
+
+#_LibreJS_dialog h4 {
+  font-size: 1em;
+}
+
+#_LibreJS_dialog #content {
+  position: fixed;
+  overflow: auto;
+  top: 2.5em;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+#_LibreJS_dialog #content ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;"
+}
diff --git a/content/overlay.css b/content/overlay.css
new file mode 100644
index 0000000..fa0a294
--- /dev/null
+++ b/content/overlay.css
@@ -0,0 +1,28 @@
+#_LibreJS_overlay {
+  z-index: 2147483647 !important;
+  background-color: #000;
+  opacity: 0.7 !important;
+  display: block !important;
+  position: fixed !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+#_LibreJS_frame {
+  width: 60% !important;
+  height: 80% !important;
+  top: 10% !important;
+  bottom: 10% !important;
+  left: 20% !important;
+  right: 20% !important;
+  overflow: auto !important;
+  position: fixed !important;
+  display:inline-block !important;
+  border: 2px solid #444 !important;
+  z-index: 2147483647 !important;
+  background: #eee;
+}