[tor-commits] [tor-browser] 67/85: fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
gitolite role
git at cupani.torproject.org
Fri Jun 10 17:01:58 UTC 2022
This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch tor-browser-91.9.0esr-11.5-2
in repository tor-browser.
commit d3f26be63d2106c48f47dabd51ff6416d97a9e64
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Thu Apr 7 12:23:55 2022 +0200
fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
Changes introduced by !275
---
browser/components/torconnect/TorConnectParent.jsm | 53 +-
.../torconnect/content/aboutTorConnect.css | 178 ++++--
.../torconnect/content/aboutTorConnect.js | 675 +++++++++++++--------
.../torconnect/content/aboutTorConnect.xhtml | 24 +-
browser/components/torconnect/content/globe.svg | 4 -
browser/components/torconnect/jar.mn | 1 -
toolkit/modules/RemotePageAccessManager.jsm | 7 +-
7 files changed, 596 insertions(+), 346 deletions(-)
diff --git a/browser/components/torconnect/TorConnectParent.jsm b/browser/components/torconnect/TorConnectParent.jsm
index dd3d1b2410f95..3c2a56934c145 100644
--- a/browser/components/torconnect/TorConnectParent.jsm
+++ b/browser/components/torconnect/TorConnectParent.jsm
@@ -4,13 +4,18 @@ var EXPORTED_SYMBOLS = ["TorConnectParent"];
const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
const { TorStrings } = ChromeUtils.import("resource:///modules/TorStrings.jsm");
-const { TorConnect, TorConnectTopics, TorConnectState, TorCensorshipLevel } = ChromeUtils.import(
- "resource:///modules/TorConnect.jsm"
-);
+const {
+ InternetStatus,
+ TorConnect,
+ TorConnectTopics,
+ TorConnectState,
+} = ChromeUtils.import("resource:///modules/TorConnect.jsm");
const { TorSettings, TorSettingsTopics, TorSettingsData } = ChromeUtils.import(
"resource:///modules/TorSettings.jsm"
);
+const BroadcastTopic = "about-torconnect:broadcast";
+
/*
This object is basically a marshalling interface between the TorConnect module
and a particular about:torconnect page
@@ -24,15 +29,16 @@ class TorConnectParent extends JSWindowActorParent {
this.state = {
State: TorConnect.state,
- DetectedCensorshiplevel: TorConnect.detectedCensorshiplevel,
StateChanged: false,
+ PreviousState: TorConnectState.Initial,
ErrorMessage: TorConnect.errorMessage,
ErrorDetails: TorConnect.errorDetails,
BootstrapProgress: TorConnect.bootstrapProgress,
BootstrapStatus: TorConnect.bootstrapStatus,
+ InternetStatus: TorConnect.internetStatus,
ShowViewLog: TorConnect.logHasWarningOrError,
QuickStartEnabled: TorSettings.quickstart.enabled,
- CountryCodes: TorConnect.countryCodes,
+ UIState: TorConnect.uiState,
};
// JSWindowActiveParent derived objects cannot observe directly, so create a member
@@ -50,6 +56,7 @@ class TorConnectParent extends JSWindowActorParent {
self.state.StateChanged = false;
switch (aTopic) {
case TorConnectTopics.StateChange: {
+ self.state.PreviousState = self.state.State;
self.state.State = obj.state;
self.state.StateChanged = true;
@@ -73,13 +80,7 @@ class TorConnectParent extends JSWindowActorParent {
case TorConnectTopics.BootstrapError: {
self.state.ErrorMessage = obj.message;
self.state.ErrorDetails = obj.details;
- self.state.DetectedCensorshiplevel = obj.censorshipLevel;
-
- // With severe censorshp, we offer user list of countries to try
- if (self.state.DetectedCensorshiplevel == TorCensorshipLevel.Severe) {
- self.state.CountryCodes = TorConnect.countryCodes;
- }
-
+ self.state.InternetStatus = TorConnect.internetStatus;
self.state.ShowViewLog = true;
break;
}
@@ -114,6 +115,17 @@ class TorConnectParent extends JSWindowActorParent {
this.torConnectObserver,
TorSettingsTopics.SettingChanged
);
+
+ this.userActionObserver = {
+ observe(aSubject, aTopic, aData) {
+ let obj = aSubject?.wrappedJSObject;
+ if (obj) {
+ obj.connState = self.state;
+ self.sendAsyncMessage("torconnect:user-action", obj);
+ }
+ },
+ };
+ Services.obs.addObserver(this.userActionObserver, BroadcastTopic);
}
willDestroy() {
@@ -126,6 +138,7 @@ class TorConnectParent extends JSWindowActorParent {
this.torConnectObserver,
TorSettingsTopics.SettingChanged
);
+ Services.obs.removeObserver(this.userActionObserver, BroadcastTopic);
}
async receiveMessage(message) {
@@ -137,9 +150,6 @@ class TorConnectParent extends JSWindowActorParent {
case "torconnect:open-tor-preferences":
TorConnect.openTorPreferences();
break;
- case "torconnect:view-tor-logs":
- TorConnect.viewTorLogs();
- break;
case "torconnect:cancel-bootstrap":
TorConnect.cancelBootstrap();
break;
@@ -149,21 +159,32 @@ class TorConnectParent extends JSWindowActorParent {
case "torconnect:begin-autobootstrap":
TorConnect.beginAutoBootstrap(message.data);
break;
+ case "torconnect:view-tor-logs":
+ TorConnect.viewTorLogs();
+ break;
case "torconnect:restart":
Services.startup.quit(
Ci.nsIAppStartup.eRestart | Ci.nsIAppStartup.eAttemptQuit
);
break;
+ case "torconnect:set-ui-state":
+ TorConnect.uiState = message.data;
+ this.state.UIState = TorConnect.uiState;
+ break;
+ case "torconnect:broadcast-user-action":
+ Services.obs.notifyObservers(message.data, BroadcastTopic);
+ break;
case "torconnect:get-init-args":
// called on AboutTorConnect.init(), pass down all state data it needs to init
// pretend this is a state transition on init
// so we always get fresh UI
this.state.StateChanged = true;
+ this.state.UIState = TorConnect.uiState;
return {
TorStrings,
TorConnectState,
- TorCensorshipLevel,
+ InternetStatus,
Direction: Services.locale.isAppLocaleRTL ? "rtl" : "ltr",
State: this.state,
CountryNames: TorConnect.countryNames,
diff --git a/browser/components/torconnect/content/aboutTorConnect.css b/browser/components/torconnect/content/aboutTorConnect.css
index 0a3dc9fbd75fd..ae6a76db9fe75 100644
--- a/browser/components/torconnect/content/aboutTorConnect.css
+++ b/browser/components/torconnect/content/aboutTorConnect.css
@@ -10,22 +10,22 @@
--onion-radius: 75px;
}
-/* override firefox's default blue focus coloring */
-:focus {
+input[type="checkbox"]:focus, select: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)
+ at media (-moz-toolbar-prefers-color-scheme: dark)
{
- :focus {
+ input[type="checkbox"]:focus, select: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 +38,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(--blue-60);
+ color: var(--in-content-accent-color);
+ background-color: var(--in-content-button-background-hover);
+}
+
+.breadcrumb-item:active {
+ color: var(--in-content-accent-color-active);
+ background-color: var(--in-content-button-background-active);
}
.breadcrumb-separator {
@@ -60,30 +69,44 @@
.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);
}
-#breadcrumbs .active {
- color: var(--blue-60);
+.breadcrumb-item.disabled, .breadcrumb-item.disabled:hover, .breadcrumb-item.disabled:active {
+ color: var(--in-content-text-color);
+ opacity: 0.4;
+ cursor: default;
}
-#breadcrumbs .disabled, #breadcrumbs .disabled:hover {
- color: var(--green-90-a40);
- cursor: default;
+.breadcrumb-item.error {
+ color: var(--in-content-danger-button-background);
+}
+
+.breadcrumb-item.error:hover {
+ color: var(--in-content-danger-button-background-hover);
+}
+
+.breadcrumb-item.error:active {
+ color: var(--in-content-danger-button-background-active);
}
-#breadcrumbs .error {
- color: var(--red-60);
+.breadcrumb-item.hidden, .breadcrumb-separator.hidden {
+ 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 {
@@ -102,30 +125,28 @@
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 {
+ --purple-button-text-color: rgb(251,251,254);
+ --in-content-primary-button-text-color: var(--purple-button-text-color);
+ --in-content-primary-button-background: var(--purple-60);
+ --in-content-primary-button-text-color-hover: var(--purple-button-text-color);
+ --in-content-primary-button-background-hover: var(--purple-70);
+ --in-content-primary-button-text-color-active: var(--purple-button-text-color);
+ --in-content-primary-button-background-active: var(--purple-80);
+ --in-content-focus-outline-color: var(--purple-60);
+ fill: white;
}
-div#locationDropdownLabel {
+#locationDropdownLabel {
margin-block: auto;
margin-inline: 4px;
}
-/* these two follow similar css in error-pages.css for buttons */
+#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 {
margin-inline: 4px;
@@ -136,14 +157,13 @@ div#locationDropdownLabel {
}
@media only screen and (max-width: 480px) {
- form#locationDropdown,
- div#locationDropdownLabel {
- margin: 0.66em 0 0;
+ #tryAgainButton {
+ margin-top: 4px;
}
+}
- form#locationDropdown {
- width: 100%;
- }
+form#locationDropdown {
+ width: 240px;
}
form#locationDropdown select {
@@ -182,21 +202,79 @@ input[type="checkbox"]:not(:disabled):active:checked {
background-color: var(--purple-80)!important;
}
-#progressBackground {
- position:fixed;
- padding:0;
- margin:0;
- top:0;
- left:0;
+:root {
+ --progressbar-shadow-start: rgba(255, 255, 255, 0.7);
+ --progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%);
+}
+
+ at media (-moz-toolbar-prefers-color-scheme: dark) {
+ :root {
+ --progressbar-shadow-start: rgba(28, 27, 34, 0.7);
+ }
+}
+
+#progressBar {
+ position: fixed;
+ top: 0;
+ inset-inline-start: 0;
width: 0%;
+ padding: 0;
+ margin: 0;
+ animation: progressAnimation 5s ease infinite;
+}
+
+#progressBackground {
+ height: 66px;
+ margin-top: -26px;
+ background-image:
+ linear-gradient(var(--progressbar-shadow-start), var(--in-content-page-background) 100%),
+ var(--progressbar-gradient);
+ background-position: inherit;
+ filter: blur(5px);
+ border-end-end-radius: 33px;
+}
+
+#progressSolid {
+ position: absolute;
+ top: 0;
+ width: 100%;
height: 7px;
- background-image: linear-gradient(90deg, rgb(20, 218, 221) 0%, rgb(128, 109, 236) 100%);
- border-radius: 0;
+ background-image: var(--progressbar-gradient);
+ background-position: inherit;
+}
+
+#progressBackground, #progressSolid {
+ background-size: 200% 100%;
+}
+
+ at keyframes progressAnimation {
+ 0% {
+ background-position: 200%;
+ }
+ 50% {
+ background-position: 100%;
+ }
+ 100% {
+ background-position: 0%;
+ }
+}
+
+ at keyframes progressAnimation {
+ 0% {
+ background-position: 200%;
+ }
+ 50% {
+ background-position: 100%;
+ }
+ 100% {
+ background-position: 0%;
+ }
}
#connectPageContainer {
margin-top: 10vh;
- width: 50%;
+ width: 100%;
+ max-width: 45em;
}
#quickstartCheckbox, #quickstartCheckboxLabel {
@@ -238,7 +316,7 @@ body {
fill: var(--onion-color);
}
-.title.error {
+.title.offline, .title.assist, .title.final {
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 8710eef95a49e..8b5f7216e9ef8 100644
--- a/browser/components/torconnect/content/aboutTorConnect.js
+++ b/browser/components/torconnect/content/aboutTorConnect.js
@@ -5,13 +5,23 @@
// populated in AboutTorConnect.init()
let TorStrings = {};
let TorConnectState = {};
-let TorCensorshipLevel = {};
+let InternetStatus = {};
+
+const UIStates = Object.freeze({
+ ConnectToTor: "ConnectToTor",
+ Offline: "Offline",
+ ConnectionAssist: "ConnectionAssist",
+ CouldNotLocate: "CouldNotLocate",
+ LocationConfirm: "LocationConfirm",
+ FinalError: "FinalError",
+});
const BreadcrumbStatus = Object.freeze({
- Disabled: -1,
- Default: 0,
- Active: 1,
- Error: 2,
+ Hidden: "hidden",
+ Disabled: "disabled",
+ Default: "default",
+ Active: "active",
+ Error: "error",
});
class AboutTorConnect {
@@ -23,24 +33,27 @@ class AboutTorConnect {
},
progress: {
description: "p#connectShortDescText",
- meter: "div#progressBackground",
+ meter: "div#progressBar",
},
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: {
- link: "#location-settings",
- label: "#location-settings .breadcrumb-label",
- },
tryBridge: {
+ separator: "#try-bridge-separator",
link: "#try-bridge",
label: "#try-bridge .breadcrumb-label",
},
},
viewLog: {
+ container: "#viewLogContainer",
link: "span#viewLogLink",
},
quickstart: {
@@ -54,10 +67,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",
},
});
@@ -74,17 +86,23 @@ 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
),
- locationSettingsLink: document.querySelector(
- this.selectors.breadcrumbs.locationSettings.link
- ),
- locationSettingsLabel: document.querySelector(
- this.selectors.breadcrumbs.locationSettings.label
+ tryBridgeSeparator: document.querySelector(
+ this.selectors.breadcrumbs.tryBridge.separator
),
tryBridgeLink: document.querySelector(
this.selectors.breadcrumbs.tryBridge.link
@@ -92,6 +110,7 @@ class AboutTorConnect {
tryBridgeLabel: document.querySelector(
this.selectors.breadcrumbs.tryBridge.label
),
+ viewLogContainer: document.querySelector(this.selectors.viewLog.container),
viewLogLink: document.querySelector(this.selectors.viewLog.link),
quickstartContainer: document.querySelector(
this.selectors.quickstart.container
@@ -104,7 +123,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
),
@@ -114,27 +132,44 @@ 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;
+ uiState = {
+ currentState: UIStates.ConnectToTor,
+ connectIsTryAgain: false,
+ allowAutomaticLocation: true,
+ selectedLocation: "automatic",
+ bootstrapCause: UIStates.ConnectToTor,
+ };
+
locations = {};
+ constructor() {
+ this.uiStates = Object.freeze(
+ Object.fromEntries([
+ [UIStates.ConnectToTor, this.showConnectToTor.bind(this)],
+ [UIStates.Offline, this.showOffline.bind(this)],
+ [UIStates.ConnectionAssist, this.showConnectionAssistant.bind(this)],
+ [UIStates.CouldNotLocate, this.showCouldNotLocate.bind(this)],
+ [UIStates.LocationConfirm, this.showLocationConfirmation.bind(this)],
+ [UIStates.FinalError, this.showFinalError.bind(this)],
+ ])
+ );
+ }
+
beginBootstrap() {
- this.hide(this.elements.connectButton);
- this.hide(this.elements.quickstartContainer);
- this.show(this.elements.cancelButton);
- this.elements.cancelButton.focus();
RPMSendAsyncMessage("torconnect:begin-bootstrap");
}
beginAutoBootstrap(countryCode) {
- this.hide(this.elements.tryBridgeButton);
- this.show(this.elements.cancelButton);
- this.elements.cancelButton.focus();
+ if (countryCode === "automatic") {
+ countryCode = "";
+ }
RPMSendAsyncMessage("torconnect:begin-autobootstrap", countryCode);
}
@@ -142,16 +177,24 @@ class AboutTorConnect {
RPMSendAsyncMessage("torconnect:cancel-bootstrap");
}
+ transitionUIState(nextState, connState) {
+ if (nextState !== this.uiState.currentState) {
+ this.uiState.currentState = nextState;
+ this.saveUIState();
+ }
+ this.uiStates[nextState](connState);
+ }
+
+ saveUIState() {
+ RPMSendAsyncMessage("torconnect:set-ui-state", this.uiState);
+ }
+
/*
Element helper methods
*/
show(element, primary) {
- if (primary) {
- element.classList.add("primary");
- } else {
- element.classList.remove("primary");
- }
+ element.classList.toggle("primary", primary !== undefined && primary);
element.removeAttribute("hidden");
}
@@ -160,14 +203,14 @@ class AboutTorConnect {
}
hideButtons() {
+ this.hide(this.elements.quickstartContainer);
this.hide(this.elements.restartButton);
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() {
@@ -187,31 +230,29 @@ class AboutTorConnect {
locationNodes.sort((left, right) =>
left.textContent.localeCompare(right.textContent)
);
-
this.elements.locationDropdownSelect.append(
selectCountryRegion,
...locationNodes
);
}
- 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";
// codes (partially) come from rdsys service, so make sure we have a
// string defined for it
let name = this.locations[code];
if (!name) {
name = code;
}
-
option.textContent = name;
locationNodes.push(option);
}
@@ -220,28 +261,27 @@ class AboutTorConnect {
left.textContent.localeCompare(right.textContent)
);
- const disabledDividerNode = document.createElement("option");
- disabledDividerNode.setAttribute("disabled", true);
- disabledDividerNode.className = "divider";
+ 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 either "Select Country or Region" or "Automatic"
this.elements.locationDropdownSelect.options[0].after(
+ frequentGroup,
...locationNodes,
- disabledDividerNode
+ locationGroup
);
}
- removeSpecialLocations() {
+ removeFrequentLocations() {
const select = this.elements.locationDropdownSelect;
- if (select.querySelector(".divider") === null) {
- return;
- }
-
- while (select.options.length > 1) {
- // Skip the "select country/region" option
- const opt = select.options[1];
- opt.remove();
- if (opt.className === "divider") {
- break;
- }
+ for (const option of select.querySelectorAll(".frequent-location")) {
+ option.remove();
}
}
@@ -251,20 +291,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);
}
@@ -286,28 +321,30 @@ class AboutTorConnect {
}
}
- setBreadcrumbsStatus(connectionAssist, locationSettings, tryBridge) {
+ setBreadcrumbsStatus(connectToTor, connectionAssist, tryBridge) {
this.elements.breadcrumbContainer.classList.remove("hidden");
- let elems = [
- [this.elements.connectionAssistLink, connectionAssist],
- [this.elements.locationSettingsLink, locationSettings],
- [this.elements.tryBridgeLink, tryBridge],
+ const elems = [
+ [this.elements.connectToTorLink, connectToTor, null],
+ [
+ this.elements.connectionAssistLink,
+ connectionAssist,
+ this.elements.connectionAssistSeparator,
+ ],
+ [
+ this.elements.tryBridgeLink,
+ tryBridge,
+ this.elements.tryBridgeSeparator,
+ ],
];
- elems.forEach(([elem, status]) => {
- elem.classList.remove("disabled");
- elem.classList.remove("active");
- elem.classList.remove("error");
- switch (status) {
- case BreadcrumbStatus.Disabled:
- elem.classList.add("disabled");
- break;
- case BreadcrumbStatus.Active:
- elem.classList.add("active");
- break;
- case BreadcrumbStatus.Error:
- elem.classList.add("error");
- break;
+ elems.forEach(([elem, status, separator]) => {
+ elem.classList.remove(BreadcrumbStatus.Hidden);
+ elem.classList.remove(BreadcrumbStatus.Disabled);
+ elem.classList.remove(BreadcrumbStatus.Active);
+ elem.classList.remove(BreadcrumbStatus.Error);
+ if (status !== "") {
+ elem.classList.add(status);
}
+ separator?.classList.toggle("hidden", status === BreadcrumbStatus.Hidden);
});
}
@@ -328,124 +365,59 @@ 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.viewLogLink);
- this.hideButtons();
+ this.showConnectToTor(state);
}
update_Configuring(state) {
- const hasError = state.ErrorMessage != null;
- const showProgressbar = false;
-
- this.hide(this.elements.quickstartContainer);
- this.hide(this.elements.viewLogLink);
- this.hideButtons();
-
- if (hasError) {
- 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;
- }
- } 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);
- if (state.StateChanged) {
- this.elements.connectButton.focus();
- }
- this.elements.connectButton.textContent =
- TorStrings.torConnect.torConnectButton;
+ if (
+ state.StateChanged &&
+ (state.PreviousState === TorConnectState.Bootstrapping ||
+ state.PreviousState === TorConnectState.AutoBootstrapping)
+ ) {
+ // The bootstrap has been cancelled
+ this.transitionUIState(this.uiState.bootstrapCause, 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.viewLogLink);
- } else {
- this.hide(this.elements.viewLogLink);
- }
- 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.viewLogLink);
- } else {
- this.hide(this.elements.viewLogLink);
- }
- this.hideButtons();
- this.show(this.elements.cancelButton, true);
- if (state.StateChanged) {
- this.elements.cancelButton.focus();
- }
+ this.showBootstrapping(state);
}
update_Error(state) {
- const showProgressbar = false;
-
- this.setTitle(state.ErrorMessage, "error");
- this.setLongText("");
- this.setProgress(state.ErrorDetails, showProgressbar);
- this.hideButtons();
- this.show(this.elements.viewLogLink);
+ if (!this.uiState.connectIsTryAgain) {
+ // TorConnect.hasBootstrapEverFailed remains false in case of Internet
+ // offline
+ this.uiState.connectIsTryAgain = true;
+ this.saveUIState();
+ }
+ if (!state.StateChanged) {
+ return;
+ }
+ if (state.InternetStatus === InternetStatus.Offline) {
+ this.transitionUIState(UIStates.Offline, state);
+ } else if (state.PreviousState === TorConnectState.Bootstrapping) {
+ this.transitionUIState(UIStates.ConnectionAssist, state);
+ } else if (state.PreviousState === TorConnectState.AutoBootstrapping) {
+ if (this.uiState.bootstrapCause === UIStates.ConnectionAssist) {
+ this.transitionUIState(
+ this.getLocation() === "automatic"
+ ? UIStates.CouldNotLocate
+ : UIStates.LocationConfirm,
+ state
+ );
+ } else {
+ this.transitionUIState(UIStates.FinalError, state);
+ }
+ } else {
+ console.error(
+ "We received an error starting from an unexpected state",
+ state
+ );
+ }
}
update_Bootstrapped(state) {
@@ -467,23 +439,165 @@ class AboutTorConnect {
// it isn't in use (eg using tor-launcher or system tor)
}
- showConnectionAssistant(error) {
- const hasError = !!error;
- this.setTitle(
- TorStrings.torConnect.couldNotConnect,
- hasError ? "error" : ""
+ showConnectToTor(state) {
+ this.setTitle(TorStrings.torConnect.torConnect, "");
+ this.setLongText(TorStrings.settings.torPreferencesDescription);
+ this.setProgress("", false);
+ this.hide(this.elements.viewLogContainer);
+ 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 (this.uiState.connectIsTryAgain) {
+ this.setBreadcrumbsStatus(
+ BreadcrumbStatus.Active,
+ BreadcrumbStatus.Default,
+ BreadcrumbStatus.Disabled
+ );
+ this.elements.connectButton.textContent = TorStrings.torConnect.tryAgain;
+ }
+ this.uiState.bootstrapCause = UIStates.ConnectToTor;
+ this.saveUIState();
+ }
+
+ showBootstrapping(state) {
+ const showProgressbar = true;
+ let title = "";
+ let description = "";
+ const breadcrumbs = [
+ BreadcrumbStatus.Disabled,
+ BreadcrumbStatus.Disabled,
+ BreadcrumbStatus.Disabled,
+ ];
+ switch (this.uiState.bootstrapCause) {
+ case UIStates.ConnectToTor:
+ breadcrumbs[0] = BreadcrumbStatus.Active;
+ title = this.uiState.connectIsTryAgain
+ ? TorStrings.torConnect.tryAgain
+ : TorStrings.torConnect.torConnecting;
+ description = TorStrings.settings.torPreferencesDescription;
+ break;
+ case UIStates.ConnectionAssist:
+ breadcrumbs[2] = BreadcrumbStatus.Active;
+ title = TorStrings.torConnect.tryingBridge;
+ description = TorStrings.torConnect.assistDescription;
+ break;
+ case UIStates.CouldNotLocate:
+ breadcrumbs[2] = BreadcrumbStatus.Active;
+ title = TorStrings.torConnect.tryingBridgeAgain;
+ description = TorStrings.torConnect.errorLocationDescription;
+ break;
+ case UIStates.LocationConfirm:
+ breadcrumbs[2] = BreadcrumbStatus.Active;
+ title = TorStrings.torConnect.tryingBridgeAgain;
+ description = TorStrings.torConnect.isLocationCorrectDescription;
+ break;
+ }
+ this.setTitle(title, "");
+ this.showConfigureConnectionLink(description);
+ this.setProgress("", showProgressbar, state.BootstrapProgress);
+ this.setBreadcrumbsStatus(...breadcrumbs);
+ this.hideButtons();
+ if (state.ShowViewLog) {
+ this.show(this.elements.viewLogContainer);
+ } else {
+ this.hide(this.elements.viewLogContainer);
+ }
+ this.show(this.elements.cancelButton, true);
+ if (state.StateChanged) {
+ this.elements.cancelButton.focus();
+ }
+ }
+
+ showOffline(error) {
+ this.setTitle(TorStrings.torConnect.noInternet, "offline");
+ this.setLongText(TorStrings.torConnect.noInternetDescription);
+ this.setProgress(error, false);
+ this.setBreadcrumbsStatus(
+ BreadcrumbStatus.Default,
+ BreadcrumbStatus.Active,
+ BreadcrumbStatus.Hidden
);
+ this.show(this.elements.viewLogContainer);
+ this.hideButtons();
+ this.show(this.elements.configureButton);
+ this.show(this.elements.connectButton, true);
+ this.elements.connectButton.textContent = TorStrings.torConnect.tryAgain;
+ }
+
+ showConnectionAssistant(state) {
+ this.setTitle(TorStrings.torConnect.couldNotConnect, "assist");
this.showConfigureConnectionLink(TorStrings.torConnect.assistDescription);
- this.setProgress(error, false);
+ this.setProgress(state?.ErrorDetails, false);
this.setBreadcrumbsStatus(
+ BreadcrumbStatus.Default,
BreadcrumbStatus.Active,
+ BreadcrumbStatus.Disabled
+ );
+ this.showLocationForm(false, TorStrings.torConnect.tryBridge);
+ if (state?.StateChanged) {
+ this.elements.tryBridgeButton.focus();
+ }
+ this.uiState.bootstrapCause = UIStates.ConnectionAssist;
+ this.saveUIState();
+ }
+
+ showCouldNotLocate(state) {
+ this.uiState.allowAutomaticLocation = false;
+ this.setTitle(TorStrings.torConnect.errorLocation, "location");
+ this.showConfigureConnectionLink(
+ TorStrings.torConnect.errorLocationDescription
+ );
+ this.setProgress(state.ErrorMessage, false);
+ this.setBreadcrumbsStatus(
BreadcrumbStatus.Default,
+ BreadcrumbStatus.Active,
BreadcrumbStatus.Disabled
);
+ this.show(this.elements.viewLogContainer);
+ this.showLocationForm(true, TorStrings.torConnect.tryBridge);
+ if (state.StateChanged) {
+ this.elements.tryBridgeButton.focus();
+ }
+ this.uiState.bootstrapCause = UIStates.CouldNotLocate;
+ this.saveUIState();
+ }
+
+ showLocationConfirmation(state) {
+ this.setTitle(TorStrings.torConnect.isLocationCorrect, "location");
+ this.showConfigureConnectionLink(
+ TorStrings.torConnect.isLocationCorrectDescription
+ );
+ this.setProgress(state.ErrorMessage, false);
+ this.setBreadcrumbsStatus(
+ BreadcrumbStatus.Default,
+ BreadcrumbStatus.Default,
+ BreadcrumbStatus.Active
+ );
+ this.show(this.elements.viewLogContainer);
+ this.showLocationForm(true, TorStrings.torConnect.tryAgain);
+ if (state.StateChanged) {
+ this.elements.tryBridgeButton.focus();
+ }
+ this.uiState.bootstrapCause = UIStates.LocationConfirm;
+ this.saveUIState();
+ }
+
+ showFinalError(state) {
+ this.setTitle(TorStrings.torConnect.finalError, "final");
+ 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.show(this.elements.tryBridgeButton, true);
+ this.show(this.elements.restartButton);
+ this.show(this.elements.configureButton, true);
}
showConfigureConnectionLink(text) {
@@ -495,80 +609,100 @@ 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);
+ this.setLocationFromState();
+ }
+ });
+ let firstOpt = this.elements.locationDropdownSelect.options[0];
+ if (this.uiState.allowAutomaticLocation) {
+ firstOpt.value = "automatic";
+ firstOpt.textContent = TorStrings.torConnect.automatic;
} else {
- this.populateSpecialLocations(locations);
+ firstOpt.value = "";
+ firstOpt.textContent = TorStrings.torConnect.selectCountryRegion;
}
+ this.setLocationFromState();
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);
- this.show(this.elements.connectButton, true);
+ getLocation() {
+ const selectedIndex = this.elements.locationDropdownSelect.selectedIndex;
+ return this.elements.locationDropdownSelect.options[selectedIndex].value;
+ }
+
+ setLocationFromState() {
+ if (this.getLocation() === this.uiState.selectedLocation) {
+ return;
+ }
+ const options = this.elements.locationDropdownSelect.options;
+ // We need to do this way, because we have repeated values that break
+ // the .value way to select (which would however require the label,
+ // rather than the code)...
+ for (let i = 0; i < options.length; i++) {
+ if (options[i].value === this.uiState.selectedLocation) {
+ this.elements.locationDropdownSelect.selectedIndex = i;
+ break;
+ }
+ }
+ this.validateLocation();
}
initElements(direction) {
document.documentElement.setAttribute("dir", direction);
+ this.elements.connectToTorLink.addEventListener("click", event => {
+ if (this.uiState.currentState === UIStates.ConnectToTor) {
+ return;
+ }
+ this.transitionUIState(UIStates.ConnectToTor, null);
+ RPMSendAsyncMessage("torconnect:broadcast-user-action", {
+ uiState: UIStates.ConnectToTor,
+ });
+ });
+ 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.transitionUIState(UIStates.ConnectionAssist, null);
+ RPMSendAsyncMessage("torconnect:broadcast-user-action", {
+ uiState: UIStates.ConnectionAssist,
+ });
});
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;
+ this.hide(this.elements.viewLogContainer);
this.elements.viewLogLink.textContent = TorStrings.torConnect.viewLog;
this.elements.viewLogLink.addEventListener("click", event => {
RPMSendAsyncMessage("torconnect:view-tor-logs");
@@ -606,26 +740,25 @@ class AboutTorConnect {
this.populateLocations();
this.elements.locationDropdownSelect.addEventListener("change", () => {
+ this.uiState.selectedLocation = this.getLocation();
+ this.saveUIState();
this.validateLocation();
- });
-
- this.elements.tryBridgeButton.textContent = TorStrings.torConnect.tryBridge;
- this.elements.tryBridgeButton.addEventListener("click", () => {
- this.beginAutoBootstrap();
+ RPMSendAsyncMessage("torconnect:broadcast-user-action", {
+ location: this.uiState.selectedLocation,
+ });
});
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);
+ }
});
}
@@ -634,6 +767,15 @@ class AboutTorConnect {
RPMAddMessageListener("torconnect:state-change", ({ data }) => {
this.updateUI(data);
});
+ RPMAddMessageListener("torconnect:user-action", ({ data }) => {
+ if (data.location) {
+ this.uiState.selectedLocation = data.location;
+ this.setLocationFromState();
+ }
+ if (data.uiState !== undefined) {
+ this.transitionUIState(data.uiState, data.connState);
+ }
+ });
}
initKeyboardShortcuts() {
@@ -664,13 +806,20 @@ 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;
this.initElements(args.Direction);
this.initObservers();
this.initKeyboardShortcuts();
+ if (Object.keys(args.State.UIState).length) {
+ this.uiState = args.State.UIState;
+ } else {
+ args.State.UIState = this.uiState;
+ this.saveUIState();
+ }
+ this.uiStates[this.uiState.currentState](args.State);
// populate UI based on current state
this.updateUI(args.State);
}
diff --git a/browser/components/torconnect/content/aboutTorConnect.xhtml b/browser/components/torconnect/content/aboutTorConnect.xhtml
index a98af43e2d53f..77d2e68895708 100644
--- a/browser/components/torconnect/content/aboutTorConnect.xhtml
+++ b/browser/components/torconnect/content/aboutTorConnect.xhtml
@@ -7,19 +7,22 @@
<link rel="stylesheet" href="chrome://browser/content/torconnect/aboutTorConnect.css" type="text/css" media="all" />
</head>
<body>
- <div id="progressBackground"></div>
+ <div id="progressBar">
+ <div id="progressBackground" />
+ <div id="progressSolid" />
+ </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 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 class="breadcrumb-separator breadcrumb-icon" />
+ <span id="try-bridge-separator" class="breadcrumb-separator breadcrumb-icon" />
<span id="try-bridge" class="breadcrumb-item">
<span id="try-bridge-icon" class="breadcrumb-icon" />
<span class="breadcrumb-label"/>
@@ -37,7 +40,7 @@
</div>
<div id="viewLogContainer">
- <span id="viewLogLink" hidden="true"></span>
+ <span id="viewLogLink"></span>
</div>
<div id="quickstartContainer">
@@ -50,13 +53,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)
diff --git a/toolkit/modules/RemotePageAccessManager.jsm b/toolkit/modules/RemotePageAccessManager.jsm
index 225429d95b667..73c48281276b9 100644
--- a/toolkit/modules/RemotePageAccessManager.jsm
+++ b/toolkit/modules/RemotePageAccessManager.jsm
@@ -219,7 +219,10 @@ let RemotePageAccessManager = {
RPMSendQuery: ["FetchUpdateData"],
},
"about:torconnect": {
- RPMAddMessageListener: ["torconnect:state-change"],
+ RPMAddMessageListener: [
+ "torconnect:state-change",
+ "torconnect:user-action",
+ ],
RPMSendAsyncMessage: [
"torconnect:open-tor-preferences",
"torconnect:begin-bootstrap",
@@ -228,6 +231,8 @@ let RemotePageAccessManager = {
"torconnect:set-quickstart",
"torconnect:view-tor-logs",
"torconnect:restart",
+ "torconnect:set-ui-state",
+ "torconnect:broadcast-user-action",
],
RPMSendQuery: [
"torconnect:get-init-args",
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the tor-commits
mailing list