New media playback UI.

Source/core/css/mediaControlsNew.css

Index: Source/core/css/mediaControlsNew.css
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControlsNew.css
similarity index 79%
copy from Source/core/css/mediaControls.css
copy to Source/core/css/mediaControlsNew.css
index c8b17dd34baa03d91dfa66b24ab908f151648a9a..54a12e700864174ea80303301e0cc93d4849aeb7 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControlsNew.css
@@ -27,13 +27,9 @@
 
 /* WARNING: This css file can only style <audio> and <video> elements */
 
-audio:not([controls]) {

[philipj_slow, 2015/06/17 12:52:24]

Oops, when all of this is done make sure to base it off a fresh copy of
mediaControls.css

[liberato (no reviews please), 2015/06/17 17:07:26]

Acknowledged.

-    display: none !important;
-}
-
 audio {
     width: 300px;
-    height: 30px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls,
@@ -50,21 +46,16 @@ video::-webkit-media-controls {
 
 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
     width: 100%;
-    max-width: 800px;
-    height: 30px;
+    max-width: 100%;

[philipj_slow, 2015/06/17 12:52:24]

Simply removing max-width should have the same effect.

[liberato (no reviews please), 2015/06/17 17:07:26]

Done.

+    height: 48.00px;

[philipj_slow, 2015/06/17 12:52:24]

Why the extra precision?

[liberato (no reviews please), 2015/06/17 17:07:25]

generated automatically.  i'll remove.

     flex-shrink: 0;
     bottom: 0;
     text-indent: 0;
     padding: 0;
+    margin: 0;
     box-sizing: border-box;
 }
 
-video::-webkit-media-controls-enclosure {
-    padding: 0px 5px 5px 5px;
-    height: 35px;
-    flex-shrink: 0;
-}
-
 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     display: flex;
     flex-direction: row;
@@ -80,9 +71,11 @@ audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     overflow: hidden;
     text-align: right;
     bottom: auto;
-    height: 30px;
-    background-color: rgba(20, 20, 20, 0.8);
-    border-radius: 5px;
+    height: 48.00px;
+    border-radius: 0px;

[philipj_slow, 2015/06/17 12:52:24]

Simply removing any mention of border-radius should do the trick.

[liberato (no reviews please), 2015/06/17 17:07:25]

Done.

+    background-color: #fafafa;
+    margin: 0;
+    padding: 0;
     /* The duration is also specified in MediaControlElements.cpp and LayoutTests/media/media-controls.js */
     transition: opacity 0.3s;
 }
@@ -112,11 +105,11 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
     flex: none;
     border: none;
     box-sizing: border-box;
-    width: 35px;
-    height: 30px;
-    line-height: 30px;
-    margin: 0 6px 0 0;
-    padding: 0;
+    width: 48.00px;
+    height: 48.00px;
+    line-height: 48.00px;
+    margin: 0;
+    padding: 12.00px;
     background-color: initial;
     color: inherit;
 }
@@ -143,15 +136,14 @@ video::-webkit-media-controls-overlay-play-button {
     -webkit-appearance: media-overlay-play-button;
     display: flex;
     position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-left: -40px;
-    margin-top: -40px;
+    top: 0;
+    left: 0;
+    fargin: 0;

[philipj_slow, 2015/06/17 12:52:24]

fargin?

[liberato (no reviews please), 2015/06/17 17:07:26]

"far margin" - sets margin on elements in your neighbor's browser.  it's new.

fixed.

     border: none;
     box-sizing: border-box;
     background-color: transparent;
-    width: 80px;
-    height: 80px;
+    width: 100%;

[philipj_slow, 2015/06/17 12:52:24]

This may result in a problem I had previously. If the clickable area for the
overlay play button goes right up to the controls panel, trying to click stuff
in the controls panel may result in a disambiguation zoom, which isn't great. Is
the intention of this change to allow clicking anywhere to play?

[liberato (no reviews please), 2015/06/17 17:07:25]

good point.  that's the intention.

i can shrink it a bit and top align.  is there a better way?

[liberato (no reviews please), 2015/07/14 22:10:35]

i ended up shrinking this a bit.

+    height: 100%;
     padding: 0;
 }
 
@@ -175,14 +167,11 @@ audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
     -webkit-appearance: media-play-button;
     display: flex;
     flex: none;
-    border: none;
-    box-sizing: border-box;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    margin-left: 9px;
-    margin-right: 9px;
-    padding: 0;
+    border-sizing: border-box;
+    width: 48.00px;
+    height: 48.00px;
+    line-height: 48.00px;
+    padding: 12.00px;
     background-color: initial;
     color: inherit;
 }
@@ -195,12 +184,13 @@ audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
     justify-content: flex-end;
     flex: 1 1;
     -webkit-user-select: none;
-    height: 16px;
+    height: 48.00px;
+    margin: 0 0 0 0;

[philipj_slow, 2015/06/17 12:52:24]

Just margin: 0 means the same thing.

[liberato (no reviews please), 2015/06/17 17:07:26]

left over from tinkering.  fixed.

+    padding: 0;
     min-width: 0;
 }
 
-audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
-audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
     -webkit-appearance: media-current-time-display;
     -webkit-user-select: none;
     flex: none;
@@ -208,16 +198,48 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     border: none;
     cursor: default;
 
-    height: 30px;
-    margin: 0 9px 0 0;
+    height: 48.00px;
+
+    /* text runs right to the edge of the container */
+    margin: 0;
     padding: 0;
 
-    line-height: 30px;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 13px;
-    font-weight: bold;
+    line-height: 48.00px;
+    font-family: Noto Sans, Serif;

[philipj_slow, 2015/06/17 12:52:24]

Is Noto Sans part of Chrome or will this only work on Android? Serif (should be
"serif"?) as a fallback for Noto Sans seems a bit strange.

[liberato (no reviews please), 2015/06/17 17:07:25]

i thought it was part of chrome, but upon checking again, it seems less clear. 
i'll check.

+    font-size: 14px;
+    font-weight: normal;

[philipj_slow, 2015/06/17 12:52:24]

I think normal is the default.

[liberato (no reviews please), 2015/06/17 17:07:25]

Done.

+    font-style: normal;
+    color: #5a5a5a;
+
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0;
+    text-shadow: none;

[philipj_slow, 2015/06/17 12:52:24]

Isn't this the default?

[liberato (no reviews please), 2015/06/17 17:07:25]

yeah.  not sure why it was specified before.  i'll see if i can prune it down.

+    text-decoration: none;
+}
+
+audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
+    -webkit-appearance: media-current-time-display;
+    -webkit-user-select: none;
+    flex: none;
+    display: flex;
+    border: none;
+    cursor: default;
+
+    height: 48.00px;
+
+    /* text runs right to the edge of the container, plus a little on
+     * the left to pad the leading "/" */

[philipj_slow, 2015/06/17 12:52:24]

This seems like the kind of thing that might result in a 1px error that
typography geeks will notice. Did you look into simply having a single text box
for the time and just having spaces around the slash?

[liberato (no reviews please), 2015/06/17 17:07:25]

i'd prefer that.  but, the / is supposed to be anchored, and the font is
variable width.  i couldn't figure out how to do that without left aligning it.

+    margin: 0;
+    padding: 0 0 0 4px;
+
+    line-height: 48.00px;
+    font-family: Noto Sans;

[philipj_slow, 2015/06/17 12:52:24]

No fallback here? Maybe the font-family should be set at a higher level?

[liberato (no reviews please), 2015/06/17 17:07:25]

added to my todo list.

[liberato (no reviews please), 2015/07/14 22:10:35]

ux designers provided a fallback list.

+    font-size: 14px;
+    font-weight: normal;
     font-style: normal;
-    color: white;
+    color: #5a5a5a;
 
     letter-spacing: normal;
     word-spacing: normal;
@@ -231,9 +253,13 @@ audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     -webkit-appearance: media-slider;
     display: flex;
     flex: 1 1 auto;
-    height: 8px;
-    margin: 0 15px 0 0;
+    height: 48.00px;
+
+    /* Leave 6px on either side for the thumb.  Use margin so that
+     * the slider doesn't extend into it.  We also add 12px border.
+     */
     padding: 0;
+    margin: 0 18.00px 0 18.00px;
     background-color: transparent;
     min-width: 25px;
     border: initial;
@@ -247,12 +273,16 @@ audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
      * and be aesthetically pleasing.
      */
     flex: 1 1.9 auto;
-    height: 8px;
+    height: 48.00px;
     max-width: 70px;
-    margin: 0 15px 0 0;
+    /* Leave room for the thumb, which has 6px radius.  Use margin rather
+     * than padding so that the slider doesn't extend into it.  We also
+     * leave an addition 12px margin.
+     */
     padding: 0;
+    margin: 0 18.00px 0 18.00px;
     background-color: transparent;
-    min-width: 15px;
+    min-width: 25px;
     border: initial;
     color: inherit;
 }
@@ -266,35 +296,38 @@ input[type="range" i]::-webkit-media-slider-container {
     align-items: center;
     flex-direction: row; /* This property is updated by C++ code. */
     box-sizing: border-box;
-    height: 100%;
+    /** this positions the slider thumb for both time and volume. */
+    height: 48.00px;
     width: 100%;
-    border: 1px solid rgba(230, 230, 230, 0.35);
-    border-radius: 4px;
+padding: 0;
+margin: 0;
     background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
 }
 
 /* The negative right margin causes the track to overflow its container. */
 input[type="range" i]::-webkit-media-slider-container > div {
-    margin-right: -14px;
+    margin-right: -18.00px;  /* box is 36.00px wide, get to the middle */
+    margin-left:  -18.00px;
 }
 
 input[type="range" i]::-webkit-media-slider-thumb {
-    margin-left: -7px;
-    margin-right: -7px;
+    box-sizing: border-box;
+    width: 48.00px;
+    height: 48.00px;
+    padding: 0px;
+    margin: 0px;
 }
 
 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
     -webkit-appearance: media-enter-fullscreen-button;
     display: flex;
     flex: none;
+    overflow: hidden;
     border: none;
     box-sizing: border-box;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    margin-left: -5px;
-    margin-right: 9px;
-    padding: 0;
+    width: 48.00px;
+    height: 48.00px;
+    line-height: 48.00px;
     background-color: initial;
     color: inherit;
 }
@@ -305,12 +338,12 @@ audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
     flex: none;
     border: none;
     box-sizing: border-box;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    margin-left: -5px;
-    margin-right: 9px;
-    padding: 0;
+    width: 48.00px;
+    height: 48.00px;
+    line-height: 48.00px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 12.00px;
     background-color: initial;
     color: inherit;
 }
@@ -325,12 +358,12 @@ video::-webkit-media-controls-toggle-closed-captions-button {
     flex: none;
     border: none;
     box-sizing: border-box;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    margin-left: -5px;
-    margin-right: 9px;
-    padding: 0;
+    width: 48.00px;
+    height: 48.00px;
+    line-height: 48.00px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 12.00px;
     background-color: initial;
     color: inherit;
 }