1140321 - [RTL][Download]Fail to download the file, then the error icon is left-aligned and overlap with refresh icon in download list.

Status: VERIFIED FIXED

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

Description

[Lancy(Leave from Mozilla)]

Attachment: Error icon.png

[1.Description]:
[RTL][v2.2][Settings]Try download the failed file again, the error icon is left-aligned and overlap with refresh icon in download list.
See attachment:Error icon.png

[2.Testing Steps]: 
1. Set your phone language to Arabic and there are some stopped files.
2. Launch Settings app. 
3. Select "Downloads". 
4. Tap the refresh icon and try to download the file agian without network.

[3.Expected Result]: 
4.The error icon should be right-aligned and displayed at right side of file name.

[4.Actual Result]: 
4.The error icon is left-aligned and overlap with refresh icon.

[5.Reproduction build]: 
Flame 2.2 build:
Build ID               20150305002528
Gaia Revision          89af288bad6751248ff84504fa898206fee127fe
Gaia Date              2015-03-04 18:00:05
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/6d8d294aa8f3
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150305.094337
Firmware Date          Thu Mar  5 09:43:49 EST 2015
Bootloader             L1TC000118D0

Flame 3.0 build:
Build ID               20150305072141
Gaia Revision          0017f2bbc63781a5409644b664d80ebaa1543653
Gaia Date              2015-03-05 00:46:59
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/993eb76a8bd6
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150305.160341
Firmware Date          Thu Mar  5 16:03:51 EST 2015
Bootloader             L1TC000118D0

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

[7.TCID]: 
15744

Comment 1

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

P2 - nominating since this is and often used screen and inconsistent with RTL behavior

Comment 2

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

Guillaume, can you take a look here?

Comment 3

[GitHub Autolander Bot]

Attachment: [gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

Comment 4

[Guillaume Marty [:gmarty]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

I tried to limit the risks on this patch for uplift but I think the download CSS needs a good overhaul in the future.

Comment 5

[Arthur Chen [:arthurcc][inactive after 6/30]]

Attachment: download_ltr_before.png

Comment 6

[Arthur Chen [:arthurcc][inactive after 6/30]]

Attachment: download_ltr_after.png

Comment 7

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

The result doesn't seem right to me. The exclamation mark exists in the beginning of the item before applying the patch but now it overlaps with the retry icon.

Comment 8

[Guillaume Marty [:gmarty]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

Hi Arthur. Sorry for the misunderstanding. I fixed the patch.

Also can you provide a way to get failed download easily? I currently hack on the HTML attributes.

Comment 9

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

The icon seems a little bit misplaced , please check my comments in github.

As for getting a failed download, I did the following:
1. Download a file that is large enough in http://www.thinkbroadband.com/download/
2. Disable the wifi while downloading.
3. Go to download panel and hit the restart button -> retry.

The icon should appear, if not, try reopen settings app.

Comment 10

[Guillaume Marty [:gmarty]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

This patch fixes the bad positioning in both RTL and LTR.
I also included your comments left on Github.

Comment 11

[Arthur Chen [:arthurcc][inactive after 6/30]]

Attachment: icon.png

Comment 12

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

The position of the icon in RTL is still a bit shifted. Please check the image and the github comment, thanks.

Comment 13

[Lancy(Leave from Mozilla)]

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

Comment 14

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

Looking good to me, thanks.

Comment 15

[GitHub Autolander Bot]

Pull request has landed in master: https://github.com/mozilla-b2g/gaia/commit/817acfe956423761070a6fa676c643f389397836

Comment 16

[Guillaume Marty [:gmarty]]

Comment on attachment 8575904 [details] [review]
[gaia] gmarty:Bug-1140321-RTL-Downloads-list > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): RTL
[User impact] if declined: The failed icon on the Downloads section of the Settings app is misplaced
[Testing completed]: Manual testing required
[Risk to taking this patch] (and alternativeas if risky): Low as it's only a CSS change.
[String changes made]: None.

Comment 17

[bhavana bajaj [:bajaj]]

Parul, can you please help with this verification?

Comment 18

[Ryan VanderMeulen [:RyanVM]]

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

Comment 19

[Sue]

Attachment: 2015-03-19-22-04-04.png

This issue has been verified successfully on Flame 3.0, the error icon is right-aligned and displayed at right side of file name.
See attachment:2015-03-19-22-04-04.png
Rate:0/5

Flame 3.0 build: pass
Build ID               20150319160212
Gaia Revision          c39e15f631de80c69467fda0d4ea0bcda9e194ca
Gaia Date              2015-03-18 19:30:04
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/cbd0efcd976c
Gecko Version          39.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150319.193329
Firmware Date          Thu Mar 19 19:33:42 EDT 2015
Bootloader             L1TC000118D0

Comment 20

[Parul Mathur [:pragmatic] - out of office - please ni? [:bajaj] instead]

Issue not yet fixed on b2g 2.2. Will test again with tomorrow's build.

Gaia-Rev        4e0633463571377ad4badc680b666771684e862d
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/535ec28fb36f
Build-ID        20150319162506
Version         37.0
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20150319.200823
FW-Date         Thu Mar 19 20:08:34 EDT 2015
Bootloader      L1TC000118D0

Comment 21

[Parul Mathur [:pragmatic] - out of office - please ni? [:bajaj] instead]

Verified that the issue is fixed on b2g v2.2 with today's build.

Steps to Reproduce
1. In the Rocketbar, type "20 mb file" and tap on the search icon.
2. In the Browser, tap on the first search result, which is currently http://www.thinkbroadband.com/download/.
3. On the webpage, tap on the yellow icon for the 200 MB file to start the file download.
4. Verify that an animated download icon apears in the status bar at the top.
5. Pull down the notification menu and tap on the airplane mode icon to turn off connectivity.
6. Tap on the Settings icon and navigate to Settings > Downloads.
7. Verify that the file (200MB.zip) is listed. A progress bar is displayed, along with a white cross icon.
8. Tap on the cross icon to bring up the "Download stopped" dialog. Tap on the "Try again" button.
9. Verify that a "Download failed" notification is generated.
10. Verify that the Settings > Downloads screen shows a red warning icon for stopped downloads and a white refresh icon to try the download again.

Expected Result
1. In LTR languages (like English) the red warning icon for failed downloads is on the left of the file name while the white refresh icon is on the right.
2. In RTL languages (like Arabic) the red warning icon for failed downloads is on the right of the file name while the white refresh icon is on the left.

Actual Result
Matches the expected result.

Test Environment
Gaia-Rev        c8136ef4094fc5509551ab7b1d5f6141491f00ef
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/12139abae350
Build-ID        20150320002502
Version         37.0
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20150320.035635
FW-Date         Fri Mar 20 03:56:47 EDT 2015
Bootloader      L1TC000118D0