New media playback UI.

Source/core/paint/MediaControlsPainter.cpp

Index: Source/core/paint/MediaControlsPainter.cpp
diff --git a/Source/core/paint/MediaControlsPainter.cpp b/Source/core/paint/MediaControlsPainter.cpp
index 5fdfb85d4c1139ef76b236e4914d96bc80427625..d7829b94c174a0209be73b314991843bb6e87259 100644
--- a/Source/core/paint/MediaControlsPainter.cpp
+++ b/Source/core/paint/MediaControlsPainter.cpp
@@ -44,6 +44,28 @@ static double kCurrentTimeBufferedDelta = 1.0;
 typedef WTF::HashMap<const char*, Image*> MediaControlImageMap;
 static MediaControlImageMap* gMediaControlImageMap = 0;
 
+// Current UI slider thumbs sizes.
+const int mediaSliderThumbWidth = 32;
+const int mediaSliderThumbHeight = 24;
+const int mediaVolumeSliderThumbHeight = 24;
+const int mediaVolumeSliderThumbWidth = 24;
+
+// New UI slider thumb sizes, shard between time and volume.
+const int mediaSliderThumbTouchWidthNew = 36; // Touch zone size.
+const int mediaSliderThumbTouchHeightNew = 48;
+const int mediaSliderThumbPaintWidthNew = 12; // Painted area.
+const int mediaSliderThumbPaintHeightNew = 12;
+
+// New UI overlay play button size.
+const int mediaOverlayPlayButtonWidthNew = 48;
+const int mediaOverlayPlayButtonHeightNew = 48;
+
+// New UI slider bar height.
+const int mediaSliderBarHeight = 2;
+
+// Alpha for disabled elements.
+const float kDisabledAlpha = 0.4;
+
 static Image* platformResource(const char* name)
 {
     if (!gMediaControlImageMap)
@@ -58,15 +80,31 @@ static Image* platformResource(const char* name)
     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 transparentIfNewUi = false)
 {
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        transparentIfNewUi = false; // New UI only.
+
+    if (transparentIfNewUi) {
+        context->beginLayer(kDisabledAlpha);
+    }
     context->drawImage(image, rect);
+    if (transparentIfNewUi) {
+        context->endLayer();
+    }
+
     return true;
 }
 
@@ -76,14 +114,20 @@ bool MediaControlsPainter::paintMediaMuteButton(LayoutObject* object, const Pain
     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.

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

Is this by design? I was expecting the "waves" to follow along when dragging the
slider, but they don't.

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

i'll verify that this wasn't overlooked, but i believe that it is intentional.

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

it is intentional.

+    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);
@@ -103,12 +147,14 @@ bool MediaControlsPainter::paintMediaPlayButton(LayoutObject* object, const Pain
     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);
@@ -123,34 +169,66 @@ bool MediaControlsPainter::paintMediaOverlayPlayButton(LayoutObject* object, con
     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 is full-screen, so center.
+        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 IntRect adjustSliderRectIfNewUi(const IntRect& rect, const ComputedStyle& style)
+{
+    // If we're using the new UI, create a short, vertically centered rect.
+    // We don't specify this in CSS because it makes touch targets harder.
+    // Instead, we just adjust the drawing rect.  If we're not using the
+    // new UI, then do nothing.
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        return rect;
+
+    IntRect adjustedRect(rect);
+    float zoomedHeight = mediaSliderBarHeight * style.effectiveZoom();
+    adjustedRect.setY(rect.center().y() - zoomedHeight / 2);
+    adjustedRect.setHeight(zoomedHeight);
+
+    return adjustedRect;
+}
+
+static void paintRoundedSliderBackground(const IntRect& rect, const ComputedStyle& style, GraphicsContext* context, Color sliderBackgroundColor )
 {
-    int borderRadius = rect.height() / 2;
+    IntRect adjustedRect(adjustSliderRectIfNewUi(rect, style));
+    int borderRadius = adjustedRect.height() / 2;
     IntSize radii(borderRadius, borderRadius);
-    Color sliderBackgroundColor = Color(11, 11, 11);
-    context->fillRoundedRect(FloatRoundedRect(rect, radii, radii, radii, radii), sliderBackgroundColor);
+
+    context->fillRoundedRect(FloatRoundedRect(adjustedRect, radii, radii, radii, radii), sliderBackgroundColor);
 }
 
 static void paintSliderRangeHighlight(const IntRect& rect, const ComputedStyle& style, GraphicsContext* context, int startPosition, int endPosition, Color startColor, Color endColor)
 {
+    IntRect adjustedRect(adjustSliderRectIfNewUi(rect, style));
+
     // 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;
+    int borderRadius = adjustedRect.height() / 2;
     IntSize radii(borderRadius, borderRadius);
 
     // Calculate highlight rectangle and edge dimensions.
     int startOffset = startPosition;
-    int endOffset = rect.width() - endPosition;
+    int endOffset = adjustedRect.width() - endPosition;
     int rangeWidth = endPosition - startPosition;
 
     if (rangeWidth <= 0)
@@ -163,7 +241,7 @@ static void paintSliderRangeHighlight(const IntRect& rect, const ComputedStyle&
         rangeWidth = borderRadius;
 
     // Set rectangle to highlight range.
-    IntRect highlightRect = rect;
+    IntRect highlightRect = adjustedRect;
     highlightRect.move(startOffset, 0);
     highlightRect.setWidth(rangeWidth);
 
@@ -195,7 +273,6 @@ static void paintSliderRangeHighlight(const IntRect& rect, const ComputedStyle&
     context->restore();
 }
 
-const int mediaSliderThumbWidth = 32;
 
 bool MediaControlsPainter::paintMediaSlider(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
 {
@@ -206,15 +283,31 @@ bool MediaControlsPainter::paintMediaSlider(LayoutObject* object, const PaintInf
     const ComputedStyle& style = object->styleRef();
     GraphicsContext* context = paintInfo.context;
 
-    paintRoundedSliderBackground(rect, style, context);
+    // Should we paint the new UI grayed out?
+    bool drawNewUiGrayed = !hasSource(mediaElement) && RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
+    if (drawNewUiGrayed) {
+        context->beginLayer(kDisabledAlpha);
+    }
+
+    // Paint the slider bar in the "no data buffered" state.
+    Color sliderBackgroundColor;
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        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))
+    if (std::isnan(duration) || std::isinf(duration) || !duration || std::isnan(currentTime)) {
+        if (drawNewUiGrayed)
+            context->endLayer();
         return true;
+    }
 
     for (unsigned i = 0; i < bufferedTimeRanges->length(); ++i) {
         float start = bufferedTimeRanges->start(i, ASSERT_NO_EXCEPTION);
@@ -233,30 +326,71 @@ bool MediaControlsPainter::paintMediaSlider(LayoutObject* object, const PaintInf
         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 (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+            // 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 highlight before current time.
+        Color startColor;
+        Color endColor;
+        if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+            startColor = Color(195, 195, 195); // white-ish.
+            endColor = Color(217, 217, 217);
+        } else {
+            startColor = endColor = Color(0x42, 0x85, 0xf4); // blue.
+        }
 
-        // Draw white-ish highlight before current time.
-        Color startColor = Color(195, 195, 195);
-        Color endColor = Color(217, 217, 217);
         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 (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+            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);
 
+        if (drawNewUiGrayed)
+            context->endLayer();
         return true;
     }
 
+    if (drawNewUiGrayed)
+        context->endLayer();
+
     return true;
 }
 
+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;
+    }
+
+    float zoomLevel = style.effectiveZoom();
+    int zoomedPaintWidth = mediaSliderThumbPaintWidthNew * zoomLevel;
+    int zoomedPaintHeight = mediaSliderThumbPaintHeightNew * zoomLevel;
+
+    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())
@@ -270,11 +404,12 @@ bool MediaControlsPainter::paintMediaSliderThumb(LayoutObject* object, const Pai
         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);
@@ -284,7 +419,13 @@ bool MediaControlsPainter::paintMediaVolumeSlider(LayoutObject* object, const Pa
     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();
@@ -297,15 +438,22 @@ bool MediaControlsPainter::paintMediaVolumeSlider(LayoutObject* object, const Pa
 
     // 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);
 
@@ -324,8 +472,14 @@ bool MediaControlsPainter::paintMediaVolumeSliderThumb(LayoutObject* object, con
     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)
@@ -334,8 +488,20 @@ bool MediaControlsPainter::paintMediaFullscreenButton(LayoutObject* object, cons
     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
+    // full screen mode.
+    static Image* mediaEnterFullscreenButton = platformResource(
+        "mediaplayerFullscreen",
+        "mediaplayerEnterFullscreen");
+    static Image* mediaExitFullscreenButton = platformResource(
+        "mediaplayerFullscreen",
+        "mediaplayerExitFullscreen");
+
+    bool isEnabled = hasSource(mediaElement);
+
+    if (mediaControlElementType(object->node()) == MediaExitFullscreenButton)
+        return paintMediaButton(paintInfo.context, rect, mediaExitFullscreenButton, !isEnabled);

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

Is there a test that would fail if the enter fullscreen button were always
drawn? There have been a few bugs around invalidation for the different button
states, and although I think this will work by virtue of
MediaControlElement::setDisplayType invalidating, a test to lock it down would
be nice.

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

good point.  will add.

+    return paintMediaButton(paintInfo.context, rect, mediaEnterFullscreenButton, !isEnabled);
 }
 
 bool MediaControlsPainter::paintMediaToggleClosedCaptionsButton(LayoutObject* object, const PaintInfo& paintInfo, const IntRect& rect)
@@ -344,13 +510,18 @@ bool MediaControlsPainter::paintMediaToggleClosedCaptionsButton(LayoutObject* ob
     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);
 
     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)
@@ -359,18 +530,23 @@ bool MediaControlsPainter::paintMediaCastButton(LayoutObject* object, const Pain
     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:
@@ -379,18 +555,24 @@ bool MediaControlsPainter::paintMediaCastButton(LayoutObject* object, const Pain
     }
 }
 
-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;