[tbb-commits] [tor-browser] 17/33: fixup! squash! Bug 27476: Implement about:torconnect captive portal within Tor Browser

gitolite role git at cupani.torproject.org
Tue May 3 22:40:25 UTC 2022


This is an automated email from the git hooks/post-receive script.

richard pushed a commit to branch tor-browser-91.9.0esr-11.5-1
in repository tor-browser.

commit 251c38c5c362aaf7d2bd55ea5ab515dca9d9fcd4
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Wed Apr 13 09:05:37 2022 +0200

    fixup! squash! Bug 27476: Implement about:torconnect captive portal within Tor Browser
    
    Reworked the about:torconnect page to have its own state machine, that
    is slightly different from the TorConnect's one.
    
    Also includes:
    Bug 40889: applied visual tweaks to breadcrumb styling
    Bug 40892: hghlighted the UI elements in error red instead of the
    breadcrumb
---
 browser/components/torconnect/TorConnectParent.jsm |  13 -
 .../torconnect/content/aboutTorConnect.css         |  79 ++--
 .../torconnect/content/aboutTorConnect.js          | 479 +++++++++++----------
 .../torconnect/content/aboutTorConnect.xhtml       |  15 +-
 browser/components/torconnect/content/globe.svg    |   4 -
 browser/components/torconnect/jar.mn               |   1 -
 6 files changed, 302 insertions(+), 289 deletions(-)

diff --git a/browser/components/torconnect/TorConnectParent.jsm b/browser/components/torconnect/TorConnectParent.jsm
index f39b31a974a95..528f48392880b 100644
--- a/browser/components/torconnect/TorConnectParent.jsm
+++ b/browser/components/torconnect/TorConnectParent.jsm
@@ -9,7 +9,6 @@ const {
   TorConnect,
   TorConnectTopics,
   TorConnectState,
-  TorCensorshipLevel,
 } = ChromeUtils.import("resource:///modules/TorConnect.jsm");
 const { TorSettings, TorSettingsTopics, TorSettingsData } = ChromeUtils.import(
   "resource:///modules/TorSettings.jsm"
@@ -33,11 +32,9 @@ class TorConnectParent extends JSWindowActorParent {
       ErrorDetails: TorConnect.errorDetails,
       BootstrapProgress: TorConnect.bootstrapProgress,
       BootstrapStatus: TorConnect.bootstrapStatus,
-      DetectedCensorshipLevel: TorConnect.detectedCensorshipLevel,
       InternetStatus: TorConnect.internetStatus,
       ShowViewLog: TorConnect.logHasWarningOrError,
       QuickStartEnabled: TorSettings.quickstart.enabled,
-      CountryCodes: TorConnect.countryCodes,
     };
 
     // JSWindowActiveParent derived objects cannot observe directly, so create a member
@@ -78,16 +75,7 @@ class TorConnectParent extends JSWindowActorParent {
           case TorConnectTopics.BootstrapError: {
             self.state.ErrorMessage = obj.message;
             self.state.ErrorDetails = obj.details;
-            self.state.DetectedCensorshipLevel = obj.censorshipLevel;
             self.state.InternetStatus = TorConnect.internetStatus;
-
-            // With severe censorshp, we offer user list of countries to try
-            if (
-              self.state.DetectedCensorshipLevel == TorCensorshipLevel.Severe
-            ) {
-              self.state.CountryCodes = TorConnect.countryCodes;
-            }
-
             self.state.ShowViewLog = true;
             break;
           }
@@ -171,7 +159,6 @@ class TorConnectParent extends JSWindowActorParent {
         return {
           TorStrings,
           TorConnectState,
-          TorCensorshipLevel,
           InternetStatus,
           Direction: Services.locale.isAppLocaleRTL ? "rtl" : "ltr",
           State: this.state,
diff --git a/browser/components/torconnect/content/aboutTorConnect.css b/browser/components/torconnect/content/aboutTorConnect.css
index 926ff4927505a..7f7d75010e82e 100644
--- a/browser/components/torconnect/content/aboutTorConnect.css
+++ b/browser/components/torconnect/content/aboutTorConnect.css
@@ -10,22 +10,9 @@
   --onion-radius: 75px;
 }
 
-/* override firefox's default blue focus coloring */
-:focus {
-  outline:  none!important;
-  box-shadow: 0 0 0 3px var(--purple-30) !important;
-  border:  1px var(--purple-80) solid !important;
-}
-
- at media (prefers-color-scheme: dark)
-{
-  :focus {
-    box-shadow: 0 0 0 3px var(--purple-50)!important;
-  }
-}
-
 #breadcrumbs {
   display: flex;
+  align-items: center;
   margin: 0 0 24px 0;
   color: var(--grey-40);
 }
@@ -38,15 +25,24 @@
   display: flex;
   margin: 0;
   margin-inline-start: 20px;
+  padding: 8px;
 }
 
 .breadcrumb-item {
+  align-items: center;
   cursor: pointer;
   color: var(--in-content-text-color);
+  border-radius: 4px;
 }
 
 .breadcrumb-item:hover {
+  color: var(--in-content-accent-color);
+  background-color: var(--grey-20);
+}
+
+.breadcrumb-item:active {
   color: var(--in-content-accent-color-active);
+  background-color: var(--grey-30);
 }
 
 .breadcrumb-separator {
@@ -60,24 +56,26 @@
 
 .breadcrumb-icon {
   display: inline list-item;
+  height: 16px;
   list-style-position: inside;
   fill: currentColor;
   -moz-context-properties: fill;
 }
 
-.breadcrumb-label {
-  margin-top: -1px;
-}
-
 .breadcrumb-item.active {
-  color: var(--in-content-accent-color-active);
+  color: var(--in-content-accent-color);
 }
 
-.breadcrumb-item.disabled, .breadcrumb-item.disabled:hover {
-  color: var(--green-90-a40);
+.breadcrumb-item.disabled, .breadcrumb-item.disabled:hover, .breadcrumb-item.disabled:active {
+  color: var(--in-content-text-color);
+  opacity: 0.4;
   cursor: default;
 }
 
+.breadcrumb-item.disabled:hover, .breadcrumb-item.disabled:active {
+  background-color: var(--grey-20);
+}
+
 .breadcrumb-item.error {
   color: var(--in-content-danger-button-background);
 }
@@ -94,8 +92,12 @@
   display: none;
 }
 
-#connection-assist {
-  margin-left: 0;
+#connect-to-tor {
+  margin-inline-start: 0;
+}
+
+#connect-to-tor-icon {
+  list-style-image: url("chrome://browser/content/torconnect/onion.svg");
 }
 
 #connection-assist-icon {
@@ -114,29 +116,24 @@
   list-style-image: url("chrome://browser/content/torconnect/bridge.svg");
 }
 
-button.primary {
-  background-color: var(--purple-60)!important;
-  color: white!important;
-  fill: white!important;
-}
-
-button.primary:hover {
-  background-color: var(--purple-70)!important;
-  color: white!important;
-  fill: white!important;
-}
-
-button.primary:active {
-  background-color: var(--purple-80)!important;
-  color: white!important;
-  fill: white!important;
+button {
+  --in-content-primary-button-background: var(--purple-60);
+  --in-content-primary-button-background-hover: var(--purple-70);
+  --in-content-primary-button-background-active: var(--purple-80);
+  --in-content-focus-outline-color: var(--purple-60);
+  --in-content-primary-button-text-color: white;
+  fill: white;
 }
 
-div#locationDropdownLabel {
+#locationDropdownLabel {
   margin-block: auto;
   margin-inline: 4px;
 }
 
+#locationDropdownLabel.error {
+  color: var(--in-content-danger-button-background)
+}
+
 /* this follows similar css in error-pages.css for buttons */
 @media only screen and (min-width: 480px) {
   form#locationDropdown {
@@ -277,7 +274,7 @@ body {
   fill: var(--onion-color);
 }
 
-.title.error {
+.title.assit {
   background-image: url("chrome://browser/content/torconnect/connection-failure.svg");
 }
 
diff --git a/browser/components/torconnect/content/aboutTorConnect.js b/browser/components/torconnect/content/aboutTorConnect.js
index 30dfbd978315f..e525949c40d88 100644
--- a/browser/components/torconnect/content/aboutTorConnect.js
+++ b/browser/components/torconnect/content/aboutTorConnect.js
@@ -5,7 +5,6 @@
 // populated in AboutTorConnect.init()
 let TorStrings = {};
 let TorConnectState = {};
-let TorCensorshipLevel = {};
 let InternetStatus = {};
 
 const BreadcrumbStatus = Object.freeze({
@@ -29,15 +28,15 @@ class AboutTorConnect {
     },
     breadcrumbs: {
       container: "#breadcrumbs",
+      connectToTor: {
+        link: "#connect-to-tor",
+        label: "#connect-to-tor .breadcrumb-label",
+      },
       connectionAssist: {
+        separator: "#connection-assist-separator",
         link: "#connection-assist",
         label: "#connection-assist .breadcrumb-label",
       },
-      locationSettings: {
-        separator: "#location-settings-separator",
-        link: "#location-settings",
-        label: "#location-settings .breadcrumb-label",
-      },
       tryBridge: {
         separator: "#try-bridge-separator",
         link: "#try-bridge",
@@ -59,10 +58,9 @@ class AboutTorConnect {
       cancel: "button#cancelButton",
       connect: "button#connectButton",
       tryBridge: "button#tryBridgeButton",
-      locationDropdownLabel: "div#locationDropdownLabel",
+      locationDropdownLabel: "#locationDropdownLabel",
       locationDropdown: "form#locationDropdown",
       locationDropdownSelect: "form#locationDropdown select",
-      tryAgain: "button#tryAgainButton",
     },
   });
 
@@ -79,21 +77,21 @@ class AboutTorConnect {
     breadcrumbContainer: document.querySelector(
       this.selectors.breadcrumbs.container
     ),
+    connectToTorLink: document.querySelector(
+      this.selectors.breadcrumbs.connectToTor.link
+    ),
+    connectToTorLabel: document.querySelector(
+      this.selectors.breadcrumbs.connectToTor.label
+    ),
+    connectionAssistSeparator: document.querySelector(
+      this.selectors.breadcrumbs.connectionAssist.separator
+    ),
     connectionAssistLink: document.querySelector(
       this.selectors.breadcrumbs.connectionAssist.link
     ),
     connectionAssistLabel: document.querySelector(
       this.selectors.breadcrumbs.connectionAssist.label
     ),
-    locationSettingsSeparator: document.querySelector(
-      this.selectors.breadcrumbs.locationSettings.separator
-    ),
-    locationSettingsLink: document.querySelector(
-      this.selectors.breadcrumbs.locationSettings.link
-    ),
-    locationSettingsLabel: document.querySelector(
-      this.selectors.breadcrumbs.locationSettings.label
-    ),
     tryBridgeSeparator: document.querySelector(
       this.selectors.breadcrumbs.tryBridge.separator
     ),
@@ -116,7 +114,6 @@ class AboutTorConnect {
     configureButton: document.querySelector(this.selectors.buttons.configure),
     cancelButton: document.querySelector(this.selectors.buttons.cancel),
     connectButton: document.querySelector(this.selectors.buttons.connect),
-    tryBridgeButton: document.querySelector(this.selectors.buttons.tryBridge),
     locationDropdownLabel: document.querySelector(
       this.selectors.buttons.locationDropdownLabel
     ),
@@ -126,13 +123,21 @@ class AboutTorConnect {
     locationDropdownSelect: document.querySelector(
       this.selectors.buttons.locationDropdownSelect
     ),
-    tryAgainButton: document.querySelector(this.selectors.buttons.tryAgain),
+    tryBridgeButton: document.querySelector(this.selectors.buttons.tryBridge),
   });
 
   // a redirect url can be passed as a query parameter for the page to
   // forward us to once bootstrap completes (otherwise the window will just close)
   redirect = null;
 
+  showNext = state => {};
+
+  allowAutomaticLocation = true;
+
+  bootstrappingTitle = "";
+  bootstrappingDescription = "";
+  bootstrappingBreadcrumb = -1;
+
   locations = {};
 
   beginBootstrap() {
@@ -147,6 +152,9 @@ class AboutTorConnect {
     this.hide(this.elements.tryBridgeButton);
     this.show(this.elements.cancelButton);
     this.elements.cancelButton.focus();
+    if (countryCode === "automatic") {
+      countryCode = "";
+    }
     RPMSendAsyncMessage("torconnect:begin-autobootstrap", countryCode);
   }
 
@@ -159,11 +167,7 @@ class AboutTorConnect {
   */
 
   show(element, primary) {
-    if (primary) {
-      element.classList.add("primary");
-    } else {
-      element.classList.remove("primary");
-    }
+    element.classList.toggle("primary", primary !== undefined && primary);
     element.removeAttribute("hidden");
   }
 
@@ -176,10 +180,9 @@ class AboutTorConnect {
     this.hide(this.elements.configureButton);
     this.hide(this.elements.cancelButton);
     this.hide(this.elements.connectButton);
-    this.hide(this.elements.tryBridgeButton);
     this.hide(this.elements.locationDropdownLabel);
     this.hide(this.elements.locationDropdown);
-    this.hide(this.elements.tryAgainButton);
+    this.hide(this.elements.tryBridgeButton);
   }
 
   populateLocations() {
@@ -205,14 +208,14 @@ class AboutTorConnect {
     );
   }
 
-  populateSpecialLocations(specialLocations) {
-    this.removeSpecialLocations();
-    if (!specialLocations || !specialLocations.length) {
+  populateFrequentLocations(locations) {
+    this.removeFrequentLocations();
+    if (!locations || !locations.length) {
       return;
     }
 
     const locationNodes = [];
-    for (const code of specialLocations) {
+    for (const code of locations) {
       const option = document.createElement("option");
       option.value = code;
       option.className = "frequent-location";
@@ -230,21 +233,24 @@ class AboutTorConnect {
       left.textContent.localeCompare(right.textContent)
     );
 
-    const specialGroup = document.createElement("optgroup");
-    specialGroup.setAttribute("label", TorStrings.torConnect.frequentLocations);
-    specialGroup.className = "frequent-location";
+    const frequentGroup = document.createElement("optgroup");
+    frequentGroup.setAttribute(
+      "label",
+      TorStrings.torConnect.frequentLocations
+    );
+    frequentGroup.className = "frequent-location";
     const locationGroup = document.createElement("optgroup");
     locationGroup.setAttribute("label", TorStrings.torConnect.otherLocations);
     locationGroup.className = "frequent-location";
-    // options[0] is "Select Country or Region"
+    // options[0] is either "Select Country or Region" or "Automatic"
     this.elements.locationDropdownSelect.options[0].after(
-      specialGroup,
+      frequentGroup,
       ...locationNodes,
       locationGroup
     );
   }
 
-  removeSpecialLocations() {
+  removeFrequentLocations() {
     const select = this.elements.locationDropdownSelect;
     for (const option of select.querySelectorAll(".frequent-location")) {
       option.remove();
@@ -257,20 +263,15 @@ class AboutTorConnect {
       selectedIndex
     ];
     if (!selectedOption.value) {
-      this.elements.tryAgainButton.setAttribute("disabled", "disabled");
+      this.elements.tryBridgeButton.setAttribute("disabled", "disabled");
     } else {
-      this.elements.tryAgainButton.removeAttribute("disabled");
+      this.elements.tryBridgeButton.removeAttribute("disabled");
     }
   }
 
   setTitle(title, className) {
     this.elements.titleText.textContent = title;
-    if (className !== "error") {
-      this.elements.title.classList.remove("error");
-    }
-    if (className !== "location") {
-      this.elements.title.classList.remove("location");
-    }
+    this.elements.title.className = "title";
     if (className) {
       this.elements.title.classList.add(className);
     }
@@ -292,14 +293,14 @@ class AboutTorConnect {
     }
   }
 
-  setBreadcrumbsStatus(connectionAssist, locationSettings, tryBridge) {
+  setBreadcrumbsStatus(connectToTor, connectionAssist, tryBridge) {
     this.elements.breadcrumbContainer.classList.remove("hidden");
     const elems = [
-      [this.elements.connectionAssistLink, connectionAssist, null],
+      [this.elements.connectToTorLink, connectToTor, null],
       [
-        this.elements.locationSettingsLink,
-        locationSettings,
-        this.elements.locationSettingsSeparator,
+        this.elements.connectionAssistLink,
+        connectionAssist,
+        this.elements.connectionAssistSeparator,
       ],
       [
         this.elements.tryBridgeLink,
@@ -336,118 +337,29 @@ class AboutTorConnect {
   /* Per-state updates */
 
   update_Initial(state) {
-    const hasError = false;
-    const showProgressbar = false;
-
-    this.setTitle(TorStrings.torConnect.torConnect, hasError ? "error" : "");
-    this.setProgress(
-      TorStrings.settings.torPreferencesDescription,
-      showProgressbar
-    );
-    this.hide(this.elements.quickstartContainer);
-    this.hide(this.elements.viewLogContainer);
-    this.hideButtons();
+    this.showConnectToTor(state, false);
   }
 
   update_Configuring(state) {
-    const hasError = state.ErrorMessage != null;
-    const showProgressbar = false;
-
     this.hide(this.elements.quickstartContainer);
     this.hide(this.elements.viewLogContainer);
     this.hideButtons();
 
-    if (hasError) {
-      if (state.InternetStatus === InternetStatus.Offline) {
-        this.showOffline(state.ErrorMessage);
-        return;
-      }
-      switch (state.DetectedCensorshipLevel) {
-        case TorCensorshipLevel.None:
-          // we shouldn't be able to get here
-          break;
-        case TorCensorshipLevel.Moderate:
-          // bootstrap failed once, offer auto bootstrap
-          this.showConnectionAssistant(state.ErrorDetails);
-          if (state.StateChanged) {
-            this.elements.tryBridgeButton.focus();
-          }
-          break;
-        case TorCensorshipLevel.Severe:
-          // autobootstrap failed, verify correct location
-          this.showLocationSettings(state.CountryCodes, state.ErrorMessage);
-          if (state.StateChanged) {
-            this.elements.tryAgainButton.focus();
-          }
-          break;
-        case TorCensorshipLevel.Extreme:
-          // finally offer to restart tor-browser or go to configure options
-          this.showFinalError(state);
-          break;
-      }
+    if (state.ErrorMessage === null) {
+      this.showConnectToTor(state, false);
+    } else if (state.InternetStatus === InternetStatus.Offline) {
+      this.showOffline(state.ErrorMessage);
     } else {
-      this.setTitle(TorStrings.torConnect.torConnect, "");
-      this.setLongText(TorStrings.settings.torPreferencesDescription);
-      this.setProgress("", showProgressbar);
-      this.show(this.elements.quickstartContainer);
-      this.show(this.elements.configureButton);
-      this.show(this.elements.connectButton, true);
-      this.elements.connectButton.textContent =
-        TorStrings.torConnect.torConnectButton;
-      if (state.StateChanged) {
-        this.elements.connectButton.focus();
-      }
+      this.showNext(state);
     }
   }
 
   update_AutoBootstrapping(state) {
-    const showProgressbar = true;
-
-    if (state.DetectedCensorshipLevel >= TorCensorshipLevel.Severe) {
-      this.setTitle(TorStrings.torConnect.tryingBridgeAgain, "");
-    } else {
-      this.setTitle(TorStrings.torConnect.tryingBridge, "");
-    }
-    this.showConfigureConnectionLink(TorStrings.torConnect.assistDescription);
-    this.setProgress(
-      state.BootstrapStatus,
-      showProgressbar,
-      state.BootstrapProgress
-    );
-    this.setBreadcrumbsStatus(
-      BreadcrumbStatus.Disabled,
-      BreadcrumbStatus.Disabled,
-      BreadcrumbStatus.Active
-    );
-    if (state.ShowViewLog) {
-      this.show(this.elements.viewLogContainer);
-    } else {
-      this.hide(this.elements.viewLogContainer);
-    }
-    this.hideButtons();
-    this.show(this.elements.cancelButton, true);
-    if (state.StateChanged) {
-      this.elements.cancelButton.focus();
-    }
+    this.showBootstrapping(state);
   }
 
   update_Bootstrapping(state) {
-    const showProgressbar = true;
-
-    this.setTitle(TorStrings.torConnect.torConnecting, "");
-    this.setLongText(TorStrings.settings.torPreferencesDescription);
-    this.setProgress("", showProgressbar, state.BootstrapProgress);
-    this.hideBreadcrumbs();
-    if (state.ShowViewLog) {
-      this.show(this.elements.viewLogContainer);
-    } else {
-      this.hide(this.elements.viewLogContainer);
-    }
-    this.hideButtons();
-    this.show(this.elements.cancelButton, true);
-    if (state.StateChanged) {
-      this.elements.cancelButton.focus();
-    }
+    this.showBootstrapping(state);
   }
 
   update_Error(state) {
@@ -479,6 +391,63 @@ class AboutTorConnect {
     // it isn't in use (eg using tor-launcher or system tor)
   }
 
+  showConnectToTor(state, tryAgain) {
+    this.setTitle(TorStrings.torConnect.torConnect, "");
+    this.setLongText(TorStrings.settings.torPreferencesDescription);
+    this.setProgress("", false);
+    this.hideButtons();
+    this.show(this.elements.quickstartContainer);
+    this.show(this.elements.configureButton);
+    this.show(this.elements.connectButton, true);
+    if (state?.StateChanged) {
+      this.elements.connectButton.focus();
+    }
+    if (tryAgain) {
+      this.setBreadcrumbsStatus(
+        BreadcrumbStatus.Active,
+        BreadcrumbStatus.Default,
+        BreadcrumbStatus.Disabled
+      );
+      this.elements.connectButton.textContent = TorStrings.torConnect.tryAgain;
+    }
+    this.bootstrappingDescription =
+      TorStrings.settings.torPreferencesDescription;
+    this.showNext = fromState => {
+      this.showConnectionAssistant(fromState.ErrorDetails);
+      if (fromState.StateChanged) {
+        this.elements.tryBridgeButton.focus();
+      }
+    };
+  }
+
+  showBootstrapping(state) {
+    const showProgressbar = true;
+    this.setTitle(this.bootstrappingTitle, "");
+    this.showConfigureConnectionLink(this.bootstrappingDescription);
+    this.setProgress("", showProgressbar, state.BootstrapProgress);
+    if (this.bootstrappingBreadcrumb < 0) {
+      this.hideBreadcrumbs();
+    } else {
+      const breadcrumbs = [
+        BreadcrumbStatus.Disabled,
+        BreadcrumbStatus.Disabled,
+        BreadcrumbStatus.Disabled,
+      ];
+      breadcrumbs[this.bootstrappingBreadcrumb] = BreadcrumbStatus.Active;
+      this.setBreadcrumbsStatus(...breadcrumbs);
+    }
+    if (state.ShowViewLog) {
+      this.show(this.elements.viewLogContainer);
+    } else {
+      this.hide(this.elements.viewLogContainer);
+    }
+    this.hideButtons();
+    this.show(this.elements.cancelButton, true);
+    if (state.StateChanged) {
+      this.elements.cancelButton.focus();
+    }
+  }
+
   showOffline(error) {
     this.setTitle(TorStrings.torConnect.noInternet, "error");
     this.setLongText("Some long text from 🍩️");
@@ -494,24 +463,89 @@ class AboutTorConnect {
     this.elements.connectButton.textContent = TorStrings.torConnect.tryAgain;
   }
 
-  showConnectionAssistant(error) {
-    const hasError = !!error;
-    this.setTitle(
-      TorStrings.torConnect.couldNotConnect,
-      hasError ? "error" : ""
-    );
+  showConnectionAssistant(errorMessage) {
+    this.setTitle(TorStrings.torConnect.couldNotConnect, "assit");
     this.showConfigureConnectionLink(TorStrings.torConnect.assistDescription);
-    this.setProgress(error, false);
+    this.setProgress(errorMessage, false);
     this.setBreadcrumbsStatus(
+      BreadcrumbStatus.Default,
       BreadcrumbStatus.Active,
+      BreadcrumbStatus.Disabled
+    );
+    this.showLocationForm(false, TorStrings.torConnect.tryBridge);
+    this.bootstrappingBreadcrumb = 2;
+    this.bootstrappingTitle = TorStrings.torConnect.tryingBridge;
+    this.bootstrappingDescription = TorStrings.torConnect.assistDescription;
+    this.showNext = state => {
+      if (this.getLocation() === "automatic") {
+        this.showCannotLocate(state.ErrorMessage);
+      } else {
+        this.showLocationConfirmation(state.ErrorMessage);
+      }
+      if (state.StateChanged) {
+        this.elements.tryBridgeButton.focus();
+      }
+    };
+  }
+
+  showCannotLocate(errorMessage) {
+    this.allowAutomaticLocation = false;
+    this.setTitle(TorStrings.torConnect.errorLocation, "location");
+    this.showConfigureConnectionLink(
+      TorStrings.torConnect.errorLocationDescription
+    );
+    this.setProgress(errorMessage, false);
+    this.setBreadcrumbsStatus(
       BreadcrumbStatus.Default,
+      BreadcrumbStatus.Active,
       BreadcrumbStatus.Disabled
     );
+    this.showLocationForm(true, TorStrings.torConnect.tryBridge);
+    this.bootstrappingBreadcrumb = 2;
+    this.bootstrappingTitle = TorStrings.torConnect.tryingBridgeAgain;
+    this.bootstrappingDescription =
+      TorStrings.torConnect.errorLocationDescription;
+    this.showNext = state => {
+      this.showFinalError(state);
+    };
+  }
+
+  showLocationConfirmation(errorMessage) {
+    this.setTitle(TorStrings.torConnect.isLocationCorrect, "location");
+    this.showConfigureConnectionLink(
+      TorStrings.torConnect.isLocationCorrectDescription
+    );
+    this.setProgress(errorMessage, false);
+    this.setBreadcrumbsStatus(
+      BreadcrumbStatus.Default,
+      BreadcrumbStatus.Default,
+      BreadcrumbStatus.Active
+    );
+    this.showLocationForm(true, TorStrings.torConnect.tryAgain);
+    this.bootstrappingBreadcrumb = 2;
+    this.bootstrappingTitle = TorStrings.torConnect.tryingBridgeAgain;
+    this.bootstrappingDescription =
+      TorStrings.torConnect.isLocationCorrectDescription;
+    this.showNext = state => {
+      this.showFinalError(state);
+    };
+  }
+
+  showFinalError(state) {
+    this.setTitle(TorStrings.torConnect.finalError, "error");
+    this.setLongText(TorStrings.torConnect.finalErrorDescription);
+    this.setProgress(state ? state.ErrorDetails : "", false);
+    this.setBreadcrumbsStatus(
+      BreadcrumbStatus.Default,
+      BreadcrumbStatus.Default,
+      BreadcrumbStatus.Active
+    );
     this.hideButtons();
-    this.show(this.elements.configureButton);
-    this.show(this.elements.connectButton);
-    this.elements.connectButton.textContent = TorStrings.torConnect.tryAgain;
-    this.show(this.elements.tryBridgeButton, true);
+    this.show(this.elements.restartButton);
+    this.show(this.elements.configureButton, true);
+    this.showNext = fromState => {
+      this.showFinalError(fromState);
+    };
   }
 
   showConfigureConnectionLink(text) {
@@ -523,76 +557,77 @@ class AboutTorConnect {
       e.preventDefault();
       RPMSendAsyncMessage("torconnect:open-tor-preferences");
     });
-    this.setLongText(pieces[0], link, pieces[1]);
-  }
-
-  showLocationSettings(locations, error) {
-    const hasError = !!error;
-    if (hasError) {
-      this.setTitle(TorStrings.torConnect.errorLocation, "location");
-      this.setLongText(TorStrings.torConnect.errorLocationDescription);
-      this.setBreadcrumbsStatus(
-        BreadcrumbStatus.Disabled,
-        BreadcrumbStatus.Error,
-        BreadcrumbStatus.Disabled
-      );
-      this.elements.tryAgainButton.textContent = TorStrings.torConnect.tryAgain;
+    if (pieces.length > 1) {
+      const first = pieces.shift();
+      this.setLongText(first, link, ...pieces);
     } else {
-      this.setTitle(TorStrings.torConnect.addLocation, "location");
-      this.showConfigureConnectionLink(
-        TorStrings.torConnect.addLocationDescription
-      );
-      this.setBreadcrumbsStatus(
-        BreadcrumbStatus.Default,
-        BreadcrumbStatus.Active,
-        BreadcrumbStatus.Disabled
-      );
-      this.elements.tryAgainButton.textContent =
-        TorStrings.torConnect.tryBridge;
+      this.setLongText(text);
     }
-    this.setProgress(error, false);
+  }
+
+  showLocationForm(isError, buttonLabel) {
     this.hideButtons();
-    if (!locations || !locations.length) {
-      RPMSendQuery("torconnect:get-country-codes").then(codes => {
-        if (codes && codes.length) {
-          this.populateSpecialLocations(codes);
-        }
-      });
+    RPMSendQuery("torconnect:get-country-codes").then(codes => {
+      if (codes && codes.length) {
+        this.populateFrequentLocations(codes);
+      }
+    });
+    let firstOpt = this.elements.locationDropdownSelect.options[0];
+    if (this.allowAutomaticLocation) {
+      firstOpt.value = "automatic";
+      firstOpt.textContent = TorStrings.torConnect.automatic;
     } else {
-      this.populateSpecialLocations(locations);
+      firstOpt.value = "";
+      firstOpt.textContent = TorStrings.torConnect.selectCountryRegion;
     }
     this.validateLocation();
     this.show(this.elements.locationDropdownLabel);
     this.show(this.elements.locationDropdown);
-    this.show(this.elements.tryAgainButton, true);
+    this.elements.locationDropdownLabel.classList.toggle("error", isError);
+    this.show(this.elements.tryBridgeButton, true);
+    this.elements.tryBridgeButton.classList.toggle("danger-button", isError);
+    if (buttonLabel !== undefined) {
+      this.elements.tryBridgeButton.textContent = buttonLabel;
+    }
   }
 
-  showFinalError(state) {
-    this.setTitle(TorStrings.torConnect.finalError, "error");
-    this.setLongText(TorStrings.torConnect.finalErrorDescription);
-    this.setProgress(state ? state.ErrorDetails : "", false);
-    this.hideButtons();
-    this.show(this.elements.restartButton);
-    this.show(this.elements.configureButton, true);
+  getLocation() {
+    const selectedIndex = this.elements.locationDropdownSelect.selectedIndex;
+    return this.elements.locationDropdownSelect.options[selectedIndex].value;
   }
 
   initElements(direction) {
     document.documentElement.setAttribute("dir", direction);
 
+    this.bootstrappingTitle = TorStrings.torConnect.torConnecting;
+
+    this.elements.connectToTorLink.addEventListener("click", event => {
+      if (
+        this.elements.connectToTorLink.classList.contains(
+          BreadcrumbStatus.Active
+        )
+      ) {
+        return;
+      }
+      this.showConnectToTor(null, true);
+    });
+    this.elements.connectToTorLabel.textContent =
+      TorStrings.torConnect.torConnect;
     this.elements.connectionAssistLink.addEventListener("click", event => {
-      if (!this.elements.connectionAssistLink.classList.contains("disabled")) {
-        this.showConnectionAssistant();
+      if (
+        this.elements.connectionAssistLink.classList.contains(
+          BreadcrumbStatus.Active
+        ) ||
+        this.elements.connectionAssistLink.classList.contains(
+          BreadcrumbStatus.Disabled
+        )
+      ) {
+        return;
       }
+      this.showConnectionAssistant();
     });
     this.elements.connectionAssistLabel.textContent =
       TorStrings.torConnect.breadcrumbAssist;
-    this.elements.locationSettingsLink.addEventListener("click", event => {
-      if (!this.elements.connectionAssistLink.classList.contains("disabled")) {
-        this.showLocationSettings();
-      }
-    });
-    this.elements.locationSettingsLabel.textContent =
-      TorStrings.torConnect.breadcrumbLocation;
     this.elements.tryBridgeLabel.textContent =
       TorStrings.torConnect.breadcrumbTryBridge;
 
@@ -629,6 +664,13 @@ class AboutTorConnect {
     this.elements.connectButton.textContent =
       TorStrings.torConnect.torConnectButton;
     this.elements.connectButton.addEventListener("click", () => {
+      if (
+        this.elements.connectButton.textContent ===
+        TorStrings.torConnect.tryAgain
+      ) {
+        this.bootstrappingBreadcrumb = 0;
+        this.bootstrappingTitle = TorStrings.torConnect.tryingAgain;
+      }
       this.beginBootstrap();
     });
 
@@ -637,23 +679,17 @@ class AboutTorConnect {
       this.validateLocation();
     });
 
-    this.elements.tryBridgeButton.textContent = TorStrings.torConnect.tryBridge;
-    this.elements.tryBridgeButton.addEventListener("click", () => {
-      this.beginAutoBootstrap();
-    });
-
     this.elements.locationDropdownLabel.textContent =
       TorStrings.torConnect.yourLocation;
 
-    this.elements.tryAgainButton.textContent = TorStrings.torConnect.tryAgain;
-    this.elements.tryAgainButton.setAttribute("disabled", "disabled");
-    this.elements.tryAgainButton.addEventListener("click", () => {
-      let selectedIndex = this.elements.locationDropdownSelect.selectedIndex;
-      let selectedOption = this.elements.locationDropdownSelect.options[
-        selectedIndex
-      ];
-
-      this.beginAutoBootstrap(selectedOption.value);
+    this.elements.tryBridgeButton.textContent = TorStrings.torConnect.tryBridge;
+    this.elements.tryBridgeButton.addEventListener("click", () => {
+      const value = this.getLocation();
+      if (value === "automatic") {
+        this.beginAutoBootstrap();
+      } else {
+        this.beginAutoBootstrap(value);
+      }
     });
   }
 
@@ -692,7 +728,6 @@ class AboutTorConnect {
     // various constants
     TorStrings = Object.freeze(args.TorStrings);
     TorConnectState = Object.freeze(args.TorConnectState);
-    TorCensorshipLevel = Object.freeze(args.TorCensorshipLevel);
     InternetStatus = Object.freeze(args.InternetStatus);
     this.locations = args.CountryNames;
 
diff --git a/browser/components/torconnect/content/aboutTorConnect.xhtml b/browser/components/torconnect/content/aboutTorConnect.xhtml
index 4bb5b31949a67..674029fdeda34 100644
--- a/browser/components/torconnect/content/aboutTorConnect.xhtml
+++ b/browser/components/torconnect/content/aboutTorConnect.xhtml
@@ -10,13 +10,13 @@
     <div id="progressBackground"></div>
     <div id="connectPageContainer" class="container">
       <div id="breadcrumbs" class="hidden">
-        <span id="connection-assist" class="breadcrumb-item">
-          <span id="connection-assist-icon" class="breadcrumb-icon" />
+        <span id="connect-to-tor" class="breadcrumb-item">
+          <span id="connect-to-tor-icon" class="breadcrumb-icon" />
           <span class="breadcrumb-label"/>
         </span>
-        <span id="location-settings-separator" class="breadcrumb-separator breadcrumb-icon" />
-        <span id="location-settings" class="breadcrumb-item">
-          <span id="location-settings-icon" class="breadcrumb-icon" />
+        <span id="connection-assist-separator" class="breadcrumb-separator breadcrumb-icon" />
+        <span id="connection-assist" class="breadcrumb-item">
+          <span id="connection-assist-icon" class="breadcrumb-icon" />
           <span class="breadcrumb-label"/>
         </span>
         <span id="try-bridge-separator" class="breadcrumb-separator breadcrumb-icon" />
@@ -50,13 +50,12 @@
           <button id="configureButton" hidden="true"></button>
           <button id="cancelButton" hidden="true"></button>
           <button id="connectButton" class="primary" hidden="true"></button>
-          <button id="tryBridgeButton" class="primary" hidden="true"></button>
-          <div id="locationDropdownLabel"/>
+          <label id="locationDropdownLabel" for="countries"/>
           <form id="locationDropdown" hidden="true">
             <select id="countries">
             </select>
           </form>
-          <button id="tryAgainButton" class="primary" hidden="true"></button>
+          <button id="tryBridgeButton" class="primary" hidden="true"></button>
         </div>
       </div>
     </div>
diff --git a/browser/components/torconnect/content/globe.svg b/browser/components/torconnect/content/globe.svg
deleted file mode 100644
index f4d1f19b43ce8..0000000000000
--- a/browser/components/torconnect/content/globe.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 0.5C6.01088 0.5 4.10322 1.29018 2.6967 2.6967C1.29018 4.10322 0.5 6.01088 0.5 8C0.5 9.98912 1.29018 11.8968 2.6967 13.3033C4.10322 14.7098 6.01088 15.5 8 15.5C9.98912 15.5 11.8968 14.7098 13.3033 13.3033C14.7098 11.8968 15.5 9.98912 15.5 8C15.5 6.01088 14.7098 4.10322 13.3033 2.6967C11.8968 1.29018 9.98912 0.5 8 0.5ZM10.447 2.25C11.4738 2.69088 12.3637 3.39877 13.0242 4.30006C13.6848 5.20135 14.0918 6.26313 14.203 7.375H11.974C11.8509 5.51288 11.1778 3.72922 10.04 2.25H10 [...]
-</svg>
diff --git a/browser/components/torconnect/jar.mn b/browser/components/torconnect/jar.mn
index 8ca0b0651523e..043bd1435cda5 100644
--- a/browser/components/torconnect/jar.mn
+++ b/browser/components/torconnect/jar.mn
@@ -5,7 +5,6 @@ browser.jar:
     content/browser/torconnect/aboutTorConnect.js                  (content/aboutTorConnect.js)
     content/browser/torconnect/arrow-right.svg                     (content/arrow-right.svg)
     content/browser/torconnect/bridge.svg                          (content/bridge.svg)
-    content/browser/torconnect/globe.svg                           (content/globe.svg)
     content/browser/torconnect/connection-failure.svg              (content/connection-failure.svg)
     content/browser/torconnect/connection-location.svg             (content/connection-location.svg)
     content/browser/torconnect/onion.svg                           (content/onion.svg)

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.


More information about the tbb-commits mailing list