New media playback UI.

Source/core/paint/MediaControlsPainter.cpp

 /*
  * Copyright (C) 2009 Apple Inc.
  * Copyright (C) 2009 Google Inc.
  * All rights reserved.
  *
  * 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.
@@ skipping 26 matching lines @@
 #include "platform/graphics/Gradient.h"
 #include "platform/graphics/GraphicsContext.h"
 
 namespace blink {
 
 static double kCurrentTimeBufferedDelta = 1.0;
 
 typedef WTF::HashMap<const char*, Image*> MediaControlImageMap;
 static MediaControlImageMap* gMediaControlImageMap = 0;
 
+// Current UI slider thumbs sizes.
+static const int mediaSliderThumbWidth = 32;
+static const int mediaSliderThumbHeight = 24;
+static const int mediaVolumeSliderThumbHeight = 24;
+static const int mediaVolumeSliderThumbWidth = 24;
+
+// New UI slider thumb sizes, shard between time and volume.
+static const int mediaSliderThumbTouchWidthNew = 36; // Touch zone size.
+static const int mediaSliderThumbTouchHeightNew = 48;
+static const int mediaSliderThumbPaintWidthNew = 12; // Painted area.
+static const int mediaSliderThumbPaintHeightNew = 12;
+
+// New UI overlay play button size.
+static const int mediaOverlayPlayButtonWidthNew = 48;
+static const int mediaOverlayPlayButtonHeightNew = 48;
+
+// Alpha for disabled elements.
+static const float kDisabledAlpha = 0.4;
+
 static Image* platformResource(const char* name)
 {
     if (!gMediaControlImageMap)
         gMediaControlImageMap = new MediaControlImageMap();
     if (Image* image = gMediaControlImageMap->get(name))
         return image;
     if (Image* image = Image::loadPlatformResource(name).leakRef()) {
         gMediaControlImageMap->set(name, image);
         return image;
     }
     ASSERT_NOT_REACHED();
     return 0;
 }
 
+static Image* platformResource(const char* currentName, const char* newName)
+{
+    // Return currentName or newName based on current or new playback.
+    return platformResource(RuntimeEnabledFeatures::newMediaPlaybackUiEnabled() ? newName : currentName);
+}
+
 static bool hasSource(const HTMLMediaElement* mediaElement)
 {
     return mediaElement->networkState() != HTMLMediaElement::NETWORK_EMPTY
         && mediaElement->networkState() != HTMLMediaElement::NETWORK_NO_SOURCE;
 }
 
-static bool paintMediaButton(GraphicsContext* context, const IntRect& rect, Image* image)
+static bool paintMediaButton(GraphicsContext* context, const IntRect& rect, Image* image, bool isEnabled = false)
 {
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        isEnabled = false; // New UI only.
+
+    if (isEnabled)
+        context->beginLayer(kDisabledAlpha);
+
     context->drawImage(image, rect);
+
+    if (isEnabled)
+        context->endLayer();
+
     return true;
 }
 
 bool MediaControlsPainter::paintMediaMuteButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
-    static Image* soundLevel3 = platformResource("mediaplayerSoundLevel3");
-    static Image* soundLevel2 = platformResource("mediaplayerSoundLevel2");
-    static Image* soundLevel1 = platformResource("mediaplayerSoundLevel1");
-    static Image* soundLevel0 = platformResource("mediaplayerSoundLevel0");
-    static Image* soundDisabled = platformResource("mediaplayerSoundDisabled");
+    // The new UI uses "muted" and "not muted" only.
+    static Image* soundLevel3 = platformResource("mediaplayerSoundLevel3",
+        "mediaplayerSoundLevel3New");
+    static Image* soundLevel2 = platformResource("mediaplayerSoundLevel2",
+        "mediaplayerSoundLevel3New");
+    static Image* soundLevel1 = platformResource("mediaplayerSoundLevel1",
+        "mediaplayerSoundLevel3New");
+    static Image* soundLevel0 = platformResource("mediaplayerSoundLevel0",
+        "mediaplayerSoundLevel0New");
+    static Image* soundDisabled = platformResource("mediaplayerSoundDisabled",
+        "mediaplayerSoundLevel0New");
 
     if (!hasSource(mediaElement) || !mediaElement->hasAudio())
-        return paintMediaButton(paintInfo.context, rect, soundDisabled);
+        return paintMediaButton(paintInfo.context, rect, soundDisabled, true);
 
     if (mediaElement->muted() || mediaElement->volume() <= 0)
         return paintMediaButton(paintInfo.context, rect, soundLevel0);
 
     if (mediaElement->volume() <= 0.33)
         return paintMediaButton(paintInfo.context, rect, soundLevel1);
 
     if (mediaElement->volume() <= 0.66)
         return paintMediaButton(paintInfo.context, rect, soundLevel2);
 
     return paintMediaButton(paintInfo.context, rect, soundLevel3);
 }
 
 bool MediaControlsPainter::paintMediaPlayButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
-    static Image* mediaPlay = platformResource("mediaplayerPlay");
-    static Image* mediaPause = platformResource("mediaplayerPause");
-    static Image* mediaPlayDisabled = platformResource("mediaplayerPlayDisabled");
+    static Image* mediaPlay = platformResource("mediaplayerPlay", "mediaplayerPlayNew");
+    static Image* mediaPause = platformResource("mediaplayerPause", "mediaplayerPauseNew");
+    // For this case, the new UI draws the normal icon, but the entire panel
+    // grays out.
+    static Image* mediaPlayDisabled = platformResource("mediaplayerPlayDisabled", "mediaplayerPlayNew");
 
     if (!hasSource(mediaElement))
-        return paintMediaButton(paintInfo.context, rect, mediaPlayDisabled);
+        return paintMediaButton(paintInfo.context, rect, mediaPlayDisabled, true);
 
     Image * image = !object->node()->isMediaControlElement() || mediaControlElementType(object->node()) == MediaPlayButton ? mediaPlay : mediaPause;
     return paintMediaButton(paintInfo.context, rect, image);
 }
 
 bool MediaControlsPainter::paintMediaOverlayPlayButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
     if (!hasSource(mediaElement) || !mediaElement->togglePlayStateWillPlay())
         return false;
 
-    static Image* mediaOverlayPlay = platformResource("mediaplayerOverlayPlay");
-    return paintMediaButton(paintInfo.context, rect, mediaOverlayPlay);
+    static Image* mediaOverlayPlay = platformResource("mediaplayerOverlayPlay",
+        "mediaplayerOverlayPlayNew");
+
+    IntRect buttonRect(rect);
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        // Overlay play button covers the entire player, so center and draw a

[philipj_slow, 2015/07/21 12:02:21]

Unresolved earlier issue: this ought to lead to a disambiguation zoom when
clicking close to the edge of the controls, which caused a similar earlier
change to be reverted:
https://codereview.chromium.org/867063003

Also, this will get in the way of implemented tap to show/hide controls:
https://codereview.chromium.org/914043002/

[liberato (no reviews please), 2015/07/27 20:26:09]

disambiguation: there's a 10px border between the panel and the overlay in the
css.  i've never seen a disambiguation zoom.  the paint does need to be
adjusted.

show/hide: thanks for pointing this out.  based on this, i prototyped a similar
approach in MediaControls::defaultEventHandler.  it seems to work fine in the
new UI.  i'm not going to include it in this CL, but might put it out as a
follow-up for both old and new.

[philipj_slow, 2015/07/28 15:23:49]

Sounds good. Do you have that WIP CL somewhere? I agree that this CL is big
enough as it is, but the interesting bit is what the size of the fullscreen
button element will be. When I've looked at this, and in fact implemented it
hackily for Opera for Android, I was treating clicks directly on the
MediaControls element (not any child) as the trigger for show/hide.

[liberato (no reviews please), 2015/07/30 05:54:23]

that sounds like exactly what i did...

no, i don't have a WIP CL, but i will put one together.  i didn't test it super
thoroughly, just enough to convince myself that an answer was somewhere in the
general area.

[philipj_slow, 2015/08/03 13:52:34]

Could you reduce the size of the overlay play button in this CL, so that we
don't accidentally end up with "click anywhere to play/pause" and being accused
of regressions when it instead shows/hides?

+        // smaller button.
+        buttonRect.setX(rect.center().x() - mediaOverlayPlayButtonWidthNew / 2);
+        buttonRect.setY(rect.center().y() - mediaOverlayPlayButtonHeightNew / 2);
+        buttonRect.setWidth(mediaOverlayPlayButtonWidthNew);
+        buttonRect.setHeight(mediaOverlayPlayButtonHeightNew);
+    }
+
+    return paintMediaButton(paintInfo.context, buttonRect, mediaOverlayPlay);
 }
 
 static Image* getMediaSliderThumb()
 {
-    static Image* mediaSliderThumb = platformResource("mediaplayerSliderThumb");
+    static Image* mediaSliderThumb = platformResource("mediaplayerSliderThumb",
+        "mediaplayerSliderThumbNew");
     return mediaSliderThumb;
 }
 
-static void paintRoundedSliderBackground(const IntRect& rect, const ComputedStyle&, GraphicsContext* context)
+static void paintRoundedSliderBackground(const IntRect& rect, const ComputedStyle& style, GraphicsContext* context, Color sliderBackgroundColor )
 {
-    int borderRadius = rect.height() / 2;
-    IntSize radii(borderRadius, borderRadius);
-    Color sliderBackgroundColor = Color(11, 11, 11);
+    float borderRadius = rect.height() / 2;
+    FloatSize radii(borderRadius, borderRadius);
+
     context->fillRoundedRect(FloatRoundedRect(rect, radii, radii, radii, radii), sliderBackgroundColor);
 }
 
 static void paintSliderRangeHighlight(const IntRect& rect, const ComputedStyle& style, GraphicsContext* context, int startPosition, int endPosition, Color startColor, Color endColor)
 {
     // Calculate border radius; need to avoid being smaller than half the slider height
     // because of https://bugs.webkit.org/show_bug.cgi?id=30143.
-    int borderRadius = rect.height() / 2;
-    IntSize radii(borderRadius, borderRadius);
+    float borderRadius = rect.height() / 2.0f;
+    FloatSize radii(borderRadius, borderRadius);
 
     // Calculate highlight rectangle and edge dimensions.
     int startOffset = startPosition;
     int endOffset = rect.width() - endPosition;
     int rangeWidth = endPosition - startPosition;
 
     if (rangeWidth <= 0)
         return;
 
     // Make sure the range width is bigger than border radius at the edges to retain rounded corners.
     if (startOffset < borderRadius && rangeWidth < borderRadius)
         rangeWidth = borderRadius;
     if (endOffset < borderRadius && rangeWidth < borderRadius)
         rangeWidth = borderRadius;
 
     // Set rectangle to highlight range.
     IntRect highlightRect = rect;
     highlightRect.move(startOffset, 0);
     highlightRect.setWidth(rangeWidth);
 
     // Don't bother drawing an empty area.
     if (highlightRect.isEmpty())
         return;
 
     // Calculate white-grey gradient.
-    IntPoint sliderTopLeft = highlightRect.location();
-    IntPoint sliderBottomLeft = sliderTopLeft;
+    FloatPoint sliderTopLeft = highlightRect.location();
+    FloatPoint sliderBottomLeft = sliderTopLeft;
     sliderBottomLeft.move(0, highlightRect.height());
     RefPtr<Gradient> gradient = Gradient::create(sliderTopLeft, sliderBottomLeft);
     gradient->addColorStop(0.0, startColor);
     gradient->addColorStop(1.0, endColor);
 
     // Fill highlight rectangle with gradient, potentially rounded if on left or right edge.
     context->save();
     context->setFillGradient(gradient);
 
     if (startOffset < borderRadius && endOffset < borderRadius)
         context->fillRoundedRect(FloatRoundedRect(highlightRect, radii, radii, radii, radii), startColor);
     else if (startOffset < borderRadius)
         context->fillRoundedRect(FloatRoundedRect(highlightRect, radii, IntSize(0, 0), radii, IntSize(0, 0)), startColor);
     else if (endOffset < borderRadius)
         context->fillRoundedRect(FloatRoundedRect(highlightRect, IntSize(0, 0), radii, IntSize(0, 0), radii), startColor);
     else
         context->fillRect(highlightRect);
 
     context->restore();
 }
 
-const int mediaSliderThumbWidth = 32;
-
 bool MediaControlsPainter::paintMediaSlider(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
+    GraphicsContext* context = paintInfo.context;
+
+    // Should we paint the slider partially transparent?
+    bool drawUiGrayed = !hasSource(mediaElement) && RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
+    if (drawUiGrayed)
+        context->beginLayer(kDisabledAlpha);
+
+    paintMediaSliderInternal(object, paintInfo, rect);
+
+    if (drawUiGrayed)
+        context->endLayer();
+
+    return true;
+}
+
+void MediaControlsPainter::paintMediaSliderInternal(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
+{
+    const bool useNewUi = RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
+    HTMLMediaElement* mediaElement = toParentMediaElement(object);
+    if (!mediaElement)
+        return;
+
     const ComputedStyle& style = object->styleRef();
     GraphicsContext* context = paintInfo.context;
 
-    paintRoundedSliderBackground(rect, style, context);
+    // Paint the slider bar in the "no data buffered" state.
+    Color sliderBackgroundColor;
+    if (!useNewUi)
+        sliderBackgroundColor = Color(11, 11, 11);
+    else
+        sliderBackgroundColor = Color(0xda, 0xda, 0xda);
+
+    paintRoundedSliderBackground(rect, style, context, sliderBackgroundColor);
 
     // Draw the buffered range. Since the element may have multiple buffered ranges and it'd be
     // distracting/'busy' to show all of them, show only the buffered range containing the current play head.
     RefPtrWillBeRawPtr<TimeRanges> bufferedTimeRanges = mediaElement->buffered();
     float duration = mediaElement->duration();
     float currentTime = mediaElement->currentTime();
     if (std::isnan(duration) || std::isinf(duration) || !duration || std::isnan(currentTime))
-        return true;
+        return;
 
     for (unsigned i = 0; i < bufferedTimeRanges->length(); ++i) {
         float start = bufferedTimeRanges->start(i, ASSERT_NO_EXCEPTION);
         float end = bufferedTimeRanges->end(i, ASSERT_NO_EXCEPTION);
         // The delta is there to avoid corner cases when buffered
         // ranges is out of sync with current time because of
         // asynchronous media pipeline and current time caching in
         // HTMLMediaElement.
         // This is related to https://www.w3.org/Bugs/Public/show_bug.cgi?id=28125
         // FIXME: Remove this workaround when WebMediaPlayer
         // has an asynchronous pause interface.
         if (std::isnan(start) || std::isnan(end)
             || start > currentTime + kCurrentTimeBufferedDelta || end < currentTime)
             continue;
         int startPosition = int(start * rect.width() / duration);
         int currentPosition = int(currentTime * rect.width() / duration);
         int endPosition = int(end * rect.width() / duration);
 
-        // Add half the thumb width proportionally adjusted to the current painting position.
-        int thumbCenter = mediaSliderThumbWidth / 2;
-        int addWidth = thumbCenter * (1.0 - 2.0 * currentPosition / rect.width());
-        currentPosition += addWidth;
+        if (!useNewUi) {
+            // Add half the thumb width proportionally adjusted to the current painting position.
+            int thumbCenter = mediaSliderThumbWidth / 2;
+            int addWidth = thumbCenter * (1.0 - 2.0 * currentPosition / rect.width());
+            currentPosition += addWidth;
+        }
 
-        // Draw white-ish highlight before current time.
-        Color startColor = Color(195, 195, 195);
-        Color endColor = Color(217, 217, 217);
+        // Draw highlight before current time.
+        Color startColor;
+        Color endColor;
+        if (!useNewUi) {
+            startColor = Color(195, 195, 195); // white-ish.
+            endColor = Color(217, 217, 217);
+        } else {
+            startColor = endColor = Color(0x42, 0x85, 0xf4); // blue.
+        }
+
         if (currentPosition > startPosition)
             paintSliderRangeHighlight(rect, style, context, startPosition, currentPosition, startColor, endColor);
 
         // Draw grey-ish highlight after current time.
-        startColor = Color(60, 60, 60);
-        endColor = Color(76, 76, 76);
+        if (!useNewUi) {
+            startColor = Color(60, 60, 60);
+            endColor = Color(76, 76, 76);
+        } else {
+            startColor = endColor = Color(0x9f, 0x9f, 0x9f); // light grey.
+        }
 
         if (endPosition > currentPosition)
             paintSliderRangeHighlight(rect, style, context, currentPosition, endPosition, startColor, endColor);
 
-        return true;
+        return;
+    }
+}
+
+void MediaControlsPainter::adjustMediaSliderThumbPaintSize(const IntRect& rect, const ComputedStyle& style, IntRect& rectOut)
+{
+    // Adjust the rectangle to be centered, the right size for the image.
+    // We do this because it's quite hard to get the thumb touch target
+    // to match.  So, we provide the touch target size with
+    // adjustMediaSliderThumbSize(), and scale it back when we paint.
+    rectOut = rect;
+
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        // ...except for the old UI.
+        return;
     }
 
-    return true;
+    float zoomLevel = style.effectiveZoom();
+    int zoomedPaintWidth = mediaSliderThumbPaintWidthNew * zoomLevel;
+    int zoomedPaintHeight = mediaSliderThumbPaintHeightNew * zoomLevel;

[philipj_slow, 2015/07/21 12:02:21]

Should this also use float sizes?

[liberato (no reviews please), 2015/07/27 20:26:09]

Done.

+
+    rectOut.setX(rect.center().x() - zoomedPaintWidth / 2);
+    rectOut.setY(rect.center().y() - zoomedPaintHeight / 2);
+    rectOut.setWidth(zoomedPaintWidth);
+    rectOut.setHeight(zoomedPaintHeight);
 }
 
 bool MediaControlsPainter::paintMediaSliderThumb(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     if (!object->node())
         return false;
 
     HTMLMediaElement* mediaElement = toParentMediaElement(object->node()->shadowHost());
     if (!mediaElement)
         return false;
 
     if (!hasSource(mediaElement))
         return true;
 
     Image* mediaSliderThumb = getMediaSliderThumb();
-    return paintMediaButton(paintInfo.context, rect, mediaSliderThumb);
+    IntRect paintRect;
+    const ComputedStyle& style = object->styleRef();
+    adjustMediaSliderThumbPaintSize(rect, style, paintRect);
+    return paintMediaButton(paintInfo.context, paintRect, mediaSliderThumb);
 }
 
-const int mediaVolumeSliderThumbWidth = 24;
-
 bool MediaControlsPainter::paintMediaVolumeSlider(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
     GraphicsContext* context = paintInfo.context;
     const ComputedStyle& style = object->styleRef();
 
-    paintRoundedSliderBackground(rect, style, context);
+    // Paint the slider bar.
+    Color sliderBackgroundColor;
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        sliderBackgroundColor = Color(11, 11, 11);
+    else
+        sliderBackgroundColor = Color(0x9f, 0x9f, 0x9f);
+    paintRoundedSliderBackground(rect, style, context, sliderBackgroundColor);
 
     // Calculate volume position for white background rectangle.
     float volume = mediaElement->volume();
     if (std::isnan(volume) || volume < 0)
         return true;
     if (volume > 1)
         volume = 1;
     if (!hasSource(mediaElement) || !mediaElement->hasAudio() || mediaElement->muted())
         volume = 0;
 
     // Calculate the position relative to the center of the thumb.
     float fillWidth = 0;
-    if (volume > 0) {
-        float thumbCenter = mediaVolumeSliderThumbWidth / 2;
-        float zoomLevel = style.effectiveZoom();
-        float positionWidth = volume * (rect.width() - (zoomLevel * thumbCenter));
-        fillWidth = positionWidth + (zoomLevel * thumbCenter / 2);
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        if (volume > 0) {
+            float thumbCenter = mediaVolumeSliderThumbWidth / 2;
+            float zoomLevel = style.effectiveZoom();
+            float positionWidth = volume * (rect.width() - (zoomLevel * thumbCenter));
+            fillWidth = positionWidth + (zoomLevel * thumbCenter / 2);
+        }
+    } else {
+        fillWidth = volume * rect.width();
     }
 
     Color startColor = Color(195, 195, 195);
     Color endColor = Color(217, 217, 217);
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        startColor = endColor = Color(0x42, 0x85, 0xf4); // blue.
 
     paintSliderRangeHighlight(rect, style, context, 0.0, fillWidth, startColor, endColor);
 
     return true;
 }
 
 bool MediaControlsPainter::paintMediaVolumeSliderThumb(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     if (!object->node())
         return false;
 
     HTMLMediaElement* mediaElement = toParentMediaElement(object->node()->shadowHost());
     if (!mediaElement)
         return false;
 
     if (!hasSource(mediaElement) || !mediaElement->hasAudio())
         return true;
 
-    static Image* mediaVolumeSliderThumb = platformResource("mediaplayerVolumeSliderThumb");
-    return paintMediaButton(paintInfo.context, rect, mediaVolumeSliderThumb);
+    static Image* mediaVolumeSliderThumb = platformResource(
+        "mediaplayerVolumeSliderThumb",
+        "mediaplayerVolumeSliderThumbNew");
+
+    IntRect paintRect;
+    const ComputedStyle& style = object->styleRef();
+    adjustMediaSliderThumbPaintSize(rect, style, paintRect);
+    return paintMediaButton(paintInfo.context, paintRect, mediaVolumeSliderThumb);
 }
 
 bool MediaControlsPainter::paintMediaFullscreenButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
-    static Image* mediaFullscreenButton = platformResource("mediaplayerFullscreen");
-    return paintMediaButton(paintInfo.context, rect, mediaFullscreenButton);
+    // With the new player UI, we have separate assets for enter / exit
+    // fullscreen mode.
+    static Image* mediaEnterFullscreenButton = platformResource(
+        "mediaplayerFullscreen",
+        "mediaplayerEnterFullscreen");
+    static Image* mediaExitFullscreenButton = platformResource(
+        "mediaplayerFullscreen",
+        "mediaplayerExitFullscreen");
+
+    bool isEnabled = hasSource(mediaElement);

[philipj_slow, 2015/07/21 12:02:21]

Is a change in the fullscreen button visibility and enabled state intended? The
combination of hasSource(mediaElement) here with mediaElement().hasVideo() in
MediaControls::reset() seems strange, because hasVideo() implies hasSource(), so
isEnabled ought to always be true here?

[liberato (no reviews please), 2015/07/27 20:26:09]

yes, it should be true always.  didn't assume that here just because it seemed
weird to make this one different.

[philipj_slow, 2015/07/28 15:23:49]

Right, many other elements have this same check, so doing it here seems OK even
if redundant.

+
+    if (mediaControlElementType(object->node()) == MediaExitFullscreenButton)
+        return paintMediaButton(paintInfo.context, rect, mediaExitFullscreenButton, !isEnabled);
+    return paintMediaButton(paintInfo.context, rect, mediaEnterFullscreenButton, !isEnabled);
 }
 
 bool MediaControlsPainter::paintMediaToggleClosedCaptionsButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
-    static Image* mediaClosedCaptionButton = platformResource("mediaplayerClosedCaption");
-    static Image* mediaClosedCaptionButtonDisabled = platformResource("mediaplayerClosedCaptionDisabled");
+    static Image* mediaClosedCaptionButton = platformResource(
+        "mediaplayerClosedCaption", "mediaplayerClosedCaptionNew");
+    static Image* mediaClosedCaptionButtonDisabled = platformResource(
+        "mediaplayerClosedCaptionDisabled",
+        "mediaplayerClosedCaptionDisabledNew");
+
+    bool isEnabled = hasSource(mediaElement);

[philipj_slow, 2015/07/21 12:02:21]

This is also new. The entire panel is grayed out if !hasSource() for the new UI
and the enabled flag is ignored for the old, so will this change be observable?
It seems to me that if any button is to be disabled, it should be based on the
relevant state (presence of text tracks in this case) and not the top-level
hasSource() condition.

[liberato (no reviews please), 2015/07/27 20:26:09]

there's no case where !hasSource() and we have a CC button.  however, i didn't
want to assume that here.  so it's not observable, but leaving out the check
seems weird, as above.  the goal was to have uniform checks to gray out the UI,
without memorizing how MediaControls works.

anyway, i modified this and the cast check to be more specific.  the fullscreen
button is left as-is, since the check for that is more complicated.

[philipj_slow, 2015/07/28 15:23:49]

Acknowledged.

 
     if (mediaElement->closedCaptionsVisible())
-        return paintMediaButton(paintInfo.context, rect, mediaClosedCaptionButton);
+        return paintMediaButton(paintInfo.context, rect, mediaClosedCaptionButton, !isEnabled);
 
-    return paintMediaButton(paintInfo.context, rect, mediaClosedCaptionButtonDisabled);
+    return paintMediaButton(paintInfo.context, rect, mediaClosedCaptionButtonDisabled, !isEnabled);
 }
 
 bool MediaControlsPainter::paintMediaCastButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
     HTMLMediaElement* mediaElement = toParentMediaElement(object);
     if (!mediaElement)
         return false;
 
-    static Image* mediaCastOn = platformResource("mediaplayerCastOn");
-    static Image* mediaCastOff = platformResource("mediaplayerCastOff");
+    static Image* mediaCastOn = platformResource("mediaplayerCastOn", "mediaplayerCastOnNew");
+    static Image* mediaCastOff = platformResource("mediaplayerCastOff", "mediaplayerCastOffNew");
     // To ensure that the overlaid cast button is visible when overlaid on pale videos we use a
     // different version of it for the overlaid case with a semi-opaque background.
-    static Image* mediaOverlayCastOff = platformResource("mediaplayerOverlayCastOff");
+    static Image* mediaOverlayCastOff = platformResource(
+        "mediaplayerOverlayCastOff",
+        "mediaplayerOverlayCastOffNew");
+
+    bool isEnabled = hasSource(mediaElement);
 
     switch (mediaControlElementType(object->node())) {
     case MediaCastOnButton:
+        return paintMediaButton(paintInfo.context, rect, mediaCastOn, !isEnabled);
     case MediaOverlayCastOnButton:
         return paintMediaButton(paintInfo.context, rect, mediaCastOn);
     case MediaCastOffButton:
-        return paintMediaButton(paintInfo.context, rect, mediaCastOff);
+        return paintMediaButton(paintInfo.context, rect, mediaCastOff, !isEnabled);
     case MediaOverlayCastOffButton:
         return paintMediaButton(paintInfo.context, rect, mediaOverlayCastOff);
     default:
         ASSERT_NOT_REACHED();
         return false;
     }
 }
 
-const int mediaSliderThumbHeight = 24;
-const int mediaVolumeSliderThumbHeight = 24;
-
 void MediaControlsPainter::adjustMediaSliderThumbSize(ComputedStyle& style)
 {
-    static Image* mediaSliderThumb = platformResource("mediaplayerSliderThumb");
-    static Image* mediaVolumeSliderThumb = platformResource("mediaplayerVolumeSliderThumb");
+    static Image* mediaSliderThumb = platformResource("mediaplayerSliderThumb",
+        "mediaplayerSliderThumbNew");
+    static Image* mediaVolumeSliderThumb = platformResource(
+        "mediaplayerVolumeSliderThumb",
+        "mediaplayerVolumeSliderThumbNew");
     int width = 0;
     int height = 0;
 
     Image* thumbImage = 0;
-    if (style.appearance() == MediaSliderThumbPart) {
+
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        // Volume and time sliders are the same.
+        thumbImage = mediaSliderThumb;
+        width = mediaSliderThumbTouchWidthNew;
+        height = mediaSliderThumbTouchHeightNew;
+    } else if (style.appearance() == MediaSliderThumbPart) {
         thumbImage = mediaSliderThumb;
         width = mediaSliderThumbWidth;
         height = mediaSliderThumbHeight;
     } else if (style.appearance() == MediaVolumeSliderThumbPart) {
         thumbImage = mediaVolumeSliderThumb;
         width = mediaVolumeSliderThumbWidth;
         height = mediaVolumeSliderThumbHeight;
     }
 
     float zoomLevel = style.effectiveZoom();
     if (thumbImage) {
         style.setWidth(Length(static_cast<int>(width * zoomLevel), Fixed));
         style.setHeight(Length(static_cast<int>(height * zoomLevel), Fixed));
     }
 }
 
 } // namespace blink