1149936 - [RTL][First Time Experience]Import contacts from Facebook, the facebook icon is left-aligned in "Import contacts" view.

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::First Time Experience, defect, P1)

Description

[Lancy(Leave from Mozilla)]

Attachment: Screenshot_facebook.png

[1.Description]:
[RTL][v2.2&v3.0][First Time Experience] When we import contacts from Facebook in FTE, the facebook icon is left-aligned in "Import contacts" view.
See attachment:Screenshot_facebook.png

[2.Testing Steps]: 
1.Flash new build or reset device.
2.Set your phone language to Arabic.
3.Go to "Select a network" view and connect the wifi.
4.Go to "Import contacts" view.
5.Sign in facebook contact and import some contacts.
6.Observe the "Import contacts" view.

[3.Expected Result]: 
6.The facebook icon should be right-aligned and displayed at right side of text.

[4.Actual Result]: 
6.The facebook icon is left-aligned.

[5.Reproduction build]: 
Flame 2.2 build (Affected):
Build ID               20150331162505
Gaia Revision          8b3086ad3963f1707e2bee9094baccafffe161c4
Gaia Date              2015-03-31 21:48:06
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/88e0e00cd64e
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150331.200333
Firmware Date          Tue Mar 31 20:03:44 EDT 2015
Bootloader             L1TC000118D0

Flame 3.0 build (Affected):
Build ID               20150331160205
Gaia Revision          03164bd160809747e6a198e0dba1b7c3ee7789f5
Gaia Date              2015-03-31 14:48:14
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/18a8ea7c2c62
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150331.191641
Firmware Date          Tue Mar 31 19:16:50 EDT 2015
Bootloader             L1TC000118D0

[6.Reproduction Frequency]: 
Always Recurrence,10/10

[7.TCID]: 
Free Test

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

Since this is during FTE and is the 1st impression that users get of their experience, I am tempted to block on this. It's probably not a hard fix. As you can see all the other icons are correctly aligned. This looks very wrong and will give off the 1st impression of a half-baked product.
Nominating

Comment 2

[Sam Foster [:sfoster] (he/him)]

I don't think I would have not noticed this all this time, so I suspect this is a recent regression? Will have a look at a fix regardless.

Comment 3

[GitHub Autolander Bot]

Attachment: [gaia] sfoster:ftu-fb-import-contacts-rtl-bug-1149936 > mozilla-b2g:master

Comment 4

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8586908 [details] [review]
[gaia] sfoster:ftu-fb-import-contacts-rtl-bug-1149936 > mozilla-b2g:master

To repro you have to import some facebook contacts using an RTL locale. I'll attach a screenshot of the result too.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Attachment: ftu-import-fb-rtl.png

With patch applied, using Mirrored English.

Comment 6

[Fernando Campo (:fcampo)]

Comment on attachment 8586908 [details] [review]
[gaia] sfoster:ftu-fb-import-contacts-rtl-bug-1149936 > mozilla-b2g:master

tested and working nice.

another approach is to apply the same rules that we use on the buttons, but it's indeed more lines of code

#fb_after_import1 p:first-child:before {
  background: transparent url("images/import_fb.png")
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  margin-top: -1.5rem;
}

I guess it depends on if we're ok with the RTL tweaks or we want to get rid of them on the CSS.

Comment 7

[Sam Foster [:sfoster] (he/him)]

I dont mind RTL tweaks in general, but I would like to see the move so they are in context, not just in a separate block at the bottom where they are sure to bitrot.

Comment 8

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/841f03d3b58bc167c00d65edd4f6327aa9edd409

Comment 9

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8586908 [details] [review]
[gaia] sfoster:ftu-fb-import-contacts-rtl-bug-1149936 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): RTL in FTU
[User impact] if declined: Icon is on the wrong side for RTL locales on import contacts screen
[Testing completed]: Verified on device
[Risk to taking this patch] (and alternatives if risky): V. low risk - CSS-only change, only impacts this one control on that screen
[String changes made]: None

Comment 10

[Sam Foster [:sfoster] (he/him)]

v2.2: https://github.com/mozilla-b2g/gaia/commit/56b5171e83f3476638cd5745be6c290fda59fe8c

Comment 11

[Lancy(Leave from Mozilla)]

Attachment: Verify1_Flame2.2&3.0_Pass.png

According to the steps in comment 0, the issue has been verified pass on latest Flame 2.2 and Flame 3.0 build:
See attachment:Verify1_Flame2.2&3.0_Pass.png.
Reproducing rate:0/5

Flame 2.2 build (Unaffected):
Build ID               20150406002503
Gaia Revision          a6351e1197d54f8624523c2db9ba1418f2aa046f
Gaia Date              2015-04-03 22:06:41
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/c3335a5d3063
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150406.040047
Firmware Date          Mon Apr  6 04:00:58 EDT 2015
Bootloader             L1TC000118D0

Flame 3.0 build (Unaffected):
Build ID               20150406160205
Gaia Revision          834385f4c834238a4306bf87cc4be41615d91ff0
Gaia Date              2015-04-06 19:41:47
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/a530b5c3b713
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150406.194015
Firmware Date          Mon Apr  6 19:40:27 EDT 2015
Bootloader             L1TC000118D0