1217789 - [music][RTL] The back button in the song picker is left-aligned

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Music, defect, P3)

Description

[Lancy(Leave from Mozilla)]

Attachment: Select a track_back button_v2.5.png

[1.Description]:
[RTL][FlameKK&AriesKK v2.5][Ringtones]Add ringtone from music, the back button in "Select a track" view is left-aligned.
See attachment:Select a track_back button_v2.5.png

[2.Testing Steps]: 
1. Set system language as Arabic 
2. Launch Settings app. 
3. Tap "Sound" ->Tap "Manage Tones". 
4. Tap "+" icon of Firefox ringtone and observe the "Select a track" view. 


[3.Expected Result]: 
4.The back button on header should be right-aligned but not be mirrored.

[4.Actual Result]: 
4.The back button is left-aligned.

[5.Reproduction build]: 
Device: Flame KK 2.5 build (Affected)
Build ID               20151022150207
Gaia Revision          29ce8ec8606e59f582375234440812b046346513
Gaia Date              2015-10-22 05:31:38
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/76bd0c01d72e64ca4f261ffdb2652a91f961e930
Gecko Version          44.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151022.185000
Firmware Date          Thu Oct 22 18:50:13 EDT 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Device: Aries KK 2.5 build (Affected)
Build ID               20151023005002
Gaia Revision          29ce8ec8606e59f582375234440812b046346513
Gaia Date              2015-10-22 05:31:38
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/1f03a14106e59280761ac53904340f389674337f
Gecko Version          44.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151023.001128
Firmware Date          Fri Oct 23 00:11:35 UTC 2015
Bootloader             s1

[6.Reproduction Frequency]: 
Always Recurrence,10/10

[7.TCID]: 
15514

Comment 1

[Jim Porter (:squib)]

Not a ringtones bug.

Comment 2

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

Triage: Music app has not yet had the CSS refactoring that will reverse all these headers.

Comment 3

[Justin D'Arcangelo [:justindarc]]

(In reply to Sam Foster [:sfoster] from comment #2)
> Triage: Music app has not yet had the CSS refactoring that will reverse all
> these headers.

Sam, can you be clearer about what you mean by "CSS refactoring"?

Comment 4

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

> Sam, can you be clearer about what you mean by "CSS refactoring"?

I'm referring to the work under bug 1202354 - in which System and many - but not all - of the core Gaia apps have had their CSS patched to reflect the new CSS/BiDi best practices and bring the UI into spec wrt RTL and BiDi. The result is to comprehensively reverse the position of "back" and "forward" in the UI in RTL. This is a large effort and it wasnt expected that we would be able to do this work for all apps, for 2.5. So this is a valid bug but not blocking. As far as the RTL "feature" goes this is important - but to be consistent with that I just moved to a P3. But its your module and feel free to adjust.

Comment 5

[Jim Porter (:squib)]

I thought the Music app used web components for the title bar. Shouldn't we get this automatically?

Comment 6

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

(In reply to Jim Porter (:squib) from comment #5)
> I thought the Music app used web components for the title bar. Shouldn't we
> get this automatically?

Its opt-in. You need to remove the ignore-dir attribute from the <gaia-header>. We've been doing that alongside the other necessary changes to keep the in-app experience consistent, but its case by case. If you think Music in RTL would net benefit from this change, its a simple patch. E.g. https://github.com/mozilla-b2g/gaia/pull/32786

Comment 7

[Jim Porter (:squib)]

But that attribute's not set: https://github.com/mozilla-b2g/gaia/blob/master/apps/music/pick.html#L37

Comment 8

[Justin D'Arcangelo [:justindarc]]

(In reply to Jim Porter (:squib) from comment #7)
> But that attribute's not set:
> https://github.com/mozilla-b2g/gaia/blob/master/apps/music/pick.html#L37

Here's the problem:

https://github.com/mozilla-b2g/gaia/blob/master/apps/music/bower.json#L17

Looks like [ignore-dir] support was added in gaia-header v0.9.4. We should update our bower.json to use the latest gaia-header.

Comment 9

[GitHub Autolander Bot]

Attachment: [gaia] justindarc:bug1217789 > mozilla-b2g:master

Comment 10

[Justin D'Arcangelo [:justindarc]]

Comment on attachment 8680447 [details] [review]
[gaia] justindarc:bug1217789 > mozilla-b2g:master

Patch to update to latest gaia-header. Also, this patch reverses the direction of the <music-view-stack> animations to coincide with the header arrow direction :-)

Comment 11

[Justin D'Arcangelo [:justindarc]]

Landed on master:

https://github.com/mozilla-b2g/gaia/commit/56feffd744c6a58074d2ba2eb1b5d5d433f95402

Comment 12

[Lancy(Leave from Mozilla)]

Attachment: Verify1_select a track_back button_master.png

This issue is verified as pass on latest FlameKK&AriesKK master build by the same STR in comment 0.
Actual result: The back button on header is right-aligned and mirrored in song picker view.
See attachment:Verify1_select a track_back button_master.png.
Reproducing rate:0/10

Device:FlameKK master build(512mb) (Pass)
Build ID               20151103150203
Gaia Revision          61918ddd9ccce104c009e873e34a0791e125753a
Gaia Date              2015-11-03 17:22:30
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/f742b9412ed5aace90ad863b276faae0641090a8
Gecko Version          45.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20151103.182550
Firmware Date          Tue Nov  3 18:26:03 EST 2015
Firmware Version       v18D v4
Bootloader             L1TC000118D0

Device: AriesKK master build (Pass)
Build ID               20151104004249
Gaia Revision          61918ddd9ccce104c009e873e34a0791e125753a
Gaia Date              2015-11-03 17:22:30
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/f742b9412ed5aace90ad863b276faae0641090a8
Gecko Version          45.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151104.000116
Firmware Date          Wed Nov  4 00:01:24 UTC 2015
Bootloader             s1