Closed Bug 1154209 Opened 5 years ago Closed 5 years ago

[RTL][Camera]Arabic:The checkboxes will be overlapped with the text in the "Website Permission" view.

Categories

(Firefox OS Graveyard :: Gaia::System, defect)

ARM
Gonk (Firefox OS)
defect
Not set

Tracking

(blocking-b2g:2.2+, b2g-v2.2 verified, b2g-master verified)

VERIFIED FIXED
2.2 S11 (1may)
blocking-b2g 2.2+
Tracking Status
b2g-v2.2 --- verified
b2g-master --- verified

People

(Reporter: yulan.zhu, Assigned: gasolin)

References

Details

(Whiteboard: LocRun2.2)

Attachments

(10 files, 1 obsolete file)

[1.Description]:
[l10n][v2.1 & 2.2][Camera]Arabic:Navigate to webcamtoy.com, tap on "Ready? Smile!" and then tap on "Use my camera!", the checkboxes will be overlapped with the text in the "Website Permission" view.
See attachment:Screenshot_Website Permission.png

[2.Testing Steps]: 
1. Flash or reset the phone to bring up the FTE and finish the FTE to view the homescreen .
2. Tap Camera from the home screen and wait for the Camera permission screen to pop up. 
3. Return home and open the Browser app. 
4. Navigate to webcamtoy.com. 
5. Tap on "Ready? Smile!" and then tap on "Use my camera!" .

[3.Expected Result]: 
5.The checkboxes should not be overlapped with the text in the "Website Permission" view.

[4.Actual Result]: 
5.The checkboxes will overlap with the text in the "Website Permission" view.

[5.Reproduction build]: 
Device: Flame 2.1 (affected)
Build ID               20150413161209
Gaia Revision          bbe983b4e8bebfec26b3726b79568a22d667223c
Gaia Date              2015-04-09 13:52:48
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/3e3cbe35bce3
Gecko Version          34.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150413.193752
Firmware Date          Mon Apr 13 19:38:02 EDT 2015
Bootloader             L1TC000118D0

Device: Flame 2.2 (affected)
Build ID               20150413002502
Gaia Revision          cec00d643f517ffd96cde559cd3bbd43ab85816c
Gaia Date              2015-04-10 21:41:12
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/5005522fd68e
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150413.040234
Firmware Date          Mon Apr 13 04:02:45 EDT 2015
Bootloader             L1TC000118D0

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

[7.TCID]: 
12760
Update the Expected Result: 
5.The checkboxes should be on left of text and the text should be right-aligned.
Blocks: system-dialog-rtl
No longer blocks: 1118864
QA Whiteboard: [rtl-impact]
Component: ar / Arabic → Gaia::Camera
Product: Mozilla Localizations → Firefox OS
blocking-b2g: --- → 2.2?
Diego/Justin/Wilson: Can one of you please pick this up? 

Blocking Reason: UI looks pretty bad with checkboxes overlapping.
blocking-b2g: 2.2? → 2.2+
Flags: needinfo?(wilsonpage)
Flags: needinfo?(jdarcangelo)
Flags: needinfo?(dmarcos)
This is not a camera bug. As near as I can tell, this is the Arabic localization of the getUserMedia() permission dialog, which seems to be handled by apps/system/js/permission_manager.js, so I'm reassigning this to the Gaia::System component and clearing the needinfo request for the camera peers.

Fred: it looks like you've done a lot of work on that file. Is this a bug you can take?

Tim: This is a 2.2+ RTL bug. Can someone on your team take it if Fred is not able to?
Component: Gaia::Camera → Gaia::System
Flags: needinfo?(wilsonpage)
Flags: needinfo?(timdream)
Flags: needinfo?(jdarcangelo)
Flags: needinfo?(gasolin)
Flags: needinfo?(dmarcos)
take it
Assignee: nobody → gasolin
Status: NEW → ASSIGNED
Flags: needinfo?(gasolin)
Now the message is sibling with checkbox
Attachment #8598478 - Flags: ui-review?(hhuang)
Attached image pmrpt2.png (obsolete) —
Besides the checkbox, I found the messages are not align right as well. 
This version also update the message fields to align with checkbox.
Flags: needinfo?(timdream)
Attachment #8598480 - Flags: review?(hhuang)
Attachment #8598480 - Flags: review?(hhuang) → ui-review?(hhuang)
Attachment #8598478 - Flags: ui-review?(hhuang)
Attached image pmrpt3.png
as offline discussion with helen, I also expand the vertical distance between checkbox with 10px.
Attachment #8598480 - Attachment is obsolete: true
Attachment #8598480 - Flags: ui-review?(hhuang)
Attachment #8598500 - Flags: ui-review?(hhuang)
Comment on attachment 8598500 [details]
pmrpt3.png

It looks okay. Thanks Fred!
Attachment #8598500 - Flags: ui-review?(hhuang) → ui-review+
Comment on attachment 8598538 [details] [review]
[gaia] gasolin:issue-1154209 > mozilla-b2g:master

CSS only change
Attachment #8598538 - Flags: review?(alive)
Why don't we use -moz-padding-start here?
Flags: needinfo?(gasolin)
Attachment #8592138 [details] shows there may be other issues here too? The URL should right-aligned but treated as LTR content and truncated/ellipsized from the right. This is similar to bug 1151925 (and quite a few others)
Attached image pmrpt4.png
Thanks for advise. I upload a web site permission dialog image and the URL seems right aligned.

The patch now use `-moz-padding-start` instead.
Flags: needinfo?(gasolin)
The URL seems right-aligned but treated as LTR content and truncated/ellipsized from the right.

@sam can you help confirm the above attachment looks fine?
Flags: needinfo?(sfoster)
(In reply to Fred Lin [:gasolin] from comment #14)
> The URL seems right-aligned but treated as LTR content and
> truncated/ellipsized from the right.
> 
> @sam can you help confirm the above attachment looks fine?

It looks ok I was just wondering what the '.' on the left of the URL is?
Flags: needinfo?(sfoster)
After digging more, the real problem of this bug is:
https://github.com/gasolin/gaia/blob/issue-1154209/apps/system/style/permission_manager/permission_manager.css#L171

And the real fix is:
```css
[dir="rtl"] #permission-devices input[type="checkbox"] + span {
  right: unset;
  left: 1.5rem;
}
```

The image you attached should not be UIreview+....the checkbox should be in the opposite side because it is in the right side in ltr so we need to put it in left side in rtl dir.
Attached image pmrtl5.png
The patch move permission type icon and checkbox in the symmetric position, 
@helen could you help check the UI again?
Attachment #8599206 - Flags: ui-review?(hhuang)
Attached image normal.png
FYR, normal view after applying this patch
Comment on attachment 8599206 [details]
pmrtl5.png

Thanks for correcting this screen.
Attachment #8599206 - Flags: ui-review?(hhuang) → ui-review+
Comment on attachment 8598538 [details] [review]
[gaia] gasolin:issue-1154209 > mozilla-b2g:master

I've confirm with UX that the top icons are also need to be align in opposition place. The patch has been adjust to reflect those changes, please kindly review it again.
Attachment #8598538 - Flags: review?(alive)
Attachment #8598538 - Flags: review?(alive) → review+
merged to master https://github.com/mozilla-b2g/gaia/commit/b3fa9fbfa2265ac8944e76c2dced30e319699ba0

thanks!
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Comment on attachment 8598538 [details] [review]
[gaia] gasolin:issue-1154209 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): RTL
[User impact] if declined: the dialog is incorrect
[Testing completed]: y
[Risk to taking this patch] (and alternatives if risky): UI change only
[String changes made]: no
Attachment #8598538 - Flags: approval-gaia-v2.2?
Attachment #8598538 - Flags: approval-gaia-v2.2? → approval-gaia-v2.2+
Attached image verify_v2.2_pass.png
This issue has been verified passed on latest build of Flame 2.2 and Nexus 5 2.2 with the same steps in comment 0.
Result: The "Website Permission" view is shown correctly.
See attachment:verify_v2.2_pass.png
Rate:0/3

Device: Flame 2.2 (pass)
Build ID               20150503162504
Gaia Revision          8d14361337e608c8cdf165ea5034db5eda23b618
Gaia Date              2015-05-01 18:23:46
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/cb7cb6597c91
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150503.200206
Firmware Date          Sun May  3 20:02:17 EDT 2015
Bootloader             L1TC000118D0

Device: Nexus 5 2.2 (pass)
Build ID               20150503002500
Gaia Revision          8d14361337e608c8cdf165ea5034db5eda23b618
Gaia Date              2015-05-01 18:23:46
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/cb7cb6597c91
Gecko Version          37.0
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150503.040229
Firmware Date          Sun May  3 04:02:46 EDT 2015
Bootloader             HHZ12f

-------------------------------------------------------

This issue has been verified fail on latest build of Flame 3.0 and Nexus 5 3.0 with the same steps in comment 0.
Result: There is no checkbox in "Website Permission" view.
See attachment: verify_v3.0_fail.png
Rate: 3/3

Device: Flame 3.0 (fail)
Build ID               20150503160200
Gaia Revision          e18cce173840d6ff07fb6f1f0e0ffb58b99aab3e
Gaia Date              2015-05-02 04:27:01
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/dc5f85980a82
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150503.193941
Firmware Date          Sun May  3 19:39:52 EDT 2015
Bootloader             L1TC000118D0

Device: Nexus 5 3.0 (fail)
Build ID               20150503160200
Gaia Revision          e18cce173840d6ff07fb6f1f0e0ffb58b99aab3e
Gaia Date              2015-05-02 04:27:01
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/dc5f85980a82
Gecko Version          40.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150503.193953
Firmware Date          Sun May  3 19:40:11 EDT 2015
Bootloader             HHZ12f
Attached image verify_v3.0_fail.png
Hi Josh,
According to comment 25, could you help with it? Thanks!
Flags: needinfo?(jocheng)
QA Whiteboard: [rtl-impact] → [rtl-impact][MGSEI-Triage+]
Summary: [l10n][Camera]Arabic:The checkboxes will be overlapped with the text in the "Website Permission" view. → [RTL][Camera]Arabic:The checkboxes will be overlapped with the text in the "Website Permission" view.
I can reproduce in master (without change to RTL)
with webcamtoy.com, I saw no camera choice as well.

with some error log:
W/GeckoConsole(17698): [JavaScript Warning: "SyntaxError: unreachable code after return statement" {file: "resource://gre/modules/MobileIdentityManager.jsm" line: 237 column: 4 source: "    return null;


But with general test with ui test > API > getUserMedia > Video
The camera choice shows correctly.


Since it can be reproduced without switch to RTL & only happens in master branch, it looks like another issue for master.
Hi Sue,
Could you open a new bug with comment 27 from Fred?
Thanks!
Flags: needinfo?(jocheng) → needinfo?(lulu.tian)
See Also: → 1161870
(In reply to Josh Cheng [:josh] from comment #28)
> Hi Sue,
> Could you open a new bug with comment 27 from Fred?
> Thanks!

Hi Josh,
I have opened a new bug, see Bug 1161870
Flags: needinfo?(lulu.tian)
Attached image verify_v3.0_pass.png
This issue has been verified passed on latest build of Flame 3.0 and Nexus 5 3.0 with the same steps in comment 0.
Result: The "Website Permission" view is shown correctly.
See attachment:verify_v3.0_pass.png
Rate:0/3

Device: Flame 3.0 (pass)
Build ID               20150510010201
Gaia Revision          5b2a150f6f5d29bddfaac13fcbbf099376f2f275
Gaia Date              2015-05-09 12:34:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/77d92f6d7679
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150510.045933
Firmware Date          Sun May 10 04:59:44 EDT 2015
Bootloader             L1TC000118D0

Device: Nexus 5 3.0 (pass)
Build ID               20150510010201
Gaia Revision          5b2a150f6f5d29bddfaac13fcbbf099376f2f275
Gaia Date              2015-05-09 12:34:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/77d92f6d7679
Gecko Version          40.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150510.044405
Firmware Date          Sun May 10 04:44:24 EDT 2015
Bootloader             HHZ12f
The Arabic is not ready for v2.1 yet. No need to verify v2.1, close this issue.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.