Closed Bug 1011066 Opened 6 years ago Closed 5 years ago

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


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

Gonk (Firefox OS)


(blocking-b2g:2.2+, b2g-v1.3 unaffected, b2g-v1.4 affected, b2g-v2.2 verified, b2g-master verified)

2.2 S8 (20mar)
blocking-b2g 2.2+
Tracking Status
b2g-v1.3 --- unaffected
b2g-v1.4 --- affected
b2g-v2.2 --- verified
b2g-master --- verified


(Reporter: mlivingston, Assigned: thills)



(Keywords: regression, Whiteboard: [planned-sprint c=1])


(8 files, 1 obsolete file)

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."

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

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:
See attached: Screenshot
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
Yet another code bug :(
Sending to 2.0
Blocks: gaia-rtl
No longer blocks: 997549
Component: ar / Arabic → Gaia::Dialer
Product: Mozilla Localizations → Firefox OS
Summary: [B2G][1.4][l10n][Lockscreen] Arabic: Overlapping and truncation caller ID name and "phone" icon. → [RTL][Lockscreen] Arabic: Overlapping and truncation caller ID name and "phone" icon.
Whiteboard: LocRun1.4
Attached image 2014-09-23-14-59-54.png (obsolete) —
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!
Flags: needinfo?(nefzaoui.ahmed)
Attached image 2014-09-23-15-06-20.png
Sorry - this is the correct screenshot for this bug.
Attachment #8494078 - Attachment is obsolete: true
Can we resolve fixed? Thanks!
Closed: 5 years ago
Flags: needinfo?(nefzaoui.ahmed)
Resolution: --- → WORKSFORME
Mass Edit: adding the [rtl-meta]
Whiteboard: [rtl-meta]
QA Whiteboard: [rtl-impact]
Whiteboard: [rtl-meta]
Blocks: dialer-rtl
No longer blocks: system-rtl
Flags: in-moztrap+
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
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.
Flags: needinfo?(swilkes)
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.
Flags: needinfo?(swilkes)
Keywords: regression
Resolution: WORKSFORME → ---
blocking-b2g: --- → 2.2?
Triage: Regression on a committed feature for 2.2.
blocking-b2g: 2.2? → 2.2+
Whiteboard: [planned-sprint c=?]
Target Milestone: --- → 2.2 S7 (6mar)
Assignee: nobody → thills
Whiteboard: [planned-sprint c=?] → [planned-sprint c=1]
Priority: -- → P1
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*.
Attached image lockscreenltr.png
Attached image 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, +14085551212| (to mirror the ltr where it's left justified?

Can you confirm that this is how it should look?


Hi Stephany,

see comment above.
Flags: needinfo?(swilkes)
Thanks Tamara. The spec is here, which shows the alignment we'd expect to see:

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!
Flags: needinfo?(swilkes)
Attached image 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?


Flags: needinfo?(swilkes)
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.
Flags: needinfo?(swilkes)
Flags: needinfo?(nefzaoui)
Flags: needinfo?(i18ncraig)

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?
Flags: needinfo?(swilkes)
Putting a ni on Lizie as she can advise here as well, in case Ahmed can't get to this one quickly enough. thanks!
Flags: needinfo?(alizee.aubertin)
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.
Flags: needinfo?(alizee.aubertin)
Attachment #8572108 - Flags: review?(gsvelto)
Thank you, Rami! Really appreciate it due to my very high bug volume these days. Clearing the flags for Craig and Ahmed.
Flags: needinfo?(swilkes)
Flags: needinfo?(nefzaoui)
Flags: needinfo?(i18ncraig)
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.
Attachment #8572108 - Flags: review?(gsvelto) → review+
Duplicate of this bug: 1139191
Target Milestone: 2.2 S7 (6mar) → 2.2 S8 (20mar)
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.
Attachment #8572108 - Flags: approval-gaia-v2.2?(release-mgmt)
Attachment #8572108 - Flags: approval-gaia-v2.2?(release-mgmt) → approval-gaia-v2.2+
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
QA Whiteboard: [rtl-impact] → [rtl-impact][QAnalyst-Triage?]
Flags: needinfo?(ktucker)
QA Whiteboard: [rtl-impact][QAnalyst-Triage?] → [rtl-impact][QAnalyst-Triage+]
Flags: needinfo?(ktucker)
You need to log in before you can comment on or make changes to this bug.