1011066 - [RTL][Lockscreen] Arabic: Overlapping and truncation caller ID name and "phone" icon.

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Dialer, defect, P1)

Description

[Mike Livingston]

Attachment: contact name overlapping

Description:
When receiving a call from someone that is saved in "Contacts", the name overlaps with the "phone" icon on the bottom right as well as a truncation of the "phone label" strings (Mobile, Home, etc.)

The truncation of the "phone label" happens with every phone label.

Repro Steps:
1) Update a Buri to BuildID: 20140514000204 and change the language to Arabic.
2) From the homescreen, tap on "Contacts."
3) Press the "+" icon in the top right corner.
4) Enter a first and last name, and a phone number. Leave the "phone label" as "mobile"
5) Tap on "Done."
6) Have that contact call the test device.
7) Observe the overlapping of the name and "phone" icon as well as the truncation of the "phone label."

Actual:
The name of the contact and the "phone" icon overlap.

Expected:
The name of the contact and the "phone" icon do not overlap.

1.4 Environmental Variables:
Device: Buri 1.4 MOZ
BuildID: 20140514000204
Gaia: b40103dec34a147c9018a1af76eb21c3184f2f93
Gecko: 7788969f70b0
Version: 30.0
Firmware Version: v1.2-device.cfg

Repro frequency: 100%
Link to failed test case: https://moztrap.mozilla.org/manage/case/11974/
See attached: Screenshot

Comment 1

[Mike Livingston]

1.3 Environmental Variables:
Device: Buri 1.3 MOZ
BuildID: 20140514024003
Gaia: 96e3fa769a436a2182e6d54088fb41386eb2b5b5
Gecko: 685cf1d0dedb
Version: 28.0
Firmware Version: v1.2-device.cfg

The contact name appears correctly in Buri 1.3

Comment 2

[Ahmed Nefzaoui [:Nefzaoui]]

Yet another code bug :(
Sending to 2.0

Comment 3

[Stephany Wilkes]

Attachment: 2014-09-23-14-59-54.png

Ahmed, I believe this is fixed in 2.2 per the attached screenshot. If this looks like what you would expect to see, we can resolve this as fixed. Thanks!

Comment 4

[Stephany Wilkes]

Attachment: 2014-09-23-15-06-20.png

Sorry - this is the correct screenshot for this bug.

Comment 5

[Stephany Wilkes]

Can we resolve fixed? Thanks!

Comment 6

[Peter Bylenga [:PBylenga]]

Mass Edit: adding the [rtl-meta]

Comment 7

[Alissa（leave from Mozilla）]

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

Comment 8

[Alissa（leave from Mozilla）]

This issue has been failed verified on Flame 2.2.
Reproducing rate: 5/5

FLame2.2 build:
Build ID               20150216002503
Gaia Revision          ea64caf6d4ab03fc4472eca9f41f20d651d55fa9
Gaia Date              2015-02-13 05:27:43
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/62c80c92b39e
Gecko Version          37.0a2
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150216.040540
Firmware Date          Mon Feb 16 04:05:52 EST 2015
Bootloader             L1TC000118D0

Repro step:
1.Save a contact.
2.Enter lockscreen mode.
3.Call in from the contact.
4.Check the page of calling in.
see attachment:lockscreen1.png.

1.Enter lockscreen mode.
2.Cal in from stranger.
3.Check the page of calling in.
see attachments:lockscreen2.png.

Hi Stephany Wilkes,
Could you help to check this results agian? if we need new a bug to follow this issue.

Comment 9

[Alissa（leave from Mozilla）]

Attachment: lockscreen1.png

Comment 10

[Alissa（leave from Mozilla）]

Attachment: lockscreen2.png

Comment 11

[Stephany Wilkes]

Marking a regression (as this is not what I saw previously in comment #4) and reopening based on that observation. We should not see overlap, and the screenshot in all languages should look more like what I show in comment #4.

Comment 12

[Johan Lorenzo [:jlorenzo]]

Triage: Regression on a committed feature for 2.2.

Comment 13

[Tamara Hills [:thills]]

I don't believe this is a regression.  what's shown in attachment 8494080 [details] is a totally different screen than what's shown in the others.  attachment attachment 8494080 [details] is the incoming call screen when it's *unlocked*.

Comment 14

[Tamara Hills [:thills]]

Attachment: lockscreenltr.png

Comment 15

[Tamara Hills [:thills]]

Attachment: lockscreenrtl.png

Hi Stephany,

Before I fix this one, I want to be sure what needs to be done.  I attached a screenshot of ltr.  What I believe we want to do for rtl is:
1.  Move the SIM to the left side (mirror the ltr where the SIM is on the right)
2.  Right justify the contact name (or number) (again mirroring the ltr where it's left justified.
3.  Right justify the additional information |mobile, [phone]| (to mirror the ltr where it's left justified?

Can you confirm that this is how it should look?

Thanks,

-tamara

Comment 16

[Tamara Hills [:thills]]

Hi Stephany,

see comment above.

Comment 17

[Stephany Wilkes]

Thanks Tamara. The spec is here, which shows the alignment we'd expect to see:
https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo

So that would mean:
1. Yes, the SIM(s) should be right aligned and can stay above the time display.
2. Contact name should be right aligned.
3. "Mobile" and phone number should be right aligned. In Arabic, I'd expect that the word "mobile" may appear to the right of the phone number itself as that would be the reading direction, but of course the numbers would still flow left to right. 

Let me know if you need anything else; I'm swilkes on IRC. Thank you!

Comment 18

[Tamara Hills [:thills]]

Attachment: lockscreensample.png

Hi Stephany,

Can you take a look at this screenshot?  What I had meant was that we should swap/mirror the SIM and the phone number in this bug instead of just shifting the number to the right.  

I think it should be mirrored.  See the red box I drew around it.  Do you agree?

Thanks,

-tamara

Comment 19

[GitHub Autolander Bot]

Attachment: [gaia] tamarahills:bugfix/1011066-rtl-lockscreen-overlap > mozilla-b2g:master

Comment 20

[Stephany Wilkes]

I think we need a native speaker here. If Arabic text is read from right to left, I'm not sure why we'd have the text to the left of the number. Ahmed, I know you're on 2.0M but it would be great if you or someone else you know could provide native speaker perspective on this one. Also flagging Craig to see if he has a moment to check this.

Comment 21

[Tamara Hills [:thills]]

Stephany,

What I'm trying to get across is that in English you read LTR.  The first thing that you read in the English screen is the Phone number (or contact).  Then you keep moving to the right and read the SIM #.

By the same logic in Arabic, you would want to read RTL and then first read the Phone number (or contact) and then keep moving to the left and read the SIM number.

So essentially:

LTR is:
Ludwig Beethoven    SIM1

and RTL should be:
SIM1    Ludwig Beethoven

Does this make sense?

Comment 22

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

Putting a ni on Lizie as she can advise here as well, in case Ahmed can't get to this one quickly enough. thanks!

Comment 23

[Rami Khader]

The last picture from Tamara is the correct one, the SIM should be on the left while the name/number is on the right. If the name is on the left and SIM on the right, the name/number will look starting from the left which will not look correct.
Rami

Comment 24

[Stephany Wilkes]

Thank you, Rami! Really appreciate it due to my very high bug volume these days. Clearing the flags for Craig and Ahmed.

Comment 25

[Gabriele Svelto [:gsvelto]]

Comment on attachment 8572108 [details] [review]
[gaia] tamarahills:bugfix/1011066-rtl-lockscreen-overlap > mozilla-b2g:master

Looks good to me. I wonder if we could extract the shared parts to avoid duplicates though the whole code is probably due for a refactor soon.

Comment 27

[Tamara Hills [:thills]]

https://github.com/mozilla-b2g/gaia/commit/1279c9ca5a489aa7fc9a7a173ba1dbae0f71b8f2
https://treeherder.mozilla.org/#/jobs?repo=gaia-try&revision=17da277c903f

Comment 28

[Tamara Hills [:thills]]

Comment on attachment 8572108 [details] [review]
[gaia] tamarahills:bugfix/1011066-rtl-lockscreen-overlap > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): RTL feature
[User impact] if declined: Arabic user would see the layout backwards when they receive an incoming call on the lockscreen.
[Testing completed]: yes.
[Risk to taking this patch] (and alternatives if risky): Low, and easy to back out as it's mostly css changes.
[String changes made]: none.

Comment 29

[Ryan VanderMeulen [:RyanVM]]

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

Comment 30

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

This issue is verified fixed in the latest Nightly Flame 3.0 and 2.2 builds.

Actual Results: The Sim information has correctly been moved to the left side of the screen, opposite the contact/number information.  

I noticed that the carrier of the sim inserted into the phone when on the lockscreen is overlapping the text next to it (checked in Arabic but possibly in any RTL).  I am writing that issue up separately.

Environmental Variables:
Device: Flame 3.0
BuildID: 20150311110236
Gaia: 2b87ee8e7e2ec30a9851b6b59a899006a98767ab
Gecko: bc6aeea72290
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 39.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0

Environmental Variables:
Device: Flame 2.2
BuildID: 20150311002522
Gaia: 3f032238a52f08e4c2f68a47ad065a96eb22d470
Gecko: 004fa1cb1dd4
Gonk: ebad7da532429a6f5efadc00bf6ad8a41288a429
Version: 37.0 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0