1890717 - The tab counter text is not displayed in the center of the tab counter square and is done by the font set in the phone

Status: RESOLVED FIXED

(Fenix :: Toolbar, defect, P3)

Description

[eclaudiu64]

Attachment: Screenshot_20240410-110615_Firefox Beta.jpg

User Agent: Mozilla/5.0 (Android 11; Mobile; rv:125.0) Gecko/125.0 Firefox/125.0

Steps to reproduce:

The number of tabs or the infinity sign that shows more than 100 open tabs in the toolbar counter, it is not currently displayed in the center of the square and is also influenced by the font set on the phone, this can be seen mostly in the new toolbar from the secret options, but it can also be seen in the current toolbar.

Actual results:

The number of tabs in the square box does not display consistently in the center, regardless of the font set.

Expected results:

The number of tabs should be displayed right in the center of the square table without moving.

Comment 1

[eclaudiu64]

Attachment: Screenshot_20240410-111154_Firefox Nightly.jpg

I changed the font in the phone settings and the result is that the new toolbar counter (toolbar redesingn incomplete portions) moves even more.

Comment 2

[Chris Peterson [:cpeterson]]

Setting toolbar redesign's Release blockers to priority P3 until we finish fixing our Beta experiment blockers.

Comment 3

[Joe M [:jmahon]]

Refinement notes:

• Infinity symbol centered horizontally but not vertically; needs to be updated
• What should we do for larger system fonts? <-- already (correctly) does not scale with system font
• Unknown: TBD if the glyph is aligned differently in different contexts (e.g., depending on system encoding or font). If we need to handle that, we might need to convert the infinity symbol to an SVG and swap between it and the numbers 0-99 rather than using the text glyph itself.
• This view is currently a compoundview, not a composable
• We should do a spike on this before pointing it to figure out the current state of that view

Spike opened in Bug 1929318; we'll revisit pointing this after that spike is done.

Comment 4

[Chris Peterson [:cpeterson]]

This is an existing bug and thus doesn't need to block releasing the new toolbar design.

Comment 5

[Petru-Mugurel Lingurar [:petru]]

I could reproduce the issue with the infinity symbol being off centered vertically (comment 0) but not the issue with the symbol being off centered horizontally also (comment 1).
To reduce depending on fragile code to correctly center a separate symbol in the counter box we can use another SVG containing both the counter box and the infinity symbol thus guaranteeing this symbol will always be shown as centered.

Comment 6

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 1890717 - part 1 - Use a svg for showing >= 100 tabs opened in the tabs counter r=#android-reviewers

Using a drawable instead of brittle padding updates ensures the infinite symbol will
always be centered in the tab counter box.

Comment 7

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 1890717 - part 2 - Use a svg for showing >= 100 tabs opened in the tabs counter composable r=#android-reviewers

Using a drawable instead of brittle padding updates ensures the infinite symbol will
always be centered in the tab counter box.

Comment 8

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 1890717 - part 3 - Optimize recompositions of TabCounter r=#android-reviewers

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/679a95913948
part 1 - Use a svg for showing >= 100 tabs opened in the tabs counter r=android-reviewers,007
https://hg.mozilla.org/integration/autoland/rev/93a770e27cd8
part 2 - Use a svg for showing >= 100 tabs opened in the tabs counter composable r=android-reviewers,007
https://hg.mozilla.org/integration/autoland/rev/767e73c33155
part 3 - Optimize recompositions of TabCounter r=android-reviewers,007

Comment 10

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/679a95913948
https://hg.mozilla.org/mozilla-central/rev/93a770e27cd8
https://hg.mozilla.org/mozilla-central/rev/767e73c33155