Bug 1865494: Implement see-through video player mode r=emilio,mstange,desktop-theme-reviewers,pip-reviewers,mhowell

Implement experimental transparent-on-hover behavior for the
picture-in-picture video player. This makes the popup player less of
a nuisance on smaller displays.

Tested on macOS, but should also work on Windows with small tweaks.

The behavior is hidden behind a pref:
media.videocontrols.picture-in-picture.seethrough-mode.enabled

Differential Revision: https://phabricator.services.mozilla.com/D193993
This commit is contained in:
Vsevolod Buzinov 2023-11-30 18:33:41 +00:00
Родитель e72674d7b6
Коммит 637c5339ea
5 изменённых файлов: 29 добавлений и 4 удалений

Просмотреть файл

@ -11566,8 +11566,7 @@ void PresShell::SyncWindowProperties(bool aSync) {
widget::TransparencyMode mode = nsLayoutUtils::GetFrameTransparency(
canvas ? canvas : rootFrame, rootFrame);
StyleWindowShadow shadow = rootFrame->StyleUIReset()->mWindowShadow;
nsCOMPtr<nsIWidget> viewWidget = view->GetWidget();
viewWidget->SetTransparencyMode(mode);
windowWidget->SetTransparencyMode(mode);
windowWidget->SetWindowShadowStyle(shadow);
// For macOS, apply color scheme overrides to the top level window widget.

Просмотреть файл

@ -27,6 +27,8 @@ const TEXT_TRACK_FONT_SIZE_PREF =
"media.videocontrols.picture-in-picture.display-text-tracks.size";
const IMPROVED_CONTROLS_ENABLED_PREF =
"media.videocontrols.picture-in-picture.improved-video-controls.enabled";
const SEETHROUGH_MODE_ENABLED_PREF =
"media.videocontrols.picture-in-picture.seethrough-mode.enabled";
// Time to fade the Picture-in-Picture video controls after first opening.
const CONTROLS_FADE_TIMEOUT_MS = 3000;
@ -336,6 +338,11 @@ let Player = {
document.querySelector("#medium").checked = "true";
}
// In see-through mode the PiP window is made semi-transparent on hover.
if (Services.prefs.getBoolPref(SEETHROUGH_MODE_ENABLED_PREF, false)) {
document.documentElement.classList.add("seethrough-mode");
}
this._isInitialized = true;
},

Просмотреть файл

@ -7,6 +7,7 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
windowtype="Toolkit:PictureInPicture"
chromemargin="0,0,0,0"
scrolling="false"
>
<head>
<meta charset="utf-8"/>

Просмотреть файл

@ -36,6 +36,20 @@ body:fullscreen {
overflow: hidden;
}
.seethrough-mode {
background: transparent;
.player-holder {
will-change: opacity, filter;
transition: opacity 160ms linear, filter 160ms linear;
body:hover:not(:fullscreen) & {
opacity: 0.35;
filter: blur(8px);
}
}
}
browser {
flex: 1;
}

Просмотреть файл

@ -1231,8 +1231,12 @@ TransparencyMode nsCocoaWindow::GetTransparencyMode() {
void nsCocoaWindow::SetTransparencyMode(TransparencyMode aMode) {
NS_OBJC_BEGIN_TRY_IGNORE_BLOCK;
// Only respect calls for popup windows.
if (!mWindow || mWindowType != WindowType::Popup) {
// Only respect calls for popup windows and always-on-top dialogs.
// We don't want to enable transparency for all dialogs, as it breaks some
// system dialogs like the profile selection (and possibly some extensions).
BOOL isAlwaysOnTopDialog =
(mWindowType == WindowType::Dialog && mAlwaysOnTop);
if (!mWindow || (mWindowType != WindowType::Popup && !isAlwaysOnTopDialog)) {
return;
}