718848 - Include Sync Setup UI changes

Status: VERIFIED FIXED

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

Description

[Chenxia Liu [:liuche]]

Bug to keep track of UI changes after design meeting:

Design:
http://www.flickr.com/photos/madhava_work/6360153407/sizes/o/in/photostream/


- Theming
- new Sync strings
- (try to) redirect user to Firefox Sync account settings

Comment 1

[Madhava Enros [:madhava]]

This is the proposed JPAKE screen text, from the meeting last week:
http://cl.ly/0Q18120J18273W2i0X0I

Subheader: "Enter this code on your desktop"
Body:  "Select "Pair a Device" in the Sync section of your desktop Firefox options. Show me how"  -- with the "show me how" being a link to the SUMO article.

One revision to this is to say "computer" rather than "desktop" in the subheader

Comment 2

[Richard Newman [:rnewman]]

If this is already landed, then great; otherwise, we are likely to be late for string freeze, because it won't happen today or tomorrow. No idea what happens then...

Comment 3

[Chenxia Liu [:liuche]]

Initial round of string changes:
https://github.com/mozilla-services/android-sync/commit/6de0b27fb71c006100600488ea64b81859cfb9b4

String revision from comment 1:
https://github.com/mozilla-services/android-sync/commit/ca061767377bddabef53710d1999b428826fd727

I don't think the first one has landed in MC yet, was just merged into github yesterday (pull request #30: string-changes).

Comment 4

[Tony Chung [:tchung]]

target firefox 11?

Comment 5

[Richard Newman [:rnewman]]

Attachment: Previous J-PAKE screen

Comment 6

[Richard Newman [:rnewman]]

Attachment: New J-PAKE screen

Comment 7

[Richard Newman [:rnewman]]

Regressions in J-PAKE screen:

* Clickable links are unstyled. If I didn't already know, I'd be really confused by how to get to the advanced screen.
* I might be crazy, but it looks like the J-PAKE code itself is more tightly spaced. It was quite hard to read. I would tend to prefer fixed-width display, given that these aren't words.
* Sync icon is blurred. You need to make sure you pick the right one and set it to the correct size.


Comments that aren't strictly regressions:

* "Advanced setup" ought to be further from the J-PAKE code. I was scared of accidentally tapping something I shouldn't.
* Wow, all that black and white looks intimidating. I found the old screen altogether more inviting.
* Inadequate margins — text appears to be only 1em from the edge of the screen.
* Two headings. Confusing, particularly because one of them is the same size as body text but missing punctuation.

Comment 8

[Richard Newman [:rnewman]]

Attachment: Previous credentials screen

Comment 9

[Richard Newman [:rnewman]]

Attachment: New credentials screen

Comment 10

[Richard Newman [:rnewman]]

Comments on credentials screen:

* I have a real personal dislike of the 100%-width text entry boxes. It looks unstyled. Madhava's mockups don't address this case.

Comment 11

[Richard Newman [:rnewman]]

Observation: Madhava's mocks align with our original design goals for the J-PAKE UI, which used a black-on-white scheme for each code fragment to evoke the appearance of the destination text boxes on the other device.

(See Fennec 10 and desktop Firefox.)

The UI as implemented has a white code on a black background instead. Was this intentional, or an accidental omission?

Comment 12

[Richard Newman [:rnewman]]

In develop and landed on inbound with Bug 720933.

Comment 13

[Tracy Walker [:tracy]]

looks good with m-c build from 20120126 on 2.2

(In reply to Richard Newman [:rnewman] from comment #7)
> Regressions in J-PAKE screen:
> 
> * Clickable links are unstyled. If I didn't already know, I'd be really
> confused by how to get to the advanced screen.
both links are underlined

> * I might be crazy, but it looks like the J-PAKE code itself is more tightly
> spaced. It was quite hard to read. I would tend to prefer fixed-width
> display, given that these aren't words.
codes don't appear squeezed together

> * Sync icon is blurred. You need to make sure you pick the right one and set
> it to the correct size.
no longer blurry

> 
> 
> Comments that aren't strictly regressions:
> 
> * "Advanced setup" ought to be further from the J-PAKE code. I was scared of
> accidentally tapping something I shouldn't.
nice separation now

> * Wow, all that black and white looks intimidating. I found the old screen
> altogether more inviting.
stayed with all that black and white per mocks

> * Inadequate margins — text appears to be only 1em from the edge of the
> screen.
margins appear sufficient

> * Two headings. Confusing, particularly because one of them is the same size
> as body text but missing punctuation.
Bold heading regular text instructions.

Comment 14

[Tracy Walker [:tracy]]

Verified on Fx11