From fc700c757bde0cb42ac100ca674d8a04c679b3bd Mon Sep 17 00:00:00 2001
From: Ray Lin <ralin@mozilla.com>
Date: Sun, 10 Apr 2016 23:38:00 -0400
Subject: [PATCH] Bug 1250741 - Update video player to new spec. r=margaret

MozReview-Commit-ID: IKaw00tXwRS
---
 b2g/chrome/content/touchcontrols.css         | 91 ++++++++++---------
 mobile/android/themes/core/touchcontrols.css | 92 +++++++++++---------
 toolkit/content/widgets/videocontrols.xml    | 33 ++++---
 3 files changed, 118 insertions(+), 98 deletions(-)

diff --git a/b2g/chrome/content/touchcontrols.css b/b2g/chrome/content/touchcontrols.css
index 88154eeecfe1..7c407c331d6a 100644
--- a/b2g/chrome/content/touchcontrols.css
+++ b/b2g/chrome/content/touchcontrols.css
@@ -8,7 +8,6 @@
 .controlsOverlay {
   -moz-box-pack: center;
   -moz-box-align: end;
-  padding: 20px;
   -moz-box-flex: 1;
   -moz-box-orient: horizontal;
 }
@@ -21,13 +20,15 @@
 
 .controlBar {
   -moz-box-flex: 1;
-  font-size: 16pt;
-  padding: 10px;
   background-color: rgba(50,50,50,0.8);
-  border-radius: 8px;
   width: 100%;
 }
 
+.buttonsBar {
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
 .controlsSpacer {
   display: none;
   -moz-box-flex: 0;
@@ -38,17 +39,22 @@
 .castingButton,
 .muteButton {
   -moz-appearance: none;
-  min-height: 42px;
-  min-width: 42px;
+  padding: 2px;
   border: none !important;
+  min-height: 24px;
+  min-width: 24px;
 }
 
 .fullscreenButton {
   background: url("chrome://b2g/content/images/fullscreen-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton[fullscreened="true"] {
   background: url("chrome://b2g/content/images/exitfullscreen-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
@@ -57,6 +63,8 @@
 
 .playButton {
   background: url("chrome://b2g/content/images/pause-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 /*
@@ -71,6 +79,8 @@
 
 .playButton[paused="true"] {
   background: url("chrome://b2g/content/images/play-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton {
@@ -79,21 +89,24 @@
 
 .muteButton {
   background: url("chrome://b2g/content/images/mute-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .muteButton[muted="true"] {
   background: url("chrome://b2g/content/images/unmute-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 /* bars */
 .scrubberStack {
-  width: 100%;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0px 8px;
-  margin: 0px;
+  -moz-box-flex: 1;
+  padding: 0px 18px;
 }
 
+.flexibleBar,
+.flexibleBar .progress-bar,
 .bufferBar,
 .bufferBar .progress-bar,
 .progressBar,
@@ -106,30 +119,44 @@
   padding: 0px;
   margin: 0px;
   background-color: transparent;
-  border-radius: 3px;
-}
-
-.bufferBar {
-  border: 1px solid #5e6166;
 }
 
+.flexibleBar,
 .bufferBar,
 .progressBar {
-  margin: 11px 0px 9px 0px;
-  height: 8px
+  height: 24px;
+  padding: 11px 0px;
+}
+
+.flexibleBar {
+  padding: 12px 0px;
+}
+
+.flexibleBar .progress-bar {
+  border: 1px #777777 solid;
+  border-radius: 1px;
 }
 
 .bufferBar .progress-bar {
-  background-color: #5e6166;
+  border: 2px #AFB1B3 solid;
+  border-radius: 2px;
 }
 
 .progressBar .progress-bar {
-  background-color: white;
+  border: 2px #FF9500 solid;
+  border-radius: 2px;
 }
 
+
 .scrubber {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.positionLabel, .durationLabel {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  color: white;
 }
 
 .scrubber .scale-thumb {
@@ -137,23 +164,9 @@
   margin: 0px !important;
   padding: 0px !important;
   background: url("chrome://b2g/content/images/scrubber-hdpi.png") no-repeat;
-  background-size: 32px 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.durationBox {
-  -moz-box-orient: horizontal;
-  -moz-box-pack: start;
-  -moz-box-align: center;
-  color: white;
-  font-weight: bold;
-  padding: 0px 8px;
-  margin-top: -6px;
-}
-
-.positionLabel {
-  -moz-box-flex: 1;
+  background-size: 12px 12px;
+  height: 12px;
+  width: 12px;
 }
 
 .statusOverlay {
diff --git a/mobile/android/themes/core/touchcontrols.css b/mobile/android/themes/core/touchcontrols.css
index ffe013397097..f2be8edd9129 100644
--- a/mobile/android/themes/core/touchcontrols.css
+++ b/mobile/android/themes/core/touchcontrols.css
@@ -18,50 +18,55 @@
   -moz-box-align: end;
 }
 
-.controlBar {
-  -moz-box-flex: 1;
-  font-size: 16pt;
-  background-color: rgba(50,50,50,0.8);
-  width: 100%;
-}
-
 .controlsSpacer {
   display: none;
   -moz-box-flex: 0;
 }
 
+.controlBar {
+  -moz-box-flex: 1;
+  width: 100%;
+  background-color: rgba(50,50,50,0.8);
+}
+
+.buttonsBar {
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
 .playButton,
 .castingButton,
 .muteButton,
 .fullscreenButton {
   -moz-appearance: none;
-  height: 24px;
-  width: 24px;
+  padding: 15px;
   border: none !important;
-}
-
-.muteButton {
-  width: 28px;
+  width: 48px;
+  height: 48px;
 }
 
 .playButton {
   background: url("chrome://browser/skin/images/pause.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .playButton[paused="true"] {
   background: url("chrome://browser/skin/images/play.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton {
   background: url("chrome://browser/skin/images/cast-ready.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton[active="true"] {
   background: url("chrome://browser/skin/images/cast-active.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 /* If the casting button is showing, there will be two buttons on the right side of the controls.
@@ -72,24 +77,30 @@
 }
 
 .muteButton {
+  padding-left: 17.25px;
+  padding-right: 9.75px;
   background: url("chrome://browser/skin/images/mute.svg") no-repeat left;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .muteButton[muted="true"] {
   background: url("chrome://browser/skin/images/unmute.svg") no-repeat left;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton {
   background-color: transparent;
   background: url("chrome://browser/skin/images/fullscreen.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton[fullscreened] {
   background: url("chrome://browser/skin/images/exitfullscreen.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
@@ -98,13 +109,12 @@
 
 /* bars */
 .scrubberStack {
-  width: 100%;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0px 8px;
-  margin: 0px;
+  -moz-box-flex: 1;
+  padding: 0px 18px;
 }
 
+.flexibleBar,
+.flexibleBar .progress-bar,
 .bufferBar,
 .bufferBar .progress-bar,
 .progressBar,
@@ -119,51 +129,51 @@
   background-color: transparent;
 }
 
-.bufferBar {
-  border: 1px solid #5e6166;
-}
-
+.flexibleBar,
 .bufferBar,
 .progressBar {
-  margin: 11px 0px 9px 0px;
-  height: 8px
+  height: 32px;
+  padding: 15px 0px;
+}
+
+.flexibleBar {
+  padding: 16px 0px;
+}
+
+.flexibleBar .progress-bar {
+  border: 1px #777777 solid;
+  border-radius: 1px;
 }
 
 .bufferBar .progress-bar {
-  background-color: #5e6166;
+  border: 2px #AFB1B3 solid;
+  border-radius: 2px;
 }
 
 .progressBar .progress-bar {
-  background-color: white;
+  border: 2px #FF9500 solid;
+  border-radius: 2px;
 }
 
 .scrubber {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
 .scrubber .scale-thumb {
   display: -moz-box;
   margin: 0px !important;
   padding: 0px !important;
-  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat;
-  background-size: 32px 32px;
+  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat center;
+  background-size: 12px 12px;
   height: 32px;
   width: 32px;
 }
 
-.durationBox {
-  -moz-box-orient: horizontal;
-  -moz-box-pack: start;
-  -moz-box-align: center;
+.positionLabel, .durationLabel {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 16px;
   color: white;
-  font-weight: bold;
-  padding: 0px 8px;
-  margin-top: -6px;
-}
-
-.positionLabel {
-  -moz-box-flex: 1;
 }
 
 .statusOverlay {
diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml
index 643aedf307d7..52aa7a40a46e 100644
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1577,16 +1577,18 @@
                 </box>
                 <vbox class="controlBar" hidden="true">
                     <hbox class="buttonsBar">
-                        <button class="castingButton" hidden="true"
-                                aria-label="&castingButton.castingLabel;"/>
-                        <button class="fullscreenButton"
-                            enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
-                            exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
-                        <spacer flex="1"/>
                         <button class="playButton"
                                 playlabel="&playButton.playLabel;"
                                 pauselabel="&playButton.pauseLabel;"/>
-                        <spacer flex="1"/>
+                        <label class="positionLabel" role="presentation"/>
+                        <stack class="scrubberStack">
+                            <box class="backgroundBar"/>
+                            <progressmeter class="flexibleBar" value="100"/>
+                            <progressmeter class="bufferBar"/>
+                            <progressmeter class="progressBar" max="10000"/>
+                            <scale class="scrubber" movetoclick="true"/>
+                        </stack>
+                        <label class="durationLabel" role="presentation"/>
                         <button class="muteButton"
                                 mutelabel="&muteButton.muteLabel;"
                                 unmutelabel="&muteButton.unmuteLabel;"/>
@@ -1595,17 +1597,12 @@
                           <box class="volumeForeground" anonid="volumeForeground"/>
                           <scale class="volumeControl" movetoclick="true"/>
                         </stack>
-                      </hbox>
-                    <stack class="scrubberStack" flex="1">
-                        <box class="backgroundBar"/>
-                        <progressmeter class="bufferBar"/>
-                        <progressmeter class="progressBar" max="10000"/>
-                        <scale class="scrubber" movetoclick="true"/>
-                    </stack>
-                    <vbox class="durationBox">
-                        <label class="positionLabel" role="presentation"/>
-                        <label class="durationLabel" role="presentation"/>
-                    </vbox>
+                        <button class="castingButton" hidden="true"
+                                aria-label="&castingButton.castingLabel;"/>
+                        <button class="fullscreenButton"
+                            enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
+                            exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
+                    </hbox>
                 </vbox>
             </vbox>
         </stack>