-
- 
-
-
-
+
+
+
-
- URL:
-
+
-
+
+
+
+
+
+
+
diff --git a/chromium/pages/cancel/style.css b/chromium/pages/cancel/style.css
index b3324e1aa28b..aeba151a0749 100644
--- a/chromium/pages/cancel/style.css
+++ b/chromium/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,38 +40,91 @@ 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;
}
}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202023;
+ color: #f9f9fa;
+ }
+
+ a {
+ color: #45a1ff;
+ }
+
+ .ease_button {
+ color: #202023;
+ }
+
+ .ease_button:hover {
+ background-color: #202023;
+ border-color: #ec1e1e;
+ }
+}
diff --git a/chromium/pages/cancel/ux.js b/chromium/pages/cancel/ux.js
index 7e6199ac861e..d13dfdfb711a 100644
--- a/chromium/pages/cancel/ux.js
+++ b/chromium/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,27 +45,79 @@ 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") + '?')) {
- sendMessage("disable_on_site", url.host, () => {
- window.location = originURL;
- });
- }
+ sendMessage("disable_on_site", url.host, () => {
+ window.location = originURL;
+ });
return false;
});
- openHttpOnce.addEventListener("click", function() {
- if (confirm(chrome.i18n.getMessage("chrome_disable_on_this_site") + '?')) {
- sendMessage("disable_on_site_once", url.host, () => {
- window.location = originURL;
- });
+ // 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() {
+ sendMessage("disable_on_site_once", url.host, () => {
+ window.location = originURL;
+ });
return false;
});
diff --git a/chromium/pages/debugging-rulesets/ux.js b/chromium/pages/debugging-rulesets/ux.js
index 49b9c7e69df7..0df93d8dd080 100644
--- a/chromium/pages/debugging-rulesets/ux.js
+++ b/chromium/pages/debugging-rulesets/ux.js
@@ -35,7 +35,7 @@ document.getElementById("save-button").addEventListener("click", e => {
sendMessage("set_option", { debugging_rulesets: cm.getValue() }, () => {
savedTextElement.style.display = "block";
setTimeout(() => {
- savedTextElement.style.display = "none"
+ savedTextElement.style.display = "none";
}, 1000);
valueHasChanged = false;
diff --git a/chromium/pages/main.css b/chromium/pages/main.css
new file mode 100644
index 000000000000..2772c46141e7
--- /dev/null
+++ b/chromium/pages/main.css
@@ -0,0 +1,21 @@
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Base
+ - Layout
+ - Typography
+ - Elements
+ - Links
+# Utilities
+ - Accessibility
+
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Base
+--------------------------------------------------------------*/
+@import "base.css";
+
+/* Utilities - TBA
+--------------------------------------------- */
+
diff --git a/chromium/pages/options/index.html b/chromium/pages/options/index.html
index 917f309ad653..b6bdc337cfb3 100644
--- a/chromium/pages/options/index.html
+++ b/chromium/pages/options/index.html
@@ -2,15 +2,16 @@
-
+
-
-
-
-
-
+
+
@@ -45,7 +51,7 @@
-
+