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

--HG--
extra : moz-landing-system : lando

toolkit/components/pictureinpicture/content/player.xhtml

@@ -23,9 +23,13 @@
     </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>

toolkit/themes/shared/pictureinpicture/player.css

@@ -33,11 +33,23 @@ browser {
   -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
@@ -50,24 +62,24 @@ browser {
   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;
 }