Add Button Ripples Animations to Dialog and Snackbar Buttons

[theFireProject]

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

[Poopooracoocoo]

The ripple animations you described sound like Android 7-8. Android 5-6 and Android 9+ have different animations.

[sv-sdeiac]

Hi, I tested this issue and I found 3 different problems:

• In dark theme, the ripples don't display the circular animation that increases in size while fading out. This is reproducible in any type of ripples.

• In light theme, the ripples are not displayed anywhere on confirmation pop-up(cancel/delete)

• In light theme, the ripples are not visible due to the contrast on snackbar (switch/undo)

Build: Firefox Preview Nightly 4/21 #21121811.

Devices:

• Google Pixel 3 (Android 10);
• Samsung Galaxy Note 8 (Android 9);
• LG g7 fit (Android 8.1).

@ekager, can you take a look at those details and come with updates about them? I'll remove the qa:needed flag till we have some updates, thanks.

[Poopooracoocoo]

@sv-sdeiac those buttons don't have a shape too. On Android buttons are typically rounded rectangles but some people customise the shape of them.

https://material.io/components/dialogs https://material.io/components/buttons

[ekager]

Yep, those all look like valid issues! I'm going to unassign myself for now, but anyone is free to pick this up if they have ideas.

[czlucius]

Yep, those all look like valid issues! I'm going to unassign myself for now, but anyone is free to pick this up if they have ideas.

I would like to work on this issue

[czlucius]

android:colorControlHighlight seems to control the ripple color when using ?android:attr/selectableItemBackgroundBorderless

https://cs.android.com/android/platform/superproject/+/master:packages/apps/Contacts/res/drawable/item_background_material_borderless_dark.xml?q=selectableItemBackgroundBorderless which has a color of ripple_material_dark: https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/color/ripple_material_dark.xml

[csadilek]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1807131

Change performed by the Move to Bugzilla add-on.