1883419 - Translate Button Sometimes Appears in Wrong Order with Reader Mode

Status: VERIFIED FIXED

(Fenix :: Translations, defect, P2)

Description

[Cathy Lu [:calu]]

Attachment: regular browsing

Occasionally, the translate button is on the left of Reader Mode with extra spacing. Happens on private browsing as well.

Comment 1

[Cathy Lu [:calu]]

Same spacing issue with the Review Quality Checker icon.

Additionally, the reader mode and translate icon may swap positions and overlap momentarily.

Comment 2

[Olivia Hall [:olivia]]

Link with video to intermittent overlap.

Comment 3

[Olivia Hall [:olivia]]

The overlap might be related to this transition. May also need to add a way to specify ordering of the addPageAction. I think it might be in order of determining if the page supports reader mode/ translations. It seems usually translations determines support first, so it appears first and gets pushed left by reader mode.

Comment 4

[Olivia Hall [:olivia]]

Found out more information that this is also related to the toolbar redesign.

Comment 5

[miralobontiu]

Attachment: Screenshot_20240313-113410.png

Reproduced on today's Nightly 125.0a1 on Google Pixel 6 (Android 14).

Comment 6

[miralobontiu]

Attachment: shopping-translations.png

The same behavior when translation icon meets the shopping icon.
Tested on Nightly 125.0a1 from 3/13.

Comment 7

[Olivia Hall [:olivia]]

Changing the scope of this bug as bug 1877526 solves the ordering issue!

This bug is now just to fix the overlap issue. (See image examples here.)

STR:

• Have translations enabled
• Go to a Wikipedia article in another language that the system language so both the Translations and Reader Mode icon should appear
  • Continually drill down to subsequent Wikipedia article links until the bug appears
    • I clicked links at a fairly quick pace, was able to reproduce consistently x3
    • The bug is the icons overlap and stay overlapped until navigation

Generally have to click through very quickly to have this issue.

Comment 8

[Olivia Hall [:olivia]]

This is additionally happening with Translations and Review Checker/Fakespot. Should test and fix for that case too. If it is a different root cause, then we should file a bug for that case.

With Reader mode and translations, it becomes stuck in the overlapped state in some scenarios until navigation.

With Fakespot and translations, the overlap is momentarily and it will move out of the overlap without a navigation.

Comment 9

[[:skhan]]

Attachment: Bug 1883419 - Fix order of translation, reader mode and review quality check icons on toolbar

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fedea0d2a1b9
Fix order of translation, reader mode and review quality check icons on toolbar r=android-reviewers,mavduevskiy

Comment 11

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/fedea0d2a1b9

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:skhan, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox125 to wontfix.

For more information, please visit BugBot documentation.

Comment 13

[Olivia Hall [:olivia]]

(Translations isn't in general availability in 125 yet. Please change if it is needed for another reason.)

Comment 14

[Olivia Hall [:olivia]]

Slightly adjusted the title, since the focus on this fix was the ordering, filed bug 1889240 for the overlap issue on translations.

Comment 15

[miralobontiu]

Verified as fixed on the latest Fenix Nightly 126.0a1 from 4/5 with the following devices: Realme C35 (Android 12), Samsung Galaxy Tab S8 Ultra (Android 12), Google Pixel 6 (Android 14), and Samsung Galaxy Note 8 (Android 9).

The reader mode icon is displayed always on the left of the translation icon.