Bug 1548303 - Make it easier to resize the Picture-in-Picture player window. r=dthayer
authorMike Conley <mconley@mozilla.com>
Mon, 06 May 2019 20:34:49 +0000
changeset 531602 93e59a14b907071d2059c66f8391ed6c0904ca3c
parent 531601 818f9fcee08eafbce5f298634327da6f023ad11e
child 531603 cf7b6547cfb26608ba79093ed78f85a56dfbfd56
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdthayer
bugs1548303
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1548303 - Make it easier to resize the Picture-in-Picture player window. r=dthayer This is made easier by making the window-dragging region inset by 5px on each side. Depends on D30100 Differential Revision: https://phabricator.services.mozilla.com/D30101
toolkit/components/pictureinpicture/content/player.js
toolkit/themes/shared/pictureinpicture/player.css
--- a/toolkit/components/pictureinpicture/content/player.js
+++ b/toolkit/components/pictureinpicture/content/player.js
@@ -40,19 +40,16 @@ async function setupPlayer(originatingBr
   browser.addEventListener("oop-browser-crashed", () => {
     window.close();
   });
 
   browser.addEventListener("unload", () => {
     PictureInPicture.unload();
   });
 
-  await window.promiseDocumentFlushed(() => {});
-  browser.style.MozWindowDragging = "drag";
-
   let close = document.getElementById("close");
   close.addEventListener("click", () => {
     window.close();
   });
 
   document.getElementById("controls").setAttribute("showing", true);
   setTimeout(() => {
     document.getElementById("controls").removeAttribute("showing");
--- a/toolkit/themes/shared/pictureinpicture/player.css
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -1,39 +1,41 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --btn-bg-color: rgba(50,50,50,0.55);
   --close-btn-bg-color: rgb(211,216,220);
+  --resize-margin: 5px;
 }
 
 body {
   margin: 0;
 }
 
 .player-holder {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
 }
 
 browser {
-  -moz-window-dragging: drag;
   flex: 1;
 }
 
 #controls {
-  height: 100%;
+  height: calc(100% - 2 * var(--resize-margin));
   left: 0;
   position: absolute;
   top: 0;
-  width: 100%;
+  width: calc(100% - 2 * var(--resize-margin));
+  margin: var(--resize-margin);
+  -moz-window-dragging: drag;
 }
 
 .control-item {
   -moz-window-dragging: no-drag;
   background: var(--btn-bg-color);
   border-radius: 4px;
   bottom: 15px;
   cursor: pointer;