Bug 1546983 - Make the Picture-in-Picture player window control buttons less sensitive to being in a thin window. r=dthayer
authorMike Conley <mconley@mozilla.com>
Wed, 08 May 2019 16:35:22 +0000
changeset 531907 8a953fd10269eda5ba13be8579ea49b9e157be8f
parent 531906 7157a9384870e698039376908942350fe276d82d
child 531908 685e0cd74c2e8854e87ad8b0555a38a0f05bd605
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
bugs1546983
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 1546983 - Make the Picture-in-Picture player window control buttons less sensitive to being in a thin window. r=dthayer Differential Revision: https://phabricator.services.mozilla.com/D30280
toolkit/components/pictureinpicture/content/player.xhtml
toolkit/themes/shared/pictureinpicture/player.css
--- a/toolkit/components/pictureinpicture/content/player.xhtml
+++ b/toolkit/components/pictureinpicture/content/player.xhtml
@@ -18,14 +18,18 @@
   </head>
 
   <body>
     <div class="player-holder">
       <xul:browser type="content" primary="true" remote="true" remoteType="web" id="browser"></xul:browser>
     </div>
     <div id="controls">
       <div id="close" class="control-item"></div>
-      <div id="unpip" class="control-item"></div>
-      <div id="pause" class="control-item"></div>
-      <div id="play" class="control-item"></div>
+
+      <div id="controls-bottom">
+        <div id="unpip" class="control-item"></div>
+        <div id="gap"></div>
+        <div id="pause" class="control-item"></div>
+        <div id="play" class="control-item"></div>
+      </div>
     </div>
   </body>
 </html>
--- a/toolkit/themes/shared/pictureinpicture/player.css
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -28,51 +28,63 @@ browser {
   left: 0;
   position: absolute;
   top: 0;
   width: calc(100% - 2 * var(--resize-margin));
   margin: var(--resize-margin);
   -moz-window-dragging: drag;
 }
 
+#controls-bottom {
+  display: flex;
+  position: absolute;
+  bottom: 15px;
+  justify-content: center;
+  width: 100%;
+}
+
+#gap {
+  flex: 0.1;
+  max-width: 50px;
+}
+
 .control-item {
   -moz-window-dragging: no-drag;
   background: var(--btn-bg-color);
   border-radius: 4px;
-  bottom: 15px;
   cursor: pointer;
   /**
    * Make the button dimensions a square proportional to one
    * dimension of the window - in this case, the width dimension,
    * since we suspect most videos are wider than they are tall.
    */
   height: 10vmax;
   width: 10vmax;
   max-height: 32px;
   max-width: 32px;
   min-height: 16px;
   min-width: 16px;
-  position: absolute;
   transition: opacity 160ms linear;
   opacity: 0;
   background-repeat: no-repeat;
 }
 
-#controls:hover > .control-item {
+#controls:hover .control-item {
   opacity: 0.8;
 }
 
-#controls[showing] > .control-item,
-#controls:hover > .control-item:hover {
+#controls[showing] .control-item,
+#controls:hover .control-item:hover {
   opacity: 1;
 }
 
 #close {
   background-color: var(--close-btn-bg-color);
   background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg");
+  position: absolute;
   right: 10px;
   top: 10px;
 }
 
 #play {
   background-image: url("chrome://global/skin/pictureinpicture/play.svg");
   display: block;
   left: 55%;