diff options
Diffstat (limited to 'data/extensions/https-everywhere@eff.org/pages/options/ux.js')
| -rw-r--r-- | data/extensions/https-everywhere@eff.org/pages/options/ux.js | 258 |
1 files changed, 258 insertions, 0 deletions
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"); + } + }; +}); |