1885161 - The Translation icon displayed an animation when entering/exiting Desktop mode

Status: NEW

(Fenix :: Translations, defect, P3)

Description

[Delia Pop]

Attachment: MultipleIcons_animation.mp4

Prerequisites

1. Go to the three-dot menu - Settings - About Firefox Nightly, and tap 5 times on the logo.
2. Exit the About Firefox Nightly, and go to the Secret Settings.
3. Enable the "Enable Firefox Translations" toggle.
4. Set your device's OS to English - US.

Steps to reproduce

1. Go to a translatable page (e.g. meteo.it, elpais.com)
2. Tap on the three-dot menu
3. Toggle on the “Desktop site” option.
4. Observe the Translations icon in the toolbar.
5. Repeat steps 2-4.

Expected behavior

The transition between mobile mode and desktop mode is smooth, without visual issues.

Actual behavior

When transitioning between mobile mode and desktop mode, the Translation icon displays:

• a blinking animation, if there are no other icons available in the toolbar (e.g. Reader mode icon);
• a sliding animation, if there are other icons available in the toolbar (e.g. Reader mode icon);

Device information

• Firefox version: Nightly 125.0a1 from 03/13
• Android devices: Samsung Galaxy S22 Ultra (Android 14), Google Pixel 6 (Android 14)

Comment 1

[Delia Pop]

Attachment: Icon_animation.mp4

Comment 2

[Olivia Hall [:olivia]]

Tying to bug 1889240 for now. Have several similar issues in the same area. Needs some more investigation to insure it is not a different issue, but strongly suspect they are related.

Comment 3

[Mike a [:mavduevskiy]]

Should be partially fixed by 1889240.
Could you verify that's it is still something we should fix? From the looks of it, the blinking is gone and icons most of the time are not being reanimated when switching between the disktop/mobile modes.

Comment 4

[Delia Pop]

Attachment: media_20240610_125910_4568637828525256490.mp4

We've tested this on the latest Nightly 128.0a1 from 06/10 with Samsung Galaxy S22 Ultra (Android 14), Oppo Find X3 Lite (Android 11), and Google Pixel 6 (Android 14).

In this current version the Translation icon still displays a:

• blinking animation, if there are no other icons available in the toolbar (e.g. Reader mode icon);
• sliding animation, if there are other icons available in the toolbar (e.g. Reader mode icon) - with the mention that in this version the Translation icon is displayed in the right side of the search bar and the additional icon is displayed on it's left side. The 2 icons do not overlap during this animation;

It is worth mentioning that these animations are also displayed when refreshing the page, not only when entering/exiting Desktop mode.
I believe UX should provide their feedback weather this behavior should require any changes.