612607 - ask user to set up sync when they try to view tabs from other computers

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[:Atoll]

Steps to reproduce:

1. Uninstall Fennec and clear all local data.
2. Install Fennec.  Do not configure sync.
3. Open it and close it a couple of times.
4. Open Fennec.
5. Click on the "Tabs from other computers" button.
BUG: Nothing happens.

I think that, when clicked, the button should activate a "Set up sync?" process.

Full story:

I helped someone at MoCo with a Fennec issue this morning.  The newly installed Fennec (full wipe of local data and reinstall) wasn't showing tabs from her other computers.  We tried pressing the "Tabs from other computers" button several times, but it wasn't responding.  I checked the preferences and it turned out that sync wasn't configured, so we set that up and it's all good now.

One thing bothered me, though.  The "Tabs from other computers" button knows that sync isn't configured.  It was clearly expected to work.  I think that the button needs to be smarter, and ask the user to set up sync.  That changes the experience from "Why is my sync broken" (help request) to "Oh, I need to pair my phone with my desktop" (easy JPAKE process).

Comment 1

[Madhava Enros [:madhava]]

Yes - we should fix this. For most (?) users, this will be where they'll first encounter sync in the product.

some possibilities:

- a row that has the "Not Connected   (Connect)" ui in it
- a button/something that takes the user to the Sync section of prefs
- either of those, but with more explanation in the awesomescreen section

Comment 2

[:Atoll]

(In reply to comment #1)

I'm concerned that "Not Connected" button would not be intuitively linked by users to the "Tabs from other computers" button being disabled - and then we lose the convenient path of clicking Tabs leading to jpake Sync pairing.  In desktop UI there is a trend of removing all indication of sync "connectedness"; adding that to the mobile UI seems mismatched.

So, boiling my thoughts down into a single feature request, I would ask for the following change:

- send the user to the Sync setup UI (jpake/prefs/whatever) when they click "Tabs from other" without sync configured

Combined with the easy JPAKE pairing UI on desktop and mobile, I think this would directly increase the mobile sync activation rate.

Comment 3

[Madhava Enros [:madhava]]

Really, in both the cases of "Tabs from your other computers" on the start screen AND the "Desktop" tab of the awesomescreen, rather than being visually disabled when sync isn't set up, the user should be able to tap on the UI element and have the jpake UI come up.

Comment 4

[Wesley Johnston (:wesj)]

Attachment: Patch v1

Makes firstrun link open jpake all of the time. Other times people calling cmd_remoteTabs will open

1.) the jpake screen if sync is not set up,
2.) the prefs screen if it is setup but you are not logged in, and
3.) the remotetabs screen if its enabled and your are logged in.

This brought out a weird bug where toggling enable would make it appear that your sync settings were gone, when they were really still around. Not sure if that was intentional or not, but I think the ability to turn sync on or off without having to set it up again is kinda useful. Also fixes a bug with the close button on Maemo which will leave jpake constantly pinging. I don't know these interfaces, and I can't find any documentation either, so holler if I've done something incredibly stupid.

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 503339 [details] [diff] [review]
Patch v1


>diff --git a/chrome/content/browser-ui.js b/chrome/content/browser-ui.js

>       case "cmd_remoteTabs":
>-        this.activePanel = RemoteTabsList;
>+        if (Weave.Status.checkSetup() == Weave.CLIENT_NOT_CONFIGURED) {
>+          WeaveGlue.open();
>+          document.getElementById("allPagesHeader").click();

Can't we use | this.activePanel = AllPagesList; |  ? Do we need to do a manual click() ?

>+        } else if (!Weave.Service.isLoggedIn) {
>+          BrowserUI.showPanel("prefs-container");
>+          let prefsBox = document.getElementById("prefs-list");
>+          let syncArea = document.getElementById("prefs-sync");
>+          if (prefsBox && syncArea)
>+            prefsBox.ensureElementIsVisible(syncArea);
>+        } else {
>+          this.activePanel = RemoteTabsList;
>+        }

>diff --git a/chrome/content/browser.xul b/chrome/content/browser.xul

>-        <toolbarbutton type="radio" group="awesome-header" label="&allPagesHeader.label;" command="cmd_openLocation" class="choice-all panel-row-button show-text"/>
>-        <toolbarbutton type="radio" group="awesome-header" label="&bookmarksHeader.label;" command="cmd_bookmarks" class="choice-bookmarks panel-row-button show-text"/>
>-        <toolbarbutton type="radio" group="awesome-header" label="&historyHeader.label;" command="cmd_history" class="choice-history panel-row-button show-text"/>
>+        <toolbarbutton id="allPagesHeader" type="radio" group="awesome-header" label="&allPagesHeader.label;" command="cmd_openLocation" class="choice-all panel-row-button show-text"/>
>+        <toolbarbutton id="bookmarksHeader" type="radio" group="awesome-header" label="&bookmarksHeader.label;" command="cmd_bookmarks" class="choice-bookmarks panel-row-button show-text"/>
>+        <toolbarbutton id="historyHeader" type="radio" group="awesome-header" label="&historyHeader.label;" command="cmd_history" class="choice-history panel-row-button show-text"/>
> #ifdef MOZ_SERVICES_SYNC
>-        <toolbarbutton type="radio" group="awesome-header" label="&desktopHeader.label;" command="cmd_remoteTabs" class="choice-remotetabs panel-row-button show-text"/>
>+        <toolbarbutton id="remoteTabsHeader" type="radio" group="awesome-header" label="&desktopHeader.label;" command="cmd_remoteTabs" class="choice-remotetabs panel-row-button show-text"/>

If we can stop using the manual click above, do we still need the IDs here? If we do need the IDs, wedon't use camelCase for IDs. Use "allpages-button", "bookmarks-button" etc.

>diff --git a/chrome/content/firstrun/firstrun.xhtml b/chrome/content/firstrun/firstrun.xhtml

>         function loadSync() {
>           let win = getChromeWin();
>-          win.BrowserUI.showPanel("prefs-container");
>-
>-          let prefsBox = win.document.getElementById("prefs-list");
>-          let syncArea = win.document.getElementById("prefs-sync");
>-          if (prefsBox && syncArea)
>-            prefsBox.ensureElementIsVisible(syncArea);
>+          win.WeaveGlue.open();

I think we still want to show the prefs panel. Well, maybe we do - need to think more about it and get Madhava to think about it too.

>diff --git a/chrome/content/sync.js b/chrome/content/sync.js

>   toggleSyncEnabled: function toggleSyncEnabled() {

>       // Attempt to go back online
>+      if (Weave.Status.checkSetup() != Weave.CLIENT_NOT_CONFIGURED) {
>+        // if we have information, attempt to setup using it
>+        this.setupData = {
>+          account: Weave.Service.account,
>+          password: Weave.Service.password,
>+          synckey: Weave.Service.passphrase,
>+          serverURL: Weave.Service.serverURL

I think you want to sanitize the serverURL like we do here:
http://mxr.mozilla.org/mobile-browser/source/chrome/content/sync.js#407

>+    if (aTopic == "weave:service:logout:finish")
>+      this.setupData = null;
>+

I assume we still have the seamless toggle (no JPAKE or manual re-entry of credentials) because you recreate setupData above, right?

Looks pretty good, but let's make sure we test this patch a lot. Waiting to r+ until we find out about the allPagesList, the IDs and the serverURL

Comment 6

[Caitlin Looney]

FYI: https://bugzilla.mozilla.org/show_bug.cgi?id=617803

1. Sync setup wizard. If user hasn't set up Sync, the "Tabs from my other
> computer" button stays active and reads something to the effect of "Sync your
> desktop and mobile - Setup." User is taken through a quick setup tutorial.

(For tutorial, refer to https://www-trunk.stage.mozilla.com/en-US/mobile/sync/
(Use Steps 1, 2, 3)

Proposed tutorial guide:

1. Install
Don't have a Sync account? Go to your desktop and install Firefox 4 Beta. Then,
restart Firefox and create a Sync account by going to Firefox menu and
selecting Firefox » Preferences » Sync » Create an account.

2. Sync Up
Follow the steps to create a Sync account, providing an email and password. 

3. Connect
On your phone: Swipe left and tap on Tools » Preferences and tap on Setup Sync.
A single-use sync code will appear. 
Go back to your desktop Firefox menu: Select Firefox » Preferences » Sync » Add
New Device and enter your sync code.

You're done! Enjoy secure access to your history, bookmarks, tabs and passwords
between your desktop and mobile. <Get help and learn more.>
(https://www-trunk.stage.mozilla.com/en-US/mobile/sync/)

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

We need to check with l10n to see what wiggle-room we have for strings in b4 and rc

Also, what is the tutorial workflow? Why should we immediately take the user through a tutorial? Why not just take them to the setup UI? Couldn't the tutorial be the webpage and we could just add a button (or link) to the webpage?

Comment 8

[Thomas Arend [:tarend]]

+1 for taking the user to the setup UI instead. I suggest to add a link to the tutorial to the setup screen instead.

Comment 9

[Caitlin Looney]

> Also, what is the tutorial workflow? Why should we immediately take the user
> through a tutorial? Why not just take them to the setup UI? Couldn't the
> tutorial be the webpage and we could just add a button (or link) to the
> webpage?

Yes, makes sense a button to learn more from webpage is absolutely fine.

Just note sure if I've seen/know the setup UI in-product other than the one time code generation page. Is there more I am not seeing? I am of the school that we'd need to provide a user with extra context of *how* to setup.

Comment 10

[Wesley Johnston (:wesj)]

Attachment: Patch v2

I think I was accidentally was causing myself to much heartache yesterday with this. I think the only real problem was if you disabled Weave and then restarted Fennec, at which point we don't use the saved login info anymore.

I left the id's in, because I think they're nice for extension authors who might want to use insertAfter in their overlays. I also had to use one because I was getting into a state where both the "All Pages" and "Desktop" awesome-header buttons were checked.

Finally, this adds a link on the setup page that says, "See a tutorial". I'll attach a screenshot. Not a huge fan of the placement or text. I wouldn't mind pulling that and doing it in a separate bug.

Comment 11

[Wesley Johnston (:wesj)]

Attachment: screenshot

Comment 12

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 503664 [details] [diff] [review]
Patch v2

>diff --git a/app/mobile.js b/app/mobile.js

> pref("app.releaseNotesURL", "http://www.mozilla.com/%LOCALE%/mobile/%VERSION%/releasenotes/");
>+pref("app.sync.tutorialURL", "https://www.mozilla.com/%LOCALE%/mobile/sync/");
> //pref("app.support.baseURL", "http://support.mozilla.com/1/mobile/%VERSION%/%OS%/%LOCALE%/");

remove this unused pref

>diff --git a/chrome/content/browser-ui.js b/chrome/content/browser-ui.js

>       case "cmd_remoteTabs":
>-        this.activePanel = RemoteTabsList;
>+        // remove the checked state set by the click it will be reset by setting
>+        // checked on the command element if we decide to show this panel (see AwesomePanel.js)
>+        document.getElementById("remotetabs-button").removeAttribute('checked');

removeAttribute("checked");  use ", not '

>+          BrowserUI.showPanel("prefs-container");
>+          let prefsBox = document.getElementById("prefs-list");
>+          let syncArea = document.getElementById("prefs-sync");
>+          if (prefsBox && syncArea) {
>+            let prefsBoxY = prefsBox.firstChild.boxObject.screenY;
>+            let syncAreaY = syncArea.boxObject.screenY;
>+            prefsBox.scrollBoxObject.scrollTo(0, syncAreaY - prefsBoxY);
>+          }

I have seen that scrollBoxObject.scrollTo like to throw if the scrollbox is not visible. You showPanel above, which will make it visible. On slow devices we might have a problem. If so, I'd suggest using a setTimeout(..., 0) to scroll the prefs into view. Might not be a problem.

Fix nits. Let's not land this until Madhava, Caitlin and Thomas have had time to review it too

Comment 13

[Caitlin Looney]

Hey,

What does "See a tutorial" link to? The Firefox.com/sync page? The copy isn't totally noticeable, nor are the steps clear. 

How about..."From a Firefox Sync-connected computer, go to Firefox Preferencece >> Sync Options and select 'Add a Device'"

Comment 14

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #13)
> Hey,
> 
> What does "See a tutorial" link to? The Firefox.com/sync page? The copy isn't
> totally noticeable, nor are the steps clear. 

Copy for the "See a tutorial" is the key, imo. Maybe "Need help?"

> How about..."From a Firefox Sync-connected computer, go to Firefox Preferencece
> >> Sync Options and select 'Add a Device'"

Not a big difference from the existing text.

Comment 15

[Caitlin Looney]

Can you tell me where "See the Tutorial" is intended to point to? Then I can probably provide better copy. 

As far as proposed copy -- you're right, not a big difference, but the actual steps and labels are correct, which makes a difference and ensures user they're on the right path. Also curious what we can do with the formatting, so this copy doesn't get overlooked. 

Second stab:

"On your desktop: Go to Firefox >> Preferences >> Sync tab and Create a Sync Account or Login. From Sync tab, click "Add a Device" and enter the code below to sync." <See detailed instructions.> (https://www-trunk.stage.mozilla.com/en-US/mobile/sync/)

Comment 16

[Wesley Johnston (:wesj)]

The "See the tutorial" link in this patch just points to https://www.mozilla.com/%LOCALE%/mobile/sync/. %LOCALE% is replaced with "en-US" for my build. Nothing to fancy.

I briefly talked to Thomas about this today, and think we'd be better served by a help button and a link pointing to a SUMO article where users could search if they had other questions,

Comment 17

[Caitlin Looney]

Yeah, that seems right. Let me talk to Michael and Jason and see if we can this SUMO article "mobilized"

Comment 18

[Madhava Enros [:madhava]]

If it's going to the SUMO content (though mobilized), can we use the same text as desktop: "Show me how."

Comment 19

[Madhava Enros [:madhava]]

(In reply to comment #13)

> How about..."From a Firefox Sync-connected computer, go to Firefox Preferencece
> >> Sync Options and select 'Add a Device'"

The text here was left purposely unspecific because it's only called "Preferences" on Mac.  On Windows it's "Options," and depending on the flavor of Windows, you get to it through the Firefox button or through a menu.  We can't know, at this point, what OS you're running on your other machine.  We went with "options," out of all of this, because that's the terminology used on the vast majority of our users' systems (Windows users dominate).

Comment 20

[Caitlin Looney]

I see. Yes. I like "From a Firefox Sync-connected computer, go to Firefox Preferences >> Sync Options and select 'Add a Device'"

Comment 21

[Wesley Johnston (:wesj)]

Attachment: Patch for checkin

I think maybe you gave r+, but just checking finkle. I am also never clear about how we handle punctuation in the strings (don't want to annoy localizers by changing the old strings). Mostly shows up in landscape. I'll attach a screenshot.

Comment 22

[Wesley Johnston (:wesj)]

Attachment: Screenshot

Comment 23

[Mark Finkle (:mfinkle) (use needinfo?)]

I don't like "how me how" tacked on the end of the description (in the screenshot). Perhaps it should be on a separate row.

Also, do not land this until after beta 4

Comment 24

[Wesley Johnston (:wesj)]

Pushed:
http://hg.mozilla.org/mobile-browser/rev/2e402445a707

clooney, is there a bug or something somewhere for making a tutorial page that is mobilized?

Comment 25

[Ayan Shah[:ashah]]

Verified:

Mozilla/5.0 (Android; Linux armv71; rv:2.0b13pre) Gecko/20110317
Firefox/4.0b13pre Fennec/4.0b6pre

Comment 26

[Thomas Arend [:tarend]]

This works well. Except when it doesn't: If you hit "Tabs from your other computers" too quickly after browser launch or with a spotty network connection, we take you to the setup screen, where we should inform you about connection problems. I filed a new Bug 642575 for this.