1807131 - Add Button Ripples Animations to Dialog and Snackbar Buttons

Status: VERIFIED FIXED

(Fenix :: General, enhancement)

Description

[Christian Sadilek [:csadilek]]

From github: https://github.com/mozilla-mobile/fenix/issues/9516.

Why/User Benefit/User Problem

It's a visual improvement that enhances look and feel of the graphical user interface. This is a common feature for Material Design that gives feedback to the user when they interact with a button. That behavior is known and expected by users. Missing button animations for dialogues and snackbars in Fenix is a regression from Fennec.

What/Requirements

Add the standard button animations from Android as known from Fennec to Fenix when interacting with buttons of dialogues and the button on snackbars:

• holding down the button by tapping it without releasing it
  Animation: slowly fade in marking (see screenshots)
• releasing the button without activating it by moving away from it
  Animation: display circular animation that increases in size while fading out (see screenshots)
• activating the button by releasing it
  Animation: fade out marking

Acceptance Criteria (how do I know when I’m done?)

If interaction with buttons of all dialogues and all snackbars is animated.

Screenshots (6)

• Fenix, missing animations:

• Fennec, common animations:

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[czlucius]

Seems like ?android:attr/colorControlHighlight does not seem to be working in light mode. (Possible cause of https://github.com/mozilla-mobile/fenix/issues/14009)

From the Android sources (taken from AOSP):
This color is:
Light mode: #1F000000 (12% alpha on black)
Dark mode: #33FFFFFF (20% alpha on white)

Seems doable to add this to a ripple drawable (in both drawable and drawable_night)

Comment 2

[czlucius]

Seems like even in light mode, the ripple is white in color (with 20% alpha), hence its invisible.

Comment 3

[BMO Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1807131: Fix ripples for snackbar and alert dialogs (#1226)

Comment 4

[czlucius]

I've made a PR on this, can help to take a look?
Thanks

Comment 5

[BMO Github Automation]

Authored by https://github.com/czlucius
https://github.com/mozilla-mobile/firefox-android/commit/a071055e497a2a8f09cb1ce71d1b1f0a0a119800
[main] Bug 1807131 - Fix ripples for snackbar and alert dialogs

Comment 6

[Delia Pop]

Attachment: Nightly_ButtonRipplesAnimations.png

Tested on the latest Nightly 115.0a1 from 05/16.

• On snackbars, the ripples animations are displayed when long tapping the buttons, and they fade out while while moving away from the button, in both Dark and Light theme.
• On confirmation dialogues, the ripples animations are displayed when long tapping the buttons, and they fade out while while moving away from the button, with Dark theme only.
  The ripple animations are not visible on dialogues with Light theme.
  Devices used:
• Google Pixel 6 (Android 13).
• Motorola Moto G30 (Android 12)
• Lenovo Yoga Tab 11 (Android 11)

:czlucius, should we open a separate issue for the ripple animations are not visible on dialogues with Light theme? Thanks.

Comment 7

[Delia Pop]

Attachment: Dialogues.mp4

Attaching a video recording for dialogue on light theme.

Comment 8

[Delia Pop]

Marking the ticket as verified fixed, after the follow up discussion with :czlucius here: https://github.com/mozilla-mobile/firefox-android/pull/1226 .

Comment 9

[Chris Peterson [:cpeterson]]

Fixed by czlucius in Firefox 115. Thanks!