From a6dce3bccda7ff9406c2dd9255c25baefad70225 Mon Sep 17 00:00:00 2001 From: hackademix Date: Mon, 6 Aug 2018 01:02:20 +0200 Subject: UI rewrite for better responsiveness, simplicity and ease of CSS styling. --- html/display_panel/content/display-panel.html | 68 +++-- html/display_panel/content/main_panel.js | 341 ++++++++++---------------- html/display_panel/content/panel-styles.css | 124 +++++----- 3 files changed, 241 insertions(+), 292 deletions(-) (limited to 'html/display_panel/content') 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 @@

LibreJS

-
- gnu.org/software/librejs -
-
- LibreJS -
- -
+
+ gnu.org/software/librejs +
+
+ LibreJS +
+ +
-
-

-
    +
    +

    This whole site

    +
    + + + +
    +
    +
    +

    +

    + LibreJS will decide whether blocking these scripts next time this page is loaded. +

    +
      +
    • + : +

      +
      + + + + +
      +
      • +
    +
    +
    +

    +
      -
      -

      -
        +
        +

        +
          -
          -

          -
            +
            +

            +
              -
              -

              -
                +
                +

                +
                  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 - * Copyright (C) 2018 Ruben Rodriguez - * Copyright (C) 2018 Giorgio Maone - * - * 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 . - * - */ - /** -* -* 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 +* Copyright (C) 2018 Ruben Rodriguez +* Copyright (C) 2018 Giorgio Maone +* +* 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 . * -* (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 = '
                  '; - document.body.insertAdjacentHTML('afterbegin', to_insert); - } - var button_html = '
                  '; - 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 = '
                  '; - var button_html_2 = '
                  '; - var button_html_3 = '
                  '; - 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 = "
                • No "+ name +" scripts on this page.
                  • " - data[name] = []; - } else{ - heading.innerHTML = "

                  List of
                  " + name.toUpperCase() + "
                  javascript in " + data["url"]+":

                  "; - } - // Iterate over data[name] and generate list - for(var i = 0; i < data[name].length; i++){ - list.innerHTML += "
                • "+data[name][i][0]+ ":
                  " + data[name][i][1]+"
                  "+button_html+"\n"+button_html_2+"\n"+button_html_3+"
                  • "; - 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","

                  Refresh the page to revaluate this script.

                  "); - 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 = `${group} scripts in ${url}:`; + container.classList.remove("empty"); + } else { + // default message + list.innerHTML = `
                • No ${group} scripts on this page.
                  • ` + 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 = ''; -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","
                  " + button + "
                  "); - document.getElementById("c1").id = "cell_"+button_num; - }else{ - var temp = document.getElementById("c2"); - temp.id = "cell_"+button_num; - temp.insertAdjacentHTML("beforeend","
                  " + button + "
                  "); - } - - 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 = 'Complain to site owner'; - // This should update the persistent options - var button_allow_all = ''+"Add page's domain to whitelist"+''; - // This will call "Forget preferences" on every script. - var button_block_nonfree = ''+"Remove page's domain from whitelist"+''; - // This should send a message that calls "open_popup_tab()" in the background script - var button_new_tab = 'Open this report in a new tab'; - - 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; +} -- cgit v1.2.3