1059833 - [gaia-header] Button transition-delays should only impact touch/user interaction

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Wilson Page [:wilsonpage]]

Currently gaia-header is applying a transition-delay to *all* button state changes, meaning property changes due to buttons being disabled (eg. opacity) are also delayed. This is not as desired.

Comment 1

[Wilson Page [:wilsonpage]]

Attachment: pull-request (gaia-header:master)

Comment 2

[Wilson Page [:wilsonpage]]

Attachment: pull-request (gaia:master)

Comment 3

[Casey Yee]

Comment on attachment 8480752 [details] [review]
pull-request (gaia:master)

It looks like min-active is being applied to gaia-header, but it doesn't look like the style is being applied to the buttons.   Not sure why this is since i do see that there are selectors within the stylesheets for this.

Comment 4

[Yan Or]

I tried it on the Contacts app but I'm not sure I can really tell the delayed transition as pressing a button always causes a screen transition.

We certainly don't see the unwanted delayed transition on things like button enable/disable anymore.

Comment 5

[Yan Or]

Przemek,

Is there a specific app you know of where the header buttons interaction is visually affected by the transition delay?

Comment 6

[Wilson Page [:wilsonpage]]

(In reply to Yan Or from comment #5)
> Przemek,
> 
> Is there a specific app you know of where the header buttons interaction is
> visually affected by the transition delay?

All :active states should appear delayed all buttons in the gaia-header.

Comment 7

[Wilson Page [:wilsonpage]]

The intention here is that the user still sees visual feedback (:active styling) when a button is tapped quickly.

Comment 8

[Wilson Page [:wilsonpage]]

(In reply to Casey Yee [:cyee] from comment #3)
> Comment on attachment 8480752 [details] [review]
> pull-request (gaia:master)
> 
> It looks like min-active is being applied to gaia-header, but it doesn't
> look like the style is being applied to the buttons.   Not sure why this is
> since i do see that there are selectors within the stylesheets for this.

If you are trying this is the gaia-header example page you won't see any transition delay as this is defined by the `--header-button-transition-delay` variable in gaia-theme. You'd have to test in an app, or with the gaia-theme present.

Comment 9

[Guillaume Marty [:gmarty]]

Comment on attachment 8480752 [details] [review]
pull-request (gaia:master)

Looks nice.

Comment 10

[Wilson Page [:wilsonpage]]

Comment on attachment 8480747 [details] [review]
pull-request (gaia-header:master)

LANDED https://github.com/wilsonpage/gaia-header/commit/f8854e661e78d0b833f86716c8cb4836c6362c5d

Comment 11

[Stephany Wilkes]

Wilson you are our hero!

Comment 12

[Wilson Page [:wilsonpage]]

(In reply to Stephany Wilkes from comment #11)
> Wilson you are our hero!

Woah, not landed on Gaia yet, just in gaia-header repo :(

Comment 13

[Wilson Page [:wilsonpage]]

I stamped gaia-header v0.3.11 [1] which includes the new JS driven `:active` approach to give us full control over our 'pressed' state styling.

I have updated Gaia to use this new version, so someone just has to push the button and land it once we have green gaia-try.

[1] https://github.com/gaia-components/gaia-header/releases/tag/v0.3.11

Comment 14

[Mike Habicher [:mikeh] (high bugzilla latency)]

https://github.com/mozilla-b2g/gaia/commit/fd719f6fd74d74d88314429a07de68c655552609