-
+
-
-
-
+
-
- URL:
-
+
-
+
+
+
+
+
+
+
diff --git a/chromium/pages/cancel/style.css b/chromium/pages/cancel/style.css
index 9b91ca3218ed..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,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/chromium/pages/cancel/ux.js b/chromium/pages/cancel/ux.js
index 63ec8e4245da..d13dfdfb711a 100644
--- a/chromium/pages/cancel/ux.js
+++ b/chromium/pages/cancel/ux.js
@@ -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/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 6d82a18664e8..b6bdc337cfb3 100644
--- a/chromium/pages/options/index.html
+++ b/chromium/pages/options/index.html
@@ -2,15 +2,16 @@
-
+
-
-
-
-
-
+
+
diff --git a/chromium/pages/options/style.css b/chromium/pages/options/style.css
index f7ffddd9cde3..032a7bad7a44 100644
--- a/chromium/pages/options/style.css
+++ b/chromium/pages/options/style.css
@@ -1,35 +1,30 @@
+@import "../main.css";
+
body{
- min-width: 500px;
- min-height: 250px;
- display: block;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
}
-@media (prefers-color-scheme: dark) {
- body {
- background-color: #202023;
- color: #f9f9fa;
- }
-
- .section-header-span, div#update-channels-warning {
- color: #000;
- }
-
- textarea, input[type=text] {
- background-color: #202023;
- color: #f9f9fa;
- }
+/*---------
+# GRID LAYOUT
+---------*/
+.header-wrapper, .section-wrapper {
+ margin: auto;
}
-
-a.settings{
- background-color: #1c87c9;
- border: none;
- color: white;
- padding: 20px 34px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 20px;
- margin: 4px 2px;
+.header-wrapper {
+ display: inline-flex;
+ grid-column: 2;
+ grid-row: 1;
+}
+.section-wrapper {
+ grid-column: 2;
+ grid-row: 2;
+}
+#add-disabled-site-wrapper {
+ float: left;
+}
+#add-update-channel-wrapper {
+ display: inline-block;
}
.settings-wrapper{
@@ -63,6 +58,11 @@ a.settings{
}
/** Disabled Sites Option**/
+#add-disabled-site-invalid-host {
+ font-weight: bold;
+ color: red;
+ display: none;
+}
.disabled-rules-wrapper-header {
font-weight: bold;
padding-left: 5px;
@@ -71,7 +71,7 @@ img.remove{
cursor: pointer;
float: right;
height: 15px;
- margin: 10px 0 0 8%;
+ margin-top: -34px;
width: 15px;
}
.disabled-rule-list-item:last-of-type {
@@ -79,12 +79,11 @@ img.remove{
}
.disabled-rule-list-item {
border-bottom: 1px solid #ccc;
- display: inline-flex;
- margin-left: 5%;
- width: 80%;
+ clear: both;
}
.disabled-rule-list-item p {
- width: 100%;
+ width: 80%;
+ word-wrap: anywhere;
}
.section-header{
@@ -101,28 +100,30 @@ img.remove{
}
.section-header-span{
- font-size: 15px;
- border: 0px;
- border-radius: 13px;
+ cursor: pointer;
padding: 8px;
- margin-right: 10px;
+ margin-left: 0 !important;
+ margin-right: var(--space) !important;
display: inline-block;
}
.section-header-span.active{
- background-color: #66ccff;
+ background-color: var(--darker-blue);
+ color: #FFF;
}
-
.section-header-span.inactive{
- background-color: #ddd;
+ background-color: var(--light-grey);
+}
+.section-header-span.inactive:hover {
+ background-color: var(--darker-blue);
}
.update-channel{
- margin-top: 30px;
- margin-bottom: 30px;
border: 1px solid grey;
border-radius: 20px;
- width: 498px;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding: 6px;
}
.update-channel-name{
@@ -167,8 +168,9 @@ div.update-channel-row-scope {
button#add-update-channel, button#add-disabled-site {
float: right;
+ height: 30px;
margin: 0px 10px 10px 10px;
- border-radius: 7px;
+ padding: 6px;
}
input#update-channel-name, input#disabled-site {
@@ -219,8 +221,8 @@ div#update-channels-last-checked {
font-size: 10px;
}
-#update-channels-wrapper{
- width: 500px;
+#update-channels-list {
+ display: inline-block;
}
@keyframes flash {
@@ -244,3 +246,19 @@ div#update-channels-last-checked {
.flash {
animation: flash 1s ease-out;
}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202023;
+ color: #f9f9fa;
+ }
+
+ .section-header-span, div#update-channels-warning {
+ color: #000;
+ }
+
+ textarea, input[type=text] {
+ background-color: #202023;
+ color: #f9f9fa;
+ }
+}
diff --git a/chromium/pages/options/ux.js b/chromium/pages/options/ux.js
index 12c2352cb0ac..07d94dc9928d 100644
--- a/chromium/pages/options/ux.js
+++ b/chromium/pages/options/ux.js
@@ -1,24 +1,10 @@
/* global sendMessage */
/* global getOption_ */
/* global e */
-/* global hide */
+/* global show, hide */
"use strict";
-if (navigator.userAgent.includes("Android")) {
- const url = new URL(window.location.href);
- if (!url.searchParams.get('redirected')) {
- url.searchParams.set('redirected', true);
- document.body.innerText = "";
- let link = document.createElement("a");
- link.href = url.href;
- link.target = "_blank";
- link.className = "settings";
- link.innerText = chrome.i18n.getMessage("options_settings");
- document.body.appendChild(link);
- }
-}
-
document.addEventListener("DOMContentLoaded", () => {
const secretArea = document.getElementById('secretArea');
@@ -113,6 +99,33 @@ document.addEventListener("DOMContentLoaded", () => {
update_channel_last_updated.innerText = chrome.i18n.getMessage("options_storedRulesetsVersion") + ruleset_version_string;
update_channel_name.appendChild(update_channel_last_updated);
+ const update_channel_row_format = document.createElement('div');
+ update_channel_row_format.className = "update-channel-row-format";
+ update_channel_div.appendChild(update_channel_row_format);
+ const update_channel_format_column_left = document.createElement('div');
+ update_channel_format_column_left.className = "update-channel-column-left";
+ update_channel_format_column_left.innerText = "Format:";
+ update_channel_row_format.appendChild(update_channel_format_column_left);
+ const update_channel_format_column_right = document.createElement('div');
+ update_channel_format_column_right.className = "update-channel-column-right";
+ update_channel_row_format.appendChild(update_channel_format_column_right);
+ const update_channel_format = document.createElement('select');
+ update_channel_format.className = "update-channel-format";
+ update_channel_format.setAttribute("data-name", update_channel.name);
+ update_channel_format.disabled = locked;
+ update_channel_format_column_right.appendChild(update_channel_format);
+ const update_channel_format_option_ruleset = document.createElement('option');
+ update_channel_format_option_ruleset.value = "ruleset";
+ update_channel_format_option_ruleset.innerText = "ruleset";
+ update_channel_format_option_ruleset.defaultSelected = true;
+ update_channel_format_option_ruleset.selected = (update_channel.format == "ruleset");
+ update_channel_format.appendChild(update_channel_format_option_ruleset);
+ const update_channel_format_option_bloom = document.createElement('option');
+ update_channel_format_option_bloom.value = "bloom";
+ update_channel_format_option_bloom.innerText = "bloom";
+ update_channel_format_option_bloom.selected = (update_channel.format == "bloom");
+ update_channel_format.appendChild(update_channel_format_option_bloom);
+
const update_channel_row_jwk = document.createElement('div');
update_channel_row_jwk.className = "update-channel-row-jwk";
update_channel_div.appendChild(update_channel_row_jwk);
@@ -153,6 +166,9 @@ document.addEventListener("DOMContentLoaded", () => {
update_channel_div.appendChild(clearer);
const update_channel_row_scope = document.createElement('div');
+ if(update_channel.format == "bloom") {
+ update_channel_row_scope.style.display = "none";
+ }
update_channel_row_scope.className = "update-channel-row-scope";
update_channel_div.appendChild(update_channel_row_scope);
const update_channel_scope_column_left = document.createElement('div');
@@ -197,6 +213,13 @@ document.addEventListener("DOMContentLoaded", () => {
clearer.className = "clearer";
update_channel_div.appendChild(clearer);
+ update_channel_format.addEventListener("change", () => {
+ if(update_channel_format.value == "bloom") {
+ update_channel_row_scope.style.display = "none";
+ } else {
+ update_channel_row_scope.style.display = "block";
+ }
+ });
update_channel_delete.addEventListener("click", () => {
sendMessage("delete_update_channel", update_channel.name, () => {
render_update_channels();
@@ -206,6 +229,7 @@ document.addEventListener("DOMContentLoaded", () => {
update_channel_update.addEventListener("click", () => {
sendMessage("update_update_channel", {
name: update_channel.name,
+ format: update_channel_format.value,
jwk: JSON.parse(update_channel_jwk.value),
update_path_prefix: update_channel_path_prefix.value,
scope: update_channel_scope.value
@@ -329,14 +353,29 @@ document.addEventListener("DOMContentLoaded", () => {
const add_disabled_site = document.getElementById("add-disabled-site");
const disabled_site_input = document.getElementById("disabled-site");
+ const add_disabled_site_invalid_host = document.getElementById('add-disabled-site-invalid-host');
disabled_site_input.setAttribute("placeholder", chrome.i18n.getMessage("options_enterDisabledSite"));
-
+ function isValidHost(host) {
+ try {
+ new URL(`http://${host}/`);
+ return true;
+ } catch {
+ return false;
+ }
+ }
add_disabled_site.addEventListener("click", function() {
- sendMessage("disable_on_site", disabled_site_input.value, okay => {
- if (okay) {
- chrome.tabs.reload();
- }
- });
+ const host = disabled_site_input.value;
+
+ if (isValidHost(host)) {
+ hide(add_disabled_site_invalid_host);
+ sendMessage("disable_on_site", disabled_site_input.value, okay => {
+ if (okay) {
+ chrome.tabs.reload();
+ }
+ });
+ } else {
+ show(add_disabled_site_invalid_host);
+ }
});
add_update_channel.addEventListener("click", () => {
diff --git a/chromium/pages/popup/index.html b/chromium/pages/popup/index.html
index 911628031258..d9441f2d3e9d 100644
--- a/chromium/pages/popup/index.html
+++ b/chromium/pages/popup/index.html
@@ -88,12 +88,11 @@
-
-