diff options
Diffstat (limited to 'data/extensions/https-everywhere@eff.org/pages')
10 files changed, 559 insertions, 214 deletions
diff --git a/data/extensions/https-everywhere@eff.org/pages/cancel/index.html b/data/extensions/https-everywhere@eff.org/pages/cancel/index.html index 8357ab4..5dd3551 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/index.html +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/index.html @@ -8,11 +8,21 @@ <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> - <h1 id="https-everywhere"><img src="../../images/banner-red.png" alt="HTTPS Everywhere" /></h1> - <p data-i18n="cancel_he_blocking_explainer"></p> - <p id="url-paragraph"><span id="url-label">URL: </span><a href="#" id="originURL"></a></p> - <script src="../translation.js"></script> - <script src="../util.js"></script> - <script src="ux.js"></script> + <div class="content"> + <h1 id="https-everywhere"><img src="../../images/banner-red.png" alt="HTTPS Everywhere" /></h1> + <p data-i18n="cancel_he_blocking_explainer"></p> + + <p id="url-paragraph"> + <span id="url-label">URL: </span><span id="url-value">PLACEHOLDER</span> + </p> + + <form method="get" action="#" id="url-actions-form"> + <button type="button" name="open" formaction="#" id="open-url-button" data-i18n="cancel_open_page">Open insecure page</button> + </form> + + <script src="../translation.js"></script> + <script src="../util.js"></script> + <script src="ux.js"></script> + </div> </body> </html> diff --git a/data/extensions/https-everywhere@eff.org/pages/cancel/style.css b/data/extensions/https-everywhere@eff.org/pages/cancel/style.css index 80ec5b3..1858867 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/style.css +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/style.css @@ -1,20 +1,48 @@ body{ margin-top: 6em; - left: 50%; position: relative; - overflow: hidden; + text-align: center; } -h1 img{ - position: relative; - left: -289px; +.content{ + width: 600px; + margin: auto; + text-align: left; } -p{ - width: 600px; - position: relative; - left: -300px; +h1{ + text-align: center; +} + +form, button, p{ font-size: 12pt; font-family: sans-serif; line-height: 150%; } + +form{ + overflow: auto; + margin-bottom: 1em; +} + +form button{ + padding: .5em 1em; + background-color: #aaa; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#url-value{ + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#open-url-button{ + display: inline-block; + float: left; + background-color: #ec1e1e; +} diff --git a/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js b/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js index 8afb4fb..a1773ca 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js @@ -5,7 +5,9 @@ let observer; document.addEventListener("DOMContentLoaded", () => { const explainer = document.querySelector("[data-i18n=cancel_he_blocking_explainer]"); - observer = new MutationObserver(() => {replaceLink(explainer)}); + observer = new MutationObserver(() => { + replaceLink(explainer) + }); if (explainer.innerText.length > 0) { replaceLink(explainer); } else { @@ -14,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => { displayURL(); }); -function replaceLink(explainer){ +function replaceLink(explainer) { observer.disconnect(); const linkText = chrome.i18n.getMessage("cancel_he_blocking_network"); const link = document.createElement("a"); @@ -26,15 +28,20 @@ function replaceLink(explainer){ function displayURL() { const cancelURL = new URL(window.location.href); const originURL = decodeURI(cancelURL.searchParams.get('originURL')); - const originURLLink = document.getElementById('originURL'); - originURLLink.innerText = originURL; + const originURLLink = document.getElementById('url-value'); + const openURLButton = document.getElementById('open-url-button'); + + originURLLink.innerHTML = originURL; + originURLLink.href = originURL; - originURLLink.addEventListener("click", function() { + openURLButton.addEventListener("click", function() { if (confirm(chrome.i18n.getMessage("chrome_disable_on_this_site") + '?')) { const url = new URL(originURL); sendMessage("disable_on_site", url.host, () => { window.location = originURL; }); } + + return false; }); } diff --git a/data/extensions/https-everywhere@eff.org/pages/debugging-rulesets/ux.js b/data/extensions/https-everywhere@eff.org/pages/debugging-rulesets/ux.js index be6c8b5..49b9c7e 100644 --- a/data/extensions/https-everywhere@eff.org/pages/debugging-rulesets/ux.js +++ b/data/extensions/https-everywhere@eff.org/pages/debugging-rulesets/ux.js @@ -34,7 +34,9 @@ document.getElementById("save-button").addEventListener("click", e => { e.preventDefault(); sendMessage("set_option", { debugging_rulesets: cm.getValue() }, () => { savedTextElement.style.display = "block"; - setTimeout(() => { savedTextElement.style.display = "none" }, 1000); + setTimeout(() => { + savedTextElement.style.display = "none" + }, 1000); valueHasChanged = false; document.title = savedTitle; diff --git a/data/extensions/https-everywhere@eff.org/pages/options/index.html b/data/extensions/https-everywhere@eff.org/pages/options/index.html index f351d17..078f5ea 100644 --- a/data/extensions/https-everywhere@eff.org/pages/options/index.html +++ b/data/extensions/https-everywhere@eff.org/pages/options/index.html @@ -11,10 +11,6 @@ <span class="section-header-span inactive" data-show="update-channels-wrapper" data-i18n="options_updateChannels"></span> <div class="section-wrapper" id="general-settings-wrapper"> - <div id="counter-wrapper" class="settings-wrapper"> - <input type="checkbox" id="showCounter"> - <label for="showCounter" data-i18n="menu_showCounter"></label> - </div> <div id="update-wrapper" class="settings-wrapper"> <input type="checkbox" id="autoUpdateRulesets"> <label for="autoUpdateRulesets" data-i18n="options_autoUpdateRulesets"></label> diff --git a/data/extensions/https-everywhere@eff.org/pages/options/ux.js b/data/extensions/https-everywhere@eff.org/pages/options/ux.js index deaacd9..97c5673 100644 --- a/data/extensions/https-everywhere@eff.org/pages/options/ux.js +++ b/data/extensions/https-everywhere@eff.org/pages/options/ux.js @@ -7,28 +7,21 @@ document.addEventListener("DOMContentLoaded", () => { - const showCounter = document.getElementById("showCounter"); const autoUpdateRulesets = document.getElementById("autoUpdateRulesets"); const enableMixedRulesets = document.getElementById("enableMixedRulesets"); const showDevtoolsTab = document.getElementById("showDevtoolsTab"); const defaultOptions = { - showCounter: true, autoUpdateRulesets: false, enableMixedRulesets: false, showDevtoolsTab: true }; sendMessage("get_option", defaultOptions, item => { - showCounter.checked = item.showCounter; autoUpdateRulesets.checked = item.autoUpdateRulesets; enableMixedRulesets.checked = item.enableMixedRulesets; showDevtoolsTab.checked = item.showDevtoolsTab; - showCounter.addEventListener("change", () => { - sendMessage("set_option", { showCounter: showCounter.checked }); - }); - autoUpdateRulesets.addEventListener("change", () => { sendMessage("set_option", { autoUpdateRulesets: autoUpdateRulesets.checked }); }); @@ -42,7 +35,7 @@ document.addEventListener("DOMContentLoaded", () => { }); }); - function onlyShowSection(sectionId){ + function onlyShowSection(sectionId) { document.querySelectorAll('.section-wrapper').forEach(sw => { sw.style.display = "none"; }); @@ -62,10 +55,10 @@ document.addEventListener("DOMContentLoaded", () => { }); }); - function create_update_channel_element(update_channel, last_updated, pinned){ + function create_update_channel_element(update_channel, last_updated, pinned) { let ruleset_version_string; - if(last_updated){ + if(last_updated) { const ruleset_date = new Date(last_updated * 1000); ruleset_version_string = ruleset_date.getUTCFullYear() + "." + (ruleset_date.getUTCMonth() + 1) + "." + ruleset_date.getUTCDate(); } else { @@ -188,14 +181,14 @@ document.addEventListener("DOMContentLoaded", () => { return update_channel_div; } - function render_update_channels(){ + function render_update_channels() { const update_channels_list = document.getElementById("update-channels-list"); - while(update_channels_list.firstChild){ + while(update_channels_list.firstChild) { update_channels_list.removeChild(update_channels_list.firstChild); } sendMessage("get_pinned_update_channels", null, item => { - for(const update_channel of item.update_channels){ + for(const update_channel of item.update_channels) { update_channels_list.appendChild( create_update_channel_element( update_channel, @@ -208,7 +201,7 @@ document.addEventListener("DOMContentLoaded", () => { }); sendMessage("get_stored_update_channels", null, item => { - for(const update_channel of item.update_channels){ + for(const update_channel of item.update_channels) { update_channels_list.appendChild( create_update_channel_element( update_channel, @@ -227,7 +220,7 @@ document.addEventListener("DOMContentLoaded", () => { const update_channels_error = document.getElementById("update-channels-error"); update_channel_name_div.setAttribute("placeholder", chrome.i18n.getMessage("options_enterUpdateChannelName")); - function displayError(text){ + function displayError(text) { update_channels_error_text.innerText = text; update_channels_error.style.display = "block"; window.scrollTo(0,0); @@ -244,7 +237,7 @@ document.addEventListener("DOMContentLoaded", () => { // img element "remove button" let templateRemove = document.createElement("img"); - templateRemove.src = chrome.extension.getURL("images/remove.png"); + templateRemove.src = chrome.runtime.getURL("images/remove.png"); templateRemove.className = "remove"; for (const userRule of userRules) { @@ -272,16 +265,16 @@ document.addEventListener("DOMContentLoaded", () => { getOption_("disabledList", [], function(item) { let rule_host_parent = e("disabled-rules-wrapper"); - if( 0 === item.disabledList.length ){ + if( 0 === item.disabledList.length ) { hide(rule_host_parent); return; } // img element "remove button" let templateRemove = document.createElement("img"); - templateRemove.src = chrome.extension.getURL("images/remove.png"); + templateRemove.src = chrome.runtime.getURL("images/remove.png"); templateRemove.className = "remove"; - if( item ){ + if( item ) { for (const key of item.disabledList) { let rule_host = document.createElement("div"); let remove = templateRemove.cloneNode(true); @@ -304,12 +297,12 @@ document.addEventListener("DOMContentLoaded", () => { add_update_channel.addEventListener("click", () => { const update_channel_name = update_channel_name_div.value; - if(update_channel_name.trim() == ""){ + if(update_channel_name.trim() == "") { displayError("Error: The update channel name is blank. Please enter another name."); } else { update_channel_name_div.value = ""; sendMessage("create_update_channel", update_channel_name, result => { - if(result == true){ + if(result == true) { render_update_channels(); } else { displayError("Error: There already exists an update channel with this name."); @@ -326,7 +319,7 @@ document.addEventListener("DOMContentLoaded", () => { const update_channels_last_checked = document.getElementById("update-channels-last-checked"); sendMessage("get_last_checked", null, last_checked => { let last_checked_string; - if(last_checked){ + if(last_checked) { const last_checked_date = new Date(last_checked * 1000); const options = { year: '2-digit', diff --git a/data/extensions/https-everywhere@eff.org/pages/popup/index.html b/data/extensions/https-everywhere@eff.org/pages/popup/index.html index 8097c5b..03f76d2 100644 --- a/data/extensions/https-everywhere@eff.org/pages/popup/index.html +++ b/data/extensions/https-everywhere@eff.org/pages/popup/index.html @@ -11,78 +11,94 @@ </head> <body> <header> - <h1 data-i18n="about_ext_name"></h1> + <div class="logo-container"> + <img src="../../images/HTTPS-Everywhere-Logo.png" alt="HTTPS Everywhere logo"> + </div> + + <small> + <span data-i18n="about_version">Version</span>: <span id="current-version"></span> + <br> + <span id="rulesets-versions"></span> + </small> </header> - <section id="disableButton" class="options" style="visibility: hidden;"> - <div class="onoffswitch"> - <input id="onoffswitch" type="checkbox" checked><label data-i18n="menu_globalEnable" for="onoffswitch"></label> + <section id="disableButton" class="options settings_block" style="visibility: hidden;"> + <div class="onoffswitch switch" aria-label="Toggle on or off"> + <h1 id="onoffswitch_label" data-i18n="menu_globalEnable"></h1> + <span class="slider round"></span> + <input aria-hidden="true" id="onoffswitch" type="checkbox" checked> <label id="onoffswitch__label" for="onoffswitch"> + </label> </div> </section> - <section id="HttpNowhere" class="options" style="visibility: hidden;"> - <input id="http-nowhere-checkbox" type="checkbox"><label data-i18n="menu_blockUnencryptedRequests" for="http-nowhere-checkbox"></label> + <section id="HttpNowhere" class="options settings_block" style="visibility: hidden;"> + <h1 id="HttpNowhere__header" data-i18n="menu_encryptAllSitesEligible"></h1> + <input aria-hidden="true" id="http-nowhere-checkbox" type="checkbox"><label id="http-nowhere-checkbox_label" aria-label="Toggle on or off" for="http-nowhere-checkbox"></label> + <h2 id="HttpNowhere__explained" data-i18n="menu_httpNoWhereExplained"></h2> </section> - <div id="RuleManagement"> + <section id="RuleManagement" class="settings_block"> + <section id="settingsForThisSite"> + <h1 data-i18n="chrome_settings_for_this_site_header"></h1> + <h2 data-i18n="chrome_settings_for_this_site_subheader"></h2> + </section> <section id="disableEnableSection"> - <a href="javascript:void 0" id="disable-on-this-site" data-i18n="chrome_disable_on_this_site"></a> - <a href="javascript:void 0" id="enable-on-this-site" data-i18n="chrome_enable_on_this_site"></a> + <a href="javascript:void 0" id="disable-on-this-site" class="button" data-i18n="chrome_disable_on_this_site"></a> + <a href="javascript:void 0" id="enable-on-this-site" class="button" data-i18n="chrome_enable_on_this_site"></a> </section> + <div id="RuleManagement__see_more--prompt" class="see_more__prompt" aria-label="Listen or See more for explanation"> + <span id="RuleManagement__see_more" class="see_more__arrow down"></span> + <span class="see_more__text" data-i18n="menu_seeMore"></span> + </div> + <div class="see_more__content hide"> + <p class="see_more--clarified" data-i18n="chrome_settings_for_this_site_explained"></p> - <section id="addRuleSection"> - <a href="javascript:void 0" id="add-rule-link" data-i18n="chrome_add_rule"></a> - <div id="add-new-rule-div" style="display: none"> - <h3 data-i18n="about_add_new_rule"></h3> - <p data-i18n="chrome_always_https_for_host"></p> - <label for="new-rule-host" data-i18n="chrome_host"></label><br> - <input size="50" id="new-rule-host" type="text" disabled><br> - <div id="new-rule-regular-text"> - <a href="javascript:void 0" id="new-rule-show-advanced-link" data-i18n="chrome_show_advanced"></a><br> - </div> - <div id="new-rule-advanced" style="display: none"> - <a href="javascript:void 0" id="new-rule-hide-advanced-link" data-i18n="chrome_hide_advanced"></a><br> - <br> - <label for="new-rule-name" data-i18n="chrome_rule_name"></label><br> - <input size="50" id="new-rule-name" type="text"><br> - <label for="new-rule-regex" data-i18n="chrome_regex"></label><br> - <input size="50" id="new-rule-regex" type="text"><br> - <label for="new-rule-redirect" data-i18n="chrome_redirect_to"></label><br> - <input size="50" id="new-rule-redirect" type="text"><br> + <section id="addRuleSection"> + <a href="javascript:void 0" id="add-rule-link" class="button" data-i18n="chrome_add_rule"></a> + <div id="add-new-rule-div" style="display: none"> + <h3 data-i18n="about_add_new_rule"></h3> + <p data-i18n="chrome_always_https_for_host"></p> + <label for="new-rule-host" data-i18n="chrome_host" class="label_nontoggle"></label> + <input size="50" id="new-rule-host" type="text" disabled><br> + <div id="new-rule-regular-text"> + <a href="javascript:void 0" id="new-rule-show-advanced-link" class="button" data-i18n="chrome_show_advanced"></a><br> + </div> + <div id="new-rule-advanced" style="display: none"> + <a href="javascript:void 0" id="new-rule-hide-advanced-link" class="button" data-i18n="chrome_hide_advanced"></a><br> + <label for="new-rule-name" data-i18n="chrome_rule_name" class="label_nontoggle"></label> + <input size="50" id="new-rule-name" type="text"> + <label for="new-rule-regex" data-i18n="chrome_regex" class="label_nontoggle"></label> + <input size="50" id="new-rule-regex" type="text"> + <label for="new-rule-redirect" data-i18n="chrome_redirect_to" class="label_nontoggle"></label> + <input size="50" id="new-rule-redirect" type="text"> + </div> + <button id="add-new-rule-button" class="button" data-i18n="chrome_add_new_rule"></button> + <button id="cancel-new-rule" class="button" data-i18n="chrome_status_cancel_button"></button> </div> - <button id="add-new-rule-button" data-i18n="chrome_add_new_rule"></button><br> - <button id="cancel-new-rule" data-i18n="chrome_status_cancel_button"></button> - </div> - </section> + </section> - <section id="StableRules" class="rules"> - <h3 data-i18n="chrome_stable_rules"></h3> - <p class="description" data-i18n="chrome_stable_rules_description"></p> - </section> + <section id="StableRules" class="rules"> + <h3 data-i18n="chrome_stable_rules"></h3> + <span id="RuleManagement--counter"></span> + <h2 class="description" data-i18n="chrome_stable_rules_description"></h2> + </section> - <section id="UnstableRules" class="rules"> - <h3 data-i18n="chrome_experimental_rules"></h3> - <p class="description" data-i18n="chrome_experimental_rules_description"></p> - </section> + <section id="UnstableRules" class="rules"> + <h3 data-i18n="chrome_experimental_rules"></h3> + <h2 class="description" data-i18n="chrome_experimental_rules_description"></h2> + </section> - <section id="resetButton" class="options"> - <a href="javascript:void 0" id="reset-to-defaults" data-i18n="prefs_reset_defaults"></a> - </section> - </div> + <section id="resetButton" class="options"> + <a href="javascript:void 0" id="reset-to-defaults" class="button" data-i18n="prefs_reset_defaults"></a> + </section> + </div> + + </section> <footer> - <a id="viewAllRules" href="https://www.eff.org/https-everywhere/atlas" target="_blank" data-i18n="menu_viewAllRules"></a><br> - <br> - <a id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a><br> - <br> - <a id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a> - <p> - <small> - <span data-i18n="about_version">Version</span>: <span id="current-version"></span> - <span id="rulesets-versions"> - </span> - </small> - </p> + <a class="button" id="viewAllRules" href="https://atlas.eff.org/index.html" target="_blank" data-i18n="menu_viewAllRules"></a> + <a class="button" id="aboutTitle" href="https://www.eff.org/https-everywhere" target="_blank" data-i18n="about_title"></a> + <a class="button" id="donateEFF" href="https://supporters.eff.org/donate/support-https-everywhere" target="_blank" data-i18n="menu_donate_eff_imperative"></a> </footer> </body> diff --git a/data/extensions/https-everywhere@eff.org/pages/popup/style.css b/data/extensions/https-everywhere@eff.org/pages/popup/style.css index 0d3b805..6207daa 100644 --- a/data/extensions/https-everywhere@eff.org/pages/popup/style.css +++ b/data/extensions/https-everywhere@eff.org/pages/popup/style.css @@ -1,116 +1,296 @@ -html { - background-color: #fff +:root { + --https-blue: #0a84ff; + --darker-blue: #0060df; + --text-main: #000; + --text-secondary: #464646; + --light-grey: #ececec; + --space: 5px; } body { - cursor: default; - margin-left: 1em; - margin-right: 1em; - margin-top: 0; - margin-bottom: 0; - min-width: 23em; + color: var(--text-secondary); font-family: 'Lucida Grande', 'Segoe UI', Tahoma, 'DejaVu Sans', Arial, sans-serif; - font-size: 75%; - color: #303942; + margin: 0; + max-width: 400px; + min-width: 380px; } -p { - line-height: 1.8em; +header { + background-color: var(--light-grey); + color: var(--text-main); + display: flex; + padding: var(--space); } -h1, h2, h3 { - user-select: none; - font-weight: normal; - line-height: 1; +header h1 { + font-size: 2em; +} + +header .logo-container { + margin: var(--space); + width: 85%; +} + +header .logo-container img { + width: 100%; +} + +header small { + color: #000; + display: block; + font-size: .70em; + font-weight: bold; + margin: 1%; + width: 100%; } h1 { - font-size: 1.5em; + font-size: 16px; + margin: var(--space) auto } h2 { - font-size: 1.3em; - margin-bottom: 0.4em; + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; } h3 { - color: black; - font-size: 1.2em; - margin-bottom: 0.8em; + font-size: 16px; } -a { - color: #15c; - text-decoration: underline; +h1, +h2 { + color: var(--text-main); } -a:active { - color: #052577; +footer { + display: inline-flex; + margin: var(--space); } -/* Don't wrap text for important stuff. */ -h1, h2, h3, .rule > label { - white-space: nowrap; +footer a.button { + margin: var(--space); } -/* Hide rules & options if the extension is off. */ -.disabled #RuleManagement,.disabled #HttpNowhere { - display: none; +/* Elements */ +.settings_block { + display: inline-block; + padding: 5px 1em 20px 1em; + border-bottom: var(--light-grey) solid 1px; } -/* Initially hide section (until rules get added). */ -section.rules { - display: none; +.button { + border: var(--https-blue) solid 1px; + color: var(--text-main); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; +} + +.button:hover { + background-color: var(--darker-blue); + color: #fff +} + +.see_more__prompt { + color: var(--text-main); + cursor: pointer; + font-size: 12px; + float: right; + margin: 5px 0; +} + +.see_more__arrow { + border: solid var(--darker-blue); + border-width: 0 3px 3px 0; + float: right; + margin-left: 10px; + margin-top: 3px; + padding: 3px; +} + +.see_more__content.show p { + font-size: 12px; + margin: 10px 0; +} + +.down { + transform: rotate(45deg); +} + +.up { + transform: rotate(-135deg); +} + +input[type=checkbox] { + opacity: 0; +} + +label { + background: grey; + border-radius: 25px; + color: var(--text-main); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +label:after { + background: #fff; + border-radius: 90px; + content: ''; + height: 20px; + left: 5px; + position: absolute; + top: 5px; + transition: 0.3s; /* Acts on transform below */ + width: 20px; +} +input:checked+label { + background: var(--https-blue); +} +/* position when checked*/ +input:checked+label:after { + left: calc(100% - 5px); + transform: translateX(-100%); +} + +.label_nontoggle { + background: none; + border-radius: 0; + color: var(--text-main); + display: block; + font-weight: normal; + height: inherit; + position: relative; + text-indent: 0; + width: auto; +} + +.label_nontoggle:after { + background: none; + border-radius: 0; + content: none; + height: auto; + left: initial; + position: relative; + top: initial; + transition: none; + width: auto; +} + +/* Specific rules */ +.rule.checkbox { + clear: both; + margin: 5% auto; +} + +.rule.checkbox .remove { + float: left; } -.rule { +.rule.checkbox label { + font-size: 12px; + font-weight: normal; height: 25px; + text-indent: -285px; + width: 40px; +} +.rule.checkbox label:after { + border-radius: 20px; + height: 15px; + width: 15px; } -.rule label { - padding: 0; - max-width: 93%; - overflow: hidden; +#disable-on-this-site { + clear: both; +} + +#disableButton { + display: block; +} + +#HttpNowhere h1, +#disableButton h1 { + float: left; +} + +#RuleManagement { + padding: 5px 1em 10px 1em; } -/* Underline rules that have notes. */ -.rule[title] span { - border-bottom: 1px dotted; - cursor: help; +#settingsForThisSite h1 { + float: left; } -input[type='checkbox'] { - vertical-align: middle; +#addRuleSection label, +#addRuleSection button { + font-size: 14px; + width: 100%; } -.rule img.remove { +#addRuleSection input { + background: #fff; + border: 1px solid #000; float: right; + margin: 5px auto; + padding: 5px; + width: 95%; } -header { - border-bottom: 1px solid #eee; +#new-rule-advanced, +#new-rule-regular-text { + margin-top: 40px; } -header > h1 { - margin: 0; - padding: 21px 0 13px; +#HttpNowhere { + display: block; + padding: 5px 1em; } -section { - padding-left: 18px; - padding-top: 9px; - padding-bottom: 9px; +#StableRules h3 { + float: left; + margin-left: 10px; +} +#StableRules h2 { + margin-left: 10px; +} +#StableRules #RuleManagement--counter { + background: var(--darker-blue); + border-radius: 20px; + color: #fff; + display: block; + float: right; + font-size: 12px; + font-weight: bold; + height: 15px; + margin-top: 10px; + margin-right: 55%; + padding: 5px; + text-align: center; + width: 15px; } -section > h3 { - margin-left: -18px; +/* Event based */ +.see_more--clarified { + font-size: 12px; } -footer { - border-top: 1px solid #eee; - margin-top: 8px; - padding-top: 8px; - padding-bottom: 8px; +/* Hide rules & options if the extension is off. */ +.disabled #RuleManagement, +.disabled #HttpNowhere { + display: none; } /* By default the "Add a rule" link is hidden. It's shown on HTTPS sites only. */ @@ -118,11 +298,32 @@ footer { display: none; } -#rulesets-versions{ +#rulesets-versions { display: block; clear: both; } -.rulesets-version{ +.rulesets-version { display: block; } + +/* Initially hide section (until rules get added). */ +section.rules { + display: none; +} + +/* For "see more" content */ +.hide { + height: 0; + opacity: 0; + overflow: hidden; + transition: 0s; + visibility: hidden; +} + +.show { + clear: both; + opacity: 1; + transition: visibility 0s linear 0s, opacity 300ms; + visibility: visible; +} diff --git a/data/extensions/https-everywhere@eff.org/pages/popup/ux.js b/data/extensions/https-everywhere@eff.org/pages/popup/ux.js index f50a928..142c372 100644 --- a/data/extensions/https-everywhere@eff.org/pages/popup/ux.js +++ b/data/extensions/https-everywhere@eff.org/pages/popup/ux.js @@ -11,34 +11,67 @@ * Handles rule (de)activation in the popup */ function toggleRuleLine(event) { - if (event.target.matches("input[type=checkbox]")) { - getTab(activeTab => { - const set_ruleset = { - active: event.target.checked, - name: event.target.nextSibling.innerText, - tab_id: activeTab.id, - }; - - sendMessage("set_ruleset_active_status", set_ruleset, () => { - // purge the name from the cache so that this unchecking is persistent. - sendMessage("delete_from_ruleset_cache", set_ruleset.name, () => { - // Now reload the selected tab of the current window. - chrome.tabs.reload(set_ruleset.tab_id); - }); + getTab(activeTab => { + const set_ruleset = { + active: event.target.parentNode.firstChild.checked, + name: event.target.innerText, + tab_id: activeTab.id, + }; + + sendMessage("set_ruleset_active_status", set_ruleset, () => { + // purge the name from the cache so that this unchecking is persistent. + sendMessage("delete_from_ruleset_cache", set_ruleset.name, () => { + // Now reload the selected tab of the current window. + chrome.tabs.reload(set_ruleset.tab_id); }); }); - } + }); } +/** + * @param {object} event + * @description Toggles content for user to view rules and explanations for different modes + */ +function toggleSeeMore(event) { + let target = event.target; + let content; + + if (target !== this) { + content = document.querySelector('.see_more__content'); + } else { + content = target.parentNode.querySelector('.see_more__content'); + } + + let arrow = target.parentNode.querySelector('.see_more__arrow'); + let text = target.parentNode.querySelector('.see_more__text'); + + if(arrow.classList.contains('down')) { + arrow.classList.replace('down', 'up'); + text.innerText = 'See less'; + } else if (arrow.classList.contains('up')) { + arrow.classList.replace('up', 'down'); + text.innerText = 'See more'; + } + + if (content.classList.contains('hide')) { + content.classList.replace('hide', 'show'); + } else if (content.classList.contains('show')) { + content.classList.replace('show', 'hide'); + } +} /** * Creates rule lines (including checkbox and icon) for the popup * @param rulesets * @param list_div + * @param {string} ruleType * @returns {*} */ -function appendRulesToListDiv(rulesets, list_div) { +function appendRulesToListDiv(rulesets, list_div, ruleType) { if (rulesets && rulesets.length) { + let counter = rulesets.length; + let counterElement = document.querySelector("#RuleManagement--counter"); + counterElement.innerText = counter; // template parent block for each ruleset let templateLine = document.createElement("div"); templateLine.className = "rule checkbox"; @@ -55,18 +88,26 @@ function appendRulesToListDiv(rulesets, list_div) { // img "remove" button let templateRemove = document.createElement("img"); - templateRemove.src = chrome.extension.getURL("images/remove.png"); + templateRemove.src = chrome.runtime.getURL("images/remove.png"); templateRemove.className = "remove"; - templateLabel.appendChild(templateCheckbox); + templateLine.appendChild(templateCheckbox); templateLabel.appendChild(templateLabelText); templateLine.appendChild(templateLabel); + let increment = 0; + for (const ruleset of rulesets) { + increment++; let line = templateLine.cloneNode(true); let checkbox = line.querySelector("input[type=checkbox]"); + let label = line.querySelector("label"); let text = line.querySelector("span"); + // For each "id" attribute in each checkbox input and "for" attribute in label + checkbox.setAttribute("id", `${ruleType}_ruleset_${increment}`); + label.setAttribute("for", `${ruleType}_ruleset_${increment}`); + checkbox.checked = ruleset.active; text.innerText = ruleset.name; @@ -95,6 +136,8 @@ function showHttpNowhereUI() { getOption_('httpNowhere', false, function(item) { if (item.httpNowhere) { e('http-nowhere-checkbox').checked = true; + e('HttpNowhere__header').innerText = 'Encrypt All Sites Eligible is ON'; + e('HttpNowhere__explained').innerText = 'Unencrypted requests are currently blocked'; } e('HttpNowhere').style.visibility = "visible"; }); @@ -108,30 +151,32 @@ function updateEnabledDisabledUI() { // Hide or show the rules sections if (item.globalEnabled) { document.body.className = "" - showHttpNowhereUI() + showHttpNowhereUI(); } else { - document.body.className = "disabled" + document.body.className = "disabled"; + e('onoffswitch_label').innerText = 'HTTPS Everywhere is OFF'; } }); } // Toggle extension enabled/disabled status function toggleEnabledDisabled() { - var extension_toggle_effect = function() { + let extension_toggle_effect = function() { updateEnabledDisabledUI(); - // The extension state changed, so reload this tab. - chrome.tabs.reload(); - window.close(); + // The extension state changed, give some time for toggle animation and reload tab + setTimeout(function() { + chrome.tabs.reload(); + window.close(); + }, 1500); } getOption_('globalEnabled', true, function(item) { setOption_('globalEnabled', !item.globalEnabled, extension_toggle_effect); }); - } /** - * Create the list of rules for a specific tab + * @description Create the list of rules for a specific tab * @param activeTab */ function listRules(activeTab) { @@ -140,11 +185,11 @@ function listRules(activeTab) { const stableRules = rulesets.filter(ruleset => ruleset.default_state); const unstableRules = rulesets.filter(ruleset => !ruleset.default_state); - appendRulesToListDiv(stableRules, e("StableRules")); - appendRulesToListDiv(unstableRules, e("UnstableRules")); + appendRulesToListDiv(stableRules, e("StableRules"), 'stable'); + appendRulesToListDiv(unstableRules, e("UnstableRules"), 'unstable'); // Add listener to capture the toggle event - e("RuleManagement").addEventListener("click", toggleRuleLine); + e("add-new-rule-button").addEventListener("click", toggleRuleLine); } // Only show the "Add a rule" section if we're on an HTTPS page @@ -161,7 +206,7 @@ document.addEventListener("DOMContentLoaded", function () { getTab(tab => { const url = new URL(tab.url); sendMessage("check_if_site_disabled", url.host, disabled => { - if(!disabled){ + if(!disabled) { listRules(tab); } showEnableOrDisable(url, disabled); @@ -172,12 +217,22 @@ document.addEventListener("DOMContentLoaded", function () { updateEnabledDisabledUI(); e('onoffswitch').addEventListener('click', toggleEnabledDisabled); e('http-nowhere-checkbox').addEventListener('click', toggleHttpNowhere, false); + e('RuleManagement__see_more--prompt').addEventListener('click', toggleSeeMore); + e('reset-to-defaults').addEventListener('click', () => { - if (confirm(chrome.i18n.getMessage("prefs_reset_defaults_message"))) { - sendMessage("reset_to_defaults", null, () => { - window.close(); - }); - } + sendMessage("is_firefox", null, is_firefox => { + if (is_firefox) { + sendMessage("reset_to_defaults", null, () => { + window.close(); + }); + } else { + if (confirm(chrome.i18n.getMessage("prefs_reset_defaults_message"))) { + sendMessage("reset_to_defaults", null, () => { + window.close(); + }); + } + } + }); }); // Print the extension's current version. @@ -186,16 +241,27 @@ document.addEventListener("DOMContentLoaded", function () { version_info.innerText = the_manifest.version; let rulesets_versions = e('rulesets-versions'); + + rulesets_versions.addSpan = function(update_channel_name, ruleset_version_string) { + let timestamp_span = document.createElement("span"); + timestamp_span.className = "rulesets-version"; + timestamp_span.innerText = `${chrome.i18n.getMessage("about_rulesets_version")} ${update_channel_name}: ${ruleset_version_string}`; + this.appendChild(timestamp_span); + } + sendMessage("get_ruleset_timestamps", null, timestamps => { - for(let [update_channel, timestamp] of timestamps){ - if(timestamp > 0){ + let replaces = timestamps.some(([update_channel, timestamp]) => + update_channel.replaces_default_rulesets && timestamp > 0 + ); + if(!replaces) { + rulesets_versions.addSpan("EFF (Full, Bundled)", the_manifest.version); + } + for(let [update_channel, timestamp] of timestamps) { + if(timestamp > 0) { let ruleset_date = new Date(timestamp * 1000); let ruleset_version_string = ruleset_date.getUTCFullYear() + "." + (ruleset_date.getUTCMonth() + 1) + "." + ruleset_date.getUTCDate(); - let timestamp_span = document.createElement("span"); - timestamp_span.className = "rulesets-version"; - timestamp_span.innerText = chrome.i18n.getMessage("about_rulesets_version") + " " + update_channel + ": " + ruleset_version_string; - rulesets_versions.appendChild(timestamp_span); + rulesets_versions.addSpan(update_channel.name, ruleset_version_string); } } }); @@ -205,7 +271,6 @@ document.addEventListener("DOMContentLoaded", function () { e("enable-on-this-site").addEventListener("click", enableOnSite); }); - var escapeForRegex = function( value ) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"); }; @@ -303,9 +368,24 @@ function enableOnSite() { }); } +/** + * @description Turns EASE Mode on and off + */ function toggleHttpNowhere() { - getOption_('httpNowhere', false, function(item) { - setOption_('httpNowhere', !item.httpNowhere); + getTab(tab => { + getOption_('httpNowhere', false, item => { + const enabled = !item.httpNowhere; + setOption_('httpNowhere', enabled, () => { + if (enabled) { + chrome.tabs.reload(tab.id); + e('HttpNowhere__header').innerText = 'Encrypt All Sites Eligible is ON'; + e('HttpNowhere__explained').innerText = 'Unencrypted requests are currently blocked'; + } else { + e('HttpNowhere__header').innerText = 'Encrypt All Sites Eligible is OFF'; + e('HttpNowhere__explained').innerText = 'Unencrypted requests are currently allowed'; + } + }); + }); }); } @@ -317,3 +397,15 @@ function getTab(callback) { } chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => callback(tabs[0])); } + +// This code fixes a Chromium-specific bug that causes links in extension popup +// to open in regular tab even if the popup is opened in incognito mode. + +document.addEventListener('click', e => { + const { target } = e + + if (target.matches('a[target="_blank"]')) { + chrome.tabs.create({ url: target.href }) + e.preventDefault() + } +}) diff --git a/data/extensions/https-everywhere@eff.org/pages/translation.js b/data/extensions/https-everywhere@eff.org/pages/translation.js index 5cdbd99..c6c3163 100644 --- a/data/extensions/https-everywhere@eff.org/pages/translation.js +++ b/data/extensions/https-everywhere@eff.org/pages/translation.js @@ -3,6 +3,6 @@ document.addEventListener("DOMContentLoaded", () => { // Auto-translate all elements with data-i18n attributes for (const element of document.querySelectorAll("[data-i18n]")) { - element.innerText = chrome.i18n.getMessage(element.getAttribute("data-i18n")); + element.innerText = chrome.i18n.getMessage(element.getAttribute("data-i18n")).replace(/"/g,"\""); } }); |