Bug 1250741 - Update video player to new spec. r=margaret

MozReview-Commit-ID: IKaw00tXwRS
2016-04-10 23:38:00 -04:00 · 2016-04-10 23:38:00 -04:00 · fc700c757b
--- 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 {
--- 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 {
--- 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>