"; - } - return output; -} - -function switchPlannerRenderSections(tab_id, f) { - return "Unrewritten HTTP resources loaded from this tab (enable HTTPS on " + - "these domains and add them to HTTPS Everywhere):
" + - f(tab_id, "nrw") + - "
Resources rewritten successfully from this tab (update these " + - "in your source code):
" + - f(tab_id, "rw"); -} - -function switchPlannerSmallHtml(tab_id) { - return switchPlannerRenderSections(tab_id, switchPlannerSmallHtmlSection); -} - -function linksFromKeys(map) { - if (typeof map == 'undefined') return ""; - var output = ""; - for (var key in map) { - if (map.hasOwnProperty(key)) { - output += "" + key + "
"; - } - } - return output; -} - -function switchPlannerDetailsHtml(tab_id) { - return switchPlannerRenderSections(tab_id, switchPlannerDetailsHtmlSection); -} - -function switchPlannerDetailsHtmlSection(tab_id, rewritten) { - var asset_host_list = sortSwitchPlanner(tab_id, rewritten); - var output = ""; - - for (var i = asset_host_list.length - 1; i >= 0; i--) { - var host = asset_host_list[i][3]; - var activeCount = asset_host_list[i][1]; - var passiveCount = asset_host_list[i][2]; - - output += "" + host + ": "; - if (activeCount > 0) { - output += activeCount + " active
"; - output += linksFromKeys(switchPlannerInfo[tab_id][rewritten][host][1]); - } - if (passiveCount > 0) { - output += "
" + passiveCount + " passive
"; - output += linksFromKeys(switchPlannerInfo[tab_id][rewritten][host][0]); - } - output += "
"; - } - return output; -} - -function onCookieChanged(changeInfo) { - if (!changeInfo.removed && !changeInfo.cookie.secure) { - if (all_rules.shouldSecureCookie(changeInfo.cookie, false)) { - var cookie = {name:changeInfo.cookie.name, - value:changeInfo.cookie.value, - path:changeInfo.cookie.path, - httpOnly:changeInfo.cookie.httpOnly, - expirationDate:changeInfo.cookie.expirationDate, - storeId:changeInfo.cookie.storeId, - secure: true}; - - // Host-only cookies don't set the domain field. - if (!changeInfo.cookie.hostOnly) { - cookie.domain = changeInfo.cookie.domain; - } - - // The cookie API is magical -- we must recreate the URL from the domain and path. - if (changeInfo.cookie.domain[0] == ".") { - cookie.url = "https://www" + changeInfo.cookie.domain + cookie.path; - } else { - cookie.url = "https://" + changeInfo.cookie.domain + cookie.path; - } - // We get repeated events for some cookies because sites change their - // value repeatedly and remove the "secure" flag. - log(DBUG, - "Securing cookie " + cookie.name + " for " + changeInfo.cookie.domain + ", was secure=" + changeInfo.cookie.secure); - chrome.cookies.set(cookie); - } - } -} - -function onBeforeRedirect(details) { - // Catch redirect loops (ignoring about:blank, etc. caused by other extensions) - var prefix = details.redirectUrl.substring(0, 5); - if (prefix === "http:" || prefix === "https") { - if (details.requestId in redirectCounter) { - redirectCounter[details.requestId] += 1; - log(DBUG, "Got redirect id "+details.requestId+ - ": "+redirectCounter[details.requestId]); - } else { - redirectCounter[details.requestId] = 1; - } - } -} - -wr.onBeforeRequest.addListener(onBeforeRequest, {urls: ["https://*/*", "http://*/*"]}, ["blocking"]); - -// Try to catch redirect loops on URLs we've redirected to HTTPS. -wr.onBeforeRedirect.addListener(onBeforeRedirect, {urls: ["https://*/*"]}); - - -// Add the small HTTPS Everywhere icon in the address bar. -// Note: We can't use any other hook (onCreated, onActivated, etc.) because Chrome resets the -// pageActions on URL change. We should strongly consider switching from pageAction to browserAction. -chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { - if (changeInfo.status === "loading") { - chrome.pageAction.show(tabId); - } -}); - -// Pre-rendered tabs / instant experiments sometimes skip onUpdated. -// See http://crbug.com/109557 -chrome.tabs.onReplaced.addListener(function(addedTabId, removedTabId) { - chrome.tabs.get(addedTabId, function(tab) { - if(typeof(tab) === "undefined") { - log(DBUG, "Not a real tab. Skipping showing pageAction."); - } else { - chrome.pageAction.show(addedTabId); - } - }); -}); - -// Listen for cookies set/updated and secure them if applicable. This function is async/nonblocking. -chrome.cookies.onChanged.addListener(onCookieChanged); - -function disableSwitchPlannerFor(tabId) { - delete switchPlannerEnabledFor[tabId]; - // Clear stored URL info. - delete switchPlannerInfo[tabId]; -} - -function enableSwitchPlannerFor(tabId) { - switchPlannerEnabledFor[tabId] = true; -} - -// Listen for connection from the DevTools panel so we can set up communication. -chrome.runtime.onConnect.addListener(function (port) { - if (port.name == "devtools-page") { - chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ - var tabId = message.tabId; - - var disableOnCloseCallback = function(port) { - log(DBUG, "Devtools window for tab " + tabId + " closed, clearing data."); - disableSwitchPlannerFor(tabId); - }; - - if (message.type === "enable") { - enableSwitchPlannerFor(tabId); - port.onDisconnect.addListener(disableOnCloseCallback); - } else if (message.type === "disable") { - disableSwitchPlannerFor(tabId); - } else if (message.type === "getSmallHtml") { - sendResponse({html: switchPlannerSmallHtml(tabId)}); - } - }); - } -}); diff --git a/chromium/chrome-resources/css/chrome_shared.css b/chromium/chrome-resources/css/chrome_shared.css deleted file mode 100644 index 3f1ebbd05bc8..000000000000 --- a/chromium/chrome-resources/css/chrome_shared.css +++ /dev/null @@ -1,106 +0,0 @@ -/* Copyright (c) 2012 The Chromium Authors. All rights reserved. - * Use of this source code is governed by a BSD-style license that can be - * found in the LICENSE file. */ - -/* This file holds CSS that should be shared, in theory, by all user-visible - * chrome:// pages. */ - -@import url("widgets.css"); -
- *
- *
- */
-
-:-webkit-any(.checkbox, .radio) label {
- /* Don't expand horizontally:
-
-
-
-
diff --git a/chromium/devtools-panel.js b/chromium/devtools-panel.js
deleted file mode 100644
index 881d40133ac9..000000000000
--- a/chromium/devtools-panel.js
+++ /dev/null
@@ -1,67 +0,0 @@
-function e(id) {
- return document.getElementById(id);
-}
-
-function sendMessage(type) {
- chrome.runtime.sendMessage({
- type: type,
- tabId: chrome.devtools.inspectedWindow.tabId,
- });
-}
-
-// Turn on the Switch Planner recording mode, and hide the long description.
-function enableSwitchPlanner() {
- sendMessage("enable");
- e("SwitchPlannerDescription").style.display = "none";
- e("SwitchPlannerDetails").style.display = "block";
- // Hack: Fetch and display summary information from background page
- // once per second.
- setInterval(display, 1000);
- chrome.devtools.inspectedWindow.reload();
-}
-
-// Disable the switch planner and reload, so any state is forgotten and
-// the long description is restored.
-function disableSwitchPlanner() {
- sendMessage("disable");
- document.location.reload();
-}
-
-// Fetch summary HTML of the planner results from the background page for
-// display in the devtools panel.
-function display() {
- chrome.runtime.sendMessage({
- type: "getSmallHtml",
- tabId: chrome.devtools.inspectedWindow.tabId,
- }, function(response) {
- e("SwitchPlannerDetails").innerHTML = response.html;
- e("SwitchPlannerResults").style.display = "block";
- });
-}
-
-window.onload = function() {
- // Open a connection to the background page. Right now this is only used
- // by the background page so it knows when the devtools pane has closed.
- // We don't receive messages from the background page currently, though that
- // may be a future improvement. Sending messages to the background page doesn't
- // require an existing connection.
- chrome.runtime.connect({ name: "devtools-page" });
-
- var checkbox = e("SwitchPlannerCheckbox");
- checkbox.addEventListener("change", function() {
- if (checkbox.checked) {
- enableSwitchPlanner();
- } else {
- disableSwitchPlanner();
- }
- });
-
- e("SwitchPlannerDetailsLink").addEventListener("click", function() {
- window.open("switch-planner.html?tab=" + chrome.devtools.inspectedWindow.tabId);
- });
- // Since this is rendered in a devtools console, we have to make clicks on the
- // link open a new window.
- e("MixedContentLink").addEventListener("click", function(e) {
- window.open(e.target.href);
- });
-};
diff --git a/chromium/devtools.html b/chromium/devtools.html
deleted file mode 100644
index e90b4905627d..000000000000
--- a/chromium/devtools.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
--
- Switch Planner mode helps prepare for your site's switch to HTTPS by generating
- a report of external HTTP resources that might not yet be available on HTTPS.
-
-
- - After enabling, navigate around your site and try to exercise all - functionality in order to get a comprehensive list of external resources. -
- For each group of resources listed as "Unrewritten," find out whether they - are available on HTTPS. If so: add a rule to HTTPS Everywhere! If not: try - to make them available over HTTPS or use a different resource or provider. - Otherwise your site will generate - Mixed Content - (passive or active) errors when you turn on HTTPS. -
- For most accurate results, disable ad blockers before using. Closing this - panel will deactivate Switch Planner mode and clear stored data. -
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chromium/pages/cancel/style.css b/chromium/pages/cancel/style.css
new file mode 100644
index 000000000000..aeba151a0749
--- /dev/null
+++ b/chromium/pages/cancel/style.css
@@ -0,0 +1,130 @@
+@import "../main.css";
+
+body {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ margin: 2% auto;
+ font-size: 12pt;
+ font-family: sans-serif;
+ line-height: 150%;
+ row-gap: 16px;
+}
+
+/*---------
+# 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 {
+ display: block;
+}
+
+h1 img {
+ width: 100%;
+ height: auto;
+}
+
+#url-paragraph {
+ display: inline-flex;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.ease_button {
+ background-color: #ec1e1e;
+ border: 1px solid #ec1e1e;
+ border-radius: 4px;
+ color: #fff;
+ cursor: pointer;
+ padding: 0.5em 1em;
+ float: none;
+ font-size: 12pt;
+ font-weight: normal;
+ margin: 8px 0;
+ line-height: 150%;
+}
+
+button:last-child {
+ margin: 0;
+}
+
+#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
new file mode 100644
index 000000000000..d13dfdfb711a
--- /dev/null
+++ b/chromium/pages/cancel/ux.js
@@ -0,0 +1,124 @@
+/* global sendMessage */
+
+"use strict";
+
+let observer;
+document.addEventListener("DOMContentLoaded", () => {
+ const explainer = document.querySelector("[data-i18n=cancel_he_blocking_explainer]");
+ observer = new MutationObserver(() => {
+ replaceLink(explainer);
+ });
+ if (explainer.innerText.length > 0) {
+ replaceLink(explainer);
+ } else {
+ observer.observe(explainer, {childList: true});
+ }
+ displayURL();
+});
+
+function replaceLink(explainer) {
+ observer.disconnect();
+ const linkText = chrome.i18n.getMessage("cancel_he_blocking_network");
+ const link = document.createElement("a");
+ link.classList.add("wikilink");
+ link.href = "https://en.wikipedia.org/wiki/Downgrade_attack";
+ link.innerText = linkText;
+ explainer.innerHTML = explainer.innerHTML.replace(linkText, link.outerHTML);
+
+ /*
+ In response to translation of i18n string "cancel_he_blocking_network".
+ Within context of the paragraph and as a standalone string can be interpreted differently
+ langauge to language.
+
+ So if link fails to swap in replace, this conditional is triggered
+ */
+ if (document.getElementsByClassName("wikilink").length === 0) {
+ link.innerText = linkText;
+ explainer.after(link);
+ }
+
+}
+
+function displayURL() {
+ const searchParams = new URLSearchParams(window.location.search);
+ const originURL = searchParams.get('originURL');
+ 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() {
+ sendMessage("disable_on_site", url.host, () => {
+ window.location = originURL;
+ });
+
+ 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() {
+ sendMessage("disable_on_site_once", url.host, () => {
+ window.location = originURL;
+ });
+
+ return false;
+ });
+}
diff --git a/chromium/pages/debugging-rulesets/index.html b/chromium/pages/debugging-rulesets/index.html
new file mode 100644
index 000000000000..d3e91227f4c3
--- /dev/null
+++ b/chromium/pages/debugging-rulesets/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+ Debugging Rulesets
+
+ Enter ruleset XML below and click save when ready. These rulesets will be immediately activated upon saving, and will persist across restarts.
+ Warning: This should only be used for debugging rulesets. This feature is not guaranteed to work reliably for regular usage.
+ Note: Due to a bug in Chromium, it may be necessary to close the options ui before saving. +
+ + Warning: This should only be used for debugging rulesets. This feature is not guaranteed to work reliably for regular usage.
+ Note: Due to a bug in Chromium, it may be necessary to close the options ui before saving. +
There are unsaved changes! Be sure to save them for them to take effect.
+
+
+ Saved!
+
+
+
+
diff --git a/chromium/pages/debugging-rulesets/style.css b/chromium/pages/debugging-rulesets/style.css
new file mode 100644
index 000000000000..e424c70b5a7b
--- /dev/null
+++ b/chromium/pages/debugging-rulesets/style.css
@@ -0,0 +1,40 @@
+.cm-s-main{
+ width: 100%;
+ height: 500px;
+}
+
+.cm-s-saved{
+ border: 1px solid black;
+}
+
+.cm-s-unsaved{
+ border: 1px solid red;
+}
+
+.section-explainer{
+ margin-bottom: 5px;
+}
+
+.section-header{
+ margin-bottom: 10px;
+}
+
+.section-header-span{
+ border-bottom: 1px solid #ccc;
+ font-size: 15px;
+}
+
+#saved-text{
+ display: none;
+ color: green;
+ font-weight: bold;
+ margin: 30px;
+}
+
+#unsaved-text{
+ font-weight: bold;
+ margin: 10px 0px;
+ color: red;
+ visibility: hidden;
+ text-align: center;
+}
diff --git a/chromium/pages/debugging-rulesets/ux.js b/chromium/pages/debugging-rulesets/ux.js
new file mode 100644
index 000000000000..0df93d8dd080
--- /dev/null
+++ b/chromium/pages/debugging-rulesets/ux.js
@@ -0,0 +1,46 @@
+/* global sendMessage, CodeMirror */
+
+"use strict";
+
+const savedTextElement = document.getElementById("saved-text");
+const unsavedTextElement = document.getElementById("unsaved-text");
+const savedTitle = "Debugging Rulesets";
+const unsavedTitle = "* Debugging Rulesets";
+
+document.title = savedTitle;
+
+const cm = CodeMirror.fromTextArea(
+ document.getElementById("codemirror-textarea"),
+ {
+ mode: "xml",
+ theme: "default main saved"
+ }
+);
+
+let valueHasChanged = false;
+sendMessage("get_option", { debugging_rulesets: "" }, item => {
+ cm.setValue(item.debugging_rulesets);
+ cm.on("change", cm => {
+ if (!(valueHasChanged)) {
+ valueHasChanged = true;
+ document.title = unsavedTitle;
+ cm.setOption("theme", "default main unsaved");
+ unsavedTextElement.style.visibility = "visible";
+ }
+ });
+});
+
+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);
+
+ valueHasChanged = false;
+ document.title = savedTitle;
+ cm.setOption("theme", "default main saved");
+ unsavedTextElement.style.visibility = "hidden";
+ });
+});
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
new file mode 100644
index 000000000000..b6bdc337cfb3
--- /dev/null
+++ b/chromium/pages/options/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/chromium/pages/options/style.css b/chromium/pages/options/style.css
new file mode 100644
index 000000000000..032a7bad7a44
--- /dev/null
+++ b/chromium/pages/options/style.css
@@ -0,0 +1,264 @@
+@import "../main.css";
+
+body{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+}
+
+/*---------
+# GRID LAYOUT
+---------*/
+.header-wrapper, .section-wrapper {
+ margin: auto;
+}
+.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{
+ margin: 10px 0 0 0;
+}
+
+.settings-wrapper#update-wrapper{
+ margin-bottom: 20px;
+}
+
+.settings-wrapper#show-devtools-tab-wrapper{
+ margin-bottom: 20px;
+}
+
+/** User rules Option**/
+.user-rules-wrapper-header {
+ font-weight: bold;
+ padding-left: 5px;
+}
+.user-rules-list-item:last-of-type {
+ border-bottom: none;
+}
+.user-rules-list-item {
+ border-bottom: 1px solid #ccc;
+ display: inline-flex;
+ margin-left: 5%;
+ width: 80%;
+}
+.user-rules-list-item p {
+ width: 100%;
+}
+
+/** 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;
+}
+img.remove{
+ cursor: pointer;
+ float: right;
+ height: 15px;
+ margin-top: -34px;
+ width: 15px;
+}
+.disabled-rule-list-item:last-of-type {
+ border-bottom: none;
+}
+.disabled-rule-list-item {
+ border-bottom: 1px solid #ccc;
+ clear: both;
+}
+.disabled-rule-list-item p {
+ width: 80%;
+ word-wrap: anywhere;
+}
+
+.section-header{
+ margin-bottom: 10px;
+}
+
+#import{
+ margin-bottom: 10px;
+ float: right;
+}
+
+#import-confirmed{
+ display: none;
+}
+
+.section-header-span{
+ cursor: pointer;
+ padding: 8px;
+ margin-left: 0 !important;
+ margin-right: var(--space) !important;
+ display: inline-block;
+}
+
+.section-header-span.active{
+ background-color: var(--darker-blue);
+ color: #FFF;
+}
+.section-header-span.inactive{
+ background-color: var(--light-grey);
+}
+.section-header-span.inactive:hover {
+ background-color: var(--darker-blue);
+}
+
+.update-channel{
+ border: 1px solid grey;
+ border-radius: 20px;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding: 6px;
+}
+
+.update-channel-name{
+ font-weight: bold;
+ font-size: 14px;
+ margin: 10px;
+}
+
+.update-channel-column-left {
+ width: 89px;
+ float: left;
+ font-size: 13px;
+ text-align: right;
+ margin-right: 10px;
+ min-height: 1px;
+}
+
+.update-channel-column-right {
+ float: left;
+ width: 380px;
+}
+
+textarea.update-channel-jwk {
+ width: 367px;
+ height: 250px;
+ resize: vertical;
+}
+
+input.update-channel-path-prefix, input.update-channel-scope {
+ width: 367px;
+}
+
+div.update-channel-row-scope {
+ margin-top: 3px;
+}
+
+.update-channel-column-right button {
+ float: right;
+ margin: 10px;
+ border-radius: 7px;
+}
+
+button#add-update-channel, button#add-disabled-site {
+ float: right;
+ height: 30px;
+ margin: 0px 10px 10px 10px;
+ padding: 6px;
+}
+
+input#update-channel-name, input#disabled-site {
+ float: right;
+}
+
+.clearer{
+ clear: both;
+}
+
+.update-channel-last-updated {
+ float: right;
+ font-weight: lighter;
+ font-size: 10px;
+}
+
+div#update-channels-error, div#update-channels-warning {
+ margin-top: 20px;
+ font-weight: bold;
+ padding: 10px;
+ border-radius: 10px;
+}
+
+div#update-channels-error {
+ background-color: #CC3333;
+ display: none;
+ color: white;
+}
+
+div#update-channels-warning {
+ background-color: #FFCC00;
+ font-color: black;
+}
+
+#update-channels-error-text{
+ display: inline-block;
+ width: 460px;
+}
+
+img#update-channels-error-hide {
+ float: right;
+}
+
+div#update-channels-last-checked {
+ margin-top: 10px;
+ float: right;
+ font-weight: bold;
+ font-size: 10px;
+}
+
+#update-channels-list {
+ display: inline-block;
+}
+
+@keyframes flash {
+ from {
+ background: #fc0;
+ }
+ to {
+ background: transparent;
+ }
+}
+
+#secretArea {
+ border-radius: 5px;
+ padding: 5px;
+}
+
+.hidden {
+ display: none
+}
+
+.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
new file mode 100644
index 000000000000..07d94dc9928d
--- /dev/null
+++ b/chromium/pages/options/ux.js
@@ -0,0 +1,422 @@
+/* global sendMessage */
+/* global getOption_ */
+/* global e */
+/* global show, hide */
+
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+ const secretArea = document.getElementById('secretArea');
+
+ const onKeyDownHandler = evt => {
+ if (evt.ctrlKey && evt.key === 'z') {
+ secretArea.classList.remove('hidden');
+ secretArea.classList.add('flash');
+
+ sendMessage('set_option', { developerMode: true });
+
+ document.removeEventListener('keydown', onKeyDownHandler);
+
+ evt.preventDefault();
+ }
+ };
+
+ sendMessage('get_option', { developerMode: false }, item => {
+ if (item.developerMode) {
+ secretArea.classList.remove('hidden');
+ } else {
+ document.addEventListener('keydown', onKeyDownHandler);
+ }
+ });
+
+ const autoUpdateRulesets = document.getElementById("autoUpdateRulesets");
+ const enableMixedRulesets = document.getElementById("enableMixedRulesets");
+ const showDevtoolsTab = document.getElementById("showDevtoolsTab");
+
+ const defaultOptions = {
+ autoUpdateRulesets: true,
+ enableMixedRulesets: false,
+ showDevtoolsTab: true
+ };
+
+ sendMessage("get_option", defaultOptions, item => {
+ autoUpdateRulesets.checked = item.autoUpdateRulesets;
+ enableMixedRulesets.checked = item.enableMixedRulesets;
+ showDevtoolsTab.checked = item.showDevtoolsTab;
+
+ autoUpdateRulesets.addEventListener("change", () => {
+ sendMessage("set_option", { autoUpdateRulesets: autoUpdateRulesets.checked });
+ });
+
+ enableMixedRulesets.addEventListener("change", () => {
+ sendMessage("set_option", { enableMixedRulesets: enableMixedRulesets.checked });
+ });
+
+ showDevtoolsTab.addEventListener("change", () => {
+ sendMessage("set_option", { showDevtoolsTab: showDevtoolsTab.checked });
+ });
+ });
+
+ function onlyShowSection(sectionId) {
+ document.querySelectorAll('.section-wrapper').forEach(sw => {
+ sw.style.display = "none";
+ });
+ document.getElementById(sectionId).style.display = "block";
+ }
+ onlyShowSection('general-settings-wrapper');
+
+ document.querySelectorAll('.section-header-span').forEach(shs => {
+ shs.addEventListener("click", () => {
+ document.querySelectorAll('.section-header-span').forEach(shs => {
+ shs.classList.remove("active");
+ shs.classList.add("inactive");
+ });
+ shs.classList.remove("inactive");
+ shs.classList.add("active");
+ onlyShowSection(shs.dataset.show);
+ });
+ });
+
+ function create_update_channel_element(update_channel, last_updated, locked) {
+ let ruleset_version_string;
+
+ 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 {
+ ruleset_version_string = "n/a";
+ }
+
+ const update_channel_div = document.createElement('div');
+ update_channel_div.className = "update-channel";
+
+ const update_channel_name = document.createElement('div');
+ update_channel_name.className = "update-channel-name";
+ update_channel_name.innerText = update_channel.name;
+ update_channel_div.appendChild(update_channel_name);
+ const update_channel_last_updated = document.createElement('div');
+ update_channel_last_updated.className = "update-channel-last-updated";
+ 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);
+ const update_channel_jwk_column_left = document.createElement('div');
+ update_channel_jwk_column_left.className = "update-channel-column-left";
+ update_channel_jwk_column_left.innerText = "JWK:";
+ update_channel_row_jwk.appendChild(update_channel_jwk_column_left);
+ const update_channel_jwk_column_right = document.createElement('div');
+ update_channel_jwk_column_right.className = "update-channel-column-right";
+ update_channel_row_jwk.appendChild(update_channel_jwk_column_right);
+ const update_channel_jwk = document.createElement('textarea');
+ update_channel_jwk.className = "update-channel-jwk";
+ update_channel_jwk.setAttribute("data-name", update_channel.name);
+ update_channel_jwk.disabled = locked;
+ update_channel_jwk.innerText = JSON.stringify(update_channel.jwk);
+ update_channel_jwk_column_right.appendChild(update_channel_jwk);
+
+ const update_channel_row_path_prefix = document.createElement('div');
+ update_channel_row_path_prefix.className = "update-channel-row-path-prefix";
+ update_channel_div.appendChild(update_channel_row_path_prefix);
+ const update_channel_path_prefix_column_left = document.createElement('div');
+ update_channel_path_prefix_column_left.className = "update-channel-column-left";
+ update_channel_path_prefix_column_left.innerText = "Path Prefix:";
+ update_channel_row_path_prefix.appendChild(update_channel_path_prefix_column_left);
+ const update_channel_path_prefix_column_right = document.createElement('div');
+ update_channel_path_prefix_column_right.className = "update-channel-column-right";
+ update_channel_row_path_prefix.appendChild(update_channel_path_prefix_column_right);
+ const update_channel_path_prefix = document.createElement('input');
+ update_channel_path_prefix.setAttribute("type", "text");
+ update_channel_path_prefix.className = "update-channel-path-prefix";
+ update_channel_path_prefix.setAttribute("data-name", update_channel.name);
+ update_channel_path_prefix.disabled = locked;
+ update_channel_path_prefix.value = update_channel.update_path_prefix;
+ update_channel_path_prefix_column_right.appendChild(update_channel_path_prefix);
+
+ let clearer = document.createElement('div');
+ clearer.className = "clearer";
+ 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');
+ update_channel_scope_column_left.className = "update-channel-column-left";
+ update_channel_scope_column_left.innerText = "Scope:";
+ update_channel_row_scope.appendChild(update_channel_scope_column_left);
+ const update_channel_scope_column_right = document.createElement('div');
+ update_channel_scope_column_right.className = "update-channel-column-right";
+ update_channel_row_scope.appendChild(update_channel_scope_column_right);
+ const update_channel_scope = document.createElement('input');
+ update_channel_scope.setAttribute("type", "text");
+ update_channel_scope.className = "update-channel-scope";
+ update_channel_scope.setAttribute("data-name", update_channel.name);
+ update_channel_scope.disabled = locked;
+ update_channel_scope.value = update_channel.scope;
+ update_channel_scope_column_right.appendChild(update_channel_scope);
+
+ const update_channel_row_controls = document.createElement('div');
+ update_channel_row_controls.className = "update-channel-row-controls";
+ update_channel_div.appendChild(update_channel_row_controls);
+ const update_channel_controls_column_left = document.createElement('div');
+ update_channel_controls_column_left.className = "update-channel-column-left";
+ update_channel_controls_column_left.innerText = " ";
+ update_channel_row_controls.appendChild(update_channel_controls_column_left);
+ const update_channel_controls_column_right = document.createElement('div');
+ update_channel_controls_column_right.className = "update-channel-column-right";
+ update_channel_row_controls.appendChild(update_channel_controls_column_right);
+ const update_channel_update = document.createElement('button');
+ update_channel_update.className = "update-channel-update";
+ update_channel_update.setAttribute("data-name", update_channel.name);
+ update_channel_update.disabled = locked;
+ update_channel_update.innerText = chrome.i18n.getMessage("options_update");
+ update_channel_controls_column_right.appendChild(update_channel_update);
+ const update_channel_delete = document.createElement('button');
+ update_channel_delete.className = "update-channel-update";
+ update_channel_delete.setAttribute("data-name", update_channel.name);
+ update_channel_delete.disabled = locked;
+ update_channel_delete.innerText = chrome.i18n.getMessage("options_delete");
+ update_channel_controls_column_right.appendChild(update_channel_delete);
+
+ clearer = document.createElement('div');
+ 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();
+ });
+ });
+
+ 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
+ }, () => {
+ render_update_channels();
+ });
+ });
+
+ return update_channel_div;
+ }
+
+ function render_update_channels() {
+ const update_channels_list = document.getElementById("update-channels-list");
+ 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) {
+ update_channels_list.appendChild(
+ create_update_channel_element(
+ update_channel,
+ item.last_updated[update_channel.name],
+ true,
+ )
+ );
+
+ }
+ });
+
+ sendMessage("get_stored_update_channels", null, item => {
+ for(const update_channel of item.update_channels) {
+ update_channels_list.appendChild(
+ create_update_channel_element(
+ update_channel,
+ item.last_updated[update_channel.name],
+ update_channel.locked === true,
+ )
+ );
+ }
+ });
+ }
+ render_update_channels();
+
+ const add_update_channel = document.getElementById("add-update-channel");
+ const update_channel_name_div = document.getElementById("update-channel-name");
+ const update_channels_error_text = document.getElementById("update-channels-error-text");
+ const update_channels_error = document.getElementById("update-channels-error");
+ update_channel_name_div.setAttribute("placeholder", chrome.i18n.getMessage("options_enterUpdateChannelName"));
+
+ function displayError(text) {
+ update_channels_error_text.innerText = text;
+ update_channels_error.style.display = "block";
+ window.scrollTo(0,0);
+ }
+
+ // Get a list of user Rules
+ sendMessage("get_user_rules", null, userRules => {
+ let user_rules_parent = e("user-rules-wrapper");
+
+ if ( 0 === userRules.length) {
+ hide(user_rules_parent);
+ return ;
+ }
+
+ // img element "remove button"
+ let templateRemove = document.createElement("img");
+ templateRemove.src = chrome.runtime.getURL("images/remove.png");
+ templateRemove.className = "remove";
+
+ for (const userRule of userRules) {
+ let user_rule_host = document.createElement("div");
+ let user_rule_name = document.createElement("p");
+ let remove = templateRemove.cloneNode(true);
+
+ user_rule_host.className = "user-rules-list-item";
+ user_rule_name.className = "user-rules-list-item-single";
+ user_rule_name.innerText = userRule.name;
+ user_rule_host.appendChild(user_rule_name);
+ user_rules_parent.appendChild(user_rule_host);
+ user_rule_host.appendChild(remove);
+
+ remove.addEventListener("click", () => {
+ // assume the removal is successful and hide ui element
+ hide( user_rule_host );
+ // remove the user rule
+ sendMessage("remove_rule", { ruleset: userRule, src: 'options' });
+ });
+ }
+ });
+
+ // HTTPS Everywhere Sites Disabled section in General Settings module
+ getOption_("disabledList", [], function(item) {
+ let rule_host_parent = e("disabled-rules-wrapper");
+
+ // img element "remove button"
+ let templateRemove = document.createElement("img");
+ templateRemove.src = chrome.runtime.getURL("images/remove.png");
+ templateRemove.className = "remove";
+
+ if( item ) {
+ for (const key of item.disabledList) {
+ let rule_host = document.createElement("div");
+ let remove = templateRemove.cloneNode(true);
+ let rule_host_site_name = document.createElement("p");
+
+ rule_host.className = "disabled-rule-list-item";
+ rule_host_site_name.className = "disabled-rule-list-item_single";
+ rule_host_site_name.innerText = key;
+ rule_host.appendChild( rule_host_site_name);
+ rule_host_parent.appendChild(rule_host);
+ rule_host.appendChild(remove);
+
+ remove.addEventListener("click", () => {
+ hide( rule_host );
+ sendMessage("enable_on_site", key);
+ });
+ }
+ }
+ });
+
+ 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() {
+ 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", () => {
+ const update_channel_name = update_channel_name_div.value;
+ 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) {
+ render_update_channels();
+ } else {
+ displayError("Error: There already exists an update channel with this name.");
+ }
+ });
+ }
+ });
+
+ const update_channels_error_hide = document.getElementById("update-channels-error-hide");
+ update_channels_error_hide.addEventListener("click", () => {
+ update_channels_error.style.display = "none";
+ });
+
+ 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) {
+ const last_checked_date = new Date(last_checked * 1000);
+ const options = {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ timeZoneName: 'short'
+ };
+ const customDateTime = new Intl.DateTimeFormat('default', options).format;
+ last_checked_string = customDateTime(last_checked_date);
+ } else {
+ last_checked_string = chrome.i18n.getMessage("options_updatesLastCheckedNever");
+ }
+ update_channels_last_checked.innerText = chrome.i18n.getMessage("options_updatesLastChecked") + last_checked_string;
+ });
+});
diff --git a/chromium/pages/popup/index.html b/chromium/pages/popup/index.html
new file mode 100644
index 000000000000..d9441f2d3e9d
--- /dev/null
+++ b/chromium/pages/popup/index.html
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Version:
+
+ + + +
+
+
+
+
+