1612648 - Picture in picture icon overlay overlaps mute tab

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect, P2)

Description

[d00d]

Attachment: Hovering over the picture in picture icon displays options for muting tab

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Open a tab with a site that has a video that can be played using picture in picture.

Convert the video into a picture in picture overlay.

Note that the close button of the tab is preceded by the picture in picture icon.

Hover over the picture in picture icon on the tab (see screenshot)

Actual results:

The tooltip displays Mute tab

The icon displayed is not for muting tab but picture in picture icon

Clicking on the picture in picture icon mutes the tab

Expected results:

The icon on tab should be Mute icon.

The picture in picture icon on tab shouldn't overlap the Mute icon.

Comment 1

[Gingerbread Man]

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=6efc35cfb29a053c8a527d5a88dde4908812f40e&tochange=1c62e73258b4bb23885b3dd0b4b5818234b6b69f

• Bug 1528459 introduced the tab PIP icon replacing the audio icon
• At some point, it started working as a mute/unmute button as well
• Bug 1582391 will add a muted state for it
• Bug 1595788 proposes replacing the site icon with the audio indicator

I don't know why "yet another icon" on the tab is something to avoid at all costs. The current state is very awkward and so is the proposed solution.

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Hey Niklas,

So something you may or may not be familiar with is the muting capability in Firefox tabs. To see this in action, check out this video: https://vimeo.com/415176232?ref=tw-share

And then play the video (it's a music video). A speaker icon should appear in the tab. If you click on that icon, all sound from the tab is muted. Click it again, and the sound comes back.

Now use the Picture-in-Picture toggle to PiP the video. Now the speaker icon has been replaced with the PiP icon. Clicking it still lets you mute the tab, but it's really not clear that this is what it does.

Now, pin the same tab. You can do that by right-clicking on the tab, and choosing "Pin Tab". The tab gets pinned to the left size of the tab strip, and shrinks to its minimal size. If you hover the tab now, notice how the speaker icon exists now - it's over top of the favicon for the page.

What we'd like to do is put the speaker toggle over top of the favicon if the user has a video in that tab in Picture-in-Picture. That way, they have obvious access to the mute toggle, and they know that the tab is PiP'ing something.

I'll attach a screenshot of what it should hopefully look like next.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

Attachment: What we want this to look like.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

So the good news is that there's actually not a lot of functionality to re-implement here in Javascript - the logic is already wired up for muting the tab. What we need to do is update the CSS that shows and hides the toggle.

This is the sort of bug where the Browser Toolbox inspector is going to come in really really handy, because you can inspect the tab element, and see the rules that are applied to them.

What we first probably want to do is make it so that the favicon mute tab can know whether we're in PiP. You can do that by adding "pictureinpicture" to this list in here: https://searchfox.org/mozilla-central/rev/5d45da52f2fa423c9f4505ede5d1a5c7d48163fc/browser/base/content/tabbrowser-tab.js#88-89

this way, the "pictureinpicture" tab attribute will be inherited by the .tab-icon-overlay child element (.tab-icon-overlay is the mute toggle over the favicon), which makes our CSS rule writing easier.

Next, you probably want to update this rule:

https://searchfox.org/mozilla-central/rev/eb9d5c97927aea75f0c8e38bbc5b5d288099e687/browser/base/content/tabbrowser.css#26

that applies the display: -moz-box rule if the tab is showing something in PiP. By default, the .tab-icon-overlay is display: none unless the tab is pinned. We want to set it to display: -moz-box if it has the pictureinpicture attribute.

Hopefully that makes sense - do drop me a line in Matrix if you need assistance or clarification.

Comment 6

[Niklas Baumgardner]

Attachment: Bug 1612648 - Picture in Picture tab mute options moved to overlay on tab image icon. r?mconley,Gijs

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/98b96b7745a4
Picture in Picture tab mute options moved to overlay on tab image icon. r=mconley

Comment 8

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/98b96b7745a4