Include bridge configuration into about:preferences

Torbutton as a standalone extension is going away (#10760 (moved)) and while doing so we restructure our toolbar making it more usable by exposing New Identity directly on it (#27511 (moved)). However, we need to find a new home for the bridge configuration as well if we want to remove the onion button from the toolbar. The current plan is to move it to about:preferences as a general setting. This ticket tracks that work.

added BugSmashFund TorBrowserTeam201910R actualpoints::45 component::applications/tor browser ff68-esr owner::pospeselr points::15 priority::high resolution::fixed severity::normal status::closed tbb-9.0-must-alpha tbb-no-uplift type::task ux-team labels

When you begin work on the coding side of this task, please start with the Tor Launcher code from the bug29197-01 branch within brade's tor-launcher repo (https://gitweb.torproject.org/user/brade/tor-launcher.git/log/?h=bug29197-01). Fixes which make Tor Launcher compatible with am ESR68-based Tor Browser are there (tickets #29197 (moved) and #31300 (moved)).

Adding Sponsor 44 to ESR68 tickets

Trac:
Sponsor: N/A to Sponsor44-can

Trac:
Status: new to assigned
Owner: tbb-team to pospeselr

Trac:
Cc: antonela, pospeselr to antonela, pospeselr, tbb-team

Background

As part of #29197 (moved), I'm working with this ticket. Also, I'm trying to cover some previous issues with this work, such as:

#24452 (moved) - Firewall option is visible behind Tor Network Settings... but not during start-up #27476 (moved) - Remove gap between Tor Launcher window and main browser window #25431 (moved) - "Tor is censored in my country" does not cover some scenarios

User flow

I'm working with this user flow in the same way we approached the network settings in TBA (#28329 (moved)). Even if we are not going to completely remove Tor Launcher when Tor Browser starts in this iteration, we can discuss this flow.


User Interface

For this iteration, I plan to keep almost the same user interface we currently have in Tor Launcher with the big aim of iterating over this during our sponsor30 work.

As we discussed before, we want to have a specific section in the regular Preferences section to configure Tor. That could be about:preferences#network. It will look like:

---

== Network Settings

Tor Browser connects you to the Tor Network run by thousands of volunteers around the world. [Learn More]

Bridges

Bridges help you to access to the Tor network in places where Tor is blocked. This is dummy text now, but it should explain in plain words what is a bridge and how it can help them. [Learn More]

[ ] Use a bridge [ ] Select a bridge [ Choose... ] [ ] Request a bridge from torproject.org [ ] Provide a bridge I know

Advanced

Description? [Learn More]

[ ] Use a local proxy [ ] This computer goes through a firewall that only allows connections to specific ports

---

[ View logs ]

---

Notes

• Something I discovered during this process is that we (firefox) currently have Network Settings in about:prefereces#general. Should we move it to about:preferences#network? Should we remove proxy settings from Network Settings and keep it in about:prefereces#general?
• I really like Duncan's suggestions related to the bridge's flow. We should rework it during Sponsor30 and have it in consideration.
• If we are ok with this UI, the next step for me is creating mockups and coordinate with pospeselr for the implementation.

I agree with the idea of keeping the UI similar to what we currently have in Tor Launcher. We do not have a lot of time before this work needs to be finished, and we also do not have time to make changes to the startup wizard. Also, if we reuse most of the localized strings that will reduce localization effort. I also agree that in the longer run we should take a fresh look, i.e., during the sponsor30 project.

I am not sure where the settings should go in about:preferences. One approach would be to add a new Tor Network panel (a peer of General/Home/Search/etc.).

It would be great to de-emphasize the Firefox Network Settings on the General panel, although some advanced users need to access it. Maybe add a warning message or alert? But we can tackle this after Tor Browser 9.0.

One question about your proposed design: under Advanced, will checking the [] Use a local proxy box cause the proxy settings to be displayed inline? I think that is OK, but Mozilla uses overlay panels when they want to push some settings deeper, e.g., for their Network Settings.

Creating a new 'Tor Network' panel as a peer General, Home, Search, etc would probably be best in terms of UX, thought it is a bit more work than inserting the new stuff into General but that's fine.

I'm also personally in favor of nuking the existing 'Network Settings' in the General panel. For most users, it's just an easily accessible footgun. I think we can expect that users doing clever things with a custom Tor setup should be clever enough to edit network.proxy.socks and network.proxy.socks_port directly.

mcs also brings up a good point about Advanced that I unfortunately think applies in general in the main views of about:preferences: the UI doesn't seem to change anywhere when you select option bubbles or select/deseelct checkboxes. Whereas the current tor-launcher Tor Network Settings page shows and hides UI elements based on options selected and boxes checked.

I think we could reasonably display (without dynamically showing/hiding) all the input elements in the bridge selection UI, though maybe the 'I use a proxy...' and the 'This computer goes...' section should go into an overlay via an 'I have a weird computer network' button?

Trac:

Trac:

Trac:

Thanks for the review folks!

• Agreed about to keep the same strings so we can rely on our translation memory. Although, we could have a brief description for bridges and add the helper text at the learn more link which will go to the tor manual/support.tpo entry.

• I think is better to have a different/specific section than General for Network Settings. Since we are Tor Browser, Tor Network Settings is a good name. Should we use the onion icon to refer to the Tor Network as well? or do we prefer a different icon? Currently, Firefox Icons don't have a Network one.

• If we keep Firefox's Network Settings in General Preferences, do we still need local proxy settings in Tor Network Settings?

Based on your feedback, I made some mockups to visualize these settings:

[A] shows an initial state without inline settings.


[B] shows an initial state with inline settings disabled.


[C] shows Tor Network Settings with Bridges selected. Should we open MOAT in an overlay? Should we have inline settings for Provide a bridge I know?


I'm also personally in favor of nuking the existing 'Network Settings' in the General panel. For most users, it's just an easily accessible footgun. I think we can expect that users doing clever things with a custom Tor setup should be clever enough to edit network.proxy.socks and network.proxy.socks_port directly. +1

If we keep Firefox's Network Settings in General Preferences, do we still need local proxy settings in Tor Network Settings? If I'm not mistaken, proxy in Firefox Network settings means the proxy that Firefox will use to connect to Internet (which should always be the local Tor client), while proxy in Tor Network Settings means the proxy that the Tor client will use to connect to the Internet.

So I think yes, if we were to keep Firefox Network settings, I think we still would need local proxy in Tor Network Settings (unless we want to repurpose the Firefox proxy settings UI, which I think might be confusing).

Hey antonela, I'll need a flat svg version of the Tor Browser icon please :)

Here's a stand-in with the correct dimensions I'm currently using: https://trac.torproject.org/projects/tor/attachment/ticket/31286/torNetworkIcon.svg

Trac:

temp stand-in icon

[A] looks good to me and acat is right here. FWIW I am fine with the general sentiment of hiding the Firefox Network settings while we are at it. Every option there should be configurable by pref and that should not be an overly hard burden for experienced users which is the only user group for the Firefox network settings in our context anyway.

progress pic for those watching at home: 

Working on wiring up the XUL with tor-launcher functionality now.

Trac:

Good work pospeselr! Thanks for sharing the progress!

Let's talk about some different user flows we are going to have on this release, where the Tor Launcher and Tor network settings in about:preferences will co-exist:

1/

• open Tor Browser
• Tor launcher prompt, user press [connect]
• bootstrapping OK
• Tor Browser loads about:tor

2/

• open Tor Browser
• Tor launcher prompt, user press [config], adds bridges
• Bootstrapping OK
• Tor Browser loads about:tor

3/

• open Tor Browser
• Tor launcher prompt, user press [connect] and/or try [config]
• bootstrapping FAILS
• Tor Launcher warning message. User [config] bridges in Tor Launcher

4/

• open Tor Browser
• tor launcher prompt, user press [connect] and/or try [config]
• bootstrapping FAILS
• tor browser loads in about:preferences#network with a warning/notice message. Draft
• Tor Browser restarts

5/

• open Tor Browser
• tor launcher prompt, user press [connect] and/or try [config]
• bootstrapping FAILS
• tor browser loads in a warning screen. Draft
• Tor Browser restarts

I think that 3/ is the flow we should keep for this release. Am I right? What do you think folks? Do we all agree on this?

== To-do / Questions

• Should remove Tor Network Settings item from the Tor button menu and rely on the [≡] menu > Preferences? If yes, I'll file that child ticket.

• We need an onboarding card for explaining this change. Do we want to do it during this release? If yes, I'll file that child ticket.

• We need a "view/copy Tor Log to clipboard" feature also in about:preferences. pospeselr suggested having a popup in a XUL sub-dialog with user-selectable text and a 'copy to clipboard'. Do we need a child ticket for it as well?

== Future Work (S30)

In the future, we aim to have a user experience where Tor Browser prescinds of the Tor Launcher UI, and the launching experience is closer to regular browsers: the user clicks to the icon and the browser loads connected to Tor. If the bootstrapping fail, then Tor Browser shows a warning screen. This warning screen will give us room to run our diverse ideas for improving the Tor Browser on learning bridges, like MOAT, magic link, or anything new and fancy.