980671 - [FTE] in RTL language, Geolcation checkbox is half off the screen

Status: RESOLVED DUPLICATE of bug 1010615

(Firefox OS Graveyard :: Gaia::First Time Experience, defect, P1)

Description

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: fte_gelocation.png

Build Information
Device: Buri
Build ID: 20140306134106
Platform Version: 30.0a1
Gaia: 98cf46d6623b164845fe1fdc99a2a7bf64aa667d
Gecko: 8095b7dd8f58

Description
In rtl language, geolocation checkbox is half off the screen. See screenshot.

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

Decided during this morning's RTL triage that we should block on this for 2.2

Comment 2

[bhavana bajaj [:bajaj]]

Blocking per RTL triage for 2.2

Comment 3

[Delphine Lebédel [:delphine - Use needinfo]]

Putting as P1 since this is in fact a blocker for 2.2. thanks

Comment 4

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

Attachment: ftu-geolocation-mirrored-eng.png

Using mirrored-english pseudo-locale, I get a different - but also broken result. There are RTL rules in both the switches.css and gaia_switch/style.css stylesheets that should be fixing this and similar issues, but they don't seem to be getting applied (as far as I can tell from the WebIDE): 

https://github.com/mozilla-b2g/gaia/blob/master/shared/elements/gaia_switch/style.css#L78
https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css#L111

I tried some variations of using :-moz-dir(rtl) selectors instead, but couldnt see any impact with my changes. I also tried editing the (ltr/default) rules directly in the WebIDE with no result so I'm obviously doing something wrong, or web-components and the inspector are not yet friends. 

Have you any idea what's going on here Wilson?

Comment 5

[Dylan Oliver [:doliver]]

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

Comment 6

[Wilson Page [:wilsonpage]]

(In reply to Sam Foster [:sfoster] from comment #4)
> Created attachment 8554816 [details]
> ftu-geolocation-mirrored-eng.png
> 
> Using mirrored-english pseudo-locale, I get a different - but also broken
> result. There are RTL rules in both the switches.css and
> gaia_switch/style.css stylesheets that should be fixing this and similar
> issues, but they don't seem to be getting applied (as far as I can tell from
> the WebIDE): 
> 
> https://github.com/mozilla-b2g/gaia/blob/master/shared/elements/gaia_switch/
> style.css#L78
> https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.
> css#L111
> 
> I tried some variations of using :-moz-dir(rtl) selectors instead, but
> couldnt see any impact with my changes. I also tried editing the
> (ltr/default) rules directly in the WebIDE with no result so I'm obviously
> doing something wrong, or web-components and the inspector are not yet
> friends. 
> 
> Have you any idea what's going on here Wilson?

RTL and <style> inside shadow-dom is a tricky one at the moment. We're missing the `:host-context()` selector (bug 1082060) and `-moz-dir()` doesn't reflect the parent document's direction (bug 1100912).

If your styling the outside of the shadow-dom, you can use normal rules like [dir=rtl] gaia-switch { ... }. But styling inside the shadow-dom requires something more complex, like keeping a class/attr inside shadow-root in sync with document.

Yesterday I improved the RTL situation for components that are based on the gaia-component base class by emitting a 'dirchanged' event on the `document` that can be listened to. Unfortunately the gaia-switch you are referring to is an old component that isn't based on gaia-component. All new web-components are.

Hope that gives some insight. NI me again if you need more info :)

Comment 7

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

We'll cover this in bug 1010615.

Comment 8

[Lancy(Leave from Mozilla)]

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