New media playback UI.

Source/core/css/mediaControlsNew.css

-/**/
+/*
+ * Copyright (C) 2009 Apple Inc.  All rights reserved.
+ * Copyright (C) 2015 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]) {
+    display: none !important;
+}
+
+audio {
+    width: 300px;
+    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%;
+    height: 48px;
+    flex-shrink: 0;
+    bottom: 0;
+    text-indent: 0;
+    padding: 0;
+    margin: 0;

[philipj_slow, 2015/07/08 10:31:52]

This was added, does it make a difference? In general there seems to be a whole
lot of cruft in this CSS, can you tried to minimize it to just the stuff that is
actually needed? Like box-sizing:border-box just below here doesn't seem to make
sense, and such is the case every 5-10 lines in this file I think.

[liberato (no reviews please), 2015/07/09 12:10:56]

de-cruft is still pending, probably in PS20.

+    box-sizing: border-box;
+}
+
+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: 48px;
+    min-width: 48px;
+    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;
+
+    font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif ;
+    font-size: 14px;
+    font-weight: normal;  /* Make sure that we don't inherit non-defaults. */
+    font-style: normal;
+}
+
+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: 48px;
+    height: 48px;
+    line-height: 48px;
+    margin: 0;
+    padding: 12px;

[philipj_slow, 2015/07/08 10:31:52]

The amount of whitespace around the mute button looks really excessive, and was
pointed out by some people I showed the new controls to internally. It makes it
a bit non-obvious that the second slider is related to the volume button at all.
Does this match what was intended in the mockups? I'm no designer, but something
closer to the amount of space between the play button and the duration text
would seem better.

[liberato (no reviews please), 2015/07/09 12:10:56]

i've forwarded this feedback to the design team.  thanks.

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

the new whitespace is from the style guide, and is intended.

+    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%;
+    margin-bottom: 10px;
+    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: 0;
+    left: 0;
+    margin: 0;
+    border: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    width: 100%;
+    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-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    padding: 12px;
+    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: 48px;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+}
+
+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: 48px;
+
+    /* text runs right to the edge of the container */
+    margin: 0;
+    padding: 0;
+
+    line-height: 48px;
+    color: #5a5a5a;
+
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0;
+    text-shadow: none;
+    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: 48px;
+
+    /* text runs right to the edge of the container, plus a little on
+     * the left to pad the leading "/" */
+    margin: 0;
+    padding: 0 0 0 4px;
+
+    line-height: 48px;
+    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: 48px;
+
+    /* 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 18px 0 18px;
+    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: 48px;
+    max-width: 70px;
+    /* 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 18px 0 18px;
+    background-color: transparent;
+    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;
+    /** this positions the slider thumb for both time and volume. */
+    height: 48px;
+    width: 100%;
+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: -18px;  /* box is 36px wide, get to the middle */
+    margin-left:  -18px;
+}
+
+input[type="range" i]::-webkit-media-slider-thumb {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    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: 48px;
+    height: 48px;
+    line-height: 48px;
+    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: 48px;
+    height: 48px;
+    line-height: 48px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 12px;
+    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: 48px;
+    height: 48px;
+    line-height: 48px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 12px;
+    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;
+}
+
+audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
+    display: none;
+}
+
+video::-webkit-media-text-track-container {
+    position: relative;
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+
+    font: 22px sans-serif;
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0;
+    text-decoration: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+    word-break: break-word;
+}
+
+video::cue {
+    display: inline;
+
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 2px 2px;
+}
+
+video::-webkit-media-text-track-region {
+    position: absolute;
+    line-height: 5.33vh;
+    writing-mode: horizontal-tb;
+    background: rgba(0, 0, 0, 0.8);
+    color: rgba(255, 255, 255, 1);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    overflow: hidden;
+}
+
+video::-webkit-media-text-track-region-container {
+    position: relative;
+
+    display: flex;
+    flex-flow: column;
+    flex-direction: column;
+}
+
+video::-webkit-media-text-track-region-container.scrolling {
+    transition: top 433ms linear;
+}
+
+
+video::-webkit-media-text-track-display {
+    position: absolute;
+    overflow: hidden;
+    white-space: pre-wrap;
+    -webkit-box-sizing: border-box;
+    flex: 0 0 auto;
+}
+
+video::cue(:future) {
+    color: gray;
+}
+
+video::-webkit-media-text-track-container b {
+    font-weight: bold;
+}
+
+video::-webkit-media-text-track-container u {
+    text-decoration: underline;
+}
+
+video::-webkit-media-text-track-container i {
+    font-style: italic;
+}