Bug 1546954 - Switch to standard buttons in the Picture-in-Picture player window, and merge play and pause buttons. r=JSON_voorhees

Differential Revision: https://phabricator.services.mozilla.com/D37886

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

toolkit/components/pictureinpicture/content/player.js

@@ -161,13 +161,12 @@ let Player = {
         break;
       }
 
-      case "play": {
-        this.mm.sendAsyncMessage("PictureInPicture:Play");
-        break;
-      }
-
-      case "pause": {
-        this.mm.sendAsyncMessage("PictureInPicture:Pause");
+      case "playpause": {
+        if (!this.isPlaying) {
+          this.mm.sendAsyncMessage("PictureInPicture:Play");
+        } else {
+          this.mm.sendAsyncMessage("PictureInPicture:Pause");
+        }
         break;
       }
 

toolkit/components/pictureinpicture/content/player.xhtml

@@ -22,13 +22,12 @@
       <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>
+      <button id="close" class="control-item"></button>
 
       <div id="controls-bottom">
-        <div id="unpip" class="control-item"></div>
+        <button id="unpip" class="control-item"></button>
         <div id="gap"></div>
-        <div id="pause" class="control-item"></div>
-        <div id="play" class="control-item"></div>
+        <button id="playpause" class="control-item"></button>
       </div>
     </div>
   </body>

toolkit/themes/shared/pictureinpicture/player.css

@@ -33,6 +33,11 @@ browser {
   -moz-window-dragging: drag;
 }
 
+#controls button {
+  -moz-appearance: none;
+  border: 0;
+}
+
 #controls-bottom {
   display: flex;
   position: absolute;
@@ -84,24 +89,16 @@ browser {
   top: 10px;
 }
 
-#play {
-  background-image: url("chrome://global/skin/pictureinpicture/play.svg");
-  display: block;
+#playpause {
   left: 55%; 
 }
 
-#pause {
+#controls.playing #playpause {
   background-image: url("chrome://global/skin/pictureinpicture/pause.svg");
-  display: none;
-  left: 55%;
 }
 
-.playing #play {
-  display: none;
-}
-
-.playing #pause {
-  display: block;
+#controls:not(.playing) #playpause {
+  background-image: url("chrome://global/skin/pictureinpicture/play.svg");
 }
 
 #unpip {