1092327 - (App-grouping) Add press state for collapse/expand button

Status: VERIFIED FIXED

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

Description

[Maria Sandberg [:mushi]]

When collapsing and expanding big groups there is a delay (presumably because of performance) that leaves me uncertain if the tap was registered or not. Let's consider adding some feedback to let the user know the button was indeed pressed. 

I'll leave it to Hung/Katie to define what this should be, one suggestion is a very subtle press state, kind of like what we have for app icons when launching an app.

Comment 1

[Hung Nguyen]

I've updated the VSD spec which can be found here (https://bugzilla.mozilla.org/show_bug.cgi?id=1086514) to include this scenario. 

Essentially when an user presses the collapse/expand button, the graphic should dim to (50% opacity) to show feedback. This is in line with what happens with the app icons. 

Chris - let me know if you have any questions.

Comment 2

[Chris Lord [:cwiiis]]

Attachment: Add press state for group collapse toggle

Unfortunately not as simple as I'd have hoped, but here we are.

Not keen on having to use setTimeout, but I've explained why in the comment. I think a nested requestAnimationFrame would have had the same effect, but I feel just as bad about that and have reason to believe that this may be slightly better in some situations.

The opacity change isn't always as immediate as I'd like, but it's much quicker than the collapse/expand.

Comment 3

[Kevin Grandon :kgrandon]

Hey Chris - I left a few comments on GH. What are your thoughts on doing this on the transitionend event of the .toggle element instead of setTimeout?

Comment 4

[Chris Lord [:cwiiis]]

(In reply to Kevin Grandon :kgrandon from comment #3)
> Hey Chris - I left a few comments on GH. What are your thoughts on doing
> this on the transitionend event of the .toggle element instead of setTimeout?

I've responded on github - tl;dr is that the toggle element has no transition on press and we don't want to wait before starting the work required to collapse/expand any longer than is necessary.

Comment 5

[Kevin Grandon :kgrandon]

Comment on attachment 8536704 [details] [review]
Add press state for group collapse toggle

Sounds good to me. Go ahead and update the setTimeouts to not be nested if you feel it's worth it, won't block the review on that though. Thanks!

Comment 6

[Chris Lord [:cwiiis]]

Update made, fixed unit tests and merged: https://github.com/mozilla-b2g/gaia/commit/c87c47edcecc31f25fb0e560d38a84442cd169eb

Comment 7

[Yeojin Chung [:YeojinC]]

This issue is verified fixed on Flame Master.

Result: When the collapse/expand button is pressed, it turns gray, indicating that the button is pressed.
 
Device: Flame Master (319mb, full flash)
Build ID: 20150209010211
Gaia: 0d7b35f23402c4cb29bca6b98280fec48a196dec
Gecko: 3436787a82d0
Gonk: e7c90613521145db090dd24147afd5ceb5703190
Version: 38.0a1 (3.0)
Firmware Version: v18D-1
User Agent: Mozilla/5.0 (Mobile; rv:38.0) Gecko/38.0 Firefox/38.0

Comment 8

[Yeojin Chung [:YeojinC]]

(In reply to Yeojin Chung [:YeojinC] from comment #7)
> This issue is verified fixed on Flame Master.
> 
> Result: When the collapse/expand button is pressed, it turns gray,
> indicating that the button is pressed.

This was verified on both big and small app groups. When collapsing or expanding, there was a delay observed. However, the button changed from white to gray, so the user is aware that the button is pressed during the delay, avoiding the confusion.