1603234 - Picture-in-Picture close button is on the wrong side on macOS

Status: VERIFIED FIXED

(Toolkit :: Video/Audio Controls, defect, P5)

Description

[Sam Johnson]

In macOS, across the system, window close buttons are consistently placed in the top-left corner of the window. However, in Firefox picture-in-picture pop out windows, the close button is instead placed in the top-right corner. As a primarily macOS user, this is a bit jarring, and should be made consistent with the rest of the system in the top-left corner.

Comment 1

[:Gijs (he/him)]

The button is at https://searchfox.org/mozilla-central/rev/5d45da52f2fa423c9f4505ede5d1a5c7d48163fc/toolkit/components/pictureinpicture/content/player.xhtml#24 .

The CSS is at https://searchfox.org/mozilla-central/rev/5d45da52f2fa423c9f4505ede5d1a5c7d48163fc/toolkit/themes/shared/pictureinpicture/player.css#104-110 .

We're trying to reduce/remove ifdef usage in CSS files, so the simplest fix is likely to add an attribute in the markup (ie the xhtml file) on macOS, along the lines of:

#ifdef XP_MACOSX
  mac="true"
#endif

on the markup for the close button.

For that to work, the line at https://searchfox.org/mozilla-central/rev/5d45da52f2fa423c9f4505ede5d1a5c7d48163fc/toolkit/components/pictureinpicture/jar.mn#7 will need updating - right now the file is included as-is (even symlinked on macOS, in a local build!) but we'll need it to be preprocessed. To do that, use a star + space (*) before the line with player.xhtml.

With that in place, you can then change the CSS such that right is auto and left is 10px if and only if the attribute is set.

Comment 2

[Manish Rajendran]

Attachment: Bug 1603234 - Picture-in-Picture close button moved to left when on macOS. r?mconley,Gijs

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c8f18b9f51d8
Picture-in-Picture close button moved to left when on macOS. r=Gijs

Comment 4

[Natalia Csoregi [:nataliaCs]]

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

Comment 5

[Oana Botisan, Desktop QA]

I managed to reproduce the issue on an older version of Nightly on macOS 10.13.
I retested everything with the same os using Firefox 82.0b1 and Nightly 83.0a1. The issue is not reproducing anymore.