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

Status: VERIFIED FIXED

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

Description

[Lancy(Leave from Mozilla)]

Attachment: Screenshot_Website Permission.png

[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

Comment 1

[Lancy(Leave from Mozilla)]

Update the Expected Result: 
5.The checkboxes should be on left of text and the text should be right-aligned.

Comment 2

[Hema Koka [:hema]]

Diego/Justin/Wilson: Can one of you please pick this up? 

Blocking Reason: UI looks pretty bad with checkboxes overlapping.

Comment 3

[David Flanagan [:djf]]

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?

Comment 4

[[e-mail]]

take it

Comment 5

[[e-mail]]

Attachment: webRTC camera selection in rtl view

Now the message is sibling with checkbox

Comment 6

[[e-mail]]

Attachment: pmrpt2.png

Besides the checkbox, I found the messages are not align right as well. 
This version also update the message fields to align with checkbox.

Comment 7

[[e-mail]]

Attachment: pmrpt3.png

as offline discussion with helen, I also expand the vertical distance between checkbox with 10px.

Comment 8

[Helen Huang [:HHuang]]

Comment on attachment 8598500 [details]
pmrpt3.png

It looks okay. Thanks Fred!

Comment 9

[GitHub Autolander Bot]

Attachment: [gaia] gasolin:issue-1154209 > mozilla-b2g:master

Comment 10

[[e-mail]]

Comment on attachment 8598538 [details] [review]
[gaia] gasolin:issue-1154209 > mozilla-b2g:master

CSS only change

Comment 11

[(inactive after 6/18) Alive Kuo [:alive]]

Why don't we use -moz-padding-start here?

Comment 12

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

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)

Comment 13

[[e-mail]]

Attachment: 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.

Comment 14

[[e-mail]]

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?

Comment 15

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

(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?

Comment 16

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8598538 [details] [review]
[gaia] gasolin:issue-1154209 > mozilla-b2g:master

Read https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start

Comment 17

[(inactive after 6/18) Alive Kuo [:alive]]

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.

Comment 18

[[e-mail]]

Attachment: pmrtl5.png

The patch move permission type icon and checkbox in the symmetric position, 
@helen could you help check the UI again?

Comment 19

[[e-mail]]

Attachment: normal.png

FYR, normal view after applying this patch

Comment 20

[Helen Huang [:HHuang]]

Comment on attachment 8599206 [details]
pmrtl5.png

Thanks for correcting this screen.

Comment 21

[[e-mail]]

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.

Comment 22

[[e-mail]]

merged to master https://github.com/mozilla-b2g/gaia/commit/b3fa9fbfa2265ac8944e76c2dced30e319699ba0

thanks!

Comment 23

[[e-mail]]

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

Comment 24

[Ryan VanderMeulen [:RyanVM]]

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

Comment 25

[Sue]

Attachment: 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

Comment 26

[Sue]

Attachment: verify_v3.0_fail.png

Hi Josh,
According to comment 25, could you help with it? Thanks!

Comment 27

[[e-mail]]

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.

Comment 28

[Josh Cheng [:josh]]

Hi Sue,
Could you open a new bug with comment 27 from Fred?
Thanks!

Comment 29

[Sue]

(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

Comment 30

[Sue]

Attachment: 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

Comment 31

[Sue]

The Arabic is not ready for v2.1 yet. No need to verify v2.1, close this issue.