958891 - Make Fennec about:home advertise Firefox Accounts + Sync banner

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Android Sync, defect)

Description

[Nick Alexander :nalexander [he/him]]

UX has suggested that one of the entry points to Firefox Accounts + Sync will be an about:home banner, possibly only on first run.

This would just be art and tap to start the Firefox Accounts set up activity.

Comment 1

[Nick Alexander :nalexander [he/him]]

ibarlow: I saw mocks for this but can't find them now.  Can we get assets and design?

Comment 2

[Nick Alexander :nalexander [he/him]]

margaret: I think you know the right way to build such a thing.  Can you take this?

Comment 3

[Nick Alexander :nalexander [he/him]]

Finally, I'm not sure this is an Fx 29 thing.  It might be part of future upsell.  mfinkle?  kar?

Comment 4

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

As for being Fx29 or not, I'm not sure where we ended up. Desktop is keeping it's existing entry points for Sync. I believe Android should do the same. That would mean waiting for Fx30 for this banner promo, since we don't have one now.

In any case, we will need mocks and strings. If we get a resource available, we could look into doing this along with the Marketplace promo, slated for Fx29 or Fx30 (probably Fx29).

Comment 5

[:Margaret Leibovic]

If we finish bug 917942, this should be pretty straightforward. I can own it.

Question for product folks: do you expect this to be a message served by the snippets server, with things like the metrics that go along with that? If so, this won't be so straightforward.

However, I see the benefits of snippets as being able to run different campaigns at different times/in different countries, but this is a promotion we'll presumably want to be running all the time. So hopefully this can just be something we add to Fennec.

Comment 6

[Ian Barlow (:ibarlow)]

This is a wireframe of the snippet and tab tray entry points. Over to Anthony for finalized visual design.

http://cl.ly/image/0v3l331A3U1R

Comment 7

[Karen Rudnitski [:kar]]

If we can get the functionality in 29, all the better. I see this real estate really beneficial in informing users who don't have sync about the ability to sign up for a FxA and set up sync.

Of course, I would also like the same functionality built in that we had when this was hard-coded: if a user has an existing sync account, this promo wouldn't be displayed to them. Can we still do that with the new system?

Also ideally, having this measured as a successful point of entry would be really good data to have (vs other points of entry). But we can iterate on that part if we can at least get the basic promo working to advertize FxA and direct folks directly to the account creation flow.

Comment 8

[Richard Newman [:rnewman]]

(In reply to Karen Rudnitski [:kar] from comment #7)

> Of course, I would also like the same functionality built in that we had
> when this was hard-coded: if a user has an existing sync account, this promo
> wouldn't be displayed to them. Can we still do that with the new system?

Somehow, yes -- hence dependency on Bug 917942.

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Designs have been added, see https://www.dropbox.com/sh/23i0us0ojc3z04g/LB4BB7yC4b .

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

See link for orange sync icon :) in MDPI, HDPI and XHDPI. 

https://www.dropbox.com/sh/ld1jfo4fpfttcdy/5tx6atIQol

Let me know if it works!

Comment 11

[:Margaret Leibovic]

Question for nalexander: What JS can I stick in this promo banner to make it open the Firefox Accounts set-up flow? Could we make another API for this in the Accounts.jsm module that rnewman started working on in bug 917942?

Comment 12

[:Margaret Leibovic]

(In reply to Karen Rudnitski [:kar] from comment #7)

> Also ideally, having this measured as a successful point of entry would be
> really good data to have (vs other points of entry). But we can iterate on
> that part if we can at least get the basic promo working to advertize FxA
> and direct folks directly to the account creation flow.

We won't have the same metrics that are used for the snippets server, but we could land some telemetry to help us with this (e.g. how often the message is shown, how often it is tapped).

Comment 13

[Richard Newman [:rnewman]]

Sounds like a job for UITelemetry.jsm!

Comment 14

[Nick Alexander :nalexander [he/him]]

(In reply to :Margaret Leibovic from comment #11)
> Question for nalexander: What JS can I stick in this promo banner to make it
> open the Firefox Accounts set-up flow? Could we make another API for this in
> the Accounts.jsm module that rnewman started working on in bug 917942?

Leave it as a stub for now; Accounts.jsm will have to grow the option to open the Sync|FxA Getting Started activity.

Comment 15

[:Margaret Leibovic]

Anthony, how important is it that we have text that looks like a link? To do this, we'd need to fix bug 959880, and that's turning out to be more complicated than I thought.

The way the banner works, the whole thing has a single click handler, so clicking anywhere on the banner while this message is showing will open up the account set-up activity. Just an FYI, in case that changes the way we want to phrase the message here.

Comment 16

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

The underline? I would say it's fine to go ahead without it. 

However, I would really like to try and get Clear Sans in there as the font.

Comment 17

[:Margaret Leibovic]

(In reply to Anthony Lam from comment #16)
> The underline? I would say it's fine to go ahead without it. 

Since my last comment, wesj helped me figure out how to do that, so I think we can actually make that work :)

> However, I would really like to try and get Clear Sans in there as the font.

This is a piece of native Android UI, and we currently just use system fonts, so I'm not sure how straightforward it would be to change that for just the banner. But I can investigate.

Comment 18

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #17)
> Since my last comment, wesj helped me figure out how to do that, so I think
> we can actually make that work :)
> 
Awesome!
> 
> This is a piece of native Android UI, and we currently just use system
> fonts, so I'm not sure how straightforward it would be to change that for
> just the banner. But I can investigate.

Ok, I know we had a discussion about this in Bug 958879 - but if for whatever reason we don't decide to ship with Fira/Clear I guess the best default would be to Open Sans. (That's the native Android font we're using right now?)

Comment 19

[:Margaret Leibovic]

Attachment: WIP

This stubs out the places where I want to use Accounts.jsm. I included a data: URI for the icon to work around bug 959896. And with my patch in bug 959880 the link styling works as expected.

Comment 20

[:Margaret Leibovic]

Attachment: patch

Instead of using a data URI, I decided to just use Android drawable resources, since we can do that as browser (as opposed to add-on) code :)

Instead of blocking on bug 917942, we can just land this now and fill in the API calls once that bug is fixed. However, I did put this promo banner behind a pref, so that it won't show up for Nightly users until we want it to.

Comment 21

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/45de85948833

To test this you can, go into about:config and flip "browser.snippets.syncPromo.enabled" to true. Follow-up work to actually use Accounts.jsm can go in bug 917942.

Comment 22

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/45de85948833

Comment 23

[:Margaret Leibovic]

This landed in time for 29.