From 08f01213cc2e3929bfd0ae55514b2e3bd2e5d6f3 Mon Sep 17 00:00:00 2001 From: hackademix Date: Sep 26 2018 13:04:20 +0000 Subject: Improved and partially refactored floating dialog. --- 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 = "

LibreJS Complaint

"; - if ("fail" in res){ - widget.classList.toggle("_LibreJS_CF_fail", true) - addHTML("
Contact finder failed.
"); - } else { - addHTML("

LibreJS

Contact info guessed for this site

"); - 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("
Possible email addresses:
"); - 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 = `

LibreJS Complaint

`; + 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("
Could not guess any contact page for this site.
"); + } else { + addHTML("

Contact info guessed for this site

"); + 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("
Possible email addresses:
"); + 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; +} diff --git a/main_background.js b/main_background.js index fdd895e..a145cc5 100644 --- a/main_background.js +++ b/main_background.js @@ -339,13 +339,18 @@ function get_domain(url){ * */ var portFromCS; -function connected(p) { - if(p["name"] == "contact_finder"){ +async function connected(p) { + if(p.name === "contact_finder"){ + // style the contact finder panel + await browser.tabs.insertCSS(p.sender.tab.id, { + file: "/content/dialog.css", + cssOrigin: "user", + matchAboutBlank: true, + allFrames: true + }); + // Send a message back with the relevant settings - function cb(items){ - p.postMessage(items); - } - browser.storage.local.get(cb); + p.postMessage(await browser.storage.local.get(["prefs_subject", "prefs_body"])); return; } p.onMessage.addListener(async function(m) { @@ -1180,9 +1185,9 @@ async function init_addon() { */ async function injectContactFinder(tabId){ await Promise.all([ + browser.tabs.insertCSS(tabId, {file: "/content/overlay.css", cssOrigin: "user"}), browser.tabs.executeScript(tabId, {file: "/content/contactFinder.js"}), - browser.tabs.insertCSS(tabId, {file: "/content/contactFinder.css", cssOrigin: "user"}) - ]); + ]); } init_addon();