diff options
Diffstat (limited to 'data/extensions/https-everywhere@eff.org/pages/cancel')
3 files changed, 145 insertions, 36 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 3522301..ec25184 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/index.html +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/index.html @@ -1,32 +1,32 @@ <!doctype html> <html> <head> + <!-- Required meta tags --> <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <title>⚠ HTTPS Everywhere ⚠</title> - <link rel="stylesheet" href="style.css"> + <link href="style.css" rel="stylesheet"> <link rel="icon" href="/images/icons/icon-blocking-38.png"> </head> <body> - <div class="content"> - <h1 id="https-everywhere"> + <div class="banner"> <img src="/images/banner-red.svg" alt="HTTPS Everywhere"> - </h1> - - <p data-i18n="cancel_he_blocking_explainer"></p> + </div> - <p id="url-paragraph"> - <span id="url-label">URL: </span><span id="url-value"></span> - </p> + <div class="explainer" data-i18n="cancel_he_blocking_explainer"></div> - <div class="actions"> - <button id="open-url-button" data-i18n="cancel_open_page"></button> - <button id="http-once-button" data-i18n="cancel_http_once"></button> + <div class="copy_block"> + <pre id="url-value"></pre> + <button id="copy-url" class="ease_button" data-i18n="cancel_copy_url"></button> </div> - <script src="../translation.js"></script> - <script src="../util.js"></script> - <script src="ux.js"></script> - </div> + <div class="button_options"> + <button id="http-once-button" class="ease_button" data-i18n="cancel_http_once"></button> + <button id="open-url-button" class="ease_button" data-i18n="cancel_open_page"></button> + </div> + <script src="/pages/translation.js"></script> + <script src="/pages/util.js"></script> + <script src="ux.js"></script> </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 9b91ca3..aeba151 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/style.css +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/style.css @@ -1,13 +1,33 @@ +@import "../main.css"; + body { - margin-top: 6em; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + margin: 2% auto; font-size: 12pt; font-family: sans-serif; line-height: 150%; + row-gap: 16px; } -.content { - margin: auto; - max-width: 600px; +/*--------- +# GRID LAYOUT +---------*/ +.banner { + grid-column: 2; + grid-row: 1; +} +.explainer { + grid-column: 2; + grid-row: 2; +} +.copy_block { + grid-column: 2; + grid-row: 3; +} +.button_options { + grid-column: 2; + grid-row: 4; } h1 { @@ -20,37 +40,70 @@ h1 img { } #url-paragraph { - display: block; + display: inline-flex; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -button { +.ease_button { background-color: #ec1e1e; border: 1px solid #ec1e1e; border-radius: 4px; color: #fff; cursor: pointer; padding: 0.5em 1em; - display: block; float: none; font-size: 12pt; + font-weight: normal; margin: 8px 0; line-height: 150%; } -button:hover { - background-color: #fff; - color: #ec1e1e; -} - button:last-child { margin: 0; } -@media screen and (max-width: 550px) { - button { +#url-value{ + float: left; + font-weight: bold; + margin: 2% 2% 0 0; +} +#copy-url, #open-url-button{ + background-color: var(--light-grey) !important; + border: 1px solid var(--text-secondary) !important; +} +#copy-url { + color: var(--text-secondary) !important; + font-size: 14px; +} +#open-url-button { + color: #666666 !important; +} +#copy-url:hover, #open-url-button:hover { + background-color: var(--text-secondary) !important; + border: 1px solid var(--text-secondary) !important; + color: var(--light-grey) !important; +} + +@media screen and (max-width: 800px) { + body { + grid-template-columns: 1fr; + margin: 5%; + } + .banner { + grid-row: 1; + } + .explainer { + grid-row: 2; + } + .copy_block { + grid-row: 3; + } + .button_options { + grid-row: 4; + } + .ease_button { width: 100%; margin: 8px 0; } @@ -66,11 +119,11 @@ button:last-child { color: #45a1ff; } - button { + .ease_button { color: #202023; } - button:hover { + .ease_button:hover { background-color: #202023; border-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 7e6199a..259d602 100644 --- a/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js +++ b/data/extensions/https-everywhere@eff.org/pages/cancel/ux.js @@ -6,7 +6,7 @@ let observer; document.addEventListener("DOMContentLoaded", () => { const explainer = document.querySelector("[data-i18n=cancel_he_blocking_explainer]"); observer = new MutationObserver(() => { - replaceLink(explainer) + replaceLink(explainer); }); if (explainer.innerText.length > 0) { replaceLink(explainer); @@ -45,13 +45,14 @@ function displayURL() { const originURLLink = document.getElementById('url-value'); const openURLButton = document.getElementById('open-url-button'); const openHttpOnce = document.getElementById('http-once-button'); + const copyButton = document.getElementById('copy-url'); const url = new URL(originURL); originURLLink.innerText = originURL; originURLLink.href = originURL; openURLButton.addEventListener("click", function() { - if (confirm(chrome.i18n.getMessage("chrome_disable_on_this_site") + '?')) { + if (confirm(chrome.i18n.getMessage("cancel_open_page") + '?')) { sendMessage("disable_on_site", url.host, () => { window.location = originURL; }); @@ -60,8 +61,63 @@ function displayURL() { return false; }); + // Copy URL Feature on EASE + + function copyLinkAlternate() { + let isSuccessful = false; + + const sel = window.getSelection(); + + try { + sel.removeAllRanges(); + + const range = document.createRange(); + range.selectNode(originURLLink); + + sel.addRange(range); + + isSuccessful = document.execCommand("copy"); + + sel.removeAllRanges(); + + return isSuccessful; + } catch (err) { + console.error(err); + + sel.removeAllRanges(); + + return false; + } + } + + async function copyLink() { + try { + await navigator.clipboard.writeText(originURL); + return true; + } catch (err) { + return copyLinkAlternate(); + } + } + + let restoreTimeout = null; + + copyButton.addEventListener("click", async () => { + if (await copyLink()) { + copyButton.innerText = chrome.i18n.getMessage("cancel_copied_url"); + + if (restoreTimeout !== null) { + clearTimeout(restoreTimeout); + } + + restoreTimeout = setTimeout(() => { + copyButton.innerText = chrome.i18n.getMessage("cancel_copy_url"); + restoreTimeout = null; + }, 1500); + } + }); + openHttpOnce.addEventListener("click", function() { - if (confirm(chrome.i18n.getMessage("chrome_disable_on_this_site") + '?')) { + if (confirm(chrome.i18n.getMessage("cancel_http_once") + '?')) { sendMessage("disable_on_site_once", url.host, () => { window.location = originURL; }); |