1729216 - [Windows] Sound "playing" text appearing/disappearing changes tab height, causing web content onresize events (when using custom userChrome.css)

Status: RESOLVED INVALID

(Firefox :: Tabbed Browser, defect)

Description

[tbgf6180]

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

Steps to reproduce:

Make a call to audiofile.play(), either in response to a specific user action or something happening in background

Actual results:

window.onresize event is triggered, with new window height being 2 pixels more or less than it was before. Even a short sound, like a single beep, causes it.

Expected results:

Just the sound playing, not the window resize event

This started happening recently (perhaps one or two versions back).

It might have to do with the feature which added "PLAYING" to the tab header.

It is very annoying because the web page might be responding to this spurious event with an undesired action, assuming that the window had in fact been resized when it really hadn't.

Workaround: modify the code to not respond to small changes.

Comment 1

[tbgf6180]

You get 2 resize events:
the first when PLAYING appears, reducing the window height by 2 pixels,
the second after the sound stops, and PLAYING disappears, restoring the height to its original value.

Comment 2

[tbgf6180]

Attachment: soundtest.zip - test case consisting of HTML file + mp3 sound file

Test case: Zip file containing soundtest.html and ticking1.mp3.

Unpack into folder, open the html file, click the Play Sound button,
results display in the browser console (developer tools).

Comment 3

[tbgf6180]

Attachment: Firefox-Playing.jpg

Composite screen shot shows that the when PLAYING is displayed, the Tab is a little taller, shrinking the 'real' window (user content).

A couple of possible fixes would be:

1. If possible, move the word PLAYING a couple of pixels up, or use a smaller font
2. Instead, add a symbol, such as a musical note inline with the title text, next to the favicon or tab-closing X.

Comment 4

[Petruta Horea [:phorea], Desktop Test Engineering]

I couldn't reproduce with the attached testcase and other tabs playing sounds, using Firefox 91 and latest Nightly 93.0a1 under Win 10 64-bit.
I'm changing the component to Tabbed Browser.

Comment 5

[tbgf6180]

(In reply to Petruta Horea [:phorea] from comment #4)

I couldn't reproduce with the attached testcase and other tabs playing sounds, using Firefox 91 and latest Nightly 93.0a1 under Win 10 64-bit.
I'm changing the component to Tabbed Browser.

If other tabs are playing sounds, the resizing will have already occurred - when one expands, they all expand.

To reproduce:
Load the soundtest.html file in its own window, click Play Sound.
You will see everything move a little, then after the sound stops and a short delay, it all moves back.

The two other Bugs, referenced above, 1722260, 1726144, describe the problem identically.

Comment 6

[Petruta Horea [:phorea], Desktop Test Engineering]

This doesn't reproduce on my system, but based on the previously comments, I'm gonna close it as duplicate. Thanks!

Comment 7

[Masatoshi Kimura [:emk]]

According to bug 1726144 comment 9, this bug happens on Windows 10. And according to bug 1714276 comment 51, bug 1714276 is Linux-specific. So reopening.

Comment 8

[:Gijs (he/him)]

(In reply to tbgf6180 from bug 1714276 comment #54)

Responding here because this is the Windows bug that got reopened.

Straight-out-of-the-box Firefox uses VERY small fonts in the menus, options, tabs, and so forth.

To make it a little easier on these old, tired eyeballs, I have added some custom CSS in that regard.

Firefox uses system font sizes in most places. If you change the default Windows font size (which you can do in the windows 10 settings app), we should be respecting that in the menus and tabs and a bunch of other places, and as a bonus, other apps will hopefully also be easier on the old eyeballs you mention. :-)

For the options, you can use page zoom (ctrl-+, or ctrl+mousewheel scroll). You can also configure the default zoom factor in the options these days, which will affect all the sites you open, and/or change the default font size for web content to be larger.

This is likely to work better and have fewer issues than manually changing font-size for specific UI elements with userChrome.css .

That may be a partial cause of the problem. Nevertheless, it should be fixable/fixed by changing
how PLAYING is displayed - either with smaller letters, or a symbol of some kind.

Well, yes, but we can't cater in the shipped product for every potential userChrome.css CSS tweak! Let's say, hypothetically, that we figured out a different font size and/or padding at which the PLAYING text didn't interfere with your font-size: 17px and padding: 2px main tab text so much as to cause a resize event, and we made that CSS change in Firefox itself. For someone else in a similar position to you but with worse eyesight, who had changed the tab toolbar font size to font-size: 23px and padding: 4px, that change might not be sufficient! The number of potential changes users can make with that file is literally infinite, and we cannot possibly change Firefox CSS to cater for all of those potential changes.

The simplest option here, if the suggestion above to use OS font size changes instead doesn't work for you, is likely to be that you add a line to userChrome.css yourself to make the PLAYING text smaller. To make it easier, I looked this up for you - you should be able to use the .tab-secondary-label selector to change the size and/or padding for the secondary text.

Comment 9

[tbgf6180]

Attachment: Firefox-PLAYING-fixed.jpg

(In reply to :Gijs (he/him) from comment #8)

The simplest option here, if the suggestion above to use OS font size changes instead doesn't work for you, is likely to be that you add a line to userChrome.css yourself to make the PLAYING text smaller. To make it easier, I looked this up for you - you should be able to use the .tab-secondary-label selector to change the size and/or padding for the secondary text.

THANK YOU!

Changing OS font size would have effects I-don't-know-how-far-and-wide, so I'm not even thinking about doing that.

I take your point about how all the customization options make it hard to please everyone at once.
That said, by adding the following to my userChrome.css, I was able to work around the bug.

.tab-secondary-label {
padding: 0px !important;
font-size: 10px !important;
}

The attached image shows that making that change makes the problem go away.

Finally, this whole issue could be avoided by not having "tab-secondary-label" at all (at least in this instance).

Alternative:

replace the Favicon (or default icon when there isn't one) with some symbol indicating sound playing.
That is what happens when you have sound playing and you mouse hover the icon - it changes to a speaker icon
which if clicked mutes the tab. The fact that that only happens when you mouse hover kind of keeps that
very useful feature kind of hidden, so that only in-the-know experts, or lucky mouse movers will know about it.
Putting that speaker up there instead of "PLAYING" would be a much better approach covering at least two bases.

Comment 10

[tbgf6180]

One more comment:

It's not really essential that the word "PLAYING" be super-legible -
semi-legible is good enough in this context. Even if someone has difficulty
reading it, eventually they'll notice that it appears in conjunction with sound playing,
and figure out what it says. And if they don't it is of little consequence.

Thus, if Firefox is committed to this way of conveying the information, making it as
small as is reasonably possible would be my suggestion, to reduce the chances
of y-overflow as much as possible, regardless of what CSS tweaks a user has made.

For me, 10px worked fine, and it's possible going even smaller would work too.

Comment 11

[:Gijs (he/him)]

(In reply to tbgf6180 from comment #9)

Finally, this whole issue could be avoided by not having "tab-secondary-label" at all (at least in this instance).

We're not going to alter Firefox design such that it doesn't cause problems when people add specific custom styling to that design; as I said in comment #8, there is no way to do that - there will always be changes made by userChrome.css that break things.

The suggestion of using an icon instead can already be configured in about:config at the moment, by changing browser.tabs.secondaryTextUnsupportedLocales or by enabling compact mode and using that.

Because this ultimately isn't a Firefox bug, but an issue witht he custom styling, I'm going to close it out.