1156701 - [Download Manager]The control icon in download manager is white, it is hardly to distinguish with background.

Status: VERIFIED FIXED

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

Description

[Alissa（leave from Mozilla）]

Attachment: 2015-04-20-05-28-44.png

[1.Description]:
[Nexus5 v2.2&3.0][Flame2.2&3.0]When download failed or paused, the icon in download manager is hardly to distinguish, and it is a little big.
Found time:19:16
See attachment:2015-04-20-05-28-44.png,logcat1.txt

[2.Testing Steps]: 
1.Launch browser.
2.Go to a download link and download the file.
3.Disable network while downloading.
4.Go to setting->download.
5.Check the icon at right of item.

[3.Expected Result]: 
5.The icon should be smaller and its color should be more recognizable. 

[4.Actual Result]: 
5.The icon clolor is white. So it is hardly to distinguish with background, and it is a little big.

[5.Reproduction build]: 
Flame 2.2(Affected): 
Build ID               20150420002502
Gaia Revision          c15a2b6d3a783813959c2b3bffd2a131f4270b9e
Gaia Date              2015-04-17 17:49:32
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/cc02ee38b252
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150420.041634
Firmware Date          Mon Apr 20 04:16:45 EDT 2015
Bootloader             L1TC000118D0

Flame3.0(Affected):
Build ID               20150420160201
Gaia Revision          a8e4f95dce9db727dda5d408b038f97fb4296557
Gaia Date              2015-04-20 19:30:21
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e7112314d9d5
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150420.191858
Firmware Date          Mon Apr 20 19:19:10 EDT 2015
Bootloader             L1TC000118D0

Nexus5_2.2(Affected): 
Build ID               20150420002502
Gaia Revision          c15a2b6d3a783813959c2b3bffd2a131f4270b9e
Gaia Date              2015-04-17 17:49:32
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/cc02ee38b252
Gecko Version          37.0
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150420.042319
Firmware Date          Mon Apr 20 04:23:35 EDT 2015
Bootloader             HHZ12f

Nexus5_3.0(Affected): 
Build ID               20150420160201
Gaia Revision          a8e4f95dce9db727dda5d408b038f97fb4296557
Gaia Date              2015-04-20 19:30:21
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e7112314d9d5
Gecko Version          40.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150420.192508
Firmware Date          Mon Apr 20 19:25:24 EDT 2015
Bootloader             HHZ12f

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

[7.TCID]: 
Free Test

Comment 1

[Alissa（leave from Mozilla）]

Attachment: logcat1.txt

Comment 2

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

I'll fix this.

Comment 3

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

ni? Eric since we need updated visual and icons for both the stop and refresh icons.

Comment 4

[Eric Pang [:epang] UX]

Attachment: [Visual Spec] Download_Manager_Spec.jpg

Hey Michael,

Looks like the download manager was never updated to the new specs.  Is there time to make the update? (spec attached)

If not, here's a link to the icons.

https://mozilla.box.com/s/g8lwxsffblq4kczv08ho

Hoping we can update tho cause the screen is looking messy atm.

Let me know if anything else is needed, thanks!

Comment 5

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

(In reply to Eric Pang [:epang] from comment #4)
> Looks like the download manager was never updated to the new specs.  Is
> there time to make the update? (spec attached)

Let's get the usability bug fixed first, and then see if we can do the visual refresh. Do you know where the bug is for that?

Comment 6

[GitHub Autolander Bot]

Attachment: [gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

Comment 7

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

Comment on attachment 8596957 [details] [review]
[gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

EJ, can you give this a look?

Comment 8

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Michael, your CSS looks okay but there are some wrong in icons that needs to be fixed. I did attach a comparison image in GitHub and please check it.

I just checked the link which links to UI's icons at comment 4 and realized that the proposed icons are problematic. @Eric, please go check my comment in GitHub to see what UI can help here, thanks.

Comment 9

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

(In reply to Michael Henretty [:mhenretty] from comment #5)
> (In reply to Eric Pang [:epang] from comment #4)
> > Looks like the download manager was never updated to the new specs.  Is
> > there time to make the update? (spec attached)
> 
> Let's get the usability bug fixed first, and then see if we can do the
> visual refresh. Do you know where the bug is for that?

I think it's a good timing to do so at this stage too ! Michael, can you also cc me in these bugs, I may have time to steal one or two :P

Comment 10

[Eric Pang [:epang] UX]

(In reply to Michael Henretty [:mhenretty] from comment #5)
> (In reply to Eric Pang [:epang] from comment #4)
> > Looks like the download manager was never updated to the new specs.  Is
> > there time to make the update? (spec attached)
> 
> Let's get the usability bug fixed first, and then see if we can do the
> visual refresh. Do you know where the bug is for that?

Sounds good!  The bug is 1094200

Comment 11

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

Attachment: [mock-up] new icons

Eric, could you take a look at this mockup EJ drew? It seems we have some padding issues with the current icon set.

Comment 12

[Hermes Cheng (inactive after July 27, 2015)]

Eric, could you take a look for comment 11?

Comment 13

[Eric Pang [:epang] UX]

Thanks for letting me know guys, I've updated the icons- they should be good now :)

https://mozilla.box.com/s/g8lwxsffblq4kczv08ho

Let me know if there are any other issues! Thx

Comment 14

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

Eric, there are still issues with these icons. There is extra padding around each button (looks like a few pixels in all cases). This will make it difficult to line the icons up exactly with the checkbox in the header. Please remove this padding.

Comment 15

[Eric Pang [:epang] UX]

(In reply to Michael Henretty [:mhenretty] from comment #14)
> Eric, there are still issues with these icons. There is extra padding around
> each button (looks like a few pixels in all cases). This will make it
> difficult to line the icons up exactly with the checkbox in the header.
> Please remove this padding.

Hey Michael, sorry there was some confusion on my part.  I thought we wanted to add padding :).  Padding is now removed.  Hope it's all good now.  Let me know if it isn't. Thanks!

Comment 16

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

Comment on attachment 8596957 [details] [review]
[gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

Thanks Eric!

Good catch EJ, what do you think now?

Comment 17

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Eric, I got more confused now, based on the spec, the icon should be a square, but for the updated icons, it seems the dimension of them are totally different, for close icon, it is 22x22, while for refresh icon, it is 25x22.

If you compare them with the original ones, you can notice that they are all 30x30 like a square. In addition to this, based on the spec, the icon size should be 24x24 instead of 22x22, so it means we have to add 1px padding to fill the space. (not sure this is aligned with what you thought or not, or you want to add this padding in icon itself ?)

Please help to clarify these questions, thanks

Comment 18

[Eric Pang [:epang] UX]

Attachment: [Visual Spec] Download_Manager_Spec.jpg

Hey EJ, sorry for the confusion.  I've updated the spec to reflect the new icons (without padding).  The stop and refresh icons should be left aligned instead of centered aligned that is why one is a square and one isn't (I've made the circles the same size).  Let me know if you have any other questions, thanks!

Comment 19

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

Attachment: [screenshot] updated patch

Ok, I updated the patch's css to be more in line with the spec. I had to add 1 css pixel to the height and width (26x23) of the icon container (but not the actual background image size) to prevent the images from being clipped when rendering in between pixels. Eric, is this what you are looking for?

Comment 20

[Eric Pang [:epang] UX]

Comment on attachment 8600081 [details]
[screenshot] updated patch

This looks good Michael, thanks for updating! R+

Comment 21

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

EJ, you ready to do a review here?

Comment 22

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

Comment on attachment 8596957 [details] [review]
[gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

Ahh, EJ's on vacation. Arthur, could you take a look here?

Comment 23

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

Attachment: download_manager_rtl.png

Hey Eric,

The attachment is the screenshot of download manager in RTL mode after applying the patch. Just like to confirm that in RTL mode, are the icons expected to be left aligned?

Comment 24

[Eric Pang [:epang] UX]

(In reply to Arthur Chen [:arthurcc] from comment #23)
> Created attachment 8601874 [details]
> download_manager_rtl.png
> 
> Hey Eric,
> 
> The attachment is the screenshot of download manager in RTL mode after
> applying the patch. Just like to confirm that in RTL mode, are the icons
> expected to be left aligned?

Thanks Arthur, makes sense to me.  But just want to check with Stephany to make this is what's she was expecting.

Comment 25

[Stephany Wilkes]

Yes, that's correct on the icons. The RTL pattern document shows numerous instances of icons aligned left:
https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo

Also, please be sure to test in Arabic. I only see the latest screenshot in mirrored English and sometimes there are differences. Thanks!

Comment 26

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

Comment on attachment 8596957 [details] [review]
[gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

Thanks for the clarification from Eric and Stephany. 

r+ on the patch.

Comment 27

[GitHub Autolander Bot]

https://github.com/mozilla-b2g/gaia/pull/29706

Autolander could not land the pull request due to not having collaborator rights. This is possibly due to a tree closure. Please check the tree status and request checkin again once the tree is open.

Comment 28

[GitHub Autolander Bot]

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

Comment 29

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

Comment on attachment 8596957 [details] [review]
[gaia] mikehenrty:bug-1156701-download-icons > mozilla-b2g:master

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #):
Not a regression, this is more of a usability feature request.

[User impact] if declined:
Hard to see download cancel and download restart icons in the downloads list.

[Testing completed]:
Manually tests. This is a visual patch, so it's hard to write an automated test for it.

[Risk to taking this patch] (and alternatives if risky):
Risk is to the visuals in the download list.

[String changes made]: none.

Comment 30

[Josh Cheng [:josh]]

Given no automation here. Requesting qa verifyme on master before approving.

Comment 31

[Boon]

Attachment: download.png

This problem has been verified as fail on latest build of Flame3.0 and N5_3.0 by the STR in Comment 0.
Result:
The icon clolor is white. So it is hardly to distinguish with background, and it is a little big.
See attachments: download.png
Reproduce rate: 5/5

Device: N5_3.0 build(Fail)
Build ID               20150507160204
Gaia Revision          bc5bfa18f795919b56b952bbf3637c235d0e13dc
Gaia Date              2015-05-07 13:18:34
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/5e02da1141d2
Gecko Version          40.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150507.192329
Firmware Date          Thu May  7 19:23:43 EDT 2015
Bootloader             HHZ12f

Device: Flame3.0 build(Fail)
Build ID               20150507160204
Gaia Revision          bc5bfa18f795919b56b952bbf3637c235d0e13dc
Gaia Date              2015-05-07 13:18:34
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/5e02da1141d2
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150507.193314
Firmware Date          Thu May  7 19:33:24 EDT 2015
Bootloader             L1TC000118D0

Comment 32

[SandKing]

Attachment: Verify picture: 2015-05-10-22-09-36.png

This bug has been verified successfully on latest Flame3.0 and Nexus5_3.0.
See verify picture:"2015-05-10-22-09-36.png"

Flame 3.0 build(Pass):
Build ID               20150510010201
Gaia Revision          5b2a150f6f5d29bddfaac13fcbbf099376f2f275
Gaia Date              2015-05-09 12:34:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/77d92f6d7679
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150510.045933
Firmware Date          Sun May 10 04:59:44 EDT 2015
Bootloader             L1TC000118D0

Nexus5 3.0 build(pass):
Build ID               20150510010201
Gaia Revision          5b2a150f6f5d29bddfaac13fcbbf099376f2f275
Gaia Date              2015-05-09 12:34:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/77d92f6d7679
Gecko Version          40.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150510.044405
Firmware Date          Sun May 10 04:44:24 EDT 2015
Bootloader             HHZ12f

Comment 33

[Ryan VanderMeulen [:RyanVM]]

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

Comment 34

[SandKing]

This bug has been verified successfully on latest Nightly build of Flame v2.2 and Nexus5 2.2.
STR:
With same STR as Comment 0.
See attachment: 2015-05-12-23-04-51.png
Reproduce rate: 0/10

Device: Flame v2.2 build(Pass)
Build ID               20150512162502
Gaia Revision          e048df68f6f4853b5826a8816e143d95258149de
Gaia Date              2015-05-12 19:10:26
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/9edadb35caca
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150512.202452
Firmware Date          Tue May 12 20:25:03 EDT 2015
Bootloader             L1TC000118D0

Nexus5 2.2(Pass):
Build ID               20150512162502
Gaia Revision          e048df68f6f4853b5826a8816e143d95258149de
Gaia Date              2015-05-12 19:10:26
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/9edadb35caca
Gecko Version          37.0
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150512.202258
Firmware Date          Tue May 12 20:23:14 EDT 2015
Bootloader             HHZ12f

Comment 35

[SandKing]

Attachment: Verified picture: 2015-05-12-23-04-51.png