1967464 - Mute/unmute button on tabs unaligned vertical sidebar

Status: VERIFIED FIXED

(Firefox :: Sidebar, defect, P3)

Description

[dontseemyass]

Attachment: Screenshot_20250520_162610.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Steps to reproduce:

1. Start Firefox by clicking on the desktop icon at Linux
2. Open a new tab and go to any website where any media plays.
3. Look vertical sidebar.
4. Sound icon is unaligned.

Actual results:

Sound icon is not aligned in tab container where favicon and text reside.

Expected results:

All favicon, sound icon and tab name text should be aligned.
Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0
The problem can be reproduced in a new profile and Nightly build
Name Firefox
Version 140.0a1
Build ID 20250520091341
User Agent Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0
OS Linux 6.14.6-300.fc42.x86_64 #1 SMP PREEMPT_DYNAMIC Fri May 9 20:11:19 UTC 2025
OS Theme Breeze / Adwaita

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Firefox::Sidebar' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Simona Badau, Desktop QA]

Setting this bug to NEW as I can reproduce the issue by following the steps from the Description. Confirmed using the latest Nightly 140.0a1, Firefox 139, and Firefox 138.0.4. The issue is more evident on Ubuntu 24.04 and Windows 11. On macOS 15, the misalignment is not as obvious, but the text appears slightly lower than expected.

Comment 3

[Gabriel Astorgano[:astor]]

I would like to work on this issue.

Poking around I see that vertical tabs have a <html:moz-button> with a tab-audio-button class[1] that default to display:none to hide its content.
When an expanded tab has media playing in it, display is set to "block" and becomes visible. Inspecting the box model layout, the moz-button has 24x27 size. Both width and height is set as fit-content[2].

For some reason, if I change the tab-audio-button display:flex, now moz-button will be a 24x24 square and fit align correctly in the tab. The same happens changing the aria labelel button inside it (making it display:flex instead of inline-block will make moz-button box size be 24x24). I will check later why height:fit-content changes value depending the display settings, because I don't really know.

[1] https://searchfox.org/mozilla-central/rev/d3789aee7456dcb6702a2fb10b5e540b0ccb2d12/browser/themes/shared/tabbrowser/tabs.css#731
[2] https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-button/moz-button.css#7

Comment 4

[Kelly Cochrane [:kcochrane]]

Hi, thanks for picking this up! It looks like you're onto something with the display property. I see that changing the .tab-audio-button element to have a display value of flex or grid rather than block here seems to resolve the alignment issues on Linux. Feel free to submit a patch for me to review whenever you get the chance.

Comment 5

[Gabriel Astorgano[:astor]]

Attachment: Bug 1967464 Align tab audio button r=kcochrane

Comment 6

[Gabriel Astorgano[:astor]]

You are right, changing to grid solves the issue. Thanks for the clarification

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bfddd6f94124
https://hg.mozilla.org/integration/autoland/rev/ffcb9173b0ca
Align tab audio button r=kcochrane,desktop-theme-reviewers,tabbrowser-reviewers,dao,emilio

Comment 8

[Atila Butkovits]

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

Comment 9

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

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 10

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

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

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox141 to wontfix.

For more information, please visit BugBot documentation.

Comment 11

[Kelly Cochrane [:kcochrane]]

Comment on attachment 9499295 [details]
Bug 1967464 Align tab audio button r=kcochrane

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Tab audio (mute/unmute) button won't be vertically centered on Linux
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: On Linux, mute an unpinned tab and ensure the audio button is vertically centered in the tab
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): One line CSS change
• String changes made/needed: N/A
• Is Android affected?: No

Comment 12

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9499295 [details]
Bug 1967464 Align tab audio button r=kcochrane

Approved for 141.0rc1 and 140.1esr.

Comment 13

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/4937ef77d6b8
https://hg.mozilla.org/releases/mozilla-beta/rev/bd6697e79a38

Comment 14

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr140/rev/0f9d7241a7c1

Comment 15

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Reproduced the issue on Firefox 140.0a1 (2025-05-20) on Ubuntu 24.04 by following the STR from Comment 0.

The issue is fixed on Firefox 140.1.0esr, Firefox 141.0b10 (treeherder builds) and Firefox 142.0a1 (2025-07-13). Tests were performed on Ubuntu 24.04, Windows 11 and macOS 15.5.