Bug 1546983 - Make Picture-in-Picture player control buttons always a square proportional to the max window dimension. r=dthayer
authorMike Conley <mconley@mozilla.com>
Wed, 08 May 2019 16:36:41 +0000
changeset 531906 7157a9384870e698039376908942350fe276d82d
parent 531905 7e1942ace2b27c0905642f3c2ea83c848ba947b1
child 531907 8a953fd10269eda5ba13be8579ea49b9e157be8f
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 Picture-in-Picture player control buttons always a square proportional to the max window dimension. r=dthayer Differential Revision: https://phabricator.services.mozilla.com/D30279
toolkit/themes/shared/pictureinpicture/player.css
--- a/toolkit/themes/shared/pictureinpicture/player.css
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -34,25 +34,31 @@ browser {
 }
 
 .control-item {
   -moz-window-dragging: no-drag;
   background: var(--btn-bg-color);
   border-radius: 4px;
   bottom: 15px;
   cursor: pointer;
-  height: 15%;
+  /**
+   * 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;
-  width: 10%;
   transition: opacity 160ms linear;
   opacity: 0;
+  background-repeat: no-repeat;
 }
 
 #controls:hover > .control-item {
   opacity: 0.8;
 }
 
 #controls[showing] > .control-item,
 #controls:hover > .control-item:hover {