1184926 - (RTL) “All Platforms” filtering option has display issues on FF OS

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P2)

Description

[Valentina Virlics [:vvalentina], Ecosystem QA]

Steps to reproduce:
1. Change the language to Arabic on your FF OS device and load MP-dev app
2. Click the platform-filtering bar and select “All Platforms”

Expected results:
There are no display or layout issues. The text and the drop-down arrow are displayed on the same row. 

Actual results:
The arrow is smaller and more to the left, and the selected filtering option is on a new row.

Notes/Issues:
Verified on FF OS 2.1(Flame). Issue is reproducing on MP-dev and MP-stage. 
Not reproducing on MP-production and also not reproducing on Android 4.2.1
Screenshot for this issue: http://screencast.com/t/Jp0B4htBii

Comment 1

[Mark Striemer [:mstriemer]]

I'm not sure why the arrow is smaller but I think the rest of this is expected. Is the arrow always that size on FxOS?

Changing the selected option changes the length of the string and can cause it to wrap. Looks like the screen is a bit wider on the Android in those screenshots which would account for why it doesn't wrap.

How does this look in French? The string for "All platforms" is really long in French. On my Android I see French wrap for "All platforms" and not for "My device", Arabic never wraps.

I'm not sure how this looked on production before but there was some padding added in bug 1182297 that may cause more wrapping but should make text that wraps look better.

Comment 2

[Valentina Virlics [:vvalentina], Ecosystem QA]

In RTL, in what concerns me, it is ok that the text is put on 2 rows (even thought was not like this before), but the arrow should be in the same place no meter what option is chosen.
In LTR lang (i.e. French) the arrow does not "move".
Please see the screenshots: http://screencast.com/t/CHre6r31SD

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Screenshot 2015-07-23 13.00.51.png

The arrow moves when there is one line of text since it is immediately after the end of the text. Once the text wraps to two lines it stays in that position for all text that wraps to two lines.

The arrow does not move on select boxes normally so this is a bit weird, but I think it is this way to handle cases where the screen is much wider than the text. If the arrow were always positioned at the end then on a tablet the arrow could be 100px away from the text which is also weird.

Comment 4

[Davor Spasovski [:spasovski]]

https://github.com/mozilla/fireplace/pull/1409

Comment 5

[Mark Striemer [:mstriemer]]

The arrow is working correctly. The text should be centred however.

Comment 6

[Rakhi(:rakhisharma)]

  I want to work on this ,but how i test it because as described here it works good on laptop .Have this problem only on FF OS 2.1(flame). And i don't have flame.

Comment 7

[Ram Dayal Vaishnav [:ram]]

Thanks Rakhi, assigning you to the bug. Can you update your name in bugzilla profile for better communication?

Also setting NeedInfo flag for Mark for comment#6.

Comment 8

[Mark Striemer [:mstriemer]]

You should be able to test this by making your window more narrow or using the Responsive Design View [1] mode of Firefox Dev Tools or Chrome's emulation mode.

Select the "All platforms" option for the longest string and for best results try in different languages, in English [2] the text is centred because it is only one line but it French [3] it will wrap to two lines.

Setting a `text-align: center` somewhere should be all that is needed.

[1] https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
[2] http://localhost:8675/?lang=en-US
[3] http://localhost:8675/?lang=fr

Comment 9

[Rakhi(:rakhisharma)]

Need Github link for this bug. Need IRC channel link So whenever I stuck I will able chat on problems .facing.

Comment 10

[Mark Striemer [:mstriemer]]

You need to update the styles for this `mkt-selected p` [1] and you can get help in #marketplace on irc.mozilla.org [2].

[1] https://github.com/mozilla/fireplace/blob/8eb1806ee64d0709d743b2201feed5fed6993443/src/media/css/elements--select.styl#L35
[2] https://wiki.mozilla.org/IRC

Comment 11

[Rakhi(:rakhisharma)]

As the string is too long in French language ,I think I just have to put the text at center. Am I wright?

Comment 12

[Mark Striemer [:mstriemer]]

Yes, the text just needs to be in the centre.

Comment 13

[Rakhi(:rakhisharma)]

Patch submitted , waiting for review.

Comment 14

[Mark Striemer [:mstriemer]]

https://github.com/mozilla/fireplace/commit/5192fe227866c0b4cc896ad243d61c7de3135a70

Comment 15

[Valentina Virlics [:vvalentina], Ecosystem QA]

Verified as fixed on MP-dev FF OS 2.5(Flame).
Postfix screenshot: http://screencast.com/t/57qW34OCpa
Closing bug.