1135972 - [RTL][Privacy Control] Direction of 'Next' and 'Back' buttons contradict with page indicator on Guided Tour page

Status: VERIFIED FIXED

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

Description

[Pi Wei Cheng [:piwei] (inactive)]

Description:
On Guided Tour page, the buttons and even the page flipping animation are mirrored, but the page indicator is not. It makes navigating the Tour counterintuitive.

Prerequisite:
In RTL language

STR:
1) Go to Settings > Privacy Controls and start the Guided Tour
2) Observe the position of Next / Back buttons and the page indicator dots above them.

Expected: If Next is on the left side of the screen, the page indicator highlighted dot should start on the right (so when you hit Next, the highlighted dot goes one left).

Actual: The Next button is on the left, page indicator highlighted dot starts on the left.

See video:
https://www.youtube.com/watch?v=K0nEpjppEO0

Tested on:
Device: Flame 3.0 Master (full flash, 319MB)
BuildID: 20150223103044
Gaia: 288bf1c58ef9ccecd68508978a0141ee71974681
Gecko: 9b077c6f3d02
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 39.0a1 (3.0 Master) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0

Comment 1

[Pi Wei Cheng [:piwei] (inactive)]

This issue also occurs on Flame 2.2. Button direction and page indicator contradict each other.

Device: Flame 2.2
BuildID: 20150220002501
Gaia: ce79d35b92261e7cbfeaefebf87859ebeb0979b4
Gecko: b864abe1c6b3
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 37.0a2 (2.2) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 2

[bhavana bajaj [:bajaj]]

We may already have a DUP for this, please DUP if you find the bug #

Comment 3

[bhavana bajaj [:bajaj]]

Requesting qa to help check if this issue occurs or we can mark it resolved WFM.

Comment 4

[Pi Wei Cheng [:piwei] (inactive)]

This issue is still occurring on latest master. Next button is on the left, and page indicator starts on the left.

Device: Flame 3.0 Master (shallow flash 319MB)
BuildID: 20150304133643
Gaia: eff3321ab4e65da3f906688ebb55ddf1e93d9452
Gecko: 56492f7244a9
Version: 39.0a1 (3.0 Master) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0

Comment 5

[howie [:howie]]

Hi Marta, can you help with this bug? Thank you.

Comment 6

[Josh Cheng [:josh]]

Hi Marta,

You can check RTL spec here for general RTL guideline for 2.2 link http://bit.ly/1KKxkzD

Thanks!

Comment 7

[Lancy(Leave from Mozilla)]

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

Comment 8

[howie [:howie]]

Assign to Marta for this, thanks.

Comment 9

[marta]

So the problem I'm experiencing here is that the indicator is an image that is displayed in the window. So I need to change that image depending on the orientation of the text. Can you help?

Comment 10

[Zibi Braniecki [:zbraniecki][:gandalf]]

(In reply to marta from comment #9)
> So the problem I'm experiencing here is that the indicator is an image that
> is displayed in the window. So I need to change that image depending on the
> orientation of the text. Can you help?

Sure. It seems to me that you need to flip the image either by using transform: scaleX(-1) or image-orientation: 180deg for dir=rtl - not sure which one is the proper one, but transform is more adopted, so try this.

Hope that helps.

Comment 11

[GitHub Autolander Bot]

Attachment: [gaia] martasect:Bug_1135972 > mozilla-b2g:master

Comment 12

[marta]

It was a surprisingly quick fix, thanks! Gandalf, can you review please?

Comment 13

[marta]

Gandalf, I corrected the fix

Comment 14

[GitHub Autolander Bot]

Autolander could not locate a review from a user within the suggested reviewer list. Either the patch author or the reviewer should be in the suggested reviewer list.

Comment 15

[Josh Cheng [:josh]]

Hi Kai-Zhen, 
The patch is review+ however autolander failed. Can we override this?
Thanks!

Comment 16

[Kai-Zhen Li [:seinlin][:kli]]

Master: https://github.com/mozilla-b2g/gaia/commit/9b6f3024e4d0e62dd057231f4b14abe1782932ab

Please request for approval‑gaia‑v2.2 if necessary.

Comment 17

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

This issue is verified fixed in the latest Nightly Flame 3.0 build.

Actual Results: The progress circles move in the correct direction as the tour is completed.

Environmental Variables:
Device: Flame 3.0
BuildID: 20150324010202
Gaia: efebbafd12fc42ddcd378948b683a51106517660
Gecko: 840cfd5bc971
Gonk: b83fc73de7b64594cd74b33e498bf08332b5d87b
Version: 39.0a1 (3.0) 
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0

Comment 18

[KTucker [:KTucker][Inactive 3/4/2016]]

Adding verifyme for 2.2 verification once the fix has been uplifted.

Comment 19

[Ryan VanderMeulen [:RyanVM]]

Please request Gaia v2.2 approval on this patch when you get a chance.

Comment 20

[marta]

Comment on attachment 8579947 [details] [review]
[gaia] martasect:Bug_1135972 > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #):1135972
[User impact] if declined: In RTL languages the buttons will not be compatible with the page indicator in the GT. This is counter intuitive and breaks UX
[Testing completed]: yes
[Risk to taking this patch] (and alternatives if risky): low
[String changes made]: non

Comment 21

[Ryan VanderMeulen [:RyanVM]]

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

Comment 22

[Sue]

Attachment: video.MP4

This issue has been verified successfully on latest build of Flame 2.2 with the same steps in comment 0. The Next button is on the left side of the screen, the page indicator highlighted dot starts on the right (so when user hit Next, the highlighted dot goes one left).
There is a new bug on Guided Tour page, I have opened a new bug about it, see Bug 1150817
See attachment:video.MP4
Rate:0/5

Device: Flame 2.2 (pass)
Build ID               20150402002500
Gaia Revision          1ceca464053dee4a8bf10ea5abeef724d68c2ff2
Gaia Date              2015-04-01 09:49:30
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/427b4da96714
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150402.035057
Firmware Date          Thu Apr  2 03:51:09 EDT 2015
Bootloader             L1TC000118D0