1958472 - [horizontal tabs] Sound playing/mute icon for unpinned tabs shifts tab content

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect, P3)

Description

[CPuckett.Dynetics]

Attachment: FireFoxMuteTabRegression.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Steps to reproduce:

The mute button on tabs has changed between FireFox 131 and FireFox 136.

1. The button is now in the middle of the tab making it difficult to click a tab without clicking the button.
2. The tabs change width unexpectedly as sound starts/stops playing and the button is added to and removed from the tab. This can cause user clicks to unintended tabs as they move just before a click.

Actual results:

Unnatural and unexpected UI behavior.

Expected results:

Probably need to move the mute button out of the middle of the tab and to the end next to the close tab button. That would leave a larger space at the front of the tab to click it.
Also need to not resize the tabs as the mute button changes.
If it's not already available, maybe add a user preference to specify a minimum tab width so users can configure more space to click.

Comment 1

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

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

Comment 2

[aoia7rz7l]

(In reply to CPuckett.Dynetics from comment #0)

If it's not already available, maybe add a user preference to specify a minimum tab width so users can configure more space to click.

Well there is browser.tabs.tabMinWidth...

Comment 3

[Sarah Clements [:sclements]]

Thanks for the feedback. This has been discussed with our product manager, UX designer and the engineer who implemented this and it seems the only feasible solution is to go back to having the mute button overlaying the favicon but only for horizontal tabs.

From my understanding, this issue with the sound playing or mute button shifting annoyingly seems to occur mostly with you tube/other video sites that have sound suddenly start or stop. We'll monitor feedback on this and will look into whether we should revisit the design after other priorities have been addressed.

Comment 7

[Daniel Veditz [:dveditz]]

Behavior has changed over time. I'm not sure how it worked in 131, but in 136 the noise-making tab would shrink below the set tabMinWidth (bug 1945993), and after that was fixed in 137 the tabs get wider when the icon appears unless tabMinWidth is 100 or more.

seems to occur mostly with you tube/other video sites that have sound suddenly start or stop

Most of the complaints I've seen appear to be about sites that just play audio. For example, notification beeps in social/chat and game sites.

Comment 8

[Daniel Veditz [:dveditz]]

An example given in bug 1953094 was the chess-playing site https://lichess.org/ that beeps when your opponent has made their move

Comment 9

[Daniel Veditz [:dveditz]]

(In reply to Sarah Clements [:sclements] from comment #3)

it seems the only feasible solution is to go back to having the mute button overlaying the favicon but only for horizontal tabs.

The culprit seems to be
https://searchfox.org/mozilla-central/rev/85d6bf1b521040c79ed72f3966274a25a2f987c7/browser/themes/shared/tabbrowser/tabs.css#250-252

If you remove that chunk it seems to work fine. When the icon is added it pushes the title text over without increasing the tab width. With a lot of tabs so the width is the 76px min-width there are only a few characters visible, but that's better than catching movement out of the corner of your eye when the width randomly changing. I'm not sure where the 100px value came from originally. Do you need the extra room in case there are simultaneous buttons? Then increasing the --tab-min-width 76px value to something sufficient 100% of the time would be better than changing depending on the state.

Comment 10

[Sarah Clements [:sclements]]

(In reply to Daniel Veditz [:dveditz] from comment #9)

(In reply to Sarah Clements [:sclements] from comment #3)

it seems the only feasible solution is to go back to having the mute button overlaying the favicon but only for horizontal tabs.

The culprit seems to be
https://searchfox.org/mozilla-central/rev/85d6bf1b521040c79ed72f3966274a25a2f987c7/browser/themes/shared/tabbrowser/tabs.css#250-252

If you remove that chunk it seems to work fine. When the icon is added it pushes the title text over without increasing the tab width. With a lot of tabs so the width is the 76px min-width there are only a few characters visible, but that's better than catching movement out of the corner of your eye when the width randomly changing. I'm not sure where the 100px value came from originally. Do you need the extra room in case there are simultaneous buttons? Then increasing the --tab-min-width 76px value to something sufficient 100% of the time would be better than changing depending on the state.

Interesting - I'll redirect to Kelly about this.

Comment 11

[Kelly Cochrane [:kcochrane]]

UX/Product previously agreed that when horizontal, muted tabs are at minimum width and are overflowing, we should override tab min width (unless it's over 100px) and set a minimum of 100px on that muted tab to ensure we are not obscuring the tab title entirely. If we remove that rule linked above, that's exactly what's happening which is unreasonable.

Comment 12

[Kelly Cochrane [:kcochrane]]

That said if we want to go back to favicon overlays for horizontal tabs only, I think that'd make sense. We've had several other users complain about this so far.

Comment 13

[Daniel Veditz [:dveditz]]

The favicon overlays seemed very natural to me so that works if you don't like having less text left when the audio icon shows up and also don't want to bump up the permanent min-width enough to avoid the movement (like 88px to "split the difference" whether the audio icon is there or not).

Comment 14

[Sarah Clements [:sclements]]

Redirecting to Ania to see if she wants to revisit how we've approached this.

Comment 16

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1995529 - Increase min-width of split view wrapper if one of the tabs shows an audio button

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1a680cac983a
https://hg.mozilla.org/integration/autoland/rev/d7a36a6be92f
Bug 1995529 - Increase min-width of split view wrapper if one of the tabs shows an audio button r=tabbrowser-reviewers,sclements,jsudiaman

Comment 18

[Phabricator Automation]

Comment on attachment 9526183 [details]
Bug 1995529 - Increase min-width of split view wrapper if one of the tabs shows an audio button

Revision D272257 was moved to bug 1995529. Setting attachment 9526183 [details] to obsolete.

Comment 19

[Narcis Beleuzu [:NarcisB]]

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