This is an automated email from the git hooks/post-receive script. richard pushed a commit to branch tor-browser-91.8.0esr-11.5-1 in repository tor-browser. commit d7b8ebd62f4c2b4a12008a4b007c9049e8046c10 Author: Pier Angelo Vendrame <pierov@torproject.org> AuthorDate: Fri Feb 11 10:08:05 2022 +0100 fixup! Add TorStrings module for localization --- browser/modules/TorStrings.jsm | 320 ++++++++++++++++++++++++++++++++--------- 1 file changed, 256 insertions(+), 64 deletions(-) diff --git a/browser/modules/TorStrings.jsm b/browser/modules/TorStrings.jsm index 0ccbbb41a7824..eb1e7808b4b90 100644 --- a/browser/modules/TorStrings.jsm +++ b/browser/modules/TorStrings.jsm @@ -239,7 +239,7 @@ var TorStrings = { })() /* Security Level Strings */, /* - Tor about:preferences#tor Strings + Tor about:preferences#connection Strings */ settings: (function() { let tsb = new TorDTDStringBundle( @@ -251,53 +251,172 @@ var TorStrings = { }; let retval = { - categoryTitle: getString("torPreferences.categoryTitle", "Tor"), - torPreferencesHeading: getString( - "torPreferences.torSettings", - "Tor Settings" - ), + categoryTitle: getString("torPreferences.categoryTitle", "Connection"), + // Message box torPreferencesDescription: getString( "torPreferences.torSettingsDescription", "Tor Browser routes your traffic over the Tor Network, run by thousands of volunteers around the world." ), - learnMore: getString("torPreferences.learnMore", "Learn More"), + // Status + statusInternetLabel: getString("torPreferences.statusInternetLabel", "Internet:"), + statusInternetTest: getString("torPreferences.statusInternetTest", "Test"), + statusInternetOnline: getString("torPreferences.statusInternetOnline", "Online"), + statusInternetOffline: getString("torPreferences.statusInternetOffline", "Offline"), + statusTorLabel: getString("torPreferences.statusTorLabel", "Tor Network:"), + statusTorConnected: getString("torPreferences.statusTorConnected", "Connected"), + statusTorNotConnected: getString("torPreferences.statusTorNotConnected", "Not Connected"), + statusTorBlocked: getString("torPreferences.statusTorBlocked", "Potentially Blocked"), + learnMore: getString("torPreferences.learnMore", "Learn more"), + // Quickstart quickstartHeading: getString("torPreferences.quickstart", "Quickstart"), - quickstartDescription: getString("torPreferences.quickstartDescription", "Quickstart allows Tor Browser to connect automatically."), + quickstartDescription: getString( + "torPreferences.quickstartDescriptionLong", + "Quickstart connects Tor Browser to the Tor Network automatically when launched, based on your last used connection settings." + ), quickstartCheckbox : getString("torPreferences.quickstartCheckbox", "Always connect automatically"), + // Bridge settings bridgesHeading: getString("torPreferences.bridges", "Bridges"), bridgesDescription: getString( "torPreferences.bridgesDescription", "Bridges help you access the Tor Network in places where Tor is blocked. Depending on where you are, one bridge may work better than another." ), - useBridge: getString("torPreferences.useBridge", "Use a bridge"), - selectBridge: getString( - "torsettings.useBridges.default", - "Select a bridge" - ), - requestBridgeFromTorProject: getString( + bridgeLocation: getString("torPreferences.bridgeLocation", "Your location"), + bridgeLocationAutomatic: getString("torPreferences.bridgeLocationAutomatic", "Automatic"), + bridgeChooseForMe: getString("torPreferences.bridgeChooseForMe", "Choose a Bridge For Me\u2026"), + bridgeCurrent: getString("torPreferences.bridgeBadgeCurrent", "Your Current Bridges"), + bridgeId: getString("torPreferences.bridgeId", "#1 bridge: #2"), + remove: getString("torPreferences.remove", "Remove"), + bridgeDisableBuiltIn: getString("torPreferences.bridgeDisableBuiltIn", "Disable built-in bridges"), + bridgeShare: getString( + "torPreferences.bridgeShare", + "Share your bridge by presenting the QR code or copying its bridge line." + ), + bridgeCopy: getString("torPreferences.bridgeCopy", "Copy Bridge Address"), + copied: getString("torPreferences.copied", "Copied!"), + bridgeShowAll: getString("torPreferences.bridgeShowAll", "Show all bridges"), + bridgeRemoveAll: getString("torPreferences.bridgeRemoveAll", "Remove all bridges"), + bridgeAdd: getString("torPreferences.bridgeAdd", "Add a New Bridge"), + bridgeSelectBrowserBuiltin: getString( + "torPreferences.bridgeSelectBrowserBuiltin", + "Choose from one of Tor Browser’s built-in bridges" + ), + bridgeSelectBuiltin: getString( + "torPreferences.bridgeSelectBuiltin", + "Select a Built-In Bridge\u2026" + ), + bridgeRequestFromTorProject: getString( "torsettings.useBridges.bridgeDB", "Request a bridge from torproject.org" ), - requestNewBridge: getString( - "torPreferences.requestNewBridge", - "Request a New Bridge\u2026" + bridgeRequest: getString( + "torPreferences.bridgeRequest", + "Request a Bridge\u2026" + ), + bridgeEnterKnown: getString( + "torPreferences.bridgeEnterKnown", + "Enter a bridge address you already know" + ), + bridgeAddManually: getString( + "torPreferences.bridgeAddManually", + "Add a Bridge Manually\u2026" + ), + // Advanced settings + advancedHeading: getString("torPreferences.advanced", "Advanced"), + advancedLabel: getString( + "torPreferences.advancedDescription", + "Configure how Tor Browser connects to the internet" ), - provideBridge: getString( - "torPreferences.provideBridge", - "Provide a bridge" + advancedButton: getString("torPreferences.advancedButton", "Settings\u2026"), + showTorDaemonLogs: getString( + "torPreferences.viewTorLogs", + "View the Tor logs" ), - provideBridgeDirections: getString( - "torsettings.useBridges.label", - "Enter bridge information from a trusted source." + showLogs: getString("torPreferences.viewLogs", "View Logs\u2026"), + // Scan bridge QR dialog + scanQrTitle: getString("torPreferences.scanQrTitle", "Scan the QR code"), + // Builtin bridges dialog + builtinBridgeTitle: getString( + "torPreferences.builtinBridgeTitle", + "Built-In Bridges" + ), + builtinBridgeHeader: getString( + "torPreferences.builtinBridgeHeader", + "Select a Built-In Bridge" + ), + builtinBridgeDescription: getString( + "torPreferences.builtinBridgeDescription", + "Tor Browser includes some specific types of bridges known as “pluggable transports”." + ), + builtinBridgeObfs4: getString( + "torPreferences.builtinBridgeObfs4", + "obfs4" + ), + builtinBridgeObfs4Description: getString( + "torPreferences.builtinBridgeObfs4Description", + "obfs4 is a type of built-in bridge that makes your Tor traffic look random. They are also less likely to be blocked than their predecessors, obfs3 bridges." + ), + builtinBridgeSnowflake: getString( + "torPreferences.builtinBridgeSnowflake", + "Snowflake" + ), + builtinBridgeSnowflakeDescription: getString( + "torPreferences.builtinBridgeSnowflakeDescription", + "Snowflake is a built-in bridge that defeats censorship by routing your connection through Snowflake proxies, ran by volunteers." + ), + builtinBridgeMeekAzure: getString( + "torPreferences.builtinBridgeMeekAzure", + "meek-azure" + ), + builtinBridgeMeekAzureDescription: getString( + "torPreferences.builtinBridgeMeekAzureDescription", + "meek-azure is a built-in bridge that makes it look like you are using a Microsoft web site instead of using Tor." + ), + // Request bridges dialog + requestBridgeDialogTitle: getString( + "torPreferences.requestBridgeDialogTitle", + "Request Bridge" + ), + submitCaptcha: getString( + "torsettings.useBridges.captchaSubmit", + "Submit" + ), + contactingBridgeDB: getString( + "torPreferences.requestBridgeDialogWaitPrompt", + "Contacting BridgeDB. Please Wait." + ), + solveTheCaptcha: getString( + "torPreferences.requestBridgeDialogSolvePrompt", + "Solve the CAPTCHA to request a bridge." + ), + captchaTextboxPlaceholder: getString( + "torsettings.useBridges.captchaSolution.placeholder", + "Enter the characters from the image" + ), + incorrectCaptcha: getString( + "torPreferences.requestBridgeErrorBadSolution", + "The solution is not correct. Please try again." + ), + // Provide bridge dialog + provideBridgeTitle: getString( + "torPreferences.provideBridgeTitle", + "Provide Bridge" + ), + provideBridgeHeader: getString( + "torPreferences.provideBridgeHeader", + "Enter bridge information from a trusted source" ), provideBridgePlaceholder: getString( - "torsettings.useBridges.placeholder", + "torsettings.bridgePlaceholder", "type address:port (one per line)" ), - advancedHeading: getString("torPreferences.advanced", "Advanced"), - advancedDescription: getString( - "torPreferences.advancedDescription", - "Configure how Tor Browser connects to the internet." + // Connection settings dialog + connectionSettingsDialogTitle: getString( + "torPreferences.connectionSettingsDialogTitle", + "Connection Settings" + ), + connectionSettingsDialogHeader: getString( + "torPreferences.connectionSettingsDialogHeader", + "Configure how Tor Browser connects to the Internet" ), useLocalProxy: getString("torsettings.useProxy.checkbox", "I use a proxy to connect to the Internet"), proxyType: getString("torsettings.useProxy.type", "Proxy Type"), @@ -328,35 +447,7 @@ var TorStrings = { "torPreferences.firewallPortsPlaceholder", "Comma-seperated values" ), - requestBridgeDialogTitle: getString( - "torPreferences.requestBridgeDialogTitle", - "Request Bridge" - ), - submitCaptcha: getString( - "torsettings.useBridges.captchaSubmit", - "Submit" - ), - contactingBridgeDB: getString( - "torPreferences.requestBridgeDialogWaitPrompt", - "Contacting BridgeDB. Please Wait." - ), - solveTheCaptcha: getString( - "torPreferences.requestBridgeDialogSolvePrompt", - "Solve the CAPTCHA to request a bridge." - ), - captchaTextboxPlaceholder: getString( - "torsettings.useBridges.captchaSolution.placeholder", - "Enter the characters from the image" - ), - incorrectCaptcha: getString( - "torPreferences.requestBridgeErrorBadSolution", - "The solution is not correct. Please try again." - ), - showTorDaemonLogs: getString( - "torPreferences.viewTorLogs", - "View the Tor logs." - ), - showLogs: getString("torPreferences.viewLogs", "View Logs\u2026"), + // Log dialog torLogDialogTitle: getString( "torPreferences.torLogsDialogTitle", "Tor Logs" @@ -365,7 +456,6 @@ var TorStrings = { learnMoreTorBrowserURL: `https://tb-manual.torproject.org/${getLocale()}/about/`, learnMoreBridgesURL: `https://tb-manual.torproject.org/${getLocale()}/bridges/`, - learnMoreNetworkSettingsURL: `about:blank`, }; return retval; @@ -415,14 +505,89 @@ var TorStrings = { "Tor failed to establish a Tor network connection." ), + couldNotConnect: getStringNet( + "torConnect.couldNotConnect", + "Tor Browser could not connect to Tor" + ), + + configureConnection: getStringNet( + "torConnect.assistDescriptionConfigure", + "configure your connection" + ), + + assistDescription: getStringNet( + "torConnect.assistDescription", + "If Tor is blocked in your location, trying a bridge may help. Connection assist can choose one for you using your location, or you can #1 manually instead." + ), + + tryingBridge: getStringNet( + "torConnect.tryingBridge", + "Trying a bridge…" + ), + + tryingBridgeAgain: getStringNet( + "torConnect.tryingBridge", + "Trying one more time…" + ), + + addLocation: getStringNet( + "torConnect.addLocation", + "Add your location settings" + ), + + addLocationDescription: getStringNet( + "torConnect.addLocationDescription", + "Tor Browser needs to know your location in order to choose the right bridge for you. If you’d rather not share your location, #1 manually instead." + ), + + errorLocation: getStringNet( + "torConnect.errorLocation", + "Tor Browser couldn’t locate you" + ), + + errorLocationDescription: getStringNet( + "torConnect.errorLocationDescription", + "Tor Browser still couldn’t connect to Tor. Please check your location settings are correct and try again." + ), + + finalError: getStringNet( + "torConnect.finalError", + "Tor Browser still cannot connect", + ), + + finalErrorDescription: getStringNet( + "torConnect.finalErrorDescription", + "Despite its best efforts, connection assist was not able to connect to Tor. Try troubleshooting your connection and adding a bridge manually instead.", + ), + + breadcrumbAssist: getStringNet( + "torConnect.breadcrumbAssist", + "Connection assist" + ), + + breadcrumbLocation: getStringNet( + "torConnect.breadcrumbLocation", + "Location settings" + ), + + breadcrumbTryBridge: getStringNet( + "torConnect.breadcrumbTryBridge", + "Try a bridge" + ), + + restartTorBrowser: getStringNet( + "torConnect.restartTorBrowser", + "Restart Tor Browser" + ), + torConfigure: getStringNet( - "torsettings.wizard.title.configure", - "Tor Network Settings" + "torConnect.configureConnection", + "Configure Connection…" ), - copyLog: getStringNet( - "torConnect.copyLog", - "Copy Tor Logs" + viewLog: getStringNet( + "torConnect.viewLog", + "View logs…" ), torConnectButton: getStringNet("torSettings.connect", "Connect"), @@ -442,9 +607,36 @@ var TorStrings = { tryAgain: getStringNet("torConnect.tryAgain", "Try connecting again"), offline: getStringNet("torConnect.offline", "Offline"), - // tor connect strings for message box in about:preferences#tor + // tor connect strings for message box in about:preferences#connection connectMessage: getStringNet("torConnect.connectMessage", "Changes to Tor Settings will not take effect until you connect"), tryAgainMessage: getStringNet("torConnect.tryAgainMessage", "Tor Browser has failed to establish a connection to the Tor Network"), + + yourLocation: getStringNet("torConnect.yourLocation", "Your Location"), + + tryBridge: getStringNet("torConnect.tryBridge", "Try a Bridge"), + + selectCountryRegion: getStringNet( + "torConnect.selectCountryRegion", + "Select Country or Region", + ), + + // TorConnect.jsm error messages + autoBootstrappingFailed: getStringNet( + "torConnect.autoBootstrappingFailed", + "Automatic configuration failed" + ), + autoBootstrappingAllFailed: getStringNet( + "torConnect.autoBootstrappingFailed", + "None of the configurations we tried worked" + ), + cannotDetermineCountry: getStringNet( + "torConnect.cannotDetermineCountry", + "Unable to determine user country" + ), + noSettingsForCountry: getStringNet( + "torConnect.noSettingsForCountry", + "No settings available for your location" + ), }; })(), -- To stop receiving notification emails like this one, please contact the administrator of this repository.

This is an automated email from the git hooks/post-receive script. richard pushed a commit to branch tor-browser-91.8.0esr-11.5-1 in repository tor-browser. commit 207037ff0a0f29a5c152e76649bc4024466be940 Author: Pier Angelo Vendrame <pierov@torproject.org> AuthorDate: Thu Feb 10 10:35:38 2022 +0100 squash! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection Bug 40774: Update about:preferences page to match new UI designs --- browser/components/preferences/preferences.js | 10 +- browser/components/preferences/preferences.xhtml | 5 +- .../torpreferences/content/bridgeQrDialog.jsm | 51 + .../torpreferences/content/bridgeQrDialog.xhtml | 23 + .../torpreferences/content/builtinBridgeDialog.jsm | 142 +++ .../content/builtinBridgeDialog.xhtml | 43 + ...gory.inc.xhtml => connectionCategory.inc.xhtml} | 8 +- .../torpreferences/content/connectionPane.js | 1315 ++++++++++++++++++++ .../torpreferences/content/connectionPane.xhtml | 177 +++ .../content/connectionSettingsDialog.jsm | 393 ++++++ .../content/connectionSettingsDialog.xhtml | 62 + .../components/torpreferences/content/network.svg | 6 + .../torpreferences/content/provideBridgeDialog.jsm | 69 + .../content/provideBridgeDialog.xhtml | 21 + .../torpreferences/content/requestBridgeDialog.jsm | 32 +- .../content/requestBridgeDialog.xhtml | 10 +- .../torpreferences/content/torLogDialog.jsm | 18 + .../components/torpreferences/content/torPane.js | 940 -------------- .../torpreferences/content/torPane.xhtml | 157 --- .../torpreferences/content/torPreferences.css | 394 +++++- browser/components/torpreferences/jar.mn | 15 +- 21 files changed, 2739 insertions(+), 1152 deletions(-) diff --git a/browser/components/preferences/preferences.js b/browser/components/preferences/preferences.js index ce338584142ed..5981bcd38fc83 100644 --- a/browser/components/preferences/preferences.js +++ b/browser/components/preferences/preferences.js @@ -13,7 +13,7 @@ /* import-globals-from findInPage.js */ /* import-globals-from ../../base/content/utilityOverlay.js */ /* import-globals-from ../../../toolkit/content/preferencesBindings.js */ -/* import-globals-from ../torpreferences/content/torPane.js */ +/* import-globals-from ../torpreferences/content/connectionPane.js */ "use strict"; @@ -137,12 +137,12 @@ function init_all() { register_module("paneSync", gSyncPane); } register_module("paneSearchResults", gSearchResultsPane); - if (gTorPane.enabled) { - document.getElementById("category-tor").hidden = false; - register_module("paneTor", gTorPane); + if (gConnectionPane.enabled) { + document.getElementById("category-connection").hidden = false; + register_module("paneConnection", gConnectionPane); } else { // Remove the pane from the DOM so it doesn't get incorrectly included in search results. - document.getElementById("template-paneTor").remove(); + document.getElementById("template-paneConnection").remove(); } gSearchResultsPane.init(); diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml index 07ab5cc7b626d..30ce70079adb7 100644 --- a/browser/components/preferences/preferences.xhtml +++ b/browser/components/preferences/preferences.xhtml @@ -6,6 +6,7 @@ <?xml-stylesheet href="chrome://global/skin/global.css"?> <?xml-stylesheet href="chrome://global/skin/in-content/common.css"?> +<?xml-stylesheet href="chrome://global/skin/in-content/toggle-button.css"?> <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?> <?xml-stylesheet href="chrome://browser/content/preferences/dialogs/handlers.css"?> <?xml-stylesheet href="chrome://browser/skin/preferences/applications.css"?> @@ -158,7 +159,7 @@ <label class="category-name" flex="1" data-l10n-id="pane-experimental-title"></label> </richlistitem> -#include ../torpreferences/content/torCategory.inc.xhtml +#include ../torpreferences/content/connectionCategory.inc.xhtml </richlistbox> @@ -213,7 +214,7 @@ #include containers.inc.xhtml #include sync.inc.xhtml #include experimental.inc.xhtml -#include ../torpreferences/content/torPane.xhtml +#include ../torpreferences/content/connectionPane.xhtml </vbox> </vbox> </vbox> diff --git a/browser/components/torpreferences/content/bridgeQrDialog.jsm b/browser/components/torpreferences/content/bridgeQrDialog.jsm new file mode 100644 index 0000000000000..e63347742ea50 --- /dev/null +++ b/browser/components/torpreferences/content/bridgeQrDialog.jsm @@ -0,0 +1,51 @@ +"use strict"; + +var EXPORTED_SYMBOLS = ["BridgeQrDialog"]; + +const { QRCode } = ChromeUtils.import("resource://gre/modules/QRCode.jsm"); + +const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm"); + +class BridgeQrDialog { + constructor() { + this._bridgeString = ""; + } + + static get selectors() { + return { + target: "#bridgeQr-target", + }; + } + + _populateXUL(window, dialog) { + dialog.parentElement.setAttribute("title", TorStrings.settings.scanQrTitle); + const target = dialog.querySelector(BridgeQrDialog.selectors.target); + const style = window.getComputedStyle(target); + const width = style.width.substr(0, style.width.length - 2); + const height = style.height.substr(0, style.height.length - 2); + new QRCode(target, { + text: this._bridgeString, + width, + height, + colorDark: style.color, + colorLight: style.backgroundColor, + document: window.document, + }); + } + + init(window, dialog) { + // Defer to later until Firefox has populated the dialog with all our elements + window.setTimeout(() => { + this._populateXUL(window, dialog); + }, 0); + } + + openDialog(gSubDialog, bridgeString) { + this._bridgeString = bridgeString; + gSubDialog.open( + "chrome://browser/content/torpreferences/bridgeQrDialog.xhtml", + { features: "resizable=yes" }, + this + ); + } +} diff --git a/browser/components/torpreferences/content/bridgeQrDialog.xhtml b/browser/components/torpreferences/content/bridgeQrDialog.xhtml new file mode 100644 index 0000000000000..2a49e4c0e7d9e --- /dev/null +++ b/browser/components/torpreferences/content/bridgeQrDialog.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?> +<?xml-stylesheet href="chrome://browser/content/torpreferences/torPreferences.css"?> + +<window type="child" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> +<dialog id="bridgeQr-dialog" buttons="accept"> + <html:div id="bridgeQr-container"> + <html:div id="bridgeQr-target"/> + <html:div id="bridgeQr-onionBox"/> + <html:div id="bridgeQr-onion"/> + </html:div> + <script type="application/javascript"><![CDATA[ + "use strict"; + + let dialogObject = window.arguments[0]; + let dialogElement = document.getElementById("bridgeQr-dialog"); + dialogObject.init(window, dialogElement); + ]]></script> +</dialog> +</window> diff --git a/browser/components/torpreferences/content/builtinBridgeDialog.jsm b/browser/components/torpreferences/content/builtinBridgeDialog.jsm new file mode 100644 index 0000000000000..1d4dda8f5ca9c --- /dev/null +++ b/browser/components/torpreferences/content/builtinBridgeDialog.jsm @@ -0,0 +1,142 @@ +"use strict"; + +var EXPORTED_SYMBOLS = ["BuiltinBridgeDialog"]; + +const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm"); + +const { + TorSettings, + TorBridgeSource, + TorBuiltinBridgeTypes, +} = ChromeUtils.import("resource:///modules/TorSettings.jsm"); + +class BuiltinBridgeDialog { + constructor() { + this._dialog = null; + this._bridgeType = ""; + this._windowPadding = 0; + } + + static get selectors() { + return { + header: "#torPreferences-builtinBridge-header", + description: "#torPreferences-builtinBridge-description", + radiogroup: "#torPreferences-builtinBridge-typeSelection", + obfsRadio: "#torPreferences-builtinBridges-radioObfs", + obfsDescr: "#torPreferences-builtinBridges-descrObfs", + snowflakeRadio: "#torPreferences-builtinBridges-radioSnowflake", + snowflakeDescr: "#torPreferences-builtinBridges-descrSnowflake", + meekAzureRadio: "#torPreferences-builtinBridges-radioMeekAzure", + meekAzureDescr: "#torPreferences-builtinBridges-descrMeekAzure", + }; + } + + _populateXUL(window, aDialog) { + const selectors = BuiltinBridgeDialog.selectors; + + this._dialog = aDialog; + const dialogWin = this._dialog.parentElement; + { + dialogWin.setAttribute("title", TorStrings.settings.builtinBridgeTitle); + let windowStyle = window.getComputedStyle(dialogWin); + this._windowPadding = + parseFloat(windowStyle.paddingLeft) + + parseFloat(windowStyle.paddingRight); + } + const initialWidth = dialogWin.clientWidth - this._windowPadding; + + this._dialog.querySelector(selectors.header).textContent = + TorStrings.settings.builtinBridgeHeader; + this._dialog.querySelector(selectors.description).textContent = + TorStrings.settings.builtinBridgeDescription; + let radioGroup = this._dialog.querySelector(selectors.radiogroup); + + let types = { + obfs4: { + elemRadio: this._dialog.querySelector(selectors.obfsRadio), + elemDescr: this._dialog.querySelector(selectors.obfsDescr), + label: TorStrings.settings.builtinBridgeObfs4, + descr: TorStrings.settings.builtinBridgeObfs4Description, + }, + snowflake: { + elemRadio: this._dialog.querySelector(selectors.snowflakeRadio), + elemDescr: this._dialog.querySelector(selectors.snowflakeDescr), + label: TorStrings.settings.builtinBridgeSnowflake, + descr: TorStrings.settings.builtinBridgeSnowflakeDescription, + }, + "meek-azure": { + elemRadio: this._dialog.querySelector(selectors.meekAzureRadio), + elemDescr: this._dialog.querySelector(selectors.meekAzureDescr), + label: TorStrings.settings.builtinBridgeMeekAzure, + descr: TorStrings.settings.builtinBridgeMeekAzureDescription, + }, + }; + + TorBuiltinBridgeTypes.forEach(type => { + types[type].elemRadio.parentElement.setAttribute("hidden", "false"); + types[type].elemDescr.parentElement.setAttribute("hidden", "false"); + types[type].elemRadio.setAttribute("label", types[type].label); + types[type].elemDescr.textContent = types[type].descr; + }); + + if ( + TorSettings.bridges.enabled && + TorSettings.bridges.source == TorBridgeSource.BuiltIn + ) { + radioGroup.selectedItem = + types[TorSettings.bridges.builtin_type]?.elemRadio; + this._bridgeType = TorSettings.bridges.builtin_type; + } else { + radioGroup.selectedItem = null; + this._bridgeType = ""; + } + + // Use the initial width, because the window is expanded when we add texts + this.resized(initialWidth); + + this._dialog.addEventListener("dialogaccept", e => { + this._bridgeType = radioGroup.value; + }); + this._dialog.addEventListener("dialoghelp", e => { + window.top.openTrustedLinkIn( + "https://tb-manual.torproject.org/circumvention/", + "tab" + ); + }); + } + + resized(width) { + if (this._dialog === null) { + return; + } + const dialogWin = this._dialog.parentElement; + if (width === undefined) { + width = dialogWin.clientWidth - this._windowPadding; + } + let windowPos = dialogWin.getBoundingClientRect(); + dialogWin.querySelectorAll("div").forEach(div => { + let divPos = div.getBoundingClientRect(); + div.style.width = width - (divPos.left - windowPos.left) + "px"; + }); + } + + init(window, aDialog) { + // defer to later until firefox has populated the dialog with all our elements + window.setTimeout(() => { + this._populateXUL(window, aDialog); + }, 0); + } + + openDialog(gSubDialog, aCloseCallback) { + gSubDialog.open( + "chrome://browser/content/torpreferences/builtinBridgeDialog.xhtml", + { + features: "resizable=yes", + closingCallback: () => { + aCloseCallback(this._bridgeType); + }, + }, + this + ); + } +} diff --git a/browser/components/torpreferences/content/builtinBridgeDialog.xhtml b/browser/components/torpreferences/content/builtinBridgeDialog.xhtml new file mode 100644 index 0000000000000..c1bf202ca1be5 --- /dev/null +++ b/browser/components/torpreferences/content/builtinBridgeDialog.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?> +<?xml-stylesheet href="chrome://browser/content/torpreferences/torPreferences.css"?> + +<window type="child" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> +<dialog id="torPreferences-builtinBridge-dialog" + buttons="help,accept,cancel"> + <html:h3 id="torPreferences-builtinBridge-header">​</html:h3> + <description> + <html:div id="torPreferences-builtinBridge-description">​<br/>​</html:div> + </description> + <radiogroup id="torPreferences-builtinBridge-typeSelection"> + <hbox hidden="true"> + <radio id="torPreferences-builtinBridges-radioObfs" value="obfs4"/> + </hbox> + <hbox hidden="true" class="indent"> + <html:div id="torPreferences-builtinBridges-descrObfs"></html:div> + </hbox> + <hbox hidden="true"> + <radio id="torPreferences-builtinBridges-radioSnowflake" value="snowflake"/> + </hbox> + <hbox hidden="true" class="indent"> + <html:div id="torPreferences-builtinBridges-descrSnowflake"></html:div> + </hbox> + <hbox hidden="true"> + <radio id="torPreferences-builtinBridges-radioMeekAzure" value="meek-azure"/> + </hbox> + <hbox hidden="true" class="indent"> + <html:div id="torPreferences-builtinBridges-descrMeekAzure"></html:div> + </hbox> + </radiogroup> + <script type="application/javascript"><![CDATA[ + "use strict"; + + let builtinBridgeDialog = window.arguments[0]; + let dialog = document.getElementById("torPreferences-builtinBridge-dialog"); + builtinBridgeDialog.init(window, dialog); + ]]></script> +</dialog> +</window> diff --git a/browser/components/torpreferences/content/torCategory.inc.xhtml b/browser/components/torpreferences/content/connectionCategory.inc.xhtml similarity index 57% rename from browser/components/torpreferences/content/torCategory.inc.xhtml rename to browser/components/torpreferences/content/connectionCategory.inc.xhtml index abe56200f571b..15cf24cfe6950 100644 --- a/browser/components/torpreferences/content/torCategory.inc.xhtml +++ b/browser/components/torpreferences/content/connectionCategory.inc.xhtml @@ -1,9 +1,9 @@ -<richlistitem id="category-tor" +<richlistitem id="category-connection" class="category" - value="paneTor" - helpTopic="prefs-tor" + value="paneConnection" + helpTopic="prefs-connection" align="center" hidden="true"> <image class="category-icon"/> - <label id="torPreferences-labelCategory" class="category-name" flex="1" value="Tor"/> + <label id="torPreferences-labelCategory" class="category-name" flex="1" value="Connection"/> </richlistitem> diff --git a/browser/components/torpreferences/content/connectionPane.js b/browser/components/torpreferences/content/connectionPane.js new file mode 100644 index 0000000000000..309d6498a0c80 --- /dev/null +++ b/browser/components/torpreferences/content/connectionPane.js @@ -0,0 +1,1315 @@ +"use strict"; + +/* global Services, gSubDialog */ + +const { setTimeout, clearTimeout } = ChromeUtils.import( + "resource://gre/modules/Timer.jsm" +); + +const { + TorSettings, + TorSettingsTopics, + TorSettingsData, + TorBridgeSource, +} = ChromeUtils.import("resource:///modules/TorSettings.jsm"); + +const { TorProtocolService } = ChromeUtils.import( + "resource:///modules/TorProtocolService.jsm" +); + +const { + TorConnect, + TorConnectTopics, + TorConnectState, + TorCensorshipLevel, +} = ChromeUtils.import("resource:///modules/TorConnect.jsm"); + +const { TorLogDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/torLogDialog.jsm" +); + +const { ConnectionSettingsDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/connectionSettingsDialog.jsm" +); + +const { BridgeQrDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/bridgeQrDialog.jsm" +); + +const { BuiltinBridgeDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/builtinBridgeDialog.jsm" +); + +const { RequestBridgeDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/requestBridgeDialog.jsm" +); + +const { ProvideBridgeDialog } = ChromeUtils.import( + "chrome://browser/content/torpreferences/provideBridgeDialog.jsm" +); + +const { MoatRPC } = ChromeUtils.import("resource:///modules/Moat.jsm"); + +const { QRCode } = ChromeUtils.import("resource://gre/modules/QRCode.jsm"); + +ChromeUtils.defineModuleGetter( + this, + "TorStrings", + "resource:///modules/TorStrings.jsm" +); + +const InternetStatus = Object.freeze({ + Unknown: 0, + Online: 1, + Offline: -1, +}); + +/* + Connection Pane + + Code for populating the XUL in about:preferences#connection, handling input events, interfacing with tor-launcher +*/ +const gConnectionPane = (function() { + /* CSS selectors for all of the Tor Network DOM elements we need to access */ + const selectors = { + category: { + title: "label#torPreferences-labelCategory", + }, + messageBox: { + box: "div#torPreferences-connectMessageBox", + message: "td#torPreferences-connectMessageBox-message", + button: "button#torPreferences-connectMessageBox-button", + }, + torPreferences: { + header: "h1#torPreferences-header", + description: "span#torPreferences-description", + learnMore: "label#torPreferences-learnMore", + }, + status: { + internetLabel: "#torPreferences-status-internet-label", + internetTest: "#torPreferences-status-internet-test", + internetIcon: "#torPreferences-status-internet-statusIcon", + internetStatus: "#torPreferences-status-internet-status", + torLabel: "#torPreferences-status-tor-label", + torIcon: "#torPreferences-status-tor-statusIcon", + torStatus: "#torPreferences-status-tor-status", + }, + quickstart: { + header: "h2#torPreferences-quickstart-header", + description: "span#torPreferences-quickstart-description", + enableQuickstartCheckbox: "checkbox#torPreferences-quickstart-toggle", + }, + bridges: { + header: "h1#torPreferences-bridges-header", + description: "span#torPreferences-bridges-description", + learnMore: "label#torPreferences-bridges-learnMore", + locationGroup: "#torPreferences-bridges-locationGroup", + locationLabel: "#torPreferences-bridges-locationLabel", + location: "#torPreferences-bridges-location", + locationEntries: "#torPreferences-bridges-locationEntries", + chooseForMe: "#torPreferences-bridges-buttonChooseBridgeForMe", + currentHeader: "#torPreferences-currentBridges-header", + currentHeaderText: "#torPreferences-currentBridges-headerText", + switch: "#torPreferences-currentBridges-switch", + cards: "#torPreferences-currentBridges-cards", + cardTemplate: "#torPreferences-bridgeCard-template", + card: ".torPreferences-bridgeCard", + cardId: ".torPreferences-bridgeCard-id", + cardHeadingAddr: ".torPreferences-bridgeCard-headingAddr", + cardConnectedLabel: ".torPreferences-bridgeCard-connectedLabel", + cardOptions: ".torPreferences-bridgeCard-options", + cardMenu: "#torPreferences-bridgeCard-menu", + cardQrGrid: ".torPreferences-bridgeCard-grid", + cardQrContainer: ".torPreferences-bridgeCard-qr", + cardQr: ".torPreferences-bridgeCard-qrCode", + cardShare: ".torPreferences-bridgeCard-share", + cardAddr: ".torPreferences-bridgeCard-addr", + cardLearnMore: ".torPreferences-bridgeCard-learnMore", + cardCopy: ".torPreferences-bridgeCard-copyButton", + showAll: "#torPreferences-currentBridges-showAll", + removeAll: "#torPreferences-currentBridges-removeAll", + addHeader: "#torPreferences-addBridge-header", + addBuiltinLabel: "#torPreferences-addBridge-labelBuiltinBridge", + addBuiltinButton: "#torPreferences-addBridge-buttonBuiltinBridge", + requestLabel: "#torPreferences-addBridge-labelRequestBridge", + requestButton: "#torPreferences-addBridge-buttonRequestBridge", + enterLabel: "#torPreferences-addBridge-labelEnterBridge", + enterButton: "#torPreferences-addBridge-buttonEnterBridge", + }, + advanced: { + header: "h1#torPreferences-advanced-header", + label: "#torPreferences-advanced-label", + button: "#torPreferences-advanced-button", + torLogsLabel: "label#torPreferences-torLogs", + torLogsButton: "button#torPreferences-buttonTorLogs", + }, + }; /* selectors */ + + let retval = { + // cached frequently accessed DOM elements + _enableQuickstartCheckbox: null, + + _internetStatus: InternetStatus.Unknown, + + _controller: null, + + _currentBridge: "", + + // disables the provided list of elements + _setElementsDisabled(elements, disabled) { + for (let currentElement of elements) { + currentElement.disabled = disabled; + } + }, + + // populate xul with strings and cache the relevant elements + _populateXUL() { + // saves tor settings to disk when navigate away from about:preferences + window.addEventListener("blur", val => { + TorProtocolService.flushSettings(); + }); + + document + .querySelector(selectors.category.title) + .setAttribute("value", TorStrings.settings.categoryTitle); + + let prefpane = document.getElementById("mainPrefPane"); + + // 'Connect to Tor' Message Bar + + const messageBox = prefpane.querySelector(selectors.messageBox.box); + const messageBoxMessage = prefpane.querySelector( + selectors.messageBox.message + ); + const messageBoxButton = prefpane.querySelector( + selectors.messageBox.button + ); + // wire up connect button + messageBoxButton.addEventListener("click", () => { + TorConnect.beginBootstrap(); + TorConnect.openTorConnect(); + }); + + this._populateMessagebox = () => { + if ( + TorConnect.shouldShowTorConnect && + TorConnect.state === TorConnectState.Configuring + ) { + // set messagebox style and text + if (TorProtocolService.torBootstrapErrorOccurred()) { + messageBox.parentNode.style.display = null; + messageBox.className = "error"; + messageBoxMessage.innerText = TorStrings.torConnect.tryAgainMessage; + messageBoxButton.innerText = TorStrings.torConnect.tryAgain; + } else { + messageBox.parentNode.style.display = null; + messageBox.className = "warning"; + messageBoxMessage.innerText = TorStrings.torConnect.connectMessage; + messageBoxButton.innerText = TorStrings.torConnect.torConnectButton; + } + } else { + // we need to explicitly hide the groupbox, as switching between + // the tor pane and other panes will 'unhide' (via the 'hidden' + // attribute) the groupbox, offsetting all of the content down + // by the groupbox's margin (even if content is 0 height) + messageBox.parentNode.style.display = "none"; + messageBox.className = "hidden"; + messageBoxMessage.innerText = ""; + messageBoxButton.innerText = ""; + } + }; + this._populateMessagebox(); + + // Heading + prefpane.querySelector(selectors.torPreferences.header).innerText = + TorStrings.settings.categoryTitle; + prefpane.querySelector(selectors.torPreferences.description).textContent = + TorStrings.settings.torPreferencesDescription; + { + let learnMore = prefpane.querySelector( + selectors.torPreferences.learnMore + ); + learnMore.setAttribute("value", TorStrings.settings.learnMore); + learnMore.setAttribute( + "href", + TorStrings.settings.learnMoreTorBrowserURL + ); + } + + // Internet and Tor status + prefpane.querySelector(selectors.status.internetLabel).textContent = + TorStrings.settings.statusInternetLabel; + prefpane.querySelector(selectors.status.torLabel).textContent = + TorStrings.settings.statusTorLabel; + const internetTest = prefpane.querySelector( + selectors.status.internetTest + ); + internetTest.setAttribute( + "label", + TorStrings.settings.statusInternetTest + ); + internetTest.addEventListener("command", async () => { + this.onInternetTest(); + }); + const internetIcon = prefpane.querySelector( + selectors.status.internetIcon + ); + const internetStatus = prefpane.querySelector( + selectors.status.internetStatus + ); + const torIcon = prefpane.querySelector(selectors.status.torIcon); + const torStatus = prefpane.querySelector(selectors.status.torStatus); + this._populateStatus = () => { + switch (this._internetStatus) { + case InternetStatus.Unknown: + internetTest.removeAttribute("hidden"); + break; + case InternetStatus.Online: + internetTest.setAttribute("hidden", "true"); + internetIcon.className = "online"; + internetStatus.textContent = + TorStrings.settings.statusInternetOnline; + break; + case InternetStatus.Offline: + internetTest.setAttribute("hidden", "true"); + internetIcon.className = "offline"; + internetStatus.textContent = + TorStrings.settings.statusInternetOffline; + break; + } + if (TorConnect.state === TorConnectState.Bootstrapped) { + torIcon.className = "connected"; + torStatus.textContent = TorStrings.settings.statusTorConnected; + } else if ( + TorConnect.detectedCensorshipLevel > TorCensorshipLevel.None + ) { + torIcon.className = "blocked"; + torStatus.textContent = TorStrings.settings.statusTorBlocked; + } else { + torIcon.className = ""; + torStatus.textContent = TorStrings.settings.statusTorNotConnected; + } + }; + this._populateStatus(); + + // Quickstart + prefpane.querySelector(selectors.quickstart.header).innerText = + TorStrings.settings.quickstartHeading; + prefpane.querySelector(selectors.quickstart.description).textContent = + TorStrings.settings.quickstartDescription; + + this._enableQuickstartCheckbox = prefpane.querySelector( + selectors.quickstart.enableQuickstartCheckbox + ); + this._enableQuickstartCheckbox.setAttribute( + "label", + TorStrings.settings.quickstartCheckbox + ); + this._enableQuickstartCheckbox.addEventListener("command", e => { + const checked = this._enableQuickstartCheckbox.checked; + TorSettings.quickstart.enabled = checked; + TorSettings.saveToPrefs().applySettings(); + }); + this._enableQuickstartCheckbox.checked = TorSettings.quickstart.enabled; + Services.obs.addObserver(this, TorSettingsTopics.SettingChanged); + + // Bridge setup + prefpane.querySelector(selectors.bridges.header).innerText = + TorStrings.settings.bridgesHeading; + prefpane.querySelector(selectors.bridges.description).textContent = + TorStrings.settings.bridgesDescription; + { + let learnMore = prefpane.querySelector(selectors.bridges.learnMore); + learnMore.setAttribute("value", TorStrings.settings.learnMore); + learnMore.setAttribute("href", TorStrings.settings.learnMoreBridgesURL); + } + + // Location + { + const locationGroup = prefpane.querySelector( + selectors.bridges.locationGroup + ); + prefpane.querySelector(selectors.bridges.locationLabel).textContent = + TorStrings.settings.bridgeLocation; + const location = prefpane.querySelector(selectors.bridges.location); + const locationEntries = prefpane.querySelector( + selectors.bridges.locationEntries + ); + const chooseForMe = prefpane.querySelector( + selectors.bridges.chooseForMe + ); + chooseForMe.setAttribute( + "label", + TorStrings.settings.bridgeChooseForMe + ); + chooseForMe.addEventListener("command", e => { + TorConnect.beginAutoBootstrap(location.value); + }); + this._populateLocations = () => { + let value = location.value; + locationEntries.textContent = ""; + + { + const item = document.createXULElement("menuitem"); + item.setAttribute("value", ""); + item.setAttribute( + "label", + TorStrings.settings.bridgeLocationAutomatic + ); + locationEntries.appendChild(item); + } + + const codes = TorConnect.countryCodes; + const items = codes.map(code => { + const item = document.createXULElement("menuitem"); + item.setAttribute("value", code); + item.setAttribute( + "label", + TorConnect.countryNames[code] + ? TorConnect.countryNames[code] + : code + ); + return item; + }); + items.sort((left, right) => + left.textContent.localeCompare(right.textContent) + ); + locationEntries.append(...items); + location.value = value; + }; + this._showAutoconfiguration = () => { + if ( + !TorConnect.shouldShowTorConnect || + !TorProtocolService.torBootstrapErrorOccurred() + ) { + locationGroup.setAttribute("hidden", "true"); + return; + } + // Populate locations, even though we will show only the automatic + // item for a moment. In my opinion showing the button immediately is + // better then waiting for the Moat query to finish (after a while) + // and showing the controls only after that. + this._populateLocations(); + locationGroup.removeAttribute("hidden"); + if (!TorConnect.countryCodes.length) { + TorConnect.getCountryCodes().then(() => this._populateLocations()); + } + }; + this._showAutoconfiguration(); + } + + // Bridge cards + const bridgeHeader = prefpane.querySelector( + selectors.bridges.currentHeader + ); + bridgeHeader.querySelector( + selectors.bridges.currentHeaderText + ).textContent = TorStrings.settings.bridgeCurrent; + const bridgeSwitch = bridgeHeader.querySelector(selectors.bridges.switch); + bridgeSwitch.addEventListener("change", () => { + TorSettings.bridges.enabled = bridgeSwitch.checked; + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + }); + const bridgeTemplate = prefpane.querySelector( + selectors.bridges.cardTemplate + ); + { + const learnMore = bridgeTemplate.querySelector( + selectors.bridges.cardLearnMore + ); + learnMore.setAttribute("value", TorStrings.settings.learnMore); + learnMore.setAttribute("href", "about:blank"); + } + bridgeTemplate.querySelector( + selectors.bridges.cardConnectedLabel + ).textContent = TorStrings.settings.statusTorConnected; + bridgeTemplate + .querySelector(selectors.bridges.cardCopy) + .setAttribute("label", TorStrings.settings.bridgeCopy); + bridgeTemplate.querySelector(selectors.bridges.cardShare).textContent = + TorStrings.settings.bridgeShare; + const bridgeCards = prefpane.querySelector(selectors.bridges.cards); + const bridgeMenu = prefpane.querySelector(selectors.bridges.cardMenu); + + this._addBridgeCard = bridgeString => { + const card = bridgeTemplate.cloneNode(true); + card.removeAttribute("id"); + const grid = card.querySelector(selectors.bridges.cardQrGrid); + card.addEventListener("click", e => { + let target = e.target; + let apply = true; + while (target !== null && target !== card && apply) { + // Deal with mixture of "command" and "click" events + apply = !target.classList?.contains("stop-click"); + target = target.parentElement; + } + if (apply) { + if (card.classList.toggle("expanded")) { + grid.classList.add("to-animate"); + grid.style.height = `${grid.scrollHeight}px`; + } else { + // Be sure we still have the to-animate class + grid.classList.add("to-animate"); + grid.style.height = ""; + } + } + }); + const emojis = makeBridgeId(bridgeString).map(e => { + const span = document.createElement("span"); + span.className = "emoji"; + span.textContent = e; + return span; + }); + const idString = TorStrings.settings.bridgeId; + const id = card.querySelector(selectors.bridges.cardId); + const details = parseBridgeLine(bridgeString); + if (details && details.id !== undefined) { + card.setAttribute("data-bridge-id", details.id); + } + // TODO: properly handle "vanilla" bridges? + const type = + details && details.transport !== undefined + ? details.transport + : "vanilla"; + for (const piece of idString.split(/(#[12])/)) { + if (piece == "#1") { + id.append(type); + } else if (piece == "#2") { + id.append(...emojis); + } else { + id.append(piece); + } + } + card.querySelector( + selectors.bridges.cardHeadingAddr + ).textContent = bridgeString; + const optionsButton = card.querySelector(selectors.bridges.cardOptions); + if (TorSettings.bridges.source === TorBridgeSource.BuiltIn) { + optionsButton.setAttribute("hidden", "true"); + } else { + // Cloning the menupopup element does not work as expected. + // Therefore, we use only one, and just before opening it, we remove + // its previous items, and add the ones relative to the bridge whose + // button has been pressed. + optionsButton.addEventListener("click", () => { + const menuItem = document.createXULElement("menuitem"); + menuItem.setAttribute("label", TorStrings.settings.remove); + menuItem.classList.add("menuitem-iconic"); + menuItem.image = "chrome://global/skin/icons/delete.svg"; + menuItem.addEventListener("command", e => { + const strings = TorSettings.bridges.bridge_strings; + const index = strings.indexOf(bridgeString); + if (index !== -1) { + strings.splice(index, 1); + } + TorSettings.bridges.enabled = + bridgeSwitch.checked && !!strings.length; + TorSettings.bridges.bridge_strings = strings.join("\n"); + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + }); + if (bridgeMenu.firstChild) { + bridgeMenu.firstChild.remove(); + } + bridgeMenu.append(menuItem); + bridgeMenu.openPopup(optionsButton, { + position: "bottomleft topleft", + }); + }); + } + const bridgeAddr = card.querySelector(selectors.bridges.cardAddr); + bridgeAddr.setAttribute("value", bridgeString); + const bridgeCopy = card.querySelector(selectors.bridges.cardCopy); + let restoreTimeout = null; + bridgeCopy.addEventListener("command", e => { + this.onCopyBridgeAddress(bridgeAddr); + const label = bridgeCopy.querySelector("label"); + label.setAttribute("value", TorStrings.settings.copied); + bridgeCopy.classList.add("primary"); + + const RESTORE_TIME = 1200; + if (restoreTimeout !== null) { + clearTimeout(restoreTimeout); + } + restoreTimeout = setTimeout(() => { + label.setAttribute("value", TorStrings.settings.bridgeCopy); + bridgeCopy.classList.remove("primary"); + restoreTimeout = null; + }, RESTORE_TIME); + }); + if (details && details.id === this._currentBridge) { + card.classList.add("currently-connected"); + bridgeCards.prepend(card); + } else { + bridgeCards.append(card); + } + // Add the QR only after appending the card, to have the computed style + try { + const container = card.querySelector(selectors.bridges.cardQr); + const style = getComputedStyle(container); + const width = style.width.substr(0, style.width.length - 2); + const height = style.height.substr(0, style.height.length - 2); + new QRCode(container, { + text: bridgeString, + width, + height, + colorDark: style.color, + colorLight: style.backgroundColor, + document, + }); + container.parentElement.addEventListener("click", () => { + this.onShowQr(bridgeString); + }); + } catch (err) { + // TODO: Add a generic image in case of errors such as code overflow. + // It should never happen with correct codes, but after all this + // content can be generated by users... + console.error("Could not generate the QR code for the bridge:", err); + } + }; + this._checkBridgeCardsHeight = () => { + for (const card of bridgeCards.children) { + // Expanded cards have the height set manually to their details for + // the CSS animation. However, when resizing the window, we may need + // to adjust their height. + if (card.classList.contains("expanded")) { + const grid = card.querySelector(selectors.bridges.cardQrGrid); + // Reset it first, to avoid having a height that is higher than + // strictly needed. Also, remove the to-animate class, because the + // animation interferes with this process! + grid.classList.remove("to-animate"); + grid.style.height = ""; + grid.style.height = `${grid.scrollHeight}px`; + } + } + }; + this._currentBridgesExpanded = false; + const showAll = prefpane.querySelector(selectors.bridges.showAll); + showAll.setAttribute("label", TorStrings.settings.bridgeShowAll); + showAll.addEventListener("command", () => { + this._currentBridgesExpanded = true; + this._populateBridgeCards(); + }); + const removeAll = prefpane.querySelector(selectors.bridges.removeAll); + removeAll.setAttribute("label", TorStrings.settings.bridgeRemoveAll); + removeAll.addEventListener("command", () => { + this.onRemoveAllBridges(); + }); + this._populateBridgeCards = async () => { + const collapseThreshold = 4; + + let newStrings = new Set(TorSettings.bridges.bridge_strings); + const numBridges = newStrings.size; + if (!newStrings.size) { + bridgeHeader.setAttribute("hidden", "true"); + bridgeCards.setAttribute("hidden", "true"); + showAll.setAttribute("hidden", "true"); + removeAll.setAttribute("hidden", "true"); + bridgeCards.textContent = ""; + return; + } + bridgeHeader.removeAttribute("hidden"); + bridgeCards.removeAttribute("hidden"); + bridgeSwitch.checked = TorSettings.bridges.enabled; + bridgeCards.classList.toggle("disabled", !TorSettings.bridges.enabled); + + let shownCards = 0; + const toShow = this._currentBridgesExpanded + ? numBridges + : collapseThreshold; + + // Do not remove all the old cards, because it makes scrollbar "jump" + const currentCards = bridgeCards.querySelectorAll( + selectors.bridges.card + ); + for (const card of currentCards) { + const string = card.querySelector(selectors.bridges.cardAddr).value; + const hadString = newStrings.delete(string); + if (!hadString || shownCards == toShow) { + card.remove(); + } else { + shownCards++; + } + } + + // Add only the new strings that remained in the set + for (const bridge of newStrings) { + if (shownCards >= toShow) { + if (this._currentBridge === "") { + break; + } else if (!bridge.includes(this._currentBridge)) { + continue; + } + } + this._addBridgeCard(bridge); + shownCards++; + } + + // If we know the connected bridge, we may have added more than the ones + // we should actually show (but the connected ones have been prepended, + // if needed). So, remove any exceeding ones. + while (shownCards > toShow) { + bridgeCards.lastElementChild.remove(); + shownCards--; + } + + // And finally update the buttons + if (numBridges > collapseThreshold && !this._currentBridgesExpanded) { + showAll.removeAttribute("hidden"); + if (TorSettings.bridges.enabled) { + showAll.classList.add("primary"); + } else { + showAll.classList.remove("primary"); + } + removeAll.setAttribute("hidden", "true"); + if (TorSettings.bridges.enabled) { + // We do not want both collapsed and disabled at the same time, + // because we use collapsed only to display a gradient on the list. + bridgeCards.classList.add("list-collapsed"); + } + } else { + showAll.setAttribute("hidden", "true"); + removeAll.removeAttribute("hidden"); + bridgeCards.classList.remove("list-collapsed"); + } + }; + this._populateBridgeCards(); + this._updateConnectedBridges = () => { + for (const card of bridgeCards.querySelectorAll( + ".currently-connected" + )) { + card.classList.remove("currently-connected"); + } + if (this._currentBridge === "") { + return; + } + // Make sure we have the connected bridge in the list + this._populateBridgeCards(); + // At the moment, IDs do not have to be unique (and it is a concrete + // case also with built-in bridges!). E.g., one line for the IPv4 + // address and one for the IPv6 address, so use querySelectorAll + const cards = bridgeCards.querySelectorAll( + `[data-bridge-id="${this._currentBridge}"]` + ); + for (const card of cards) { + card.classList.add("currently-connected"); + } + const placeholder = document.createElement("span"); + bridgeCards.prepend(placeholder); + placeholder.replaceWith(...cards); + }; + try { + const { controller } = ChromeUtils.import( + "resource://torbutton/modules/tor-control-port.js", + {} + ); + // Avoid the cache because we set our custom event watcher, and at the + // moment, watchers cannot be removed from a controller. + controller(true).then(aController => { + this._controller = aController; + // Getting the circuits may be enough, if we have bootstrapped for a + // while, but at the beginning it gives many bridges as connected, + // because tor pokes all the bridges to find the best one. + // Also, watching circuit events does not work, at the moment, but in + // any case, checking the stream has the advantage that we can see if + // it really used for a connection, rather than tor having created + // this circuit to check if the bridge can be used. We do this by + // checking if the stream has SOCKS username, which actually contains + // the destination of the stream. + this._controller.watchEvent( + "STREAM", + event => + event.StreamStatus === "SUCCEEDED" && "SOCKS_USERNAME" in event, + async event => { + const circuitStatuses = await this._controller.getInfo( + "circuit-status" + ); + if (!circuitStatuses) { + return; + } + for (const status of circuitStatuses) { + if (status.id === event.CircuitID && status.circuit.length) { + // The id in the circuit begins with a $ sign + const bridgeId = status.circuit[0][0].substr(1); + if (bridgeId !== this._currentBridge) { + this._currentBridge = bridgeId; + this._updateConnectedBridges(); + } + break; + } + } + } + ); + }); + } catch (err) { + console.warn( + "We could not load torbutton, bridge statuses will not be updated", + err + ); + } + + // Add a new bridge + prefpane.querySelector(selectors.bridges.addHeader).textContent = + TorStrings.settings.bridgeAdd; + prefpane + .querySelector(selectors.bridges.addBuiltinLabel) + .setAttribute("value", TorStrings.settings.bridgeSelectBrowserBuiltin); + { + let button = prefpane.querySelector(selectors.bridges.addBuiltinButton); + button.setAttribute("label", TorStrings.settings.bridgeSelectBuiltin); + button.addEventListener("command", e => { + this.onAddBuiltinBridge(); + }); + } + prefpane + .querySelector(selectors.bridges.requestLabel) + .setAttribute("value", TorStrings.settings.bridgeRequestFromTorProject); + { + let button = prefpane.querySelector(selectors.bridges.requestButton); + button.setAttribute("label", TorStrings.settings.bridgeRequest); + button.addEventListener("command", e => { + this.onRequestBridge(); + }); + } + prefpane + .querySelector(selectors.bridges.enterLabel) + .setAttribute("value", TorStrings.settings.bridgeEnterKnown); + { + const button = prefpane.querySelector(selectors.bridges.enterButton); + button.setAttribute("label", TorStrings.settings.bridgeAddManually); + button.addEventListener("command", e => { + this.onAddBridgeManually(); + }); + } + + Services.obs.addObserver(this, TorConnectTopics.StateChange); + + // Advanced setup + prefpane.querySelector(selectors.advanced.header).innerText = + TorStrings.settings.advancedHeading; + prefpane.querySelector(selectors.advanced.label).textContent = + TorStrings.settings.advancedLabel; + { + let settingsButton = prefpane.querySelector(selectors.advanced.button); + settingsButton.setAttribute( + "label", + TorStrings.settings.advancedButton + ); + settingsButton.addEventListener("command", () => { + this.onAdvancedSettings(); + }); + } + + // Tor logs + prefpane + .querySelector(selectors.advanced.torLogsLabel) + .setAttribute("value", TorStrings.settings.showTorDaemonLogs); + let torLogsButton = prefpane.querySelector( + selectors.advanced.torLogsButton + ); + torLogsButton.setAttribute("label", TorStrings.settings.showLogs); + torLogsButton.addEventListener("command", () => { + this.onViewTorLogs(); + }); + }, + + init() { + this._populateXUL(); + + let onUnload = () => { + window.removeEventListener("unload", onUnload); + gConnectionPane.uninit(); + }; + window.addEventListener("unload", onUnload); + + window.addEventListener("resize", () => { + this._checkBridgeCardsHeight(); + }); + }, + + uninit() { + // unregister our observer topics + Services.obs.removeObserver(this, TorSettingsTopics.SettingChanged); + Services.obs.removeObserver(this, TorConnectTopics.StateChange); + + if (this._controller !== null) { + this._controller.close(); + this._controller = null; + } + }, + + // whether the page should be present in about:preferences + get enabled() { + return TorProtocolService.ownsTorDaemon; + }, + + // + // Callbacks + // + + observe(subject, topic, data) { + switch (topic) { + // triggered when a TorSettings param has changed + case TorSettingsTopics.SettingChanged: { + let obj = subject?.wrappedJSObject; + switch (data) { + case TorSettingsData.QuickStartEnabled: { + this._enableQuickstartCheckbox.checked = obj.value; + break; + } + } + break; + } + // triggered when tor connect state changes and we may + // need to update the messagebox + case TorConnectTopics.StateChange: { + this.onStateChange(); + break; + } + } + }, + + async onInternetTest() { + const mrpc = new MoatRPC(); + let status = null; + try { + await mrpc.init(); + status = await mrpc.testInternetConnection(); + } catch (err) { + console.log("Error while checking the Internet connection", err); + } finally { + mrpc.uninit(); + } + if (status) { + this._internetStatus = status.successful + ? InternetStatus.Online + : InternetStatus.Offline; + this._populateStatus(); + } + }, + + onStateChange() { + this._populateMessagebox(); + this._populateStatus(); + this._showAutoconfiguration(); + this._populateBridgeCards(); + }, + + onShowQr(bridgeString) { + const dialog = new BridgeQrDialog(); + dialog.openDialog(gSubDialog, bridgeString); + }, + + onCopyBridgeAddress(addressElem) { + let clipboard = Cc["@mozilla.org/widget/clipboardhelper;1"].getService( + Ci.nsIClipboardHelper + ); + clipboard.copyString(addressElem.value); + }, + + onRemoveAllBridges() { + TorSettings.bridges.enabled = false; + TorSettings.bridges.bridge_strings = ""; + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + }, + + onAddBuiltinBridge() { + let builtinBridgeDialog = new BuiltinBridgeDialog(); + + let sizeObserver = null; + { + let ds = document.querySelector("#dialogStack"); + let boxObserver; + boxObserver = new MutationObserver(() => { + let dialogBox = document.querySelector(".dialogBox"); + if (dialogBox) { + sizeObserver = new MutationObserver(mutations => { + for (const m of mutations) { + if (m.attributeName === "style") { + builtinBridgeDialog.resized(); + break; + } + } + }); + sizeObserver.observe(dialogBox, { attributes: true }); + boxObserver.disconnect(); + } + }); + boxObserver.observe(ds, { childList: true, subtree: true }); + } + + builtinBridgeDialog.openDialog(gSubDialog, aBridgeType => { + sizeObserver.disconnect(); + + if (!aBridgeType) { + TorSettings.bridges.enabled = false; + TorSettings.bridges.builtin_type = ""; + } else { + TorSettings.bridges.enabled = true; + TorSettings.bridges.source = TorBridgeSource.BuiltIn; + TorSettings.bridges.builtin_type = aBridgeType; + } + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + }); + }, + + // called when the request bridge button is activated + onRequestBridge() { + let requestBridgeDialog = new RequestBridgeDialog(); + requestBridgeDialog.openDialog(gSubDialog, aBridges => { + if (aBridges.length) { + let bridgeStrings = aBridges.join("\n"); + TorSettings.bridges.enabled = true; + TorSettings.bridges.source = TorBridgeSource.BridgeDB; + TorSettings.bridges.bridge_strings = bridgeStrings; + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + } else { + TorSettings.bridges.enabled = false; + } + }); + }, + + onAddBridgeManually() { + let provideBridgeDialog = new ProvideBridgeDialog(); + provideBridgeDialog.openDialog(gSubDialog, aBridgeString => { + if (aBridgeString.length) { + TorSettings.bridges.enabled = true; + TorSettings.bridges.source = TorBridgeSource.UserProvided; + TorSettings.bridges.bridge_strings = aBridgeString; + TorSettings.saveToPrefs(); + TorSettings.applySettings().then(result => { + this._populateBridgeCards(); + }); + } else { + TorSettings.bridges.enabled = false; + TorSettings.bridges.source = TorBridgeSource.Invalid; + } + }); + }, + + onAdvancedSettings() { + let connectionSettingsDialog = new ConnectionSettingsDialog(); + connectionSettingsDialog.openDialog(gSubDialog); + }, + + onViewTorLogs() { + let torLogDialog = new TorLogDialog(); + torLogDialog.openDialog(gSubDialog); + }, + }; + return retval; +})(); /* gConnectionPane */ + +function makeBridgeId(bridgeString) { + // JS uses UTF-16. While most of these emojis are surrogate pairs, a few + // ones fit one UTF-16 character. So we could not use neither indices, + // nor substr, nor some function to split the string. + const emojis = [ + "😄️", + "😒️", + "😉", + "😭️", + "😂️", + "😎️", + "🤩️", + "😘", + "😜️", + "😏️", + "😷", + "🤢", + "🤕", + "🤧", + "🥵", + "🥶", + "🥴", + "😵️", + "🤮️", + "🤑", + "🤔", + "🫢", + "🤐", + "😮‍💨", + "😐", + "🤤", + "😴", + "🤯", + "🤠", + "🥳", + "🥸", + "🤓", + "🧐", + "😨", + "😳", + "🥺", + "🤬", + "😈", + "👿", + "💀", + "💩", + "🤡", + "👺", + "👻", + "👽", + "🦴", + "🤖", + "😸", + "🙈", + "🙉", + "🙊", + "💋", + "💖", + "💯", + "💢", + "💧", + "💨", + "💭", + "💤", + "👋", + "👌", + "✌", + "👍", + "👎", + "🤛", + "🙌", + "💪", + "🙏", + "✍", + "🧠", + "👀", + "👂", + "👅", + "🦷", + "🐾", + "🐶", + "🦊", + "🦝", + "🐈", + "🦁", + "🐯", + "🐴", + "🦄", + "🦓", + "🐮", + "🐷", + "🐑", + "🐪", + "🐘", + "🐭", + "🐰", + "🦔", + "🦇", + "🐻", + "🐨", + "🐼", + "🐔", + "🦨", + "🦘", + "🐦", + "🐧", + "🦩", + "🦉", + "🦜", + "🪶", + "🐸", + "🐊", + "🐢", + "🦎", + "🐍", + "🦖", + "🦀", + "🐬", + "🐙", + "🐌", + "🐝", + "🐞", + "🌸", + "🌲", + "🌵", + "🍀", + "🍁", + "🍇", + "🍉", + "🍊", + "🍋", + "🍌", + "🍍", + "🍎", + "🥥", + "🍐", + "🍒", + "🍓", + "🫐", + "🥝", + "🥔", + "🥕", + "🧅", + "🌰", + "🍄", + "🍞", + "🥞", + "🧀", + "🍖", + "🍔", + "🍟", + "🍕", + "🥚", + "🍿", + "🧂", + "🍙", + "🍦", + "🍩", + "🍪", + "🎂", + "🍬", + "🍭", + "🥛", + "☕", + "🫖", + "🍾", + "🍷", + "🍹", + "🍺", + "🍴", + "🥄", + "🫙", + "🧭", + "🌋", + "🪵", + "🏡", + "🏢", + "🏰", + "⛲", + "⛺", + "🎡", + "🚂", + "🚘", + "🚜", + "🚲", + "🚔", + "🚨", + "⛽", + "🚥", + "🚧", + "⚓", + "⛵", + "🛟", + "🪂", + "🚀", + "⌛", + "⏰", + "🌂", + "🌞", + "🌙", + "🌟", + "⛅", + "⚡", + "🔥", + "🌊", + "🎃", + "🎈", + "🎉", + "✨", + "🎀", + "🎁", + "🏆", + "🏅", + "🔮", + "🪄", + "🎾", + "🎳", + "🎲", + "🎭", + "🎨", + "🧵", + "🎩", + "📢", + "🔔", + "🎵", + "🎤", + "🎧", + "🎷", + "🎸", + "🥁", + "🔋", + "🔌", + "💻", + "💾", + "💿", + "🎬", + "📺", + "📷", + "🎮", + "🧩", + "🔍", + "💡", + "📖", + "💰", + "💼", + "📈", + "📌", + "📎", + "🔒", + "🔑", + "🔧", + "🪛", + "🔩", + "🧲", + "🔬", + "🔭", + "📡", + "🚪", + "🪑", + "⛔", + "🚩", + ]; + + // FNV-1a implementation that is compatible with other languages + const prime = 0x01000193; + const offset = 0x811c9dc5; + let hash = offset; + const encoder = new TextEncoder(); + for (const charCode of encoder.encode(bridgeString)) { + hash = Math.imul(hash ^ charCode, prime); + } + + const hashBytes = [ + ((hash & 0x7f000000) >> 24) | (hash < 0 ? 0x80 : 0), + (hash & 0x00ff0000) >> 16, + (hash & 0x0000ff00) >> 8, + hash & 0x000000ff, + ]; + return hashBytes.map(b => emojis[b]); +} + +function parseBridgeLine(line) { + const re = /^([^\s]+\s+)?([0-9a-fA-F\.\[\]\:]+:[0-9]{1,5})\s*([0-9a-fA-F]{40})(\s+.+)?/; + const matches = line.match(re); + if (!matches) { + return null; + } + let bridge = { addr: matches[2] }; + if (matches[1] !== undefined) { + bridge.transport = matches[1].trim(); + } + if (matches[3] !== undefined) { + bridge.id = matches[3].toUpperCase(); + } + if (matches[4] !== undefined) { + bridge.args = matches[4].trim(); + } + return bridge; +} diff --git a/browser/components/torpreferences/content/connectionPane.xhtml b/browser/components/torpreferences/content/connectionPane.xhtml new file mode 100644 index 0000000000000..67f98685d8038 --- /dev/null +++ b/browser/components/torpreferences/content/connectionPane.xhtml @@ -0,0 +1,177 @@ +<!-- Tor panel --> + +<script type="application/javascript" + src="chrome://browser/content/torpreferences/connectionPane.js"/> +<html:template id="template-paneConnection"> + +<!-- Tor Connect Message Box --> +<groupbox data-category="paneConnection" hidden="true"> + <html:div id="torPreferences-connectMessageBox" + class="subcategory" + data-category="paneConnection" + hidden="true"> + <html:table> + <html:tr> + <html:td> + <html:div id="torPreferences-connectMessageBox-icon"/> + </html:td> + <html:td id="torPreferences-connectMessageBox-message"> + </html:td> + <html:td> + <html:button id="torPreferences-connectMessageBox-button"> + </html:button> + </html:td> + </html:tr> + </html:table> + </html:div> +</groupbox> + +<hbox id="torPreferencesCategory" + class="subcategory" + data-category="paneConnection" + hidden="true"> + <html:h1 id="torPreferences-header"/> +</hbox> + +<groupbox data-category="paneConnection" + hidden="true"> + <description flex="1"> + <html:span id="torPreferences-description" class="tail-with-learn-more"/> + <label id="torPreferences-learnMore" class="learnMore text-link" is="text-link"/> + </description> +</groupbox> + +<groupbox id="torPreferences-status-group" + data-category="paneConnection"> + <hbox id="torPreferences-status-box"> + <image id="torPreferences-status-internet-icon"/> + <html:span id="torPreferences-status-internet-label"/> + <button id="torPreferences-status-internet-test"/> + <image id="torPreferences-status-internet-statusIcon"/> + <html:span id="torPreferences-status-internet-status"/> + <image id="torPreferences-status-tor-icon"/> + <html:span id="torPreferences-status-tor-label"/> + <image id="torPreferences-status-tor-statusIcon"/> + <html:span id="torPreferences-status-tor-status"/> + </hbox> +</groupbox> + +<!-- Quickstart --> +<groupbox id="torPreferences-quickstart-group" + data-category="paneConnection" + hidden="true"> + <html:h2 id="torPreferences-quickstart-header"/> + <description flex="1"> + <html:span id="torPreferences-quickstart-description"/> + </description> + <checkbox id="torPreferences-quickstart-toggle"/> +</groupbox> + +<!-- Bridges --> +<hbox class="subcategory" + data-category="paneConnection" + hidden="true"> + <html:h1 id="torPreferences-bridges-header"/> +</hbox> +<groupbox id="torPreferences-bridges-group" + data-category="paneConnection" + hidden="true"> + <description flex="1"> + <html:span id="torPreferences-bridges-description" class="tail-with-learn-more"/> + <label id="torPreferences-bridges-learnMore" class="learnMore text-link" is="text-link"/> + </description> + <hbox align="center" id="torPreferences-bridges-locationGroup" hidden="true"> + <label id="torPreferences-bridges-locationLabel" + control="torPreferences-bridges-location"/> + <spacer flex="1"/> + <menulist id="torPreferences-bridges-location"> + <menupopup id="torPreferences-bridges-locationEntries"/> + </menulist> + <button id="torPreferences-bridges-buttonChooseBridgeForMe" class="torMarginFix primary"/> + </hbox> + <html:h2 id="torPreferences-currentBridges-header"> + <html:span id="torPreferences-currentBridges-headerText"/> + <html:input type="checkbox" id="torPreferences-currentBridges-switch" class="toggle-button"/> + </html:h2> + <menupopup id="torPreferences-bridgeCard-menu"/> + <vbox id="torPreferences-bridgeCard-template" class="torPreferences-bridgeCard"> + <hbox class="torPreferences-bridgeCard-heading"> + <html:div class="torPreferences-bridgeCard-id"/> + <html:div class="torPreferences-bridgeCard-headingAddr"/> + <html:div class="torPreferences-bridgeCard-buttons"> + <html:span class="torPreferences-bridgeCard-connectedBadge"> + <image class="torPreferences-bridgeCard-connectedIcon"/> + <html:span class="torPreferences-bridgeCard-connectedLabel"/> + </html:span> + <html:button class="torPreferences-bridgeCard-options stop-click"/> + </html:div> + </hbox> + <box class="torPreferences-bridgeCard-grid"> + <box class="torPreferences-bridgeCard-qrWrapper"> + <box class="torPreferences-bridgeCard-qr stop-click"> + <html:div class="torPreferences-bridgeCard-qrCode"/> + <html:div class="torPreferences-bridgeCard-qrOnionBox"/> + <html:div class="torPreferences-bridgeCard-qrOnion"/> + </box> + <html:div class="torPreferences-bridgeCard-filler"/> + </box> + <description class="torPreferences-bridgeCard-share"></description> + <hbox class="torPreferences-bridgeCard-addrBox"> + <html:input class="torPreferences-bridgeCard-addr torMarginFix stop-click" type="text" readonly="readonly"/> + </hbox> + <hbox class="torPreferences-bridgeCard-learnMoreBox" align="center"> + <label class="torPreferences-bridgeCard-learnMore learnMore text-link stop-click" is="text-link"/> + </hbox> + <hbox class="torPreferences-bridgeCard-copy" align="center"> + <button class="torPreferences-bridgeCard-copyButton stop-click"/> + </hbox> + </box> + </vbox> + <vbox id="torPreferences-currentBridges-cards"></vbox> + <vbox align="center"> + <button id="torPreferences-currentBridges-showAll"/> + <button id="torPreferences-currentBridges-removeAll" class="primary danger-button"/> + </vbox> + <html:h2 id="torPreferences-addBridge-header"></html:h2> + <hbox align="center"> + <label id="torPreferences-addBridge-labelBuiltinBridge"/> + <space flex="1"/> + <button id="torPreferences-addBridge-buttonBuiltinBridge" class="torMarginFix"/> + </hbox> + <hbox align="center"> + <label id="torPreferences-addBridge-labelRequestBridge"/> + <space flex="1"/> + <button id="torPreferences-addBridge-buttonRequestBridge" class="torMarginFix"/> + </hbox> + <hbox align="center"> + <label id="torPreferences-addBridge-labelEnterBridge"/> + <space flex="1"/> + <button id="torPreferences-addBridge-buttonEnterBridge" class="torMarginFix"/> + </hbox> +</groupbox> + +<!-- Advanced --> +<hbox class="subcategory" + data-category="paneConnection" + hidden="true"> + <html:h1 id="torPreferences-advanced-header"/> +</hbox> +<groupbox id="torPreferences-advanced-group" + data-category="paneConnection" + hidden="true"> + <box id="torPreferences-advanced-grid"> + <hbox id="torPreferences-advanced-hbox" align="center"> + <label id="torPreferences-advanced-label"/> + </hbox> + <hbox align="center"> + <button id="torPreferences-advanced-button"/> + </hbox> + <hbox id="torPreferences-torDaemon-hbox" align="center"> + <label id="torPreferences-torLogs"/> + </hbox> + <hbox align="center" data-subcategory="viewlogs"> + <button id="torPreferences-buttonTorLogs"/> + </hbox> + </box> +</groupbox> +</html:template> diff --git a/browser/components/torpreferences/content/connectionSettingsDialog.jsm b/browser/components/torpreferences/content/connectionSettingsDialog.jsm new file mode 100644 index 0000000000000..abc177c43f884 --- /dev/null +++ b/browser/components/torpreferences/content/connectionSettingsDialog.jsm @@ -0,0 +1,393 @@ +"use strict"; + +var EXPORTED_SYMBOLS = ["ConnectionSettingsDialog"]; + +const { TorSettings, TorProxyType } = ChromeUtils.import( + "resource:///modules/TorSettings.jsm" +); + +const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm"); + +class ConnectionSettingsDialog { + constructor() { + this._dialog = null; + this._useProxyCheckbox = null; + this._proxyTypeLabel = null; + this._proxyTypeMenulist = null; + this._proxyAddressLabel = null; + this._proxyAddressTextbox = null; + this._proxyPortLabel = null; + this._proxyPortTextbox = null; + this._proxyUsernameLabel = null; + this._proxyUsernameTextbox = null; + this._proxyPasswordLabel = null; + this._proxyPasswordTextbox = null; + this._useFirewallCheckbox = null; + this._allowedPortsLabel = null; + this._allowedPortsTextbox = null; + } + + static get selectors() { + return { + header: "#torPreferences-connection-header", + useProxyCheckbox: "checkbox#torPreferences-connection-toggleProxy", + proxyTypeLabel: "label#torPreferences-localProxy-type", + proxyTypeList: "menulist#torPreferences-localProxy-builtinList", + proxyAddressLabel: "label#torPreferences-localProxy-address", + proxyAddressTextbox: "input#torPreferences-localProxy-textboxAddress", + proxyPortLabel: "label#torPreferences-localProxy-port", + proxyPortTextbox: "input#torPreferences-localProxy-textboxPort", + proxyUsernameLabel: "label#torPreferences-localProxy-username", + proxyUsernameTextbox: "input#torPreferences-localProxy-textboxUsername", + proxyPasswordLabel: "label#torPreferences-localProxy-password", + proxyPasswordTextbox: "input#torPreferences-localProxy-textboxPassword", + useFirewallCheckbox: "checkbox#torPreferences-connection-toggleFirewall", + firewallAllowedPortsLabel: "label#torPreferences-connection-allowedPorts", + firewallAllowedPortsTextbox: + "input#torPreferences-connection-textboxAllowedPorts", + }; + } + + // disables the provided list of elements + _setElementsDisabled(elements, disabled) { + for (let currentElement of elements) { + currentElement.disabled = disabled; + } + } + + _populateXUL(window, aDialog) { + const selectors = ConnectionSettingsDialog.selectors; + + this._dialog = aDialog; + const dialogWin = this._dialog.parentElement; + dialogWin.setAttribute( + "title", + TorStrings.settings.connectionSettingsDialogTitle + ); + this._dialog.querySelector(selectors.header).textContent = + TorStrings.settings.connectionSettingsDialogHeader; + + // Local Proxy + this._useProxyCheckbox = this._dialog.querySelector( + selectors.useProxyCheckbox + ); + this._useProxyCheckbox.setAttribute( + "label", + TorStrings.settings.useLocalProxy + ); + this._useProxyCheckbox.addEventListener("command", e => { + const checked = this._useProxyCheckbox.checked; + this.onToggleProxy(checked); + }); + this._proxyTypeLabel = this._dialog.querySelector(selectors.proxyTypeLabel); + this._proxyTypeLabel.setAttribute("value", TorStrings.settings.proxyType); + + let mockProxies = [ + { + value: TorProxyType.Socks4, + label: TorStrings.settings.proxyTypeSOCKS4, + }, + { + value: TorProxyType.Socks5, + label: TorStrings.settings.proxyTypeSOCKS5, + }, + { value: TorProxyType.HTTPS, label: TorStrings.settings.proxyTypeHTTP }, + ]; + this._proxyTypeMenulist = this._dialog.querySelector( + selectors.proxyTypeList + ); + this._proxyTypeMenulist.addEventListener("command", e => { + const value = this._proxyTypeMenulist.value; + this.onSelectProxyType(value); + }); + for (let currentProxy of mockProxies) { + let menuEntry = window.document.createXULElement("menuitem"); + menuEntry.setAttribute("value", currentProxy.value); + menuEntry.setAttribute("label", currentProxy.label); + this._proxyTypeMenulist.querySelector("menupopup").appendChild(menuEntry); + } + + this._proxyAddressLabel = this._dialog.querySelector( + selectors.proxyAddressLabel + ); + this._proxyAddressLabel.setAttribute( + "value", + TorStrings.settings.proxyAddress + ); + this._proxyAddressTextbox = this._dialog.querySelector( + selectors.proxyAddressTextbox + ); + this._proxyAddressTextbox.setAttribute( + "placeholder", + TorStrings.settings.proxyAddressPlaceholder + ); + this._proxyAddressTextbox.addEventListener("blur", e => { + let value = this._proxyAddressTextbox.value.trim(); + let colon = value.lastIndexOf(":"); + if (colon != -1) { + let maybePort = parseInt(value.substr(colon + 1)); + if (!isNaN(maybePort) && maybePort > 0 && maybePort < 65536) { + this._proxyAddressTextbox.value = value.substr(0, colon); + this._proxyPortTextbox.value = maybePort; + } + } + }); + this._proxyPortLabel = this._dialog.querySelector(selectors.proxyPortLabel); + this._proxyPortLabel.setAttribute("value", TorStrings.settings.proxyPort); + this._proxyPortTextbox = this._dialog.querySelector( + selectors.proxyPortTextbox + ); + this._proxyUsernameLabel = this._dialog.querySelector( + selectors.proxyUsernameLabel + ); + this._proxyUsernameLabel.setAttribute( + "value", + TorStrings.settings.proxyUsername + ); + this._proxyUsernameTextbox = this._dialog.querySelector( + selectors.proxyUsernameTextbox + ); + this._proxyUsernameTextbox.setAttribute( + "placeholder", + TorStrings.settings.proxyUsernamePasswordPlaceholder + ); + this._proxyPasswordLabel = this._dialog.querySelector( + selectors.proxyPasswordLabel + ); + this._proxyPasswordLabel.setAttribute( + "value", + TorStrings.settings.proxyPassword + ); + this._proxyPasswordTextbox = this._dialog.querySelector( + selectors.proxyPasswordTextbox + ); + this._proxyPasswordTextbox.setAttribute( + "placeholder", + TorStrings.settings.proxyUsernamePasswordPlaceholder + ); + + this.onToggleProxy(false); + if (TorSettings.proxy.enabled) { + this.onToggleProxy(true); + this.onSelectProxyType(TorSettings.proxy.type); + this._proxyAddressTextbox.value = TorSettings.proxy.address; + this._proxyPortTextbox.value = TorSettings.proxy.port; + this._proxyUsernameTextbox.value = TorSettings.proxy.username; + this._proxyPasswordTextbox.value = TorSettings.proxy.password; + } + + // Local firewall + this._useFirewallCheckbox = this._dialog.querySelector( + selectors.useFirewallCheckbox + ); + this._useFirewallCheckbox.setAttribute( + "label", + TorStrings.settings.useFirewall + ); + this._useFirewallCheckbox.addEventListener("command", e => { + const checked = this._useFirewallCheckbox.checked; + this.onToggleFirewall(checked); + }); + this._allowedPortsLabel = this._dialog.querySelector( + selectors.firewallAllowedPortsLabel + ); + this._allowedPortsLabel.setAttribute( + "value", + TorStrings.settings.allowedPorts + ); + this._allowedPortsTextbox = this._dialog.querySelector( + selectors.firewallAllowedPortsTextbox + ); + this._allowedPortsTextbox.setAttribute( + "placeholder", + TorStrings.settings.allowedPortsPlaceholder + ); + + this.onToggleFirewall(false); + if (TorSettings.firewall.enabled) { + this.onToggleFirewall(true); + this._allowedPortsTextbox.value = TorSettings.firewall.allowed_ports.join( + ", " + ); + } + + this._dialog.addEventListener("dialogaccept", e => { + this._applySettings(); + }); + } + + // callback when proxy is toggled + onToggleProxy(enabled) { + this._useProxyCheckbox.checked = enabled; + let disabled = !enabled; + + this._setElementsDisabled( + [ + this._proxyTypeLabel, + this._proxyTypeMenulist, + this._proxyAddressLabel, + this._proxyAddressTextbox, + this._proxyPortLabel, + this._proxyPortTextbox, + this._proxyUsernameLabel, + this._proxyUsernameTextbox, + this._proxyPasswordLabel, + this._proxyPasswordTextbox, + ], + disabled + ); + if (enabled) { + this.onSelectProxyType(this._proxyTypeMenulist.value); + } + } + + // callback when proxy type is changed + onSelectProxyType(value) { + if (typeof value === "string") { + value = parseInt(value); + } + + this._proxyTypeMenulist.value = value; + switch (value) { + case TorProxyType.Invalid: { + this._setElementsDisabled( + [ + this._proxyAddressLabel, + this._proxyAddressTextbox, + this._proxyPortLabel, + this._proxyPortTextbox, + this._proxyUsernameLabel, + this._proxyUsernameTextbox, + this._proxyPasswordLabel, + this._proxyPasswordTextbox, + ], + true + ); // DISABLE + + this._proxyAddressTextbox.value = ""; + this._proxyPortTextbox.value = ""; + this._proxyUsernameTextbox.value = ""; + this._proxyPasswordTextbox.value = ""; + break; + } + case TorProxyType.Socks4: { + this._setElementsDisabled( + [ + this._proxyAddressLabel, + this._proxyAddressTextbox, + this._proxyPortLabel, + this._proxyPortTextbox, + ], + false + ); // ENABLE + this._setElementsDisabled( + [ + this._proxyUsernameLabel, + this._proxyUsernameTextbox, + this._proxyPasswordLabel, + this._proxyPasswordTextbox, + ], + true + ); // DISABLE + + this._proxyUsernameTextbox.value = ""; + this._proxyPasswordTextbox.value = ""; + break; + } + case TorProxyType.Socks5: + case TorProxyType.HTTPS: { + this._setElementsDisabled( + [ + this._proxyAddressLabel, + this._proxyAddressTextbox, + this._proxyPortLabel, + this._proxyPortTextbox, + this._proxyUsernameLabel, + this._proxyUsernameTextbox, + this._proxyPasswordLabel, + this._proxyPasswordTextbox, + ], + false + ); // ENABLE + break; + } + } + } + + // callback when firewall proxy is toggled + onToggleFirewall(enabled) { + this._useFirewallCheckbox.checked = enabled; + let disabled = !enabled; + + this._setElementsDisabled( + [this._allowedPortsLabel, this._allowedPortsTextbox], + disabled + ); + } + + // pushes settings from UI to tor + _applySettings() { + const type = this._useProxyCheckbox.checked + ? parseInt(this._proxyTypeMenulist.value) + : TorProxyType.Invalid; + const address = this._proxyAddressTextbox.value; + const port = this._proxyPortTextbox.value; + const username = this._proxyUsernameTextbox.value; + const password = this._proxyPasswordTextbox.value; + switch (type) { + case TorProxyType.Invalid: + TorSettings.proxy.enabled = false; + break; + case TorProxyType.Socks4: + TorSettings.proxy.enabled = true; + TorSettings.proxy.type = type; + TorSettings.proxy.address = address; + TorSettings.proxy.port = port; + break; + case TorProxyType.Socks5: + TorSettings.proxy.enabled = true; + TorSettings.proxy.type = type; + TorSettings.proxy.address = address; + TorSettings.proxy.port = port; + TorSettings.proxy.username = username; + TorSettings.proxy.password = password; + break; + case TorProxyType.HTTPS: + TorSettings.proxy.enabled = true; + TorSettings.proxy.type = type; + TorSettings.proxy.address = address; + TorSettings.proxy.port = port; + TorSettings.proxy.username = username; + TorSettings.proxy.password = password; + break; + } + + let portListString = this._useFirewallCheckbox.checked + ? this._allowedPortsTextbox.value + : ""; + if (portListString) { + TorSettings.firewall.enabled = true; + TorSettings.firewall.allowed_ports = portListString; + } else { + TorSettings.firewall.enabled = false; + } + + TorSettings.saveToPrefs(); + TorSettings.applySettings(); + } + + init(window, aDialog) { + // defer to later until firefox has populated the dialog with all our elements + window.setTimeout(() => { + this._populateXUL(window, aDialog); + }, 0); + } + + openDialog(gSubDialog) { + gSubDialog.open( + "chrome://browser/content/torpreferences/connectionSettingsDialog.xhtml", + { features: "resizable=yes" }, + this + ); + } +} diff --git a/browser/components/torpreferences/content/connectionSettingsDialog.xhtml b/browser/components/torpreferences/content/connectionSettingsDialog.xhtml new file mode 100644 index 0000000000000..88aa979256f02 --- /dev/null +++ b/browser/components/torpreferences/content/connectionSettingsDialog.xhtml @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?> +<?xml-stylesheet href="chrome://browser/content/torpreferences/torPreferences.css"?> + +<window type="child" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> +<dialog id="torPreferences-connection-dialog" + buttons="accept,cancel"> + <html:h3 id="torPreferences-connection-header">​</html:h3> + <box id="torPreferences-connection-grid"> + <!-- Local Proxy --> + <hbox class="torPreferences-connection-checkbox-container"> + <checkbox id="torPreferences-connection-toggleProxy" label="​"/> + </hbox> + <hbox class="indent" align="center"> + <label id="torPreferences-localProxy-type"/> + </hbox> + <hbox align="center"> + <spacer flex="1"/> + <menulist id="torPreferences-localProxy-builtinList" class="torMarginFix"> + <menupopup/> + </menulist> + </hbox> + <hbox class="indent" align="center"> + <label id="torPreferences-localProxy-address"/> + </hbox> + <hbox align="center"> + <html:input id="torPreferences-localProxy-textboxAddress" type="text" class="torMarginFix"/> + <label id="torPreferences-localProxy-port"/> + <!-- proxy-port-input class style pulled from preferences.css and used in the vanilla proxy setup menu --> + <html:input id="torPreferences-localProxy-textboxPort" class="proxy-port-input torMarginFix" hidespinbuttons="true" type="number" min="0" max="65535" maxlength="5"/> + </hbox> + <hbox class="indent" align="center"> + <label id="torPreferences-localProxy-username"/> + </hbox> + <hbox align="center"> + <html:input id="torPreferences-localProxy-textboxUsername" type="text" class="torMarginFix"/> + <label id="torPreferences-localProxy-password"/> + <html:input id="torPreferences-localProxy-textboxPassword" class="torMarginFix" type="password"/> + </hbox> + <!-- Firewall --> + <hbox class="torPreferences-connection-checkbox-container"> + <checkbox id="torPreferences-connection-toggleFirewall" label="​"/> + </hbox> + <hbox class="indent" align="center"> + <label id="torPreferences-connection-allowedPorts"/> + </hbox> + <hbox align="center"> + <html:input id="torPreferences-connection-textboxAllowedPorts" type="text" class="torMarginFix" value="80,443"/> + </hbox> + </box> + <script type="application/javascript"><![CDATA[ + "use strict"; + + let connectionSettingsDialog = window.arguments[0]; + let dialog = document.getElementById("torPreferences-connection-dialog"); + connectionSettingsDialog.init(window, dialog); + ]]></script> +</dialog> +</window> diff --git a/browser/components/torpreferences/content/network.svg b/browser/components/torpreferences/content/network.svg new file mode 100644 index 0000000000000..e1689b5e6d649 --- /dev/null +++ b/browser/components/torpreferences/content/network.svg @@ -0,0 +1,6 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm2.447 1.75a6.255 6.255 0 0 1 3.756 5.125l-2.229 0A9.426 9.426 0 0 0 10.54 2.75l.407 0zm-2.049 0a8.211 8.211 0 0 1 2.321 5.125l-5.438 0A8.211 8.211 0 0 1 8.102 2.75l.796 0zm-2.846 0 .408 0a9.434 9.434 0 0 0-1.934 5.125l-2.229 0A6.254 6.254 0 0 1 6.052 2.75zm0 11.5a6.252 6.252 0 0 1-3.755-5.125l2.229 0A9.426 9.426 0 0 0 6.46 14.25l-.408 0zm2.05 0a8.211 8.211 0 0 1-2.321-5.125l5.437 0a8.211 8.211 0 0 1-2.321 5.125l-.795 0zm2.846 0-.40 [...] +</svg> diff --git a/browser/components/torpreferences/content/provideBridgeDialog.jsm b/browser/components/torpreferences/content/provideBridgeDialog.jsm new file mode 100644 index 0000000000000..b73a6f533afa6 --- /dev/null +++ b/browser/components/torpreferences/content/provideBridgeDialog.jsm @@ -0,0 +1,69 @@ +"use strict"; + +var EXPORTED_SYMBOLS = ["ProvideBridgeDialog"]; + +const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm"); + +const { TorSettings, TorBridgeSource } = ChromeUtils.import( + "resource:///modules/TorSettings.jsm" +); + +class ProvideBridgeDialog { + constructor() { + this._dialog = null; + this._textarea = null; + this._bridgeString = ""; + } + + static get selectors() { + return { + header: "#torPreferences-provideBridge-header", + textarea: "#torPreferences-provideBridge-textarea", + }; + } + + _populateXUL(aDialog) { + const selectors = ProvideBridgeDialog.selectors; + + this._dialog = aDialog; + const dialogWin = this._dialog.parentElement; + dialogWin.setAttribute("title", TorStrings.settings.provideBridgeTitle); + this._dialog.querySelector(selectors.header).textContent = + TorStrings.settings.provideBridgeHeader; + this._textarea = this._dialog.querySelector(selectors.textarea); + this._textarea.setAttribute( + "placeholder", + TorStrings.settings.provideBridgePlaceholder + ); + if ( + TorSettings.bridges.enabled && + TorSettings.bridges.source == TorBridgeSource.UserProvided + ) { + this._textarea.value = TorSettings.bridges.bridge_strings.join("\n"); + } + + this._dialog.addEventListener("dialogaccept", e => { + this._bridgeString = this._textarea.value; + }); + } + + init(window, aDialog) { + // defer to later until firefox has populated the dialog with all our elements + window.setTimeout(() => { + this._populateXUL(aDialog); + }, 0); + } + + openDialog(gSubDialog, aCloseCallback) { + gSubDialog.open( + "chrome://browser/content/torpreferences/provideBridgeDialog.xhtml", + { + features: "resizable=yes", + closingCallback: () => { + aCloseCallback(this._bridgeString); + }, + }, + this + ); + } +} diff --git a/browser/components/torpreferences/content/provideBridgeDialog.xhtml b/browser/components/torpreferences/content/provideBridgeDialog.xhtml new file mode 100644 index 0000000000000..28d19cadaf9c9 --- /dev/null +++ b/browser/components/torpreferences/content/provideBridgeDialog.xhtml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?> +<?xml-stylesheet href="chrome://browser/content/torpreferences/torPreferences.css"?> + +<window type="child" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> +<dialog id="torPreferences-provideBridge-dialog" + buttons="help,accept,cancel"> + <html:h3 id="torPreferences-provideBridge-header">​</html:h3> + <html:textarea id="torPreferences-provideBridge-textarea" multiline="true" rows="3"/> + <script type="application/javascript"><![CDATA[ + "use strict"; + + let provideBridgeDialog = window.arguments[0]; + let dialog = document.getElementById("torPreferences-provideBridge-dialog"); + provideBridgeDialog.init(window, dialog); + ]]></script> +</dialog> +</window> diff --git a/browser/components/torpreferences/content/requestBridgeDialog.jsm b/browser/components/torpreferences/content/requestBridgeDialog.jsm index 44ae11762def8..f14bbdcbbb448 100644 --- a/browser/components/torpreferences/content/requestBridgeDialog.jsm +++ b/browser/components/torpreferences/content/requestBridgeDialog.jsm @@ -9,7 +9,7 @@ class RequestBridgeDialog { constructor() { this._dialog = null; this._submitButton = null; - this._dialogDescription = null; + this._dialogHeader = null; this._captchaImage = null; this._captchaEntryTextbox = null; this._captchaRefreshButton = null; @@ -22,7 +22,7 @@ class RequestBridgeDialog { return { submitButton: "accept" /* not really a selector but a key for dialog's getButton */, - dialogDescription: "description#torPreferences-requestBridge-description", + dialogHeader: "h3#torPreferences-requestBridge-header", captchaImage: "image#torPreferences-requestBridge-captchaImage", captchaEntryTextbox: "input#torPreferences-requestBridge-captchaTextbox", refreshCaptchaButton: @@ -34,7 +34,7 @@ class RequestBridgeDialog { }; } - _populateXUL(dialog) { + _populateXUL(window, dialog) { const selectors = RequestBridgeDialog.selectors; this._dialog = dialog; @@ -66,12 +66,15 @@ class RequestBridgeDialog { e.preventDefault(); this.onSubmitCaptcha(); }); + this._dialog.addEventListener("dialoghelp", e => { + window.top.openTrustedLinkIn( + "https://tb-manual.torproject.org/bridges/", + "tab" + ); + }); - this._dialogDescription = this._dialog.querySelector( - selectors.dialogDescription - ); - this._dialogDescription.textContent = - TorStrings.settings.contactingBridgeDB; + this._dialogHeader = this._dialog.querySelector(selectors.dialogHeader); + this._dialogHeader.textContent = TorStrings.settings.contactingBridgeDB; this._captchaImage = this._dialog.querySelector(selectors.captchaImage); @@ -115,7 +118,7 @@ class RequestBridgeDialog { _setcaptchaImage(uri) { if (uri != this._captchaImage.src) { this._captchaImage.src = uri; - this._dialogDescription.textContent = TorStrings.settings.solveTheCaptcha; + this._dialogHeader.textContent = TorStrings.settings.solveTheCaptcha; this._setUIDisabled(false); this._captchaEntryTextbox.focus(); this._captchaEntryTextbox.select(); @@ -135,7 +138,7 @@ class RequestBridgeDialog { init(window, dialog) { // defer to later until firefox has populated the dialog with all our elements window.setTimeout(() => { - this._populateXUL(dialog); + this._populateXUL(window, dialog); }, 0); } @@ -176,15 +179,14 @@ class RequestBridgeDialog { this._bridges = []; this._setUIDisabled(false); this._incorrectCaptchaHbox.style.visibility = "visible"; - console.log(eError); + console.log(aError); }); } onRefreshCaptcha() { this._setUIDisabled(true); this._captchaImage.src = ""; - this._dialogDescription.textContent = - TorStrings.settings.contactingBridgeDB; + this._dialogHeader.textContent = TorStrings.settings.contactingBridgeDB; this._captchaEntryTextbox.value = ""; this._incorrectCaptchaHbox.style.visibility = "hidden"; @@ -201,9 +203,9 @@ class RequestBridgeDialog { closingCallback: () => { this.close(); aCloseCallback(this._bridges); - } + }, }, - this, + this ); } } diff --git a/browser/components/torpreferences/content/requestBridgeDialog.xhtml b/browser/components/torpreferences/content/requestBridgeDialog.xhtml index 64c4507807fbf..b7286528a8a5a 100644 --- a/browser/components/torpreferences/content/requestBridgeDialog.xhtml +++ b/browser/components/torpreferences/content/requestBridgeDialog.xhtml @@ -7,11 +7,11 @@ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <dialog id="torPreferences-requestBridge-dialog" - buttons="accept,cancel"> + buttons="help,accept,cancel"> <!-- ok, so ​ is a zero-width space. We need to have *something* in the innerText so that XUL knows how tall the - description node is so that it can determine how large to make the dialog element's inner draw area. If we have - nothing in the innerText, then it collapse to 0 height, and the contents of the dialog ends up partially hidden >:( --> - <description id="torPreferences-requestBridge-description">​</description> + title node is so that it can determine how large to make the dialog element's inner draw area. If we have nothing + in the innerText, then it collapse to 0 height, and the contents of the dialog ends up partially hidden >:( --> + <html:h3 id="torPreferences-requestBridge-header">​</html:h3> <!-- init to transparent 400x125 png --> <image id="torPreferences-requestBridge-captchaImage" flex="1"/> <hbox id="torPreferences-requestBridge-inputHbox"> @@ -32,4 +32,4 @@ requestBridgeDialog.init(window, dialog); ]]></script> </dialog> -</window> \ No newline at end of file +</window> diff --git a/browser/components/torpreferences/content/torLogDialog.jsm b/browser/components/torpreferences/content/torLogDialog.jsm index ecc684d878c20..94a57b9b165ee 100644 --- a/browser/components/torpreferences/content/torLogDialog.jsm +++ b/browser/components/torpreferences/content/torLogDialog.jsm @@ -2,6 +2,10 @@ var EXPORTED_SYMBOLS = ["TorLogDialog"]; +const { setTimeout, clearTimeout } = ChromeUtils.import( + "resource://gre/modules/Timer.jsm" +); + const { TorProtocolService } = ChromeUtils.import( "resource:///modules/TorProtocolService.jsm" ); @@ -12,6 +16,7 @@ class TorLogDialog { this._dialog = null; this._logTextarea = null; this._copyLogButton = null; + this._restoreButtonTimeout = null; } static get selectors() { @@ -36,6 +41,19 @@ class TorLogDialog { this._copyLogButton.setAttribute("label", TorStrings.settings.copyLog); this._copyLogButton.addEventListener("command", () => { this.copyTorLog(); + const label = this._copyLogButton.querySelector("label"); + label.setAttribute("value", TorStrings.settings.copied); + this._copyLogButton.classList.add("primary"); + + const RESTORE_TIME = 1200; + if (this._restoreButtonTimeout !== null) { + clearTimeout(this._restoreButtonTimeout); + } + this._restoreButtonTimeout = setTimeout(() => { + label.setAttribute("value", TorStrings.settings.copyLog); + this._copyLogButton.classList.remove("primary"); + this._restoreButtonTimeout = null; + }, RESTORE_TIME); }); this._logTextarea.value = TorProtocolService.getLog(); diff --git a/browser/components/torpreferences/content/torPane.js b/browser/components/torpreferences/content/torPane.js deleted file mode 100644 index 58eec7ff74aa6..0000000000000 --- a/browser/components/torpreferences/content/torPane.js +++ /dev/null @@ -1,940 +0,0 @@ -"use strict"; - -/* global Services */ - -const { TorSettings, TorSettingsTopics, TorSettingsData, TorBridgeSource, TorBuiltinBridgeTypes, TorProxyType } = ChromeUtils.import( - "resource:///modules/TorSettings.jsm" -); - -const { TorProtocolService } = ChromeUtils.import( - "resource:///modules/TorProtocolService.jsm" -); - -const { TorConnect, TorConnectTopics, TorConnectState } = ChromeUtils.import( - "resource:///modules/TorConnect.jsm" -); - -const { TorLogDialog } = ChromeUtils.import( - "chrome://browser/content/torpreferences/torLogDialog.jsm" -); - -const { RequestBridgeDialog } = ChromeUtils.import( - "chrome://browser/content/torpreferences/requestBridgeDialog.jsm" -); - -ChromeUtils.defineModuleGetter( - this, - "TorStrings", - "resource:///modules/TorStrings.jsm" -); - -/* - Tor Pane - - Code for populating the XUL in about:preferences#tor, handling input events, interfacing with tor-launcher -*/ -const gTorPane = (function() { - /* CSS selectors for all of the Tor Network DOM elements we need to access */ - const selectors = { - category: { - title: "label#torPreferences-labelCategory", - }, - messageBox: { - box: "div#torPreferences-connectMessageBox", - message: "td#torPreferences-connectMessageBox-message", - button: "button#torPreferences-connectMessageBox-button", - }, - torPreferences: { - header: "h1#torPreferences-header", - description: "span#torPreferences-description", - learnMore: "label#torPreferences-learnMore", - }, - quickstart: { - header: "h2#torPreferences-quickstart-header", - description: "span#torPreferences-quickstart-description", - enableQuickstartCheckbox: "checkbox#torPreferences-quickstart-toggle", - }, - bridges: { - header: "h2#torPreferences-bridges-header", - description: "span#torPreferences-bridges-description", - learnMore: "label#torPreferences-bridges-learnMore", - useBridgeCheckbox: "checkbox#torPreferences-bridges-toggle", - bridgeSelectionRadiogroup: - "radiogroup#torPreferences-bridges-bridgeSelection", - builtinBridgeOption: "radio#torPreferences-bridges-radioBuiltin", - builtinBridgeList: "menulist#torPreferences-bridges-builtinList", - requestBridgeOption: "radio#torPreferences-bridges-radioRequestBridge", - requestBridgeButton: "button#torPreferences-bridges-buttonRequestBridge", - requestBridgeTextarea: - "textarea#torPreferences-bridges-textareaRequestBridge", - provideBridgeOption: "radio#torPreferences-bridges-radioProvideBridge", - provideBridgeDescription: - "description#torPreferences-bridges-descriptionProvideBridge", - provideBridgeTextarea: - "textarea#torPreferences-bridges-textareaProvideBridge", - }, - advanced: { - header: "h2#torPreferences-advanced-header", - description: "span#torPreferences-advanced-description", - learnMore: "label#torPreferences-advanced-learnMore", - useProxyCheckbox: "checkbox#torPreferences-advanced-toggleProxy", - proxyTypeLabel: "label#torPreferences-localProxy-type", - proxyTypeList: "menulist#torPreferences-localProxy-builtinList", - proxyAddressLabel: "label#torPreferences-localProxy-address", - proxyAddressTextbox: "input#torPreferences-localProxy-textboxAddress", - proxyPortLabel: "label#torPreferences-localProxy-port", - proxyPortTextbox: "input#torPreferences-localProxy-textboxPort", - proxyUsernameLabel: "label#torPreferences-localProxy-username", - proxyUsernameTextbox: "input#torPreferences-localProxy-textboxUsername", - proxyPasswordLabel: "label#torPreferences-localProxy-password", - proxyPasswordTextbox: "input#torPreferences-localProxy-textboxPassword", - useFirewallCheckbox: "checkbox#torPreferences-advanced-toggleFirewall", - firewallAllowedPortsLabel: "label#torPreferences-advanced-allowedPorts", - firewallAllowedPortsTextbox: - "input#torPreferences-advanced-textboxAllowedPorts", - torLogsLabel: "label#torPreferences-torLogs", - torLogsButton: "button#torPreferences-buttonTorLogs", - }, - }; /* selectors */ - - let retval = { - // cached frequently accessed DOM elements - _messageBox: null, - _messageBoxMessage: null, - _messageBoxButton: null, - _enableQuickstartCheckbox: null, - _useBridgeCheckbox: null, - _bridgeSelectionRadiogroup: null, - _builtinBridgeOption: null, - _builtinBridgeMenulist: null, - _requestBridgeOption: null, - _requestBridgeButton: null, - _requestBridgeTextarea: null, - _provideBridgeOption: null, - _provideBridgeTextarea: null, - _useProxyCheckbox: null, - _proxyTypeLabel: null, - _proxyTypeMenulist: null, - _proxyAddressLabel: null, - _proxyAddressTextbox: null, - _proxyPortLabel: null, - _proxyPortTextbox: null, - _proxyUsernameLabel: null, - _proxyUsernameTextbox: null, - _proxyPasswordLabel: null, - _proxyPasswordTextbox: null, - _useFirewallCheckbox: null, - _allowedPortsLabel: null, - _allowedPortsTextbox: null, - - // tor network settings - _bridgeSettings: null, - _proxySettings: null, - _firewallSettings: null, - - // disables the provided list of elements - _setElementsDisabled(elements, disabled) { - for (let currentElement of elements) { - currentElement.disabled = disabled; - } - }, - - // populate xul with strings and cache the relevant elements - _populateXUL() { - // saves tor settings to disk when navigate away from about:preferences - window.addEventListener("blur", val => { - TorProtocolService.flushSettings(); - }); - - document - .querySelector(selectors.category.title) - .setAttribute("value", TorStrings.settings.categoryTitle); - - let prefpane = document.getElementById("mainPrefPane"); - - // 'Connect to Tor' Message Bar - - this._messageBox = prefpane.querySelector(selectors.messageBox.box); - this._messageBoxMessage = prefpane.querySelector(selectors.messageBox.message); - this._messageBoxButton = prefpane.querySelector(selectors.messageBox.button); - // wire up connect button - this._messageBoxButton.addEventListener("click", () => { - TorConnect.beginBootstrap(); - TorConnect.openTorConnect(); - }); - - this._populateMessagebox = () => { - if (TorConnect.shouldShowTorConnect && - TorConnect.state === TorConnectState.Configuring) { - // set messagebox style and text - if (TorProtocolService.torBootstrapErrorOccurred()) { - this._messageBox.parentNode.style.display = null; - this._messageBox.className = "error"; - this._messageBoxMessage.innerText = TorStrings.torConnect.tryAgainMessage; - this._messageBoxButton.innerText = TorStrings.torConnect.tryAgain; - } else { - this._messageBox.parentNode.style.display = null; - this._messageBox.className = "warning"; - this._messageBoxMessage.innerText = TorStrings.torConnect.connectMessage; - this._messageBoxButton.innerText = TorStrings.torConnect.torConnectButton; - } - } else { - // we need to explicitly hide the groupbox, as switching between - // the tor pane and other panes will 'unhide' (via the 'hidden' - // attribute) the groupbox, offsetting all of the content down - // by the groupbox's margin (even if content is 0 height) - this._messageBox.parentNode.style.display = "none"; - this._messageBox.className = "hidden"; - this._messageBoxMessage.innerText = ""; - this._messageBoxButton.innerText = ""; - } - } - this._populateMessagebox(); - Services.obs.addObserver(this, TorConnectTopics.StateChange); - - // update the messagebox whenever we come back to the page - window.addEventListener("focus", val => { - this._populateMessagebox(); - }); - - // Heading - prefpane.querySelector(selectors.torPreferences.header).innerText = - TorStrings.settings.torPreferencesHeading; - prefpane.querySelector(selectors.torPreferences.description).textContent = - TorStrings.settings.torPreferencesDescription; - { - let learnMore = prefpane.querySelector( - selectors.torPreferences.learnMore - ); - learnMore.setAttribute("value", TorStrings.settings.learnMore); - learnMore.setAttribute( - "href", - TorStrings.settings.learnMoreTorBrowserURL - ); - } - - // Quickstart - prefpane.querySelector(selectors.quickstart.header).innerText = - TorStrings.settings.quickstartHeading; - prefpane.querySelector(selectors.quickstart.description).textContent = - TorStrings.settings.quickstartDescription; - - this._enableQuickstartCheckbox = prefpane.querySelector( - selectors.quickstart.enableQuickstartCheckbox - ); - this._enableQuickstartCheckbox.setAttribute( - "label", - TorStrings.settings.quickstartCheckbox - ); - this._enableQuickstartCheckbox.addEventListener("command", e => { - const checked = this._enableQuickstartCheckbox.checked; - TorSettings.quickstart.enabled = checked; - TorSettings.saveToPrefs().applySettings(); - }); - this._enableQuickstartCheckbox.checked = TorSettings.quickstart.enabled; - Services.obs.addObserver(this, TorSettingsTopics.SettingChanged); - - // Bridge setup - prefpane.querySelector(selectors.bridges.header).innerText = - TorStrings.settings.bridgesHeading; - prefpane.querySelector(selectors.bridges.description).textContent = - TorStrings.settings.bridgesDescription; - { - let learnMore = prefpane.querySelector(selectors.bridges.learnMore); - learnMore.setAttribute("value", TorStrings.settings.learnMore); - learnMore.setAttribute("href", TorStrings.settings.learnMoreBridgesURL); - } - - this._useBridgeCheckbox = prefpane.querySelector( - selectors.bridges.useBridgeCheckbox - ); - this._useBridgeCheckbox.setAttribute( - "label", - TorStrings.settings.useBridge - ); - this._useBridgeCheckbox.addEventListener("command", e => { - const checked = this._useBridgeCheckbox.checked; - gTorPane.onToggleBridge(checked).onUpdateBridgeSettings(); - }); - this._bridgeSelectionRadiogroup = prefpane.querySelector( - selectors.bridges.bridgeSelectionRadiogroup - ); - this._bridgeSelectionRadiogroup.value = TorBridgeSource.BuiltIn; - this._bridgeSelectionRadiogroup.addEventListener("command", e => { - const value = this._bridgeSelectionRadiogroup.value; - gTorPane.onSelectBridgeOption(value).onUpdateBridgeSettings(); - }); - - // Builtin bridges - this._builtinBridgeOption = prefpane.querySelector( - selectors.bridges.builtinBridgeOption - ); - this._builtinBridgeOption.setAttribute( - "label", - TorStrings.settings.selectBridge - ); - this._builtinBridgeOption.setAttribute("value", TorBridgeSource.BuiltIn); - this._builtinBridgeMenulist = prefpane.querySelector( - selectors.bridges.builtinBridgeList - ); - this._builtinBridgeMenulist.addEventListener("command", e => { - gTorPane.onUpdateBridgeSettings(); - }); - - // Request bridge - this._requestBridgeOption = prefpane.querySelector( - selectors.bridges.requestBridgeOption - ); - this._requestBridgeOption.setAttribute( - "label", - TorStrings.settings.requestBridgeFromTorProject - ); - this._requestBridgeOption.setAttribute("value", TorBridgeSource.BridgeDB); - this._requestBridgeButton = prefpane.querySelector( - selectors.bridges.requestBridgeButton - ); - this._requestBridgeButton.setAttribute( - "label", - TorStrings.settings.requestNewBridge - ); - this._requestBridgeButton.addEventListener("command", () => - gTorPane.onRequestBridge() - ); - this._requestBridgeTextarea = prefpane.querySelector( - selectors.bridges.requestBridgeTextarea - ); - - // Provide a bridge - this._provideBridgeOption = prefpane.querySelector( - selectors.bridges.provideBridgeOption - ); - this._provideBridgeOption.setAttribute( - "label", - TorStrings.settings.provideBridge - ); - this._provideBridgeOption.setAttribute( - "value", - TorBridgeSource.UserProvided - ); - prefpane.querySelector( - selectors.bridges.provideBridgeDescription - ).textContent = TorStrings.settings.provideBridgeDirections; - this._provideBridgeTextarea = prefpane.querySelector( - selectors.bridges.provideBridgeTextarea - ); - this._provideBridgeTextarea.setAttribute( - "placeholder", - TorStrings.settings.provideBridgePlaceholder - ); - this._provideBridgeTextarea.addEventListener("blur", () => { - gTorPane.onUpdateBridgeSettings(); - }); - - // Advanced setup - prefpane.querySelector(selectors.advanced.header).innerText = - TorStrings.settings.advancedHeading; - prefpane.querySelector(selectors.advanced.description).textContent = - TorStrings.settings.advancedDescription; - { - let learnMore = prefpane.querySelector(selectors.advanced.learnMore); - learnMore.setAttribute("value", TorStrings.settings.learnMore); - learnMore.setAttribute( - "href", - TorStrings.settings.learnMoreNetworkSettingsURL - ); - } - - // Local Proxy - this._useProxyCheckbox = prefpane.querySelector( - selectors.advanced.useProxyCheckbox - ); - this._useProxyCheckbox.setAttribute( - "label", - TorStrings.settings.useLocalProxy - ); - this._useProxyCheckbox.addEventListener("command", e => { - const checked = this._useProxyCheckbox.checked; - gTorPane.onToggleProxy(checked).onUpdateProxySettings(); - }); - this._proxyTypeLabel = prefpane.querySelector( - selectors.advanced.proxyTypeLabel - ); - this._proxyTypeLabel.setAttribute("value", TorStrings.settings.proxyType); - - let mockProxies = [ - { - value: TorProxyType.Socks4, - label: TorStrings.settings.proxyTypeSOCKS4, - }, - { - value: TorProxyType.Socks5, - label: TorStrings.settings.proxyTypeSOCKS5, - }, - { value: TorProxyType.HTTPS, label: TorStrings.settings.proxyTypeHTTP }, - ]; - this._proxyTypeMenulist = prefpane.querySelector( - selectors.advanced.proxyTypeList - ); - this._proxyTypeMenulist.addEventListener("command", e => { - const value = this._proxyTypeMenulist.value; - gTorPane.onSelectProxyType(value).onUpdateProxySettings(); - }); - for (let currentProxy of mockProxies) { - let menuEntry = document.createXULElement("menuitem"); - menuEntry.setAttribute("value", currentProxy.value); - menuEntry.setAttribute("label", currentProxy.label); - this._proxyTypeMenulist - .querySelector("menupopup") - .appendChild(menuEntry); - } - - this._proxyAddressLabel = prefpane.querySelector( - selectors.advanced.proxyAddressLabel - ); - this._proxyAddressLabel.setAttribute( - "value", - TorStrings.settings.proxyAddress - ); - this._proxyAddressTextbox = prefpane.querySelector( - selectors.advanced.proxyAddressTextbox - ); - this._proxyAddressTextbox.setAttribute( - "placeholder", - TorStrings.settings.proxyAddressPlaceholder - ); - this._proxyAddressTextbox.addEventListener("blur", () => { - gTorPane.onUpdateProxySettings(); - }); - this._proxyPortLabel = prefpane.querySelector( - selectors.advanced.proxyPortLabel - ); - this._proxyPortLabel.setAttribute("value", TorStrings.settings.proxyPort); - this._proxyPortTextbox = prefpane.querySelector( - selectors.advanced.proxyPortTextbox - ); - this._proxyPortTextbox.addEventListener("blur", () => { - gTorPane.onUpdateProxySettings(); - }); - this._proxyUsernameLabel = prefpane.querySelector( - selectors.advanced.proxyUsernameLabel - ); - this._proxyUsernameLabel.setAttribute( - "value", - TorStrings.settings.proxyUsername - ); - this._proxyUsernameTextbox = prefpane.querySelector( - selectors.advanced.proxyUsernameTextbox - ); - this._proxyUsernameTextbox.setAttribute( - "placeholder", - TorStrings.settings.proxyUsernamePasswordPlaceholder - ); - this._proxyUsernameTextbox.addEventListener("blur", () => { - gTorPane.onUpdateProxySettings(); - }); - this._proxyPasswordLabel = prefpane.querySelector( - selectors.advanced.proxyPasswordLabel - ); - this._proxyPasswordLabel.setAttribute( - "value", - TorStrings.settings.proxyPassword - ); - this._proxyPasswordTextbox = prefpane.querySelector( - selectors.advanced.proxyPasswordTextbox - ); - this._proxyPasswordTextbox.setAttribute( - "placeholder", - TorStrings.settings.proxyUsernamePasswordPlaceholder - ); - this._proxyPasswordTextbox.addEventListener("blur", () => { - gTorPane.onUpdateProxySettings(); - }); - - // Local firewall - this._useFirewallCheckbox = prefpane.querySelector( - selectors.advanced.useFirewallCheckbox - ); - this._useFirewallCheckbox.setAttribute( - "label", - TorStrings.settings.useFirewall - ); - this._useFirewallCheckbox.addEventListener("command", e => { - const checked = this._useFirewallCheckbox.checked; - gTorPane.onToggleFirewall(checked).onUpdateFirewallSettings(); - }); - this._allowedPortsLabel = prefpane.querySelector( - selectors.advanced.firewallAllowedPortsLabel - ); - this._allowedPortsLabel.setAttribute( - "value", - TorStrings.settings.allowedPorts - ); - this._allowedPortsTextbox = prefpane.querySelector( - selectors.advanced.firewallAllowedPortsTextbox - ); - this._allowedPortsTextbox.setAttribute( - "placeholder", - TorStrings.settings.allowedPortsPlaceholder - ); - this._allowedPortsTextbox.addEventListener("blur", () => { - gTorPane.onUpdateFirewallSettings(); - }); - - // Tor logs - prefpane - .querySelector(selectors.advanced.torLogsLabel) - .setAttribute("value", TorStrings.settings.showTorDaemonLogs); - let torLogsButton = prefpane.querySelector( - selectors.advanced.torLogsButton - ); - torLogsButton.setAttribute("label", TorStrings.settings.showLogs); - torLogsButton.addEventListener("command", () => { - gTorPane.onViewTorLogs(); - }); - - // Disable all relevant elements by default - this._setElementsDisabled( - [ - this._builtinBridgeOption, - this._builtinBridgeMenulist, - this._requestBridgeOption, - this._requestBridgeButton, - this._requestBridgeTextarea, - this._provideBridgeOption, - this._provideBridgeTextarea, - this._proxyTypeLabel, - this._proxyTypeMenulist, - this._proxyAddressLabel, - this._proxyAddressTextbox, - this._proxyPortLabel, - this._proxyPortTextbox, - this._proxyUsernameLabel, - this._proxyUsernameTextbox, - this._proxyPasswordLabel, - this._proxyPasswordTextbox, - this._allowedPortsLabel, - this._allowedPortsTextbox, - ], - true - ); - - // init bridge UI - for (let currentBridge of TorBuiltinBridgeTypes) { - let menuEntry = document.createXULElement("menuitem"); - menuEntry.setAttribute("value", currentBridge); - menuEntry.setAttribute("label", currentBridge); - this._builtinBridgeMenulist - .querySelector("menupopup") - .appendChild(menuEntry); - } - - if (TorSettings.bridges.enabled) { - this.onSelectBridgeOption(TorSettings.bridges.source); - this.onToggleBridge( - TorSettings.bridges.source != TorBridgeSource.Invalid - ); - switch (TorSettings.bridges.source) { - case TorBridgeSource.Invalid: - break; - case TorBridgeSource.BuiltIn: - this._builtinBridgeMenulist.value = TorSettings.bridges.builtin_type; - break; - case TorBridgeSource.BridgeDB: - this._requestBridgeTextarea.value = TorSettings.bridges.bridge_strings.join("\n"); - break; - case TorBridgeSource.UserProvided: - this._provideBridgeTextarea.value = TorSettings.bridges.bridge_strings.join("\n"); - break; - } - } - - // init proxy UI - if (TorSettings.proxy.enabled) { - this.onToggleProxy(true); - this.onSelectProxyType(TorSettings.proxy.type); - this._proxyAddressTextbox.value = TorSettings.proxy.address; - this._proxyPortTextbox.value = TorSettings.proxy.port; - this._proxyUsernameTextbox.value = TorSettings.proxy.username; - this._proxyPasswordTextbox.value = TorSettings.proxy.password; - } - - // init firewall - if (TorSettings.firewall.enabled) { - this.onToggleFirewall(true); - this._allowedPortsTextbox.value = TorSettings.firewall.allowed_ports.join(", "); - } - }, - - init() { - this._populateXUL(); - - let onUnload = () => { - window.removeEventListener("unload", onUnload); - gTorPane.uninit(); - }; - window.addEventListener("unload", onUnload); - }, - - uninit() { - // unregister our observer topics - Services.obs.removeObserver(this, TorSettingsTopics.SettingChanged); - Services.obs.removeObserver(this, TorConnectTopics.StateChange); - }, - - // whether the page should be present in about:preferences - get enabled() { - return TorProtocolService.ownsTorDaemon; - }, - - // - // Callbacks - // - - observe(subject, topic, data) { - switch (topic) { - // triggered when a TorSettings param has changed - case TorSettingsTopics.SettingChanged: { - let obj = subject?.wrappedJSObject; - switch(data) { - case TorSettingsData.QuickStartEnabled: { - this._enableQuickstartCheckbox.checked = obj.value; - break; - } - } - break; - } - // triggered when tor connect state changes and we may - // need to update the messagebox - case TorConnectTopics.StateChange: { - this._populateMessagebox(); - break; - } - } - }, - - // callback when using bridges toggled - onToggleBridge(enabled) { - this._useBridgeCheckbox.checked = enabled; - let disabled = !enabled; - - // first disable all the bridge related elements - this._setElementsDisabled( - [ - this._builtinBridgeOption, - this._builtinBridgeMenulist, - this._requestBridgeOption, - this._requestBridgeButton, - this._requestBridgeTextarea, - this._provideBridgeOption, - this._provideBridgeTextarea, - ], - disabled - ); - - // and selectively re-enable based on the radiogroup's current value - if (enabled) { - this.onSelectBridgeOption(this._bridgeSelectionRadiogroup.value); - } else { - this.onSelectBridgeOption(TorBridgeSource.Invalid); - } - return this; - }, - - // callback when a bridge option is selected - onSelectBridgeOption(source) { - if (typeof source === "string") { - source = parseInt(source); - } - - // disable all of the bridge elements under radio buttons - this._setElementsDisabled( - [ - this._builtinBridgeMenulist, - this._requestBridgeButton, - this._requestBridgeTextarea, - this._provideBridgeTextarea, - ], - true - ); - - if (source != TorBridgeSource.Invalid) { - this._bridgeSelectionRadiogroup.value = source; - } - - switch (source) { - case TorBridgeSource.BuiltIn: { - this._setElementsDisabled([this._builtinBridgeMenulist], false); - break; - } - case TorBridgeSource.BridgeDB: { - this._setElementsDisabled( - [this._requestBridgeButton, this._requestBridgeTextarea], - false - ); - break; - } - case TorBridgeSource.UserProvided: { - this._setElementsDisabled([this._provideBridgeTextarea], false); - break; - } - } - return this; - }, - - // called when the request bridge button is activated - onRequestBridge() { - let requestBridgeDialog = new RequestBridgeDialog(); - requestBridgeDialog.openDialog( - gSubDialog, - aBridges => { - if (aBridges.length > 0) { - let bridgeStrings = aBridges.join("\n"); - TorSettings.bridges.enabled = true; - TorSettings.bridges.source = TorBridgeSource.BridgeDB; - TorSettings.bridges.bridge_strings = bridgeStrings; - TorSettings.saveToPrefs(); - TorSettings.applySettings().then((result) => { - this._requestBridgeTextarea.value = bridgeStrings; - }); - } - } - ); - return this; - }, - - // pushes bridge settings from UI to tor - onUpdateBridgeSettings() { - let source = this._useBridgeCheckbox.checked - ? parseInt(this._bridgeSelectionRadiogroup.value) - : TorBridgeSource.Invalid; - - switch (source) { - case TorBridgeSource.Invalid: { - TorSettings.bridges.enabled = false; - } - break; - case TorBridgeSource.BuiltIn: { - // if there is a built-in bridge already selected, use that - let bridgeType = this._builtinBridgeMenulist.value; - console.log(`bridge type: ${bridgeType}`); - if (bridgeType) { - TorSettings.bridges.enabled = true; - TorSettings.bridges.source = TorBridgeSource.BuiltIn; - TorSettings.bridges.builtin_type = bridgeType; - } else { - TorSettings.bridges.enabled = false; - } - break; - } - case TorBridgeSource.BridgeDB: { - // if there are bridgedb bridges saved in the text area, use them - let bridgeStrings = this._requestBridgeTextarea.value; - if (bridgeStrings) { - TorSettings.bridges.enabled = true; - TorSettings.bridges.source = TorBridgeSource.BridgeDB; - TorSettings.bridges.bridge_strings = bridgeStrings; - } else { - TorSettings.bridges.enabled = false; - } - break; - } - case TorBridgeSource.UserProvided: { - // if bridges already exist in the text area, use them - let bridgeStrings = this._provideBridgeTextarea.value; - if (bridgeStrings) { - TorSettings.bridges.enabled = true; - TorSettings.bridges.source = TorBridgeSource.UserProvided; - TorSettings.bridges.bridge_strings = bridgeStrings; - } else { - TorSettings.bridges.enabled = false; - } - break; - } - } - TorSettings.saveToPrefs(); - TorSettings.applySettings(); - - return this; - }, - - // callback when proxy is toggled - onToggleProxy(enabled) { - this._useProxyCheckbox.checked = enabled; - let disabled = !enabled; - - this._setElementsDisabled( - [ - this._proxyTypeLabel, - this._proxyTypeMenulist, - this._proxyAddressLabel, - this._proxyAddressTextbox, - this._proxyPortLabel, - this._proxyPortTextbox, - this._proxyUsernameLabel, - this._proxyUsernameTextbox, - this._proxyPasswordLabel, - this._proxyPasswordTextbox, - ], - disabled - ); - this.onSelectProxyType(this._proxyTypeMenulist.value); - return this; - }, - - // callback when proxy type is changed - onSelectProxyType(value) { - if (typeof value === "string") { - value = parseInt(value); - } - - this._proxyTypeMenulist.value = value; - switch (value) { - case TorProxyType.Invalid: { - this._setElementsDisabled( - [ - this._proxyAddressLabel, - this._proxyAddressTextbox, - this._proxyPortLabel, - this._proxyPortTextbox, - this._proxyUsernameLabel, - this._proxyUsernameTextbox, - this._proxyPasswordLabel, - this._proxyPasswordTextbox, - ], - true - ); // DISABLE - - this._proxyAddressTextbox.value = ""; - this._proxyPortTextbox.value = ""; - this._proxyUsernameTextbox.value = ""; - this._proxyPasswordTextbox.value = ""; - break; - } - case TorProxyType.Socks4: { - this._setElementsDisabled( - [ - this._proxyAddressLabel, - this._proxyAddressTextbox, - this._proxyPortLabel, - this._proxyPortTextbox, - ], - false - ); // ENABLE - this._setElementsDisabled( - [ - this._proxyUsernameLabel, - this._proxyUsernameTextbox, - this._proxyPasswordLabel, - this._proxyPasswordTextbox, - ], - true - ); // DISABLE - - this._proxyUsernameTextbox.value = ""; - this._proxyPasswordTextbox.value = ""; - break; - } - case TorProxyType.Socks5: - case TorProxyType.HTTPS: { - this._setElementsDisabled( - [ - this._proxyAddressLabel, - this._proxyAddressTextbox, - this._proxyPortLabel, - this._proxyPortTextbox, - this._proxyUsernameLabel, - this._proxyUsernameTextbox, - this._proxyPasswordLabel, - this._proxyPasswordTextbox, - ], - false - ); // ENABLE - break; - } - } - return this; - }, - - // pushes proxy settings from UI to tor - onUpdateProxySettings() { - const type = this._useProxyCheckbox.checked - ? parseInt(this._proxyTypeMenulist.value) - : TorProxyType.Invalid; - const address = this._proxyAddressTextbox.value; - const port = this._proxyPortTextbox.value; - const username = this._proxyUsernameTextbox.value; - const password = this._proxyPasswordTextbox.value; - - switch (type) { - case TorProxyType.Invalid: - TorSettings.proxy.enabled = false; - break; - case TorProxyType.Socks4: - TorSettings.proxy.enabled = true; - TorSettings.proxy.type = type; - TorSettings.proxy.address = address; - TorSettings.proxy.port = port; - - break; - case TorProxyType.Socks5: - TorSettings.proxy.enabled = true; - TorSettings.proxy.type = type; - TorSettings.proxy.address = address; - TorSettings.proxy.port = port; - TorSettings.proxy.username = username; - TorSettings.proxy.password = password; - break; - case TorProxyType.HTTPS: - TorSettings.proxy.enabled = true; - TorSettings.proxy.type = type; - TorSettings.proxy.address = address; - TorSettings.proxy.port = port; - TorSettings.proxy.username = username; - TorSettings.proxy.password = password; - break; - } - TorSettings.saveToPrefs(); - TorSettings.applySettings(); - - return this; - }, - - // callback when firewall proxy is toggled - onToggleFirewall(enabled) { - this._useFirewallCheckbox.checked = enabled; - let disabled = !enabled; - - this._setElementsDisabled( - [this._allowedPortsLabel, this._allowedPortsTextbox], - disabled - ); - - return this; - }, - - // pushes firewall settings from UI to tor - onUpdateFirewallSettings() { - - let portListString = this._useFirewallCheckbox.checked - ? this._allowedPortsTextbox.value - : ""; - - if (portListString) { - TorSettings.firewall.enabled = true; - TorSettings.firewall.allowed_ports = portListString; - } else { - TorSettings.firewall.enabled = false; - } - TorSettings.saveToPrefs(); - TorSettings.applySettings(); - - return this; - }, - - onViewTorLogs() { - let torLogDialog = new TorLogDialog(); - torLogDialog.openDialog(gSubDialog); - }, - }; - return retval; -})(); /* gTorPane */ diff --git a/browser/components/torpreferences/content/torPane.xhtml b/browser/components/torpreferences/content/torPane.xhtml deleted file mode 100644 index 7c8071f2cf106..0000000000000 --- a/browser/components/torpreferences/content/torPane.xhtml +++ /dev/null @@ -1,157 +0,0 @@ -<!-- Tor panel --> - -<script type="application/javascript" - src="chrome://browser/content/torpreferences/torPane.js"/> -<html:template id="template-paneTor"> - -<!-- Tor Connect Message Box --> -<groupbox data-category="paneTor" hidden="true"> - <html:div id="torPreferences-connectMessageBox" - class="subcategory" - data-category="paneTor" - hidden="true"> - <html:table > - <html:tr> - <html:td> - <html:div id="torPreferences-connectMessageBox-icon"/> - </html:td> - <html:td id="torPreferences-connectMessageBox-message"> - </html:td> - <html:td> - <html:button id="torPreferences-connectMessageBox-button"> - </html:button> - </html:td> - </html:tr> - </html:table> - </html:div> -</groupbox> - -<hbox id="torPreferencesCategory" - class="subcategory" - data-category="paneTor" - hidden="true"> - <html:h1 id="torPreferences-header"/> -</hbox> - -<groupbox data-category="paneTor" - hidden="true"> - <description flex="1"> - <html:span id="torPreferences-description" class="tail-with-learn-more"/> - <label id="torPreferences-learnMore" class="learnMore text-link" is="text-link"/> - </description> -</groupbox> - -<!-- Quickstart --> -<groupbox id="torPreferences-quickstart-group" - data-category="paneTor" - hidden="true"> - <html:h2 id="torPreferences-quickstart-header"/> - <description flex="1"> - <html:span id="torPreferences-quickstart-description"/> - </description> - <checkbox id="torPreferences-quickstart-toggle"/> -</groupbox> - -<!-- Bridges --> -<groupbox id="torPreferences-bridges-group" - data-category="paneTor" - hidden="true"> - <html:h2 id="torPreferences-bridges-header"/> - <description flex="1"> - <html:span id="torPreferences-bridges-description" class="tail-with-learn-more"/> - <label id="torPreferences-bridges-learnMore" class="learnMore text-link" is="text-link"/> - </description> - <checkbox id="torPreferences-bridges-toggle"/> - <radiogroup id="torPreferences-bridges-bridgeSelection"> - <hbox class="indent"> - <radio id="torPreferences-bridges-radioBuiltin"/> - <spacer flex="1"/> - <menulist id="torPreferences-bridges-builtinList" class="torMarginFix"> - <menupopup/> - </menulist> - </hbox> - <vbox class="indent"> - <hbox> - <radio id="torPreferences-bridges-radioRequestBridge"/> - <space flex="1"/> - <button id="torPreferences-bridges-buttonRequestBridge" class="torMarginFix"/> - </hbox> - <html:textarea - id="torPreferences-bridges-textareaRequestBridge" - class="indent torMarginFix" - multiline="true" - rows="3" - readonly="true"/> - </vbox> - <hbox class="indent" flex="1"> - <vbox flex="1"> - <radio id="torPreferences-bridges-radioProvideBridge"/> - <description id="torPreferences-bridges-descriptionProvideBridge" class="indent"/> - <html:textarea - id="torPreferences-bridges-textareaProvideBridge" - class="indent torMarginFix" - multiline="true" - rows="3"/> - </vbox> - </hbox> - </radiogroup> -</groupbox> - -<!-- Advanced --> -<groupbox id="torPreferences-advanced-group" - data-category="paneTor" - hidden="true"> - <html:h2 id="torPreferences-advanced-header"/> - <description flex="1"> - <html:span id="torPreferences-advanced-description" class="tail-with-learn-more"/> - <label id="torPreferences-advanced-learnMore" class="learnMore text-link" is="text-link" style="display:none"/> - </description> - <box id="torPreferences-advanced-grid"> - <!-- Local Proxy --> - <hbox class="torPreferences-advanced-checkbox-container"> - <checkbox id="torPreferences-advanced-toggleProxy"/> - </hbox> - <hbox class="indent" align="center"> - <label id="torPreferences-localProxy-type"/> - </hbox> - <hbox align="center"> - <spacer flex="1"/> - <menulist id="torPreferences-localProxy-builtinList" class="torMarginFix"> - <menupopup/> - </menulist> - </hbox> - <hbox class="indent" align="center"> - <label id="torPreferences-localProxy-address"/> - </hbox> - <hbox align="center"> - <html:input id="torPreferences-localProxy-textboxAddress" type="text" class="torMarginFix"/> - <label id="torPreferences-localProxy-port"/> - <!-- proxy-port-input class style pulled from preferences.css and used in the vanilla proxy setup menu --> - <html:input id="torPreferences-localProxy-textboxPort" class="proxy-port-input torMarginFix" hidespinbuttons="true" type="number" min="0" max="65535" maxlength="5"/> - </hbox> - <hbox class="indent" align="center"> - <label id="torPreferences-localProxy-username"/> - </hbox> - <hbox align="center"> - <html:input id="torPreferences-localProxy-textboxUsername" type="text" class="torMarginFix"/> - <label id="torPreferences-localProxy-password"/> - <html:input id="torPreferences-localProxy-textboxPassword" class="torMarginFix" type="password"/> - </hbox> - <!-- Firewall --> - <hbox class="torPreferences-advanced-checkbox-container"> - <checkbox id="torPreferences-advanced-toggleFirewall"/> - </hbox> - <hbox class="indent" align="center"> - <label id="torPreferences-advanced-allowedPorts"/> - </hbox> - <hbox align="center"> - <html:input id="torPreferences-advanced-textboxAllowedPorts" type="text" class="torMarginFix" value="80,443"/> - </hbox> - </box> - <hbox id="torPreferences-torDaemon-hbox" align="center"> - <label id="torPreferences-torLogs"/> - <spacer flex="1"/> - <button id="torPreferences-buttonTorLogs" class="torMarginFix"/> - </hbox> -</groupbox> -</html:template> \ No newline at end of file diff --git a/browser/components/torpreferences/content/torPreferences.css b/browser/components/torpreferences/content/torPreferences.css index b6eb0a740e5e4..31b6e29d679f3 100644 --- a/browser/components/torpreferences/content/torPreferences.css +++ b/browser/components/torpreferences/content/torPreferences.css @@ -1,9 +1,14 @@ @import url("chrome://branding/content/tor-styles.css"); -#category-tor > .category-icon { +#category-connection > .category-icon { list-style-image: url("chrome://browser/content/torpreferences/torPreferencesIcon.svg"); } +html:dir(rtl) input[type="checkbox"].toggle-button::before { + /* For some reason, the rule from toggle-button.css is not applied... */ + scale: -1; +} + /* Connect Message Box */ #torPreferences-connectMessageBox { @@ -64,8 +69,7 @@ #torPreferences-connectMessageBox-message { line-height: 16px; - font-size: 1.11em; - padding-left: 8px!important; + padding-inline-start: 8px; } #torPreferences-connectMessageBox-button { @@ -112,36 +116,302 @@ background-color: var(--purple-90); } -/* Advanced Settings */ +/* Status */ +#torPreferences-status-box { + display: flex; + align-items: center; +} -#torPreferences-advanced-grid { +#torPreferences-status-internet-icon, #torPreferences-status-tor-icon { + width: 18px; + height: 18px; + margin-inline-end: 8px; +} + +#torPreferences-status-internet-label, #torPreferences-status-tor-label { + font-weight: bold; +} + +#torPreferences-status-internet-icon { + list-style-image: url("chrome://devtools/skin/images/globe.svg"); +} + +#torPreferences-status-internet-statusIcon.online, +#torPreferences-status-internet-statusIcon.offline, +#torPreferences-status-tor-statusIcon { + margin-inline-start: 12px; + margin-inline-end: 9px; +} + +#torPreferences-status-internet-statusIcon.online, #torPreferences-status-tor-statusIcon.connected { + list-style-image: url("chrome://devtools/skin/images/check.svg"); + -moz-context-properties: fill; + fill: var(--purple-60); +} + +#torPreferences-status-internet-status { + margin-inline-end: 32px; +} + +#torPreferences-status-tor-icon { + list-style-image: url("chrome://browser/skin/onion.svg"); +} + +#torPreferences-status-internet-icon, #torPreferences-status-tor-icon { + -moz-context-properties: fill; + fill: var(--in-content-text-color); +} + +#torPreferences-status-tor-statusIcon, #torPreferences-status-internet-statusIcon.offline { + list-style-image: url("chrome://browser/skin/warning.svg"); +} + +#torPreferences-status-tor-statusIcon.blocked { + -moz-context-properties: fill; + fill: var(--red-60); +} + +/* Bridge settings */ +#torPreferences-bridges-location { + width: 280px; +} + +/* Bridge cards */ +:root { + --bridgeCard-animation-time: 0.25s; +} + +#torPreferences-currentBridges-cards { + /* The padding is needed because the mask-image creates an unexpected result + otherwise... */ + padding: 24px 4px; +} + +#torPreferences-currentBridges-cards.list-collapsed { + mask-image: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.1)); +} + +#torPreferences-currentBridges-cards.disabled { + opacity: 0.4; +} + +.torPreferences-bridgeCard { + padding: 16px 12px; + /* define border-radius here because of the transition */ + border-radius: 4px; + transition: margin var(--bridgeCard-animation-time), box-shadow 150ms; +} + +.torPreferences-bridgeCard.expanded { + margin: 12px 0; + background: var(--in-content-box-background); + box-shadow: var(--card-shadow); +} + +.torPreferences-bridgeCard:hover { + background: var(--in-content-box-background); + box-shadow: var(--card-shadow-hover); + cursor: pointer; +} + +.torPreferences-bridgeCard-heading { + display: flex; + align-items: center; +} + +.torPreferences-bridgeCard-id { + font-weight: 700; +} + +.torPreferences-bridgeCard-id .emoji { + margin-inline-start: 4px; + padding: 4px; + font-size: 20px; + border-radius: 4px; + background: var(--in-content-button-background-hover); +} + +.torPreferences-bridgeCard-headingAddr { + /* flex extends the element when needed, but without setting a width (any) the + overflow + ellipses does not work. */ + width: 20px; + flex: 1; + margin: 0 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.expanded .torPreferences-bridgeCard-headingAddr { + display: none; +} + +.torPreferences-bridgeCard-buttons { + display: flex; + align-items: center; + margin-inline-start: auto; + align-self: center; +} + +.torPreferences-bridgeCard-connectedBadge { + display: none; + padding: 8px 12px; + border-radius: 16px; + background: rgba(128, 0, 215, 0.1); + color: var(--purple-60); +} + +.currently-connected .torPreferences-bridgeCard-connectedBadge { + display: flex; +} + +.torPreferences-bridgeCard-connectedIcon { + margin-inline-start: 1px; + margin-inline-end: 7px; + list-style-image: url("chrome://devtools/skin/images/check.svg"); + -moz-context-properties: fill; + fill: var(--purple-60); +} + +.torPreferences-bridgeCard-options { + width: 24px; + min-width: 0; + height: 24px; + min-height: 0; + margin-inline-start: 8px; + padding: 1px; + background-image: url("chrome://global/skin/icons/more.svg"); + background-repeat: no-repeat; + background-position: center center; + fill: currentColor; + -moz-context-properties: fill; +} + +.torPreferences-bridgeCard-qrWrapper { + grid-area: bridge-qr; + display: flex; + flex-direction: column; +} + +.torPreferences-bridgeCard-qr { + width: 126px; + position: relative; +} + +.torPreferences-bridgeCard-qrCode { + width: 112px; + height: 112px; + /* Define these colors, as they will be passed to the QR code library */ + background: var(--in-content-box-background); + color: var(--in-content-text-color); +} + +.torPreferences-bridgeCard-qrOnionBox { + width: 28px; + height: 28px; + position: absolute; + top: 42px; + inset-inline-start: 42px; + background: var(--in-content-box-background); +} + +.torPreferences-bridgeCard-qrOnion { + width: 16px; + height: 16px; + position: absolute; + top: 48px; + inset-inline-start: 48px; + + mask: url("chrome://browser/skin/onion.svg"); + mask-repeat: no-repeat; + mask-size: 16px; + background: var(--in-content-text-color); +} + +.torPreferences-bridgeCard-qr:hover .torPreferences-bridgeCard-qrOnionBox { + background: var(--in-content-text-color); +} + +.torPreferences-bridgeCard-qr:hover .torPreferences-bridgeCard-qrOnion { + mask: url("chrome://global/skin/icons/search-glass.svg"); + background: var(--in-content-box-background); +} + +.torPreferences-bridgeCard-filler { + flex: 1; +} + +.torPreferences-bridgeCard-grid { + height: 0; /* We will set it in JS when expanding it! */ display: grid; - grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-columns: auto 1fr auto; + grid-template-areas: + 'bridge-qr bridge-share bridge-share' + 'bridge-qr bridge-address bridge-address' + 'bridge-qr bridge-learn-more bridge-copy'; + padding-top: 12px; + visibility: hidden; } -.torPreferences-advanced-checkbox-container { - grid-column: 1 / 3; +.expanded .torPreferences-bridgeCard-grid { + visibility: visible; } -#torPreferences-localProxy-textboxAddress, -#torPreferences-localProxy-textboxUsername, -#torPreferences-localProxy-textboxPassword, -#torPreferences-advanced-textboxAllowedPorts { - -moz-box-flex: 1; +.torPreferences-bridgeCard-grid.to-animate { + transition: height var(--bridgeCard-animation-time) ease-out, visibility var(--bridgeCard-animation-time); + overflow: hidden; +} + +.torPreferences-bridgeCard-share { + grid-area: bridge-share; +} + +.torPreferences-bridgeCard-addrBox { + grid-area: bridge-address; + display: flex; + align-items: center; + justify-content: center; + margin: 8px 0; +} + +.torPreferences-bridgeCard-addr { + width: 100%; +} + +.torPreferences-bridgeCard-leranMoreBox { + grid-area: bridge-learn-more; +} + +.torPreferences-bridgeCard-copy { + grid-area: bridge-copy; +} + +#torPreferences-bridgeCard-template { + display: none; +} + +/* Advanced Settings */ +#torPreferences-advanced-grid { + display: grid; + grid-template-columns: 1fr auto; } -hbox#torPreferences-torDaemon-hbox { - margin-top: 20px; +#torPreferences-advanced-group button { + min-width: 150px; } -description#torPreferences-requestBridge-description { - /*margin-bottom: 1em;*/ - min-height: 2em; +#torPreferences-advanced-hbox, #torPreferences-torDaemon-hbox { + padding-inline-end: 15px; +} + +h3#torPreferences-requestBridge-header { + margin: 0; } image#torPreferences-requestBridge-captchaImage { - margin: 1em; - min-height: 125px; + margin: 16px 0 8px 0; + min-height: 140px; } button#torPreferences-requestBridge-refreshCaptchaButton { @@ -160,6 +430,61 @@ dialog#torPreferences-requestBridge-dialog > hbox { margin-right : 4px; } +/* Show bridge QR dialog */ +#bridgeQr-container { + position: relative; + height: 300px; +} + +#bridgeQr-target { + position: absolute; + width: 300px; + height: 300px; + left: calc(50% - 150px); + background: var(--in-content-box-background); + color: var(--in-content-text-color); +} + +#bridgeQr-onionBox { + position: absolute; + width: 70px; + height: 70px; + top: 115px; + left: calc(50% - 35px); + background-color: var(--in-content-box-background); +} + +#bridgeQr-onion { + position: absolute; + width: 38px; + height: 38px; + top: 131px; + left: calc(50% - 19px); + mask: url("chrome://browser/skin/onion.svg"); + mask-repeat: no-repeat; + mask-size: 38px; + background: var(--in-content-text-color); +} + +/* Builtin bridge dialog */ +#torPreferences-builtinBridge-header { + margin: 8px 0 10px 0; +} + +#torPreferences-builtinBridge-description { + margin-bottom: 18px; +} + +#torPreferences-builtinBridge-typeSelection { + margin-bottom: 16px; + min-height: 14em; /* Hack: make room for at least 4 lines of content for 3 types + 2 for spacing */ +} + +#torPreferences-builtinBridge-typeSelection radio label { + font-weight: 700; +} + +/* Request bridge dialog */ /* This hbox is hidden by css here by default so that the xul dialog allocates enough screen space for the error message @@ -178,6 +503,33 @@ groupbox#torPreferences-bridges-group textarea { overflow: auto; } +/* Provide bridge dialog */ +#torPreferences-provideBridge-header { + margin-top: 8px; +} + +/* Connection settings dialog */ +#torPreferences-connection-header { + margin: 4px 0 14px 0; +} + +#torPreferences-connection-grid { + display: grid; + grid-template-columns: auto 1fr; +} + +.torPreferences-connection-checkbox-container { + grid-column: 1 / 3; +} + +#torPreferences-localProxy-textboxAddress, +#torPreferences-localProxy-textboxUsername, +#torPreferences-localProxy-textboxPassword, +#torPreferences-connection-textboxAllowedPorts { + -moz-box-flex: 1; +} + +/* Tor logs dialog */ textarea#torPreferences-torDialog-textarea { -moz-box-flex: 1; font-family: monospace; @@ -186,4 +538,4 @@ textarea#torPreferences-torDialog-textarea { overflow: auto; /* 10 lines */ min-height: 20em; -} \ No newline at end of file +} diff --git a/browser/components/torpreferences/jar.mn b/browser/components/torpreferences/jar.mn index 552c92b2feff6..ed3bb441084c9 100644 --- a/browser/components/torpreferences/jar.mn +++ b/browser/components/torpreferences/jar.mn @@ -1,10 +1,19 @@ browser.jar: + content/browser/torpreferences/bridgeQrDialog.xhtml (content/bridgeQrDialog.xhtml) + content/browser/torpreferences/bridgeQrDialog.jsm (content/bridgeQrDialog.jsm) + content/browser/torpreferences/builtinBridgeDialog.xhtml (content/builtinBridgeDialog.xhtml) + content/browser/torpreferences/builtinBridgeDialog.jsm (content/builtinBridgeDialog.jsm) + content/browser/torpreferences/connectionSettingsDialog.xhtml (content/connectionSettingsDialog.xhtml) + content/browser/torpreferences/connectionSettingsDialog.jsm (content/connectionSettingsDialog.jsm) + content/browser/torpreferences/network.svg (content/network.svg) + content/browser/torpreferences/provideBridgeDialog.xhtml (content/provideBridgeDialog.xhtml) + content/browser/torpreferences/provideBridgeDialog.jsm (content/provideBridgeDialog.jsm) content/browser/torpreferences/requestBridgeDialog.xhtml (content/requestBridgeDialog.xhtml) content/browser/torpreferences/requestBridgeDialog.jsm (content/requestBridgeDialog.jsm) - content/browser/torpreferences/torCategory.inc.xhtml (content/torCategory.inc.xhtml) + content/browser/torpreferences/connectionCategory.inc.xhtml (content/connectionCategory.inc.xhtml) content/browser/torpreferences/torLogDialog.jsm (content/torLogDialog.jsm) content/browser/torpreferences/torLogDialog.xhtml (content/torLogDialog.xhtml) - content/browser/torpreferences/torPane.js (content/torPane.js) - content/browser/torpreferences/torPane.xhtml (content/torPane.xhtml) + content/browser/torpreferences/connectionPane.js (content/connectionPane.js) + content/browser/torpreferences/connectionPane.xhtml (content/connectionPane.xhtml) content/browser/torpreferences/torPreferences.css (content/torPreferences.css) content/browser/torpreferences/torPreferencesIcon.svg (content/torPreferencesIcon.svg) -- To stop receiving notification emails like this one, please contact the administrator of this repository.

This is an automated email from the git hooks/post-receive script. richard pushed a commit to branch tor-browser-91.8.0esr-11.5-1 in repository tor-browser. commit 623e8a73c697653e0bca3ff5a50b8e8235a1358d Author: Richard Pospesel <richard@torproject.org> AuthorDate: Tue Apr 5 20:37:57 2022 +0000 fixup! Bug 40597: Implement TorSettings module saving received bridge strings to prefs --- browser/modules/TorSettings.jsm | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/modules/TorSettings.jsm b/browser/modules/TorSettings.jsm index 87bc129602930..41638f9cbd1b6 100644 --- a/browser/modules/TorSettings.jsm +++ b/browser/modules/TorSettings.jsm @@ -538,6 +538,7 @@ const TorSettings = (() => { if (settings.bridges.bridge_strings.length == 0 && settings.bridges.enabled) { throw new Error(`No available builtin bridges of type ${settings.bridges.builtin_type}`); } + this._settings.bridges.bridge_strings = settings.bridges.bridge_strings; break; } case TorBridgeSource.Invalid: -- To stop receiving notification emails like this one, please contact the administrator of this repository.