diff options
Diffstat (limited to 'data/extensions/https-everywhere@eff.org/pages/options')
3 files changed, 459 insertions, 0 deletions
diff --git a/data/extensions/https-everywhere@eff.org/pages/options/index.html b/data/extensions/https-everywhere@eff.org/pages/options/index.html new file mode 100644 index 0000000..d72d279 --- /dev/null +++ b/data/extensions/https-everywhere@eff.org/pages/options/index.html @@ -0,0 +1,54 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title></title> + <link href="style.css" rel="stylesheet"> + </head> + <body> + <span class="section-header-span active" data-show="general-settings-wrapper" data-i18n="options_generalSettings"></span> + <span class="section-header-span inactive" data-show="advanced-settings-wrapper" data-i18n="options_advancedSettings"></span> + <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> + </div> + </div> + + <div class="section-wrapper" id="advanced-settings-wrapper"> + <div id="mixed-rulesets-wrapper" class="settings-wrapper"> + <input type="checkbox" id="enableMixedRulesets"> + <label for="enableMixedRulesets" data-i18n="options_enableMixedRulesets"></label> + </div> + <div id="show-devtools-tab-wrapper" class="settings-wrapper"> + <input type="checkbox" id="showDevtoolsTab"> + <label for="showDevtoolsTab" data-i18n="options_showDevtoolsTab"></label> + </div> + </div> + + <div class="section-wrapper" id="update-channels-wrapper"> + <div id="update-channels-error"> + <span id="update-channels-error-text"></span> + <img id="update-channels-error-hide" src="/images/remove.png"> + </div> + <div id="update-channels-warning" data-i18n="options_updateChannelsWarning"></div> + <div id="update-channels-last-checked"></div> + <div class="clearer"></div> + <div id="update-channels-list"></div> + <div id="add-update-channel-wrapper"> + <button id="add-update-channel" data-i18n="options_addUpdateChannel"></button> + <input type="text" id="update-channel-name" /> + </div> + </div> + + <script src="ux.js"></script> + <script src="../translation.js"></script> + <script src="../send-message.js"></script> + </body> +</html> diff --git a/data/extensions/https-everywhere@eff.org/pages/options/style.css b/data/extensions/https-everywhere@eff.org/pages/options/style.css new file mode 100644 index 0000000..0e7b545 --- /dev/null +++ b/data/extensions/https-everywhere@eff.org/pages/options/style.css @@ -0,0 +1,147 @@ +body{ + min-width: 500px; + display: block; +} + +.settings-wrapper{ + margin: 10px 0 0 0; +} + +.settings-wrapper#update-wrapper{ + margin-bottom: 20px; +} + +.settings-wrapper#show-devtools-tab-wrapper{ + margin-bottom: 20px; +} + +.section-header{ + margin-bottom: 10px; +} + +#import{ + margin-bottom: 10px; + float: right; +} + +#import-confirmed{ + display: none; +} + +.section-header-span{ + font-size: 15px; + border: 0px; + border-radius: 13px; + padding: 8px; + margin-right: 10px; + display: inline-block; +} + +.section-header-span.active{ + background-color: #66ccff; +} + +.section-header-span.inactive{ + background-color: #ddd; +} + +.update-channel{ + margin-top: 30px; + margin-bottom: 30px; + border: 1px solid grey; + border-radius: 20px; + width: 498px; +} + +.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: 380px; + height: 250px; +} + +input.update-channel-path-prefix { + width: 367px; +} + +.update-channel-column-right button { + float: right; + margin: 10px; + border-radius: 7px; +} + +button#add-update-channel{ + float: right; + margin: 0px 10px 10px 10px; + border-radius: 7px; +} + +input#update-channel-name{ + 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-wrapper{ + width: 500px; +} diff --git a/data/extensions/https-everywhere@eff.org/pages/options/ux.js b/data/extensions/https-everywhere@eff.org/pages/options/ux.js new file mode 100644 index 0000000..7a4306c --- /dev/null +++ b/data/extensions/https-everywhere@eff.org/pages/options/ux.js @@ -0,0 +1,258 @@ +/* global sendMessage */ + +"use strict"; + +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 }); + }); + + 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, pinned){ + 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_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 = pinned; + 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 = pinned; + update_channel_path_prefix.value = update_channel.update_path_prefix; + update_channel_path_prefix_column_right.appendChild(update_channel_path_prefix); + + 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 = pinned; + 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 = pinned; + update_channel_delete.innerText = chrome.i18n.getMessage("options_delete"); + update_channel_controls_column_right.appendChild(update_channel_delete); + + const clearer = document.createElement('div'); + clearer.className = "clearer"; + update_channel_div.appendChild(clearer); + + 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, + jwk: JSON.parse(update_channel_jwk.value), + update_path_prefix: update_channel_path_prefix.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], + false + ) + ); + } + }); + } + 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); + } + + 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; + }); + + document.onkeydown = function(evt) { + evt = evt || window.event; + if (evt.ctrlKey && evt.keyCode == 90) { + window.open("/pages/debugging-rulesets/index.html"); + } + }; +}); |