(the tor-browser patches are on a branch named bug26961-01 which also contain the commits for legacy/trac#27082 (moved)).
We did our best to reuse the Firefox onboarding implementation with minimal changes (while still achieving Antonela's design). There are some loose ends; in particular the circuit display onboarding has not yet been implemented — but that will be done in legacy/trac#26962 (moved). Kathy and I think it makes sense for someone to review what we have so far so everyone can see this in a nightly build (which will allow us to get feedback from the UX team).
Trac: Status: assigned to needs_review Keywords: TorBrowserTeam201808 deleted, TorBrowserTeam201808R added
The onboarding requires a window that is at least 960 pixels wide; otherwise, it is not shown. Hopefully most of our users have a display that is wide enough.
We need a "watermark" icon (64x64 PNG). This is shown on about:tor after the user has completed all of the onboarding tasks. For now, Kathy and I put in a grayscale version of the Tor Browser globe icon (we know that a new browser icon is coming, so we didn't spend much time on this). The image that Firefox uses is here: https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/content/img/watermark.svg
We disabled onboarding notifications since we do not have a specification for the text (if enabled, these would appear at the bottom of the about:tor window to prompt users to look at onboarding tasks). Do we want notifications in a future version of this feature? We would need a notification title and message for each of the onboarding tasks. The English strings used by Firefox ESR60 are in the following file (search for onboarding.notification.onboarding-tour): https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/locales/en-US/onboarding.properties There is also a button for each notification but in all cases Firefox ESR60 uses "Learn More" as the label (from onboarding.button.learnMore in that same properties file).
One more thing: our Torbutton patch adds a new properties file, browserOnboarding.properties, which will need to be translated. In my opinion (and please do not take this as criticism) someone should make another pass and polish the English strings before we put this file on Transifex.
Trac: Cc: tbb-team, ux-team to tbb-team, ux-team, emmapeel
The onboarding requires a window that is at least 960 pixels wide; otherwise, it is not shown. Hopefully most of our users have a display that is wide enough.
Is this a Firefox's media query break up? What happens with smaller screens? We could think in a responsive version for next iteration :)
We need a "watermark" icon (64x64 PNG). This is shown on about:tor after the user has completed all of the onboarding tasks. For now, Kathy and I put in a grayscale version of the Tor Browser globe icon (we know that a new browser icon is coming, so we didn't spend much time on this). The image that Firefox uses is here: https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/content/img/watermark.svg
We disabled onboarding notifications since we do not have a specification for the text (if enabled, these would appear at the bottom of the about:tor window to prompt users to look at onboarding tasks). Do we want notifications in a future version of this feature? We would need a notification title and message for each of the onboarding tasks. The English strings used by Firefox ESR60 are in the following file (search for onboarding.notification.onboarding-tour): https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/locales/en-US/onboarding.properties There is also a button for each notification but in all cases Firefox ESR60 uses "Learn More" as the label (from onboarding.button.learnMore in that same properties file).
We might do it. I'll keep it in mind for the next iteration.
The onboarding requires a window that is at least 960 pixels wide; otherwise, it is not shown. Hopefully most of our users have a display that is wide enough.
Is this a Firefox's media query break up? What happens with smaller screens? We could think in a responsive version for next iteration :)
With smaller screens the onboarding icon and prompt are not displayed. I think this is just a limitation of the Firefox implementation.
We made a few small improvements and also incorporated the final onboarding artwork. Here are the commits to review:
This works for me, nice! I was a bit puzzled, though, that the circuit display pane (and every pane after it) does not have a button leading to the next pane. Is that intentional?
This works for me, nice! I was a bit puzzled, though, that the circuit display pane (and every pane after it) does not have a button leading to the next pane. Is that intentional?
In Firefox ESR60 they do not use the buttons located in the bottom right for navigation between panes. The buttons are reserved for actions that allow users to explore more deeply, which is what we have for Circuit Display and the panes that follow it. Mozilla assumes users will navigate between panes using the names along the left hand side. I think it might be better to adopt that approach so that our use of the bottom right buttons is more consistent. But that is up to Antonela.
It may also be possible to have more than one button (e.g., Circuit Display could have a "Next" button as well as "Explore"); I am not sure if Mozilla's implementation handles that or not, and it may be a bad idea from a UX perspective because people won't know which button to choose.