| 
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:
Changes:
browser/components/torpreferences/content/builtinBridgeDialog.jsm
 
| 1 | 1 |  "use strict";
 |  
| 2 | 2 |  
 |  
|  | 3 | +const obs = Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService);
 |  
|  | 4 | +
 |  
| 3 | 5 |  var EXPORTED_SYMBOLS = ["BuiltinBridgeDialog"];
 |  
| 4 | 6 |  
 |  
| 5 | 7 |  const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm");
 |  
| 6 | 8 |  
 |  
| 7 | 9 |  const {
 |  
| 8 | 10 |    TorSettings,
 |  
|  | 11 | +  TorSettingsTopics,
 |  
| 9 | 12 |    TorBridgeSource,
 |  
| 10 | 13 |    TorBuiltinBridgeTypes,
 |  
| 11 | 14 |  } = ChromeUtils.import("resource:///modules/TorSettings.jsm");
 |  
| 12 | 15 |  
 |  
|  | 16 | +const {
 |  
|  | 17 | +  TorConnect,
 |  
|  | 18 | +  TorConnectTopics,
 |  
|  | 19 | +  TorConnectState,
 |  
|  | 20 | +} = ChromeUtils.import("resource:///modules/TorConnect.jsm");
 |  
|  | 21 | +
 |  
| 13 | 22 |  class BuiltinBridgeDialog {
 |  
| 14 | 23 |    constructor(onSubmit) {
 |  
| 15 | 24 |      this._onSubmit_ = onSubmit;
 |  
| 16 | 25 |      this._dialog = null;
 |  
|  | 26 | +    this._window = null;
 |  
|  | 27 | +    this._acceptButton = null;
 |  
| 17 | 28 |    }
 |  
| 18 | 29 |  
 |  
| 19 | 30 |    static get selectors() {
 |  
| ... | ... | @@ -27,27 +38,31 @@ class BuiltinBridgeDialog { |  
| 27 | 38 |        snowflakeDescr: "#torPreferences-builtinBridges-descrSnowflake",
 |  
| 28 | 39 |        meekAzureRadio: "#torPreferences-builtinBridges-radioMeekAzure",
 |  
| 29 | 40 |        meekAzureDescr: "#torPreferences-builtinBridges-descrMeekAzure",
 |  
|  | 41 | +      acceptButton: "accept" /* not really a selector but a key for dialog's getButton */,
 |  
| 30 | 42 |      };
 |  
| 31 | 43 |    }
 |  
| 32 | 44 |  
 |  
| 33 | 45 |    _populateXUL(window, aDialog) {
 |  
| 34 | 46 |      const selectors = BuiltinBridgeDialog.selectors;
 |  
| 35 | 47 |  
 |  
|  | 48 | +    this._window = window;
 |  
| 36 | 49 |      this._dialog = aDialog;
 |  
| 37 | 50 |      const dialogWin = this._dialog.parentElement;
 |  
| 38 |  | -    dialogWin.setAttribute("title", TorStrings.settings.builtinBridgeTitle);
 |  
|  | 51 | +    dialogWin.setAttribute("title", TorStrings.settings.builtinBridgeHeader);
 |  
| 39 | 52 |  
 |  
| 40 |  | -    this._dialog.querySelector(selectors.header).textContent =
 |  
| 41 |  | -      TorStrings.settings.builtinBridgeHeader;
 |  
| 42 | 53 |      this._dialog.querySelector(selectors.description).textContent =
 |  
| 43 | 54 |        TorStrings.settings.builtinBridgeDescription;
 |  
|  | 55 | +
 |  
|  | 56 | +    this._acceptButton = this._dialog.getButton(selectors.acceptButton);
 |  
|  | 57 | +    this.onTorStateChange();
 |  
|  | 58 | +
 |  
| 44 | 59 |      let radioGroup = this._dialog.querySelector(selectors.radiogroup);
 |  
| 45 | 60 |  
 |  
| 46 | 61 |      let types = {
 |  
| 47 | 62 |        obfs4: {
 |  
| 48 | 63 |          elemRadio: this._dialog.querySelector(selectors.obfsRadio),
 |  
| 49 | 64 |          elemDescr: this._dialog.querySelector(selectors.obfsDescr),
 |  
| 50 |  | -        label: TorStrings.settings.builtinBridgeObfs4,
 |  
|  | 65 | +        label: TorStrings.settings.builtinBridgeObfs4Title,
 |  
| 51 | 66 |          descr: TorStrings.settings.builtinBridgeObfs4Description,
 |  
| 52 | 67 |        },
 |  
| 53 | 68 |        snowflake: {
 |  
| ... | ... | @@ -94,6 +109,16 @@ class BuiltinBridgeDialog { |  
| 94 | 109 |      // Hack: see the CSS
 |  
| 95 | 110 |      this._dialog.style.minWidth = "0";
 |  
| 96 | 111 |      this._dialog.style.minHeight = "0";
 |  
|  | 112 | +
 |  
|  | 113 | +    obs.addObserver(this, TorConnectTopics.StateChange);
 |  
|  | 114 | +  }
 |  
|  | 115 | +
 |  
|  | 116 | +  onTorStateChange() {
 |  
|  | 117 | +    if (TorConnect.state === TorConnectState.Configuring) {
 |  
|  | 118 | +      this._acceptButton.setAttribute("label", TorStrings.settings.bridgeButtonConnect);
 |  
|  | 119 | +    } else {
 |  
|  | 120 | +      this._acceptButton.setAttribute("label", TorStrings.settings.bridgeButtonAccept);
 |  
|  | 121 | +    }
 |  
| 97 | 122 |    }
 |  
| 98 | 123 |  
 |  
| 99 | 124 |    init(window, aDialog) {
 |  
| ... | ... | @@ -103,10 +128,27 @@ class BuiltinBridgeDialog { |  
| 103 | 128 |      }, 0);
 |  
| 104 | 129 |    }
 |  
| 105 | 130 |  
 |  
|  | 131 | +  observe(subject, topic, data) {
 |  
|  | 132 | +    switch (topic) {
 |  
|  | 133 | +      case TorConnectTopics.StateChange: {
 |  
|  | 134 | +        this.onTorStateChange();
 |  
|  | 135 | +        break;
 |  
|  | 136 | +      }
 |  
|  | 137 | +    }
 |  
|  | 138 | +  }
 |  
|  | 139 | +
 |  
|  | 140 | +  close() {
 |  
|  | 141 | +    // unregister our observer topics
 |  
|  | 142 | +    obs.removeObserver(this, TorConnectTopics.StateChange);
 |  
|  | 143 | +  }
 |  
|  | 144 | +
 |  
| 106 | 145 |    openDialog(gSubDialog) {
 |  
| 107 | 146 |      gSubDialog.open(
 |  
| 108 | 147 |        "chrome://browser/content/torpreferences/builtinBridgeDialog.xhtml",
 |  
| 109 |  | -      { features: "resizable=yes" },
 |  
|  | 148 | +      { features: "resizable=yes",
 |  
|  | 149 | +        closingCallback: () => {
 |  
|  | 150 | +          this.close();
 |  
|  | 151 | +        },},
 |  
| 110 | 152 |        this
 |  
| 111 | 153 |      );
 |  
| 112 | 154 |    }
 |  browser/components/torpreferences/content/builtinBridgeDialog.xhtml
 
 
| ... | ... | @@ -8,7 +8,6 @@ |  
| 8 | 8 |          xmlns:html="http://www.w3.org/1999/xhtml">
 |  
| 9 | 9 |  <dialog id="torPreferences-builtinBridge-dialog"
 |  
| 10 | 10 |          buttons="help,accept,cancel">
 |  
| 11 |  | -  <html:h3 id="torPreferences-builtinBridge-header">​</html:h3>
 |  
| 12 | 11 |    <description>
 |  
| 13 | 12 |      <html:div id="torPreferences-builtinBridge-description">​<br/>​</html:div>
 |  
| 14 | 13 |    </description>
 |  browser/components/torpreferences/content/connectionPane.js
 
 
| ... | ... | @@ -1071,6 +1071,11 @@ const gConnectionPane = (function() { |  
| 1071 | 1071 |          TorSettings.applySettings().then(result => {
 |  
| 1072 | 1072 |            this._populateBridgeCards();
 |  
| 1073 | 1073 |          });
 |  
|  | 1074 | +        // The bridge dialog button is "connect" when Tor is not bootstrapped,
 |  
|  | 1075 | +        // so do the connect
 |  
|  | 1076 | +        if (TorConnect.state == TorConnectState.Configuring) {
 |  
|  | 1077 | +          TorConnect.openTorConnect({ beginBootstrap: true })
 |  
|  | 1078 | +        }
 |  
| 1074 | 1079 |        });
 |  
| 1075 | 1080 |        builtinBridgeDialog.openDialog(gSubDialog);
 |  
| 1076 | 1081 |      },
 |  browser/modules/TorStrings.jsm
 
 
| ... | ... | @@ -95,7 +95,7 @@ const Loader = { |  
| 95 | 95 |        // Bridge settings
 |  
| 96 | 96 |        bridgesHeading: "Bridges",
 |  
| 97 | 97 |        bridgesDescription:
 |  
| 98 |  | -        "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.",
 |  
|  | 98 | +        "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.",
 |  
| 99 | 99 |        bridgeLocation: "Your location",
 |  
| 100 | 100 |        bridgeLocationAutomatic: "Automatic",
 |  
| 101 | 101 |        bridgeLocationFrequent: "Frequently selected locations",
 |  
| ... | ... | @@ -141,16 +141,19 @@ const Loader = { |  
| 141 | 141 |        builtinBridgeTitle: "Built-In Bridges",
 |  
| 142 | 142 |        builtinBridgeHeader: "Select a Built-In Bridge",
 |  
| 143 | 143 |        builtinBridgeDescription:
 |  
| 144 |  | -        "Tor Browser includes some specific types of bridges known as “pluggable transports”.",
 |  
|  | 144 | +        "Tor Browser includes some specific types of bridges known as “pluggable transports”, which can help conceal the fact you’re using Tor.",
 |  
| 145 | 145 |        builtinBridgeObfs4: "obfs4",
 |  
|  | 146 | +      builtinBridgeObfs4Title: "obfs4 (Built-in)",
 |  
| 146 | 147 |        builtinBridgeObfs4Description:
 |  
| 147 |  | -        "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.",
 |  
|  | 148 | +        "Makes your Tor traffic look like random data. May not work in heavily censored regions.",
 |  
| 148 | 149 |        builtinBridgeSnowflake: "Snowflake",
 |  
| 149 | 150 |        builtinBridgeSnowflakeDescription:
 |  
| 150 |  | -        "Snowflake is a built-in bridge that defeats censorship by routing your connection through Snowflake proxies, ran by volunteers.",
 |  
|  | 151 | +        "Routes your connection through Snowflake proxies to make it look like you’re placing a video call, for example.",
 |  
| 151 | 152 |        builtinBridgeMeekAzure: "meek-azure",
 |  
| 152 | 153 |        builtinBridgeMeekAzureDescription:
 |  
| 153 |  | -        "meek-azure is a built-in bridge that makes it look like you are using a Microsoft web site instead of using Tor.",
 |  
|  | 154 | +        "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.",
 |  
|  | 155 | +      bridgeButtonConnect: "Connect",
 |  
|  | 156 | +      bridgeButtonAccept: "OK",
 |  
| 154 | 157 |        // Request bridges dialog
 |  
| 155 | 158 |        requestBridgeDialogTitle: "Request Bridge",
 |  
| 156 | 159 |        submitCaptcha: "Submit",
 |  toolkit/torbutton/chrome/locale/en-US/settings.properties
 
 
| ... | ... | @@ -26,7 +26,7 @@ settings.quickstartCheckbox=Always connect automatically |  
| 26 | 26 |  
 |  
| 27 | 27 |  # Bridge settings
 |  
| 28 | 28 |  settings.bridgesHeading=Bridges
 |  
| 29 |  | -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.
 |  
|  | 29 | +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.
 |  
| 30 | 30 |  settings.bridgeLocation=Your location
 |  
| 31 | 31 |  settings.bridgeLocationAutomatic=Automatic
 |  
| 32 | 32 |  settings.bridgeLocationFrequent=Frequently selected locations
 |  
| ... | ... | @@ -73,14 +73,18 @@ settings.scanQrTitle=Scan the QR code |  
| 73 | 73 |  
 |  
| 74 | 74 |  # Builtin bridges dialog
 |  
| 75 | 75 |  settings.builtinBridgeTitle=Built-In Bridges
 |  
|  | 76 | +# Bug 41617: Todo - delete builtinBridgeHeader, no longer user
 |  
| 76 | 77 |  settings.builtinBridgeHeader=Select a Built-In Bridge
 |  
| 77 |  | -settings.builtinBridgeDescription=Tor Browser includes some specific types of bridges known as “pluggable transports”.
 |  
|  | 78 | +settings.builtinBridgeDescription=Tor Browser includes some specific types of bridges known as “pluggable transports”, which can help conceal the fact you’re using Tor.
 |  
| 78 | 79 |  settings.builtinBridgeObfs4=obfs4
 |  
| 79 |  | -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.
 |  
|  | 80 | +settings.builtinBridgeObfs4Title=obfs4 (Built-in)
 |  
|  | 81 | +settings.builtinBridgeObfs4Description=Makes your Tor traffic look like random data. May not work in heavily censored regions.
 |  
| 80 | 82 |  settings.builtinBridgeSnowflake=Snowflake
 |  
| 81 |  | -settings.builtinBridgeSnowflakeDescription=Snowflake is a built-in bridge that defeats censorship by routing your connection through Snowflake proxies, ran by volunteers.
 |  
|  | 83 | +settings.builtinBridgeSnowflakeDescription=Routes your connection through Snowflake proxies to make it look like you’re placing a video call, for example.
 |  
| 82 | 84 |  settings.builtinBridgeMeekAzure=meek-azure
 |  
| 83 |  | -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.
 |  
|  | 85 | +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.
 |  
|  | 86 | +settings.bridgeButtonConnect=Connect
 |  
|  | 87 | +settings.bridgeButtonAccept=OK
 |  
| 84 | 88 |  
 |  
| 85 | 89 |  # Request bridges dialog
 |  
| 86 | 90 |  settings.requestBridgeDialogTitle=Request Bridge
 |  
 |