Remove current time popup during scrubbing on the modern media controls

This CL removes the code that created the current time scrubbing popup
in the modern media controls. It also changes the CSS to show the
button panel during scrubbing.

Bug: 817591, 816442
Change-Id: I8ad2bd5a634f0706884ca6648a36f506af620c23
Reviewed-on: https://chromium-review.googlesource.com/964904Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543746}

third_party/WebKit/LayoutTests/media/controls/modern/scrubbing-touch.html

@@ -9,7 +9,6 @@
 async_test(t => {
   const video = document.querySelector('video');
   const timeline = timelineElement(video);
-  const timeElement = timelineThumbCurrentTime(video);
   const thumb = timelineThumb(video);
 
   video.addEventListener('playing', t.step_func(() => {
@@ -30,9 +29,6 @@ async_test(t => {
 
     // Check the scrubbing UI is shown with the correct time.
     checkControlsClassName(video, 'phase-ready state-scrubbing');
-    assert_equals('', timeElement.style.display);
-    assert_equals('0:' + Math.round(video.currentTime),
-        timeElement.textContent);
 
     // Ensure that the timeline now has a value in the middle.
     assert_equals(30, Math.round(timeline.value));
@@ -40,9 +36,6 @@ async_test(t => {
     // Add an event listener for when we start playing again after seeking.
     video.addEventListener('playing', t.step_func_done(() => {
       checkControlsClassName(video, 'phase-ready state-playing');
-
-      // Check the scrubbing UI is no longer shown.
-      assert_equals('none', timeElement.style.display);
     }), { once: true });
 
     // Release the touch.

third_party/WebKit/LayoutTests/media/controls/modern/scrubbing.html

@@ -19,7 +19,6 @@ async_test(t => {
   document.body.appendChild(video);
 
   const timeline = timelineElement(video);
-  const timeElement = timelineThumbCurrentTime(video);
   const thumb = timelineThumb(video);
   const scrubbingMessage = scrubbingMessageElement(video);
 
@@ -35,9 +34,6 @@ async_test(t => {
       assert_true(seeked);
       checkControlsClassName(video, 'phase-ready state-playing');
 
-      // Check the scrubbing UI is no longer shown.
-      assert_equals('none', timeElement.style.display);
-
       // Check the scrubbing message is no longer shown.
       assert_false(isControlVisible(scrubbingMessage));
     }), { once: true });
@@ -60,11 +56,6 @@ async_test(t => {
   video.addEventListener('seeking', t.step_func(() => {
     checkControlsClassName(video, 'phase-ready state-scrubbing');
 
-    // Check the scrubbing UI is shown with the correct time.
-    assert_equals('', timeElement.style.display);
-    assert_equals('0:' + Math.round(video.currentTime),
-        timeElement.textContent);
-
     // Check the scrubbing message is shown.
     assert_true(isControlVisible(scrubbingMessage));
   }), { once: true });

third_party/WebKit/LayoutTests/media/media-controls.js

@@ -222,15 +222,6 @@ function timelineThumb(videoElement) {
     return thumb;
 }
 
-function timelineThumbCurrentTime(videoElement) {
-    const controlID = '-internal-media-controls-thumb-current-time';
-    const timeline = timelineElement(videoElement);
-    const thumb = mediaControlsElement(window.internals.shadowRoot(timeline).firstChild, controlID);
-    if (!thumb)
-        throw 'Failed to find timeline current time';
-    return thumb;
-}
-
 function scrubbingMessageElement(videoElement) {
     var controlID = '-internal-media-controls-scrubbing-message';
     var button = mediaControlsElement(window.internals.shadowRoot(videoElement).firstChild, controlID);

third_party/WebKit/Source/modules/media_controls/elements/MediaControlTimelineElement.cpp

@@ -24,7 +24,6 @@
 #include "core/style/ComputedStyle.h"
 #include "modules/media_controls/MediaControlsImpl.h"
 #include "modules/media_controls/MediaControlsResourceLoader.h"
-#include "modules/media_controls/elements/MediaControlCurrentTimeDisplayElement.h"
 #include "modules/media_controls/elements/MediaControlElementsHelper.h"
 #include "platform/runtime_enabled_features.h"
 #include "public/platform/Platform.h"
@@ -52,8 +51,6 @@ namespace blink {
 // MediaControlTimelineElement
 //   (-webkit-media-controls-timeline)
 // +-div#thumb (created by the HTMLSliderElement)
-//  +-MediaControlCurrentTimeDisplayElement#thumb-current-time
-//    {if IsModern() and IsHTMLVideoElement()}
 //
 //   The child elements are only present if MediaControlsImpl::IsModern() is
 //   enabled. These three <div>'s are used to show the buffering animation.
@@ -63,8 +60,7 @@ namespace blink {
 // +-HTMLStyleElement
 MediaControlTimelineElement::MediaControlTimelineElement(
     MediaControlsImpl& media_controls)
-    : MediaControlSliderElement(media_controls, kMediaSlider),
-      current_time_display_(nullptr) {
+    : MediaControlSliderElement(media_controls, kMediaSlider) {
   SetShadowPseudoId(AtomicString("-webkit-media-controls-timeline"));
 
   if (MediaControlsImpl::IsModern()) {
@@ -76,21 +72,6 @@ MediaControlTimelineElement::MediaControlTimelineElement(
     MediaControlElementsHelper::CreateDiv("-internal-track-segment-buffering",
                                           &track);
 
-    // Create the current time scrubbing element.
-    if (MediaElement().IsHTMLVideoElement()) {
-      Element* thumb = track.getElementById("thumb");
-      DCHECK(thumb);
-
-      // The time display should have a have a timeline-specific pseudo ID. This
-      // is to ensure it does not pick up styles from the current time display.
-      current_time_display_ =
-          new MediaControlCurrentTimeDisplayElement(GetMediaControls());
-      current_time_display_->setAttribute(
-          "pseudo", "-internal-media-controls-thumb-current-time");
-      current_time_display_->SetIsWanted(false);
-      thumb->AppendChild(current_time_display_);
-    }
-
     // This stylesheet element contains rules that cannot be present in the UA
     // stylesheet (e.g. animations).
     auto* style = HTMLStyleElement::Create(GetDocument(), CreateElementFlags());
@@ -142,17 +123,11 @@ void MediaControlTimelineElement::DefaultEventHandler(Event* event) {
         ShadowElementNames::SliderThumb());
     bool started_from_thumb = thumb && thumb == event->target()->ToNode();
     metrics_.StartGesture(started_from_thumb);
-
-    if (current_time_display_)
-      current_time_display_->SetIsWanted(true);
   } else if (EndScrubbingEvent(*event)) {
     Platform::Current()->RecordAction(
         UserMetricsAction("Media.Controls.ScrubbingEnd"));
     GetMediaControls().EndScrubbing();
     metrics_.RecordEndGesture(TrackWidth(), MediaElement().duration());
-
-    if (current_time_display_)
-      current_time_display_->SetIsWanted(false);
   }
 
   if (event->type() == EventTypeNames::keydown) {
@@ -183,22 +158,6 @@ void MediaControlTimelineElement::DefaultEventHandler(Event* event) {
   }
 
   double time = value().ToDouble();
-
-  // Update the scrubbing UI with the current time.
-  if (current_time_display_) {
-    current_time_display_->SetCurrentValue(time);
-
-    // Set the margin left based on the new width of the text so we are
-    // correctly centered.
-    if (LayoutBox* box = current_time_display_->GetLayoutBox()) {
-      String margin_left =
-          WTF::String::Number(ceil(box->LogicalWidth().Round() / 2) * -1) +
-          "px";
-      current_time_display_->style()->setProperty(
-          &GetDocument(), "margin-left", margin_left, "", ASSERT_NO_EXCEPTION);
-    }
-  }
-
   double duration = MediaElement().duration();
   // Workaround for floating point error - it's possible for this element's max
   // attribute to be rounded to a value slightly higher than the duration. If
@@ -294,7 +253,6 @@ void MediaControlTimelineElement::RenderBarSegments() {
 
 void MediaControlTimelineElement::Trace(blink::Visitor* visitor) {
   MediaControlSliderElement::Trace(visitor);
-  visitor->Trace(current_time_display_);
 }
 
 bool MediaControlTimelineElement::BeginScrubbingEvent(Event& event) {
@@ -313,8 +271,6 @@ void MediaControlTimelineElement::OnControlsHidden() {
 
   // End scrubbing state.
   is_touching_ = false;
-  if (current_time_display_)
-    current_time_display_->SetIsWanted(false);
 }
 
 void MediaControlTimelineElement::OnControlsShown() {

third_party/WebKit/Source/modules/media_controls/elements/MediaControlTimelineElement.h

@@ -13,7 +13,6 @@ namespace blink {
 
 class Event;
 class HTMLDivElement;
-class MediaControlCurrentTimeDisplayElement;
 class MediaControlsImpl;
 
 class MediaControlTimelineElement : public MediaControlSliderElement {
@@ -56,8 +55,6 @@ class MediaControlTimelineElement : public MediaControlSliderElement {
 
   MediaControlTimelineMetrics metrics_;
 
-  Member<MediaControlCurrentTimeDisplayElement> current_time_display_;
-
   bool is_touching_ = false;
 
   bool controls_hidden_ = false;

third_party/WebKit/Source/modules/media_controls/resources/modernMediaControls.css

@@ -333,28 +333,6 @@ video::-webkit-media-controls:not(.audio-only) input[pseudo="-webkit-media-contr
   box-shadow: 0 2px 10px 0 rgba(0,0,0,0.5);
 }
 
-/* thumb-current-time CSS here instead of in the scoped CSS so we can hide on
- * audio-only. */
-input[pseudo="-webkit-media-controls-timeline" i]::-internal-media-controls-thumb-current-time {
-  position: absolute;
-  height: 16px;
-  left: 5px;
-  bottom: 16px;
-  padding: 4px 12px;
-  opacity: 0.9;
-  background: #FFFFFF;
-  border-radius: 100px;
-  font-family: Roboto-Regular, Roboto, sans-serif;
-  font-size: 14px;
-  color: #000000;
-  letter-spacing: 0;
-  text-shadow: 0 0 10px #FFFFFF;
-}
-
-video::-webkit-media-controls.audio-only input[pseudo="-webkit-media-controls-timeline"]::-internal-media-controls-thumb-current-time {
-  display: none;
-}
-
 input[pseudo="-webkit-media-controls-timeline" i]::-webkit-slider-thumb {
   -webkit-appearance: -internal-media-control;
   background: rgba(0, 0, 0, .87);
@@ -694,7 +672,6 @@ video::-internal-media-controls-scrubbing-message {
   color: #FFFFFF;
 }
 
-.state-scrubbing div[pseudo="-internal-media-controls-button-panel" i],
 .state-scrubbing input[pseudo="-webkit-media-controls-overlay-play-button" i] {
   display: none;
 }