1206177 - New homescreen opacity around trashcan is too low

Status: RESOLVED FIXED

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

Description

[Peter Dolanjski [:pdol]]

User-Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0

On the new homescreen if you long press an icon to delete the app while over a light colored icon at the bottom of the screen, the trashcan is hard to make out.

Comment 1

[Peter Dolanjski [:pdol]]

Attachment: screenshot.png

Comment 2

[Peter Dolanjski [:pdol]]

Eric, I'm assuming this might be for you so flagging you.

Comment 3

[Chris Lord [:cwiiis]]

Assigning to myself to deal with once Eric gets back.

Comment 4

[Eric Pang [:epang] UX]

Attachment: Delete.png

Hey Chris!

I've updated the visuals and attached.
I tried to get the white to work since I liked how light and airy it was but in the end visibility was an issue. I've changed it to use a black underlay.

Long Pressed Icon State
50% opacity #000000 underlay
85% opacity Delete Icon

Pressed Icon dragged to the delete tool bar
50% opacity #000000 underlay
Fades to 100% opacity Delete Icon

Comment 5

[Eric Pang [:epang] UX]

Random thought, is there any way we can change the soft homescreen button into the trash can when an icon is long pressed?  Is there any use for the soft homescreen button in this situation?  This way we can avoid the double tool bars too! Chris/Jacqueline what do you think?

Comment 6

[Chris Lord [:cwiiis]]

(In reply to Eric Pang [:epang] UX from comment #5)
> Random thought, is there any way we can change the soft homescreen button
> into the trash can when an icon is long pressed?  Is there any use for the
> soft homescreen button in this situation?  This way we can avoid the double
> tool bars too! Chris/Jacqueline what do you think?

That'd be cool, but as far as I know, not possible :( Personally, I always use the homescreen gesture anyway, but it'd be nice to have some command of that space when it's there...

Comment 7

[Zibi Braniecki [:zbraniecki][:gandalf]]

Why is that not possible? Is that lack of API?

Comment 8

[Chris Lord [:cwiiis]]

(In reply to Zibi Braniecki [:gandalf][:zibi] from comment #7)
> Why is that not possible? Is that lack of API?

Yes, we have no API for this and I'm not sure how we'd express it either. The closest thing we have is full-screen mode, but that also removes the system tray, rocketbar and I don't think the transition is flawless either.

Comment 9

[Chris Lord [:cwiiis]]

Eric, making the suggested changes, there's almost no visible difference between 85% opacity and 100% opacity for the icons - given the background is already 50% opacity, I suggest leaving the icons at 50% opacity in their inactive state - this remains very visible, but is clearly different to the active state.

Also, having this now dark tray with no shadow makes it contrast quite heavily with the rocketbar - did you intend for that to change a bit? I'll attach screenshots for reference.

Comment 10

[Chris Lord [:cwiiis]]

Attachment: Dark uninstall/edit tray with 85% inactive icons

Comment 11

[Chris Lord [:cwiiis]]

Attachment: Dark uninstall/edit tray with 50% inactive icons

Comment 12

[Eric Pang [:epang] UX]

(In reply to Chris Lord [:cwiiis] from comment #9)
> Eric, making the suggested changes, there's almost no visible difference
> between 85% opacity and 100% opacity for the icons - given the background is
> already 50% opacity, I suggest leaving the icons at 50% opacity in their
> inactive state - this remains very visible, but is clearly different to the
> active state.
> 
> Also, having this now dark tray with no shadow makes it contrast quite
> heavily with the rocketbar - did you intend for that to change a bit? I'll
> attach screenshots for reference.

Hey Chris, you're right it's looking dark.

Let's make it 35% black (it's higher then the rocket bar - but the rb has the added layer of opacity for the search area).

I'm also good with the 50% inactive state of the trash can.

Let's see how these looks. Too bad we can't change the soft home button..

What does the edit button do?

Thanks!

Comment 13

[Chris Lord [:cwiiis]]

(In reply to Eric Pang [:epang] UX from comment #12)
> Hey Chris, you're right it's looking dark.
> 
> Let's make it 35% black (it's higher then the rocket bar - but the rb has
> the added layer of opacity for the search area).

Got it.

> I'm also good with the 50% inactive state of the trash can.
> 
> Let's see how these looks. Too bad we can't change the soft home button..
> 
> What does the edit button do?

If you drag a bookmark onto it, it lets you edit the title.

Comment 14

[Chris Lord [:cwiiis]]

Attachment: 35% black tray with 50% opaque icons and 100% opaque active icons

How's this?

Comment 15

[Eric Pang [:epang] UX]

(In reply to Chris Lord [:cwiiis] from comment #14)
> Created attachment 8664915 [details]
> 35% black tray with 50% opaque icons and 100% opaque active icons
> 
> How's this?

Hey Chris, is it possible to have a screen where there are icons behind the delete tool bar?
Ping me and I can do a quick review :)

Comment 16

[Chris Lord [:cwiiis]]

Attachment: 35% black tray with 50% opaque icons and 100% opaque active icons, icons underneath tray

Comment 17

[Eric Pang [:epang] UX]

Comment on attachment 8664915 [details]
35% black tray with 50% opaque icons and 100% opaque active icons

Looks good, thanks for updating Chris!

Comment 18

[GitHub Autolander Bot]

Attachment: [gaia] Cwiiis:bug1206177-new-homescreen-tray-style > mozilla-b2g:master

Comment 19

[Alberto Pastor [:albertopq]]

Comment on attachment 8665888 [details] [review]
[gaia] Cwiiis:bug1206177-new-homescreen-tray-style > mozilla-b2g:master

Thanks!

Comment 20

[Chris Lord [:cwiiis]]

Thanks, merged: https://github.com/mozilla-b2g/gaia/commit/2bdae877bc22c2abbb080c29f390a4d4b961d677

Comment 21

[Jacqueline Savory [:jsavory] UX]

Removing flag as the changing the home button isn't possible right now, but I agree it is an interesting idea.