New media playback UI.

Source/core/css/mediaControlsNew.css

 /*
  * Copyright (C) 2009 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Google Inc.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /* Chromium default media controls */
 
 /* 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,
 video::-webkit-media-controls {
     width: inherit;
     height: inherit;
     position: relative;
     direction: ltr;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
 }
 
 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;
     align-items: center;
     /* We use flex-start here to ensure that the play button is visible even
      * if we are too small to show all controls.
      */
     justify-content: flex-start;
     -webkit-user-select: none;
     position: relative;
     width: 100%;
     z-index: 0;
     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;
 }
 
 video:-webkit-full-page-media {
     margin: auto;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }
 
 audio:-webkit-full-page-media, video:-webkit-full-page-media {
     max-height: 100%;
     max-width: 100%;
 }
 
 audio:-webkit-full-page-media::-webkit-media-controls-panel,
 video:-webkit-full-page-media::-webkit-media-controls-panel {
     bottom: 0px;
 }
 
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     -webkit-appearance: media-mute-button;
     display: flex;
     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;
 }
 
 audio::-webkit-media-controls-overlay-enclosure {
     display: none;
 }
 
 video::-webkit-media-controls-overlay-enclosure {
     display: flex;
     position: relative;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     flex: 1 1;
     min-height: 0;
     width: 100%;
     text-indent: 0;
     box-sizing: border-box;
     overflow: hidden;
 }
 
 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;
 }
 
 video::-internal-media-controls-overlay-cast-button {
     -webkit-appearance: -internal-media-overlay-cast-off-button;
     display: flex;
     position: absolute;
     top: 5%;
     left: 5%;
     margin-left: 0px;
     margin-top: 0px;
     border: none;
     box-sizing: border-box;
     background-color: transparent;
     width: 30px;
     height: 30px;
     padding: 0;
 }
 
 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     -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;
 }
 
 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
     -webkit-appearance: media-controls-background;
     display: flex;
     flex-direction: row;
     align-items: center;
     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;
     display: flex;
     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: white;
+    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: #5a5a5a;
+
+    letter-spacing: normal;
+    word-spacing: normal;
     text-transform: none;
     text-indent: 0;
     text-shadow: none;
     text-decoration: none;
 }
 
 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;
     color: inherit;
 }
 
 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
     -webkit-appearance: media-volume-slider;
     display: flex;
     /* The 1.9 value was empirically chosen to match old-flexbox behaviour
      * 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;
 }
 
 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
    https://code.google.com/p/chromium/issues/detail?id=112508
    https://bugs.webkit.org/show_bug.cgi?id=62218
 */
 input[type="range" i]::-webkit-media-slider-container {
     display: flex;
     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;
 }
 
 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button {
     -webkit-appearance: -internal-media-cast-off-button;
     display: flex;
     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;
 }
 
 audio::-webkit-media-controls-toggle-closed-captions-button {
     display: none;
 }
 
 video::-webkit-media-controls-toggle-closed-captions-button {
     -webkit-appearance: media-toggle-closed-captions-button;
     display: flex;
     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;
 }
 
 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
     display: none;
 }
 
 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
     display: none;
@@ skipping 70 matching lines @@
     font-weight: bold;
 }
 
 video::-webkit-media-text-track-container u {
     text-decoration: underline;
 }
 
 video::-webkit-media-text-track-container i {
     font-style: italic;
 }