1129673 - [RTL][FxA] Account Creation has Overlapping Formatting with Text and Graphic on 'Verify Email' page

Status: VERIFIED FIXED

(Firefox OS Graveyard :: FxA, defect, P2)

Description

[Oliver Nelson [:oliverthor]]

Attachment: rtl_fxa_verify_overlappedtext.jpg

Summary (title) Field:
[RTL][FxA] Account Creation has Overlapping Formatting with Text and Graphic on 'Verify Email' page

Description:
When a user creates a new FxA Account through the 'Settings' app in an RTL-defined language (Arabic), they will observe overlapping formatting between text and graphic during the UI flow. The final page, where the user is instructed to visit their email and verify their email account for their Firefox Account, contains text overlapping a graphic. 

PreReq:
* an email address that has not signed up for a Firefox Account
	- http://10minutemail.com/10MinuteMail/index.html
Repro Steps:
1) Update a Flame to 20150204010225
2) Open the 'Settings' app.
3) Navigate to FxA.
4) Sign up your email for an account.
5) Progress through user flow until request for verification.
6) Observe UI.

Actual:
Text overlaps icon.

Expected:
Text does not overlap icons.


Environmental Variables:
--------------------------------------------------
Device: Flame 3.0
Build ID: 20150204010225
Gaia: dfebaaa8aab43470f482d09d71137bab840c3ae9
Gecko: 0c2f7434c325
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

Device: Flame 2.2
BuildID: 20150204002509
Gaia: a4c4cc86303a554facb8f45b7e764e5c4473c3de
Gecko: 8669c26fd4a5
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 37.0a2 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
--------------------------------------------------

Repro frequency: 4/4
See attached: 
screenshot

Comment 1

[GitHub Autolander Bot]

Attachment: [PullReq] crh0716:1129673 to mozilla-b2g:master

Comment 2

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8560282 [details] [review]
[PullReq] crh0716:1129673 to mozilla-b2g:master

EJ, please help review this simple patch.

You can show the panel by calling `showUnverifiedPanel` in this function[1]:

https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/firefox_accounts/panel.js#L62

Comment 3

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Comment on attachment 8560282 [details] [review]
[PullReq] crh0716:1129673 to mozilla-b2g:master

I like the idea to use ::before selector to make sure the envelope icon would be placed at the right position ! Thanks Arthur, r+++

Comment 4

[Arthur Chen [:arthurcc][inactive after 6/30]]

Thanks, EJ!

master: 972ec011a9b2da3ade7f9ae8275836404fc66744

Comment 5

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8560282 [details] [review]
[PullReq] crh0716:1129673 to mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): N/A
[User impact] if declined: Users will see text overlapping.
[Testing completed]: Test on the device.
[Risk to taking this patch] (and alternatives if risky): None as the patch only changed the style.
[String changes made]: None

Comment 6

[Ryan VanderMeulen [:RyanVM]]

v2.2: https://github.com/mozilla-b2g/gaia/commit/599c9593df040319b67fec9d3fe9209d0900acc4

Comment 7

[Coler]

This issue has been verified successfully on Flame 2.2/3.0.
Attachment:Verify_RTL.png.

Flame 2.2 build:
Build ID               20150211002505
Gaia Revision          943be6fd146017dcd9d4c9d1027be1e43bad13eb
Gaia Date              2015-02-11 08:01:09
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/e614443583e7
Gecko Version          37.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150211.040242
Firmware Date          Wed Feb 11 04:02:53 EST 2015
Bootloader             L1TC000118D0

Flame 3.0 build:
Gaia-Rev        8c7865486a1b11076b849bbf8f7fccbaffbfafe7
Gecko-Rev       https://hg.mozilla.org/mozilla-central/rev/ee093ca70666
Build-ID        20150211010216
Version         38.0a1
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20150211.043725
FW-Date         Wed Feb 11 04:37:36 EST 2015
Bootloader      L1TC000118D0

Comment 8

[Coler]

Attachment: Verify_RTL.png

Comment 9

[Lancy(Leave from Mozilla)]

Test case has been added in moztrap:
https://moztrap.mozilla.org/manage/case/15789/