implement new features onboarding

This ticket is to track implementation of the new features onboarding portion of #25695 (moved).

added TorBrowserTeam201808R component::applications/tor browser owner::tbb-team parent::25695 priority::very high resolution::fixed severity::normal status::closed type::defect labels

Trac:
Summary: implement new feature onboarding to implement new features onboarding

Move our tickets to August.

Trac:
Keywords: TorBrowserTeam201807 deleted, TorBrowserTeam201808 added

Bumping prio.

Trac:
Priority: Medium to Very High

As I understand it, the scope of this ticket is to provide onboarding for the circuit display feature. The spec is this Marvel prototype: https://marvelapp.com/3djhfhh/screen/46324625

Unfortunately, Kathy and I are not going to have time to work on this before Monday August 13th (which I means we won't have this ready in time for the next Tor Browser 8.x alpha release).

If someone else has time to look at it, make sure you first apply the patches in #26960 (moved), #26961 (moved), and #27082 (moved). A website that uses the UITour mechanism to provide a similar onboarding experience can be found here: https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/

We will want to do something similar but with everything driven locally if possible and not from a remote page.

A quick update: although Kathy and I have made significant progress over the past couple of days, we still have a lot to do for this ticket (and there aren't any examples in the onboarding or UITour code that do what we need and are architected in a similar way, so progress has been slower than we hoped). I estimate it will take another 3-5 working days of effort, which means we should have something ready for review by the end of next week (~24 August).

The first part of this is done: we added the Explore button to the new user onboarding Circuit Display panel. We hope to promote this to people who update from an older version, but haven't finished that part yet. There is one Torbutton patch to add the necessary strings: https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26962-01&id=dca195a191bf897680dde1363d12f7262dd26910

And one tor-browser patch: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26962-01&id=16e8aa519a3a52de1ea56dff46dc9f669c1e4961

A few notes:

• You will also need the fix for #27283 (moved), which is the previous commit on brade's bug26962-01 tor-browser branch.
• Kathy and I re-worded some of the (English) text. We thought the messages within the 2nd and 3rd panels were redundant.
• We used the DuckDuckGo .onion instead of NYT. We need to decide which site we want to use. NYT seems to contain trackers and sometimes causes a NoScript warning to appear. An https:// site is preferable because it would be better not to allow an UITour access from non-SSL sites. We could consider using a tpo site (not .onion) so we control it or we could go with DDG.

Thanks. I've merged the strings to the Torbutton repo (commit dca195a191bf897680dde1363d12f7262dd26910 on master) to give translators more time. We can add to the things we want to change in #27214 (moved) if needed.

Replying to mcs:

The first part of this is done: we added the Explore button to the new user onboarding Circuit Display panel. We hope to promote this to people who update from an older version, but haven't finished that part yet. There is one Torbutton patch to add the necessary strings: https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26962-01&id=dca195a191bf897680dde1363d12f7262dd26910

And one tor-browser patch: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26962-01&id=16e8aa519a3a52de1ea56dff46dc9f669c1e4961

Very nice, two things for feedback:

1. It seems there is kind of an alignment issue in the corner down right on the menus:

which is better seen against a green background when scrolling down:

2. The tour takes me to the DDG page but then when I am done leaves me there possibly confused. I think the expectation is that the tab gets closed again, when I am done so that I can go back to my onboarding tour where I left. Can we do that?

Trac:

Trac:

Replying to gk:

Very nice, two things for feedback:

1. It seems there is kind of an alignment issue in the corner down right on the menus: ...

Fixed.

2. The tour takes me to the DDG page but then when I am done leaves me there possibly confused. I think the expectation is that the tab gets closed again, when I am done so that I can go back to my onboarding tour where I left. Can we do that?

Yes. Good point, and done.

The new tor-browser patch is here: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26962-02&id=6b098f7e380a8ee384dec2d3ffa89e56ac5ccda3

Trac:
Status: assigned to needs_review
Keywords: TorBrowserTeam201808 deleted, TorBrowserTeam201808R added

Kathy and I also implemented a second part to notify existing/upgraded users about the new location of the circuit display. We did something fairly simple because we are nearly out of time for the 8.0 release: we added an always-present banner to about:tbupdate. Also, we did this work as a separate set of patches in case the approach we took is not acceptable from a UX perspective.

The look/styling builds upon the newly restyled about:tbupdate, so you will want the patch from ticket:27213#comment:4.

There is also a Torbutton patch for the strings: https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26962-01&id=c93f06417e0bdbd6d709ec5109938347d1d38123

And a tor-browser patch to add the banner: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26962-02&id=4cb5dadb21daac92d5d48361f57e95722e302599 (like other about:tbupdate strings, there are also present in the tor-browser repo but they are not used if Torbutton is installed).

One downside of this approach is that in a future release we will need to remove the banner from about:tbupdate, or we could add logic to not display the banner if updating from a recent version. For now, this is better than nothing. I will attach a screenshot.

Trac:

screenshot of New Circuit Display "update banner"

I just noticed that the white background does not go all the way to the left and right edges. That is a bug, but this screenshot will give you a good idea what it will look like:

Replying to mcs:

I just noticed that the white background does not go all the way to the left and right edges. That is a bug

Thanks, I like it! I went ahead and merged both the Torbutton patch (commit c93f06417e0bdbd6d709ec5109938347d1d38123) and the tor-browser patches (commit 69b8d3553d21796db96c0913c5747f8724b9b662 and 61d599ed4c5bb5ace0fc958faaf302dc968cc542) to have nightly builds with stuff available tomorrow so that we have a bit more time to adjust last minute things as needed and fix that bug. Leaving the ticket open for now for a sign-off by the ux people.

UX people are happy. We are done here then, thanks all!

Trac:
Resolution: N/A to fixed
Status: needs_review to closed

closed

mentioned in issue #27214 (moved)

mentioned in issue #27283 (moved)

mentioned in issue #27348 (moved)

moved to tpo/applications/tor-browser#26962 (closed)

mentioned in issue tpo/applications/tor-browser#27283 (closed)