1119420 - [RTL][Settings] List items disappear from the menu.

Status: VERIFIED FIXED

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

Description

[Yeojin Chung [:YeojinC]]

Attachment: TextOffScreen.png

Description:
When the device language is changed to an RTL language, some of the list items on the main settings menu disappear (possibly shifted off the screen to the right).

Repro Steps:
1) Update a Flame device to BuildID: 20150108010221.
2) Set the device language in Arabic under Settings > Language.
3) Return to the main menu on Settings, and scroll down the page.

Actual:
List items are randomly missing.
  
Expected: 
All list items appear properly.
  
Environmental Variables:
Device: Flame 2.2 Master (319mb)(Kitkat Base)(Full Flash)
BuildID: 20150108010221
Gaia: d4dac29613076bdba3cb8adc217deadb08a2ac20
Gecko: 70de2960aa87
Gonk: a814b2e2dfdda7140cb3a357617dc4fbb1435e76
Version: 37.0a1 (2.2 Master)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
  
Repro frequency: 100%
See attached: screenshot

Comment 1

[Ahmed Nefzaoui [:Nefzaoui]]

Having this tested on base v188, it does not occur. Could you please test it on v188 in case you're using a newer one?

Comment 2

[Yeojin Chung [:YeojinC]]

(In reply to Ahmed Nefzaoui [:Nefzaoui] from comment #1)
> Having this tested on base v188, it does not occur. Could you please test it
> on v188 in case you're using a newer one?

This issue also reproduces on v188. The menu is blank, and the text on the menu shows up later, ~20s.

Environmental Variables:
Device: Flame 2.2 Master (319mb)(Kitkat Base)(Full Flash)
BuildID: 20150109010206
Gaia: 5f0dd37917c4a6d8fa8724715d4d3797419f9013
Gecko: b3f84cf78dc2
Gonk: a814b2e2dfdda7140cb3a357617dc4fbb1435e76
Version: 37.0a1 (2.2 Master)
Firmware: V188
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 3

[Yeojin Chung [:YeojinC]]

Sorry, I was looking at another area.

> This issue also reproduces on v188. The menu is blank, and the text on the
> menu shows up later, ~20s.

The menu remains blank, and the text does NOT show up after 20s.

Also, I reproduced this issue with Developer > ADB and DevTools enabled.

Comment 4

[Fabien Cazenave [:kaze]]

Confirmed on my Keon. This is related to the font-ligature hack that is used to display item icons.

For instance, the “Homescreen” and “Themes” items are hidden in RTL mode, but when the `data-icon' attribute is removed or changed to `languages', the item appears again.

Vivien, can you please tell me who we should ping for that? This is a rather serious issue for RTL support, and I’d be glad to help fixing it if I had a couple pointers.

Comment 6

[Fabien Cazenave [:kaze]]

Wilson, can you share some light?

Comment 7

[Fabien Cazenave [:kaze]]

Attachment: patch proposal

As we just discussed on IRC, here’s the workaround I had in mind: basically, I just force « direction:ltr » on the ::before pseudo-element that displays the ligature icon.

Surprisingly, it works fine — see the before/after screenshots below.

I have no idea why some ligature icons work fine, and some other don’t. In the screenshots below, the 'storage', 'keyboard' and 'themes' icons broke the whole item display in RTL mode (there are a few other other ligature icons like that in the Settings app main panel).

Comment 8

[Fabien Cazenave [:kaze]]

Attachment: main panel, before patch

Comment 9

[Fabien Cazenave [:kaze]]

Attachment: main panel, after patch

Comment 10

[Fabien Cazenave [:kaze]]

Comment on attachment 8548523 [details] [review]
patch proposal

Removing the r? and ni? flags: the simplistic patch I proposed won’t be enough. Investigating.

Wilson, I’ll get back to you when I have a better clue of what’s going on. Sorry for the noise.

Comment 11

[Wilson Page [:wilsonpage]]

kaze: If any patches are needed for gaia-icons, can you submit them to the gaia-icons repo [1].

[1] http://github.com/gaia-component/gaia-icons

Comment 12

[Fabien Cazenave [:kaze]]

This seems to be caused by bug 1121748.

Whenever these elements are redrawn (e.g. by changing a CSS property in the WebIDE panel), they get displayed properly. This is not related to the Gaia-icons.

Comment 13

[Jamie Charlton (:Jamie_)]

Attachment: pictuer of firefox accounts page

This problem also is occurring in the firefox account tab of settings.

Comment 14

[Jamie Charlton (:Jamie_)]

also just noticed that for the device information problem or it being way off set. If you had just had it set to a rtl already when it was booting it miss aligns but if you switch it back to a ltr and back to a rtl again a lot of the stuff is aligned properly again. Any ideas on why?

Comment 15

[bhavana bajaj [:bajaj]]

Blocking per RTL triage for 2.2

Comment 16

[Dylan Oliver [:doliver]]

RTL update: marking required bugs as feature-b2g:2.2+ (and removing blocking flags)

Comment 20

[Shine(Leave from Mozilla)]

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

Comment 21

[howie [:howie]]

bug 1121748 is resolved fixed. Is this bug still valid?

Comment 22

[Yeojin Chung [:YeojinC]]

This issue is verified fixed on Flame 2.2 and Master.

Result: The list items appear properly on Settings.

Device: Flame 2.2 (319mb, full flash)
Build ID: 20150206002505
Gaia: a52999ce7f783177deb17e267bf003a53e6fde06
Gecko: 01446d5231ef
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

Device: Flame Master (319mb, full flash)
Build ID: 20150206010204
Gaia: 94af4b42d2ace6c9f38f31de77240604fac68af1
Gecko: 7c5f187b65bf
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.