[tor-commits] [torbutton/master] Bug 26884 - Part 2: Create mobile security slider
gk at torproject.org
gk at torproject.org
Wed Aug 22 09:19:41 UTC 2018
commit 690a3836779975202fd722579dfa5997953af61d
Author: Igor Oliveira <igt0 at torproject.org>
Date: Tue Jul 31 18:28:49 2018 -0300
Bug 26884 - Part 2: Create mobile security slider
Create a responsive security slider, it can be used on mobile and
tablet.
---
src/chrome/content/preferences-mobile.js | 76 +++++++++++++++++++++++++++
src/chrome/content/preferences.xhtml | 85 +++++++++++++++++++++++++++++++
src/chrome/content/torbutton.js | 45 ++++++++++++++++
src/chrome/locale/en/torbutton.properties | 1 +
src/chrome/skin/preferences-mobile.css | 47 +++++++++++++++++
5 files changed, 254 insertions(+)
diff --git a/src/chrome/content/preferences-mobile.js b/src/chrome/content/preferences-mobile.js
new file mode 100644
index 00000000..e2da9b88
--- /dev/null
+++ b/src/chrome/content/preferences-mobile.js
@@ -0,0 +1,76 @@
+// # Security Settings User Interface for Mobile
+
+// Utilities
+let { utils: Cu } = Components;
+let { getBoolPref, getIntPref, setBoolPref, setIntPref, getCharPref } =
+ Cu.import("resource://gre/modules/Services.jsm", {}).Services.prefs;
+
+let { getLocale, show_torbrowser_manual } =
+ Cu.import("resource://torbutton/modules/utils.js", {});
+
+// Description elements have the follow names.
+const descNames =
+ [, "desc_standard", "desc_safer", "desc_safest"];
+// "Learn-more"-elements have the follow names.
+const linkNames =
+ [, "link_standard", "link_safer", "link_safest"];
+// A single `state` object that reflects the user settings in this UI.
+
+let state = { slider : 0, custom : false};
+
+// Utility functions to convert between the legacy 4-value pref index
+// and the 3-valued security slider.
+let sliderPositionToPrefSetting = pos => [, 4, 2, 1][pos];
+let prefSettingToSliderPosition = pref => [, 3, 2, 2, 1][pref];
+
+// Set the desired slider value and update UI.
+function torbutton_set_slider(sliderValue) {
+ state.slider = sliderValue;
+ let slider = document.getElementById("torbutton_sec_slider");
+ slider.value = sliderValue.toString();
+ let descs = descNames.map(name => document.getElementById(name));
+ descs.forEach((desc, i) => {
+ if (state.slider !== i) {
+ desc.style.display = 'none';
+ } else {
+ desc.style.display = 'block';
+ }
+ });
+ torbutton_save_security_settings();
+}
+
+// Read prefs 'extensions.torbutton.security_slider' and
+// 'extensions.torbutton.security_custom', and initialize the UI.
+function torbutton_init_security_ui() {
+ torbutton_set_slider(prefSettingToSliderPosition(
+ getIntPref("extensions.torbutton.security_slider")));
+ torbutton_set_learn_more_links();
+}
+
+// Write the two prefs from the current settings.
+function torbutton_save_security_settings() {
+ setIntPref("extensions.torbutton.security_slider",
+ sliderPositionToPrefSetting(state.slider));
+ setBoolPref("extensions.torbutton.security_custom", state.custom);
+}
+
+// We follow the way we treat the links to the Tor Browser User Manual on the
+// Help Menu and on about:tor: if we have the manual available for a locale,
+// let's show the "Learn more"-link, otherwise hide it.
+function torbutton_set_learn_more_links() {
+ let show_manual = show_torbrowser_manual();
+ let locale = ""
+ if (show_manual) {
+ locale = getLocale();
+ }
+ let links = linkNames.map(name => document.getElementById(name));
+ links.forEach(link => {;
+ if (show_manual && locale != "") {
+ link.href= "https:/tb-manual.torproject.org/" + locale +
+ "/security-slider.html";
+ link.hidden = false;
+ } else {
+ link.hidden = true;
+ }
+ });
+}
diff --git a/src/chrome/content/preferences.xhtml b/src/chrome/content/preferences.xhtml
new file mode 100644
index 00000000..6f662f5f
--- /dev/null
+++ b/src/chrome/content/preferences.xhtml
@@ -0,0 +1,85 @@
+<!DOCTYPE overlay SYSTEM "chrome://torbutton/locale/torbutton.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <meta charset="UTF-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
+ <head>
+ <title>&torbutton.prefs.security_settings;</title>
+ <link type="text/css" rel="stylesheet" charset="UTF-8" href="chrome://torbutton/skin/preferences.css"/>
+ <link type="text/css" rel="stylesheet" charset="UTF-8" href="chrome://torbutton/skin/preferences-mobile.css"/>
+ <script type="text/javascript" src="torbutton_util.js"></script>
+ <script type="text/javascript" src="preferences-mobile.js"></script>
+ <style>
+ </style>
+ </head>
+ <body onload="torbutton_init_security_ui()">
+ <div class="wrapper outer-wrapper">
+ <div class="title">
+ &torbutton.prefs.sec_caption;
+ </div>
+ <div class="wrapper inner-wrapper">
+ <input id="torbutton_sec_slider" type="range" min="1" max="3" list="datalist" onchange="torbutton_set_slider(parseInt(this.value, 10))"/>
+ <datalist id="datalist">
+ <option onclick="torbutton_set_slider(1)">
+ &torbutton.prefs.sec_standard_label;
+ </option>
+ <option onclick="torbutton_set_slider(2)">
+ &torbutton.prefs.sec_safer_label;
+ </option>
+ <option onclick="torbutton_set_slider(3)">
+ &torbutton.prefs.sec_safest_label;
+ </option>
+ </datalist>
+ <div class="description-wrapper">
+ <div id="desc_safest" class="description">
+ <p class="slider-text-size slider-text-weight">
+ &torbutton.prefs.sec_safest_description;
+ </p>
+ <p class="slider-text-size slider-text-weight">
+ &torbutton.prefs.sec_safest_list_label;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_js_disabled;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_limit_graphics_and_typography;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_click_to_play_media;
+ </p>
+ <a id="link_safest" class="text-link">
+ &torbutton.prefs.sec_learn_more_label;
+ </a>
+ </div>
+ <div id="desc_safer" class="description">
+ <p class="slider-text-size slider-text-weight">
+ &torbutton.prefs.sec_safer_description;
+ </p>
+ <p class="slider-text-size slider-text-weight">
+ &torbutton.prefs.sec_safer_list_label;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_js_on_https_sites_only;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_limit_typography;
+ </p>
+ <p class="slider-text-size">
+ &torbutton.prefs.sec_click_to_play_media;
+ </p>
+ <a id="link_safer" class="text-link">
+ &torbutton.prefs.sec_learn_more_label;
+ </a>
+ </div>
+ <div id="desc_standard" class="description">
+ <p class="slider-text-size slider-text-weight">
+ &torbutton.prefs.sec_standard_description;
+ </p>
+ <a id="link_standard" class="text-link">
+ &torbutton.prefs.sec_learn_more_label;
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index b4e6ed18..47621835 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -342,6 +342,8 @@ function torbutton_init() {
window.messageManager.addMessageListener("AboutTor:Loaded",
torbutton_abouttor_message_handler);
+ setupPreferencesForMobile();
+
// XXX: Get rid of the cached asmjs (or IndexedDB) files on disk in case we
// don't allow things saved to disk. This is an ad-hoc fix to work around
// #19417. Once this is properly solved we should remove this code again.
@@ -1906,6 +1908,49 @@ function torbutton_is_windowed(wind) {
let stopOpenSecuritySettingsObserver;
+function showSecurityPreferencesPanel(chromeWindow) {
+ const tabBrowser = chromeWindow.BrowserApp;
+ let settingsTab = null;
+
+ const SECURITY_PREFERENCES_URI = 'chrome://torbutton/content/preferences.xhtml';
+
+ tabBrowser.tabs.some(function (tab) {
+ // If the security prefs tab is opened, send the user to it
+ if (tab.browser.currentURI.spec === SECURITY_PREFERENCES_URI) {
+ settingsTab = tab;
+ return true;
+ }
+ return false;
+ });
+
+ if (settingsTab === null) {
+ // Open up the settings panel in a new tab.
+ tabBrowser.addTab(SECURITY_PREFERENCES_URI, {
+ 'selected': true,
+ 'parentId': tabBrowser.selectedTab.id
+ });
+ } else {
+ // Activate an existing settings panel tab.
+ tabBrowser.selectTab(settingsTab);
+ }
+}
+
+function setupPreferencesForMobile() {
+ if (Services.appinfo.OS !== "Android") {
+ return;
+ }
+
+ torbutton_log(4, "Setting up settings preferences for Android.");
+
+ const chromeWindow = Services.wm.getMostRecentWindow('navigator:browser');
+
+ // Add the extension's chrome menu item to the main browser menu.
+ chromeWindow.NativeWindow.menu.add({
+ 'name': torbutton_get_property_string("torbutton.security_settings.menu.title"),
+ 'callback': showSecurityPreferencesPanel.bind(this, chromeWindow)
+ });
+}
+
// Bug 1506 P3: This is needed pretty much only for the version check
// and the window resizing. See comments for individual functions for
// details
diff --git a/src/chrome/locale/en/torbutton.properties b/src/chrome/locale/en/torbutton.properties
index 53573df0..60154dbe 100644
--- a/src/chrome/locale/en/torbutton.properties
+++ b/src/chrome/locale/en/torbutton.properties
@@ -22,6 +22,7 @@ torbutton.popup.launch = Download file
torbutton.popup.cancel = Cancel
torbutton.popup.dontask = Automatically download files from now on
torbutton.popup.no_newnym = Torbutton cannot safely give you a new identity. It does not have access to the Tor Control Port.\n\nAre you running Tor Browser Bundle?
+torbutton.security_settings.menu.title = Security Settings
torbutton.title.prompt_torbrowser = Important Torbutton Information
torbutton.popup.prompt_torbrowser = Torbutton works differently now: you can't turn it off any more.\n\nWe made this change because it isn't safe to use Torbutton in a browser that's also used for non-Tor browsing. There were too many bugs there that we couldn't fix any other way.\n\nIf you want to keep using Firefox normally, you should uninstall Torbutton and download Tor Browser Bundle. The privacy properties of Tor Browser are also superior to those of normal Firefox, even when Firefox is used with Torbutton.\n\nTo remove Torbutton, go to Tools->Addons->Extensions and then click the Remove button next to Torbutton.
torbutton.popup.short_torbrowser = Important Torbutton Information!\n\nTorbutton is now always enabled.\n\nClick on the Torbutton for more information.
diff --git a/src/chrome/skin/preferences-mobile.css b/src/chrome/skin/preferences-mobile.css
new file mode 100644
index 00000000..b6d54e8d
--- /dev/null
+++ b/src/chrome/skin/preferences-mobile.css
@@ -0,0 +1,47 @@
+.wrapper {
+ display: flex;
+}
+
+.outer-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.inner-wrapper {
+ height: 350px;
+ width: 100%;
+ max-width: 600px;
+ flex-direction: column;
+ align-items: center;
+}
+
+#torbutton_sec_slider {
+ align-self: stretch;
+ width: auto;
+ height: auto;
+}
+
+datalist {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-self: stretch;
+}
+
+p {
+ text-align: justify;
+}
+
+div > p {
+ margin-top: 0px;
+}
+
+.title {
+ font-weight: bold;
+ line-height: 30px;
+}
+
+.wrapper .inner-wrapper * {
+ margin-top: 10px;
+}
More information about the tor-commits
mailing list