Richard Pospesel pushed to branch tor-browser-102.10.0esr-12.5-1 at The Tor Project / Applications / Tor Browser

Commits: 84b47639 by Dan Ballard at 2023-04-14T20:35:41+00:00 fixup! Add TorStrings module for localization

Bug 41617: Improve the UX of the built-in bridges dialog

- - - - - f0df6486 by Dan Ballard at 2023-04-14T21:02:03+00:00 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 41617: Improve the UX of the built-in bridges dialog

- - - - -

5 changed files:

- browser/components/torpreferences/content/builtinBridgeDialog.jsm - browser/components/torpreferences/content/builtinBridgeDialog.xhtml - browser/components/torpreferences/content/connectionPane.js - browser/modules/TorStrings.jsm - toolkit/torbutton/chrome/locale/en-US/settings.properties

Changes:

===================================== browser/components/torpreferences/content/builtinBridgeDialog.jsm ===================================== @@ -1,19 +1,30 @@ "use strict";

+const obs = Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService); + var EXPORTED_SYMBOLS = ["BuiltinBridgeDialog"];

const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm");

const { TorSettings, + TorSettingsTopics, TorBridgeSource, TorBuiltinBridgeTypes, } = ChromeUtils.import("resource:///modules/TorSettings.jsm");

+const { + TorConnect, + TorConnectTopics, + TorConnectState, +} = ChromeUtils.import("resource:///modules/TorConnect.jsm"); + class BuiltinBridgeDialog { constructor(onSubmit) { this.onSubmit = onSubmit; this._dialog = null; + this._window = null; + this._acceptButton = null; }

static get selectors() { @@ -27,27 +38,31 @@ class BuiltinBridgeDialog { snowflakeDescr: "#torPreferences-builtinBridges-descrSnowflake", meekAzureRadio: "#torPreferences-builtinBridges-radioMeekAzure", meekAzureDescr: "#torPreferences-builtinBridges-descrMeekAzure", + acceptButton: "accept" /* not really a selector but a key for dialog's getButton */, }; }

_populateXUL(window, aDialog) { const selectors = BuiltinBridgeDialog.selectors;

+ this._window = window; this._dialog = aDialog; const dialogWin = this._dialog.parentElement; - dialogWin.setAttribute("title", TorStrings.settings.builtinBridgeTitle); + dialogWin.setAttribute("title", TorStrings.settings.builtinBridgeHeader);

- this._dialog.querySelector(selectors.header).textContent = - TorStrings.settings.builtinBridgeHeader; this._dialog.querySelector(selectors.description).textContent = TorStrings.settings.builtinBridgeDescription; + + this._acceptButton = this._dialog.getButton(selectors.acceptButton); + this.onTorStateChange(); + 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, + label: TorStrings.settings.builtinBridgeObfs4Title, descr: TorStrings.settings.builtinBridgeObfs4Description, }, snowflake: { @@ -94,6 +109,16 @@ class BuiltinBridgeDialog { // Hack: see the CSS this._dialog.style.minWidth = "0"; this._dialog.style.minHeight = "0"; + + obs.addObserver(this, TorConnectTopics.StateChange); + } + + onTorStateChange() { + if (TorConnect.state === TorConnectState.Configuring) { + this._acceptButton.setAttribute("label", TorStrings.settings.bridgeButtonConnect); + } else { + this._acceptButton.setAttribute("label", TorStrings.settings.bridgeButtonAccept); + } }

init(window, aDialog) { @@ -103,10 +128,27 @@ class BuiltinBridgeDialog { }, 0); }

+ observe(subject, topic, data) { + switch (topic) { + case TorConnectTopics.StateChange: { + this.onTorStateChange(); + break; + } + } + } + + close() { + // unregister our observer topics + obs.removeObserver(this, TorConnectTopics.StateChange); + } + openDialog(gSubDialog) { gSubDialog.open( "chrome://browser/content/torpreferences/builtinBridgeDialog.xhtml", - { features: "resizable=yes" }, + { features: "resizable=yes", + closingCallback: () => { + this.close(); + },}, this ); }

===================================== browser/components/torpreferences/content/builtinBridgeDialog.xhtml ===================================== @@ -8,7 +8,6 @@ xmlns:html="http://www.w3.org/1999/xhtml%22%3E <dialog id="torPreferences-builtinBridge-dialog" buttons="help,accept,cancel"> - <html:h3 id="torPreferences-builtinBridge-header">&#8203;</html:h3> <description> <html:div id="torPreferences-builtinBridge-description">&#8203;<br/>&#8203;</html:div> </description>

===================================== browser/components/torpreferences/content/connectionPane.js ===================================== @@ -1071,6 +1071,11 @@ const gConnectionPane = (function() { TorSettings.applySettings().then(result => { this._populateBridgeCards(); }); + // The bridge dialog button is "connect" when Tor is not bootstrapped, + // so do the connect + if (TorConnect.state == TorConnectState.Configuring) { + TorConnect.openTorConnect({ beginBootstrap: true }) + } }); builtinBridgeDialog.openDialog(gSubDialog); },

===================================== browser/modules/TorStrings.jsm ===================================== @@ -95,7 +95,7 @@ const Loader = { // Bridge settings bridgesHeading: "Bridges", 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.", + "Bridges help you securely access the Tor Network in places where Tor is blocked. Depending on where you are, one bridge may work better than another.", bridgeLocation: "Your location", bridgeLocationAutomatic: "Automatic", bridgeLocationFrequent: "Frequently selected locations", @@ -141,16 +141,19 @@ const Loader = { builtinBridgeTitle: "Built-In Bridges", builtinBridgeHeader: "Select a Built-In Bridge", builtinBridgeDescription: - "Tor Browser includes some specific types of bridges known as “pluggable transports”.", + "Tor Browser includes some specific types of bridges known as “pluggable transports”, which can help conceal the fact you’re using Tor.", builtinBridgeObfs4: "obfs4", + builtinBridgeObfs4Title: "obfs4 (Built-in)", 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.", + "Makes your Tor traffic look like random data. May not work in heavily censored regions.", builtinBridgeSnowflake: "Snowflake", builtinBridgeSnowflakeDescription: - "Snowflake is a built-in bridge that defeats censorship by routing your connection through Snowflake proxies, ran by volunteers.", + "Routes your connection through Snowflake proxies to make it look like you’re placing a video call, for example.", builtinBridgeMeekAzure: "meek-azure", builtinBridgeMeekAzureDescription: - "meek-azure is a built-in bridge that makes it look like you are using a Microsoft web site instead of using Tor.", + "Makes it look like you’re connected to a Microsoft web site, instead of using Tor. May work in heavily censored regions, but is usually very slow.", + bridgeButtonConnect: "Connect", + bridgeButtonAccept: "OK", // Request bridges dialog requestBridgeDialogTitle: "Request Bridge", submitCaptcha: "Submit",

===================================== toolkit/torbutton/chrome/locale/en-US/settings.properties ===================================== @@ -26,7 +26,7 @@ settings.quickstartCheckbox=Always connect automatically

# Bridge settings settings.bridgesHeading=Bridges -settings.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. +settings.bridgesDescription=Bridges help you securely access the Tor Network in places where Tor is blocked. Depending on where you are, one bridge may work better than another. settings.bridgeLocation=Your location settings.bridgeLocationAutomatic=Automatic settings.bridgeLocationFrequent=Frequently selected locations @@ -73,14 +73,18 @@ settings.scanQrTitle=Scan the QR code

# Builtin bridges dialog settings.builtinBridgeTitle=Built-In Bridges +# Bug 41617: Todo - delete builtinBridgeHeader, no longer user settings.builtinBridgeHeader=Select a Built-In Bridge -settings.builtinBridgeDescription=Tor Browser includes some specific types of bridges known as “pluggable transports”. +settings.builtinBridgeDescription=Tor Browser includes some specific types of bridges known as “pluggable transports”, which can help conceal the fact you’re using Tor. settings.builtinBridgeObfs4=obfs4 -settings.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. +settings.builtinBridgeObfs4Title=obfs4 (Built-in) +settings.builtinBridgeObfs4Description=Makes your Tor traffic look like random data. May not work in heavily censored regions. settings.builtinBridgeSnowflake=Snowflake -settings.builtinBridgeSnowflakeDescription=Snowflake is a built-in bridge that defeats censorship by routing your connection through Snowflake proxies, ran by volunteers. +settings.builtinBridgeSnowflakeDescription=Routes your connection through Snowflake proxies to make it look like you’re placing a video call, for example. settings.builtinBridgeMeekAzure=meek-azure -settings.builtinBridgeMeekAzureDescription=meek-azure is a built-in bridge that makes it look like you are using a Microsoft web site instead of using Tor. +settings.builtinBridgeMeekAzureDescription=Makes it look like you’re connected to a Microsoft web site, instead of using Tor. May work in heavily censored regions, but is usually very slow. +settings.bridgeButtonConnect=Connect +settings.bridgeButtonAccept=OK

# Request bridges dialog settings.requestBridgeDialogTitle=Request Bridge

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/314794b...