New media playback UI.

Source/core/html/shadow/MediaControls.cpp

Index: Source/core/html/shadow/MediaControls.cpp
diff --git a/Source/core/html/shadow/MediaControls.cpp b/Source/core/html/shadow/MediaControls.cpp
index 17d1096113fffeb9acbde1c6aaa10e83a405b48e..ee00bb0e6ff8dcdf3bf4d44e15d7a49552803ae4 100644
--- a/Source/core/html/shadow/MediaControls.cpp
+++ b/Source/core/html/shadow/MediaControls.cpp
@@ -47,6 +47,26 @@ static bool fullscreenIsSupported(const Document& document)
     return !document.settings() || document.settings()->fullscreenSupported();
 }
 
+static bool preferHiddenVolumeSlider(const Document& document)
+{
+    return !document.settings() || document.settings()->preferHiddenVolumeSlider();
+}
+
+static bool preferHiddenMuteButton(const Document& document)
+{
+    return !document.settings() || document.settings()->preferHiddenMuteButton();
+}
+
+static bool allowHiddenAudioElements(const Document& document)
+{
+    // The new UI always allows this.  The old one doesn't, but it's
+    // convenient for tests if it can enable it.  This isn't included in the
+    // prefer...() functions because we have three different outcomes,
+    // especially for the mute button.
+    return RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()
+        || (document.settings() && document.settings()->forceAllowHiddenAudioElements());
+}
+
 MediaControls::MediaControls(HTMLMediaElement& mediaElement)
     : HTMLDivElement(mediaElement.document())
     , m_mediaElement(&mediaElement)
@@ -68,6 +88,8 @@ MediaControls::MediaControls(HTMLMediaElement& mediaElement)
     , m_hideTimerBehaviorFlags(IgnoreNone)
     , m_isMouseOverControls(false)
     , m_isPausedForScrubbing(false)
+    , m_panelWidthChangedTimer(this, &MediaControls::panelWidthChangedTimerFired)
+    , m_panelWidth(0)
 {
 }
 
@@ -89,9 +111,12 @@ PassRefPtrWillBeRawPtr<MediaControls> MediaControls::create(HTMLMediaElement& me
 // \-MediaControlPanelEnclosureElement                 (-webkit-media-controls-enclosure)
 //   \-MediaControlPanelElement                        (-webkit-media-controls-panel)
 //     +-MediaControlPlayButtonElement                 (-webkit-media-controls-play-button)
+//     | {if !RTE::newMediaPlaybackUi()}
 //     +-MediaControlTimelineElement                   (-webkit-media-controls-timeline)
 //     +-MediaControlCurrentTimeDisplayElement         (-webkit-media-controls-current-time-display)
 //     +-MediaControlTimeRemainingDisplayElement       (-webkit-media-controls-time-remaining-display)
+//     | {if RTE::newMediaPlaybackUi()}
+//     +-MediaControlTimelineElement                   (-webkit-media-controls-timeline)
 //     +-MediaControlMuteButtonElement                 (-webkit-media-controls-mute-button)
 //     +-MediaControlVolumeSliderElement               (-webkit-media-controls-volume-slider)
 //     +-MediaControlToggleClosedCaptionsButtonElement (-webkit-media-controls-toggle-closed-captions-button)
@@ -99,6 +124,7 @@ PassRefPtrWillBeRawPtr<MediaControls> MediaControls::create(HTMLMediaElement& me
 //     \-MediaControlFullscreenButtonElement           (-webkit-media-controls-fullscreen-button)
 void MediaControls::initializeControls()
 {
+    const bool useNewUi = RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
     RefPtrWillBeRawPtr<MediaControlOverlayEnclosureElement> overlayEnclosure = MediaControlOverlayEnclosureElement::create(*this);
 
     if (document().settings() && document().settings()->mediaControlsOverlayPlayButtonEnabled()) {
@@ -125,24 +151,37 @@ void MediaControls::initializeControls()
 
     RefPtrWillBeRawPtr<MediaControlTimelineElement> timeline = MediaControlTimelineElement::create(*this);
     m_timeline = timeline.get();
-    panel->appendChild(timeline.release());
+    // In old UX, timeline is before the time / duration text.
+    if (!useNewUi)
+        panel->appendChild(timeline.release());
+    // else we will attach it later.
 
     RefPtrWillBeRawPtr<MediaControlCurrentTimeDisplayElement> currentTimeDisplay = MediaControlCurrentTimeDisplayElement::create(*this);
     m_currentTimeDisplay = currentTimeDisplay.get();
-    m_currentTimeDisplay->hide();
+    m_currentTimeDisplay->setIsWanted(useNewUi);
+
     panel->appendChild(currentTimeDisplay.release());
 
     RefPtrWillBeRawPtr<MediaControlTimeRemainingDisplayElement> durationDisplay = MediaControlTimeRemainingDisplayElement::create(*this);
     m_durationDisplay = durationDisplay.get();
     panel->appendChild(durationDisplay.release());
 
+    // In new UX, timeline is after the time / duration text.
+    if (useNewUi)
+        panel->appendChild(timeline.release());
+
     RefPtrWillBeRawPtr<MediaControlMuteButtonElement> muteButton = MediaControlMuteButtonElement::create(*this);
     m_muteButton = muteButton.get();
     panel->appendChild(muteButton.release());
+    const bool allowHiddenAudio = allowHiddenAudioElements(document());
+    if (allowHiddenAudio && preferHiddenMuteButton(document()))
+        m_muteButton->setIsWanted(false);
 
     RefPtrWillBeRawPtr<MediaControlVolumeSliderElement> slider = MediaControlVolumeSliderElement::create(*this);
     m_volumeSlider = slider.get();
     panel->appendChild(slider.release());
+    if (allowHiddenAudio && preferHiddenVolumeSlider(document()))
+        m_volumeSlider->setIsWanted(false);
 
     RefPtrWillBeRawPtr<MediaControlToggleClosedCaptionsButtonElement> toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(*this);
     m_toggleClosedCaptionsButton = toggleClosedCaptionsButton.get();
@@ -165,10 +204,24 @@ void MediaControls::initializeControls()
 
 void MediaControls::reset()
 {
-    double duration = mediaElement().duration();
+    const bool useNewUi = RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
+    const double duration = mediaElement().duration();
     m_durationDisplay->setInnerText(LayoutTheme::theme().formatMediaControlsTime(duration), ASSERT_NO_EXCEPTION);
     m_durationDisplay->setCurrentValue(duration);
 
+    if (useNewUi) {
+        // Show everything that we might hide.
+        // If we don't have a duration, then mark it to be hidden.  For the
+        // old UI case, want / don't want is the same as show / hide since
+        // it is never marked as not fitting.
+        if (std::isfinite(duration))
+            m_durationDisplay->setIsWanted(true);
+        else
+            m_durationDisplay->setIsWanted(false);
+        m_currentTimeDisplay->setIsWanted(true);
+        m_timeline->setIsWanted(true);
+    }
+
     updatePlayState();
 
     updateCurrentTimeDisplay();
@@ -176,10 +229,6 @@ void MediaControls::reset()
     m_timeline->setDuration(duration);
     m_timeline->setPosition(mediaElement().currentTime());
 
-    if (!mediaElement().hasAudio())
-        m_volumeSlider->hide();
-    else
-        m_volumeSlider->show();
     updateVolume();
 
     refreshClosedCaptionsButtonVisibility();
@@ -189,14 +238,13 @@ void MediaControls::reset()
     // fullscreen is supported, we sometimes guess incorrectly and show
     // the button earlier, and we don't want to remove it here if the
     // user chose to enter fullscreen.  crbug.com/500732 .
-    if ((mediaElement().hasVideo() && fullscreenIsSupported(document()))
-        || mediaElement().isFullscreen())
-        m_fullScreenButton->show();
-    else
-        m_fullScreenButton->hide();
+    m_fullScreenButton->setIsWanted((mediaElement().hasVideo()
+        && fullscreenIsSupported(document()))
+        || mediaElement().isFullscreen());
 
-    refreshCastButtonVisibility();
+    refreshCastButtonVisibilityWithoutUpdate();
     makeOpaque();
+    changedControlSelections();
 }
 
 LayoutObject* MediaControls::layoutObjectForTextTrackLayout()
@@ -207,7 +255,7 @@ LayoutObject* MediaControls::layoutObjectForTextTrackLayout()
 void MediaControls::show()
 {
     makeOpaque();
-    m_panel->show();
+    m_panel->setIsWanted(true);
     m_panel->setIsDisplayed(true);
     if (m_overlayPlayButton)
         m_overlayPlayButton->updateDisplayType();
@@ -223,10 +271,10 @@ void MediaControls::mediaElementFocused()
 
 void MediaControls::hide()
 {
-    m_panel->hide();
+    m_panel->setIsWanted(false);
     m_panel->setIsDisplayed(false);
     if (m_overlayPlayButton)
-        m_overlayPlayButton->hide();
+        m_overlayPlayButton->setIsWanted(false);
 }
 
 void MediaControls::makeOpaque()
@@ -263,8 +311,10 @@ bool MediaControls::shouldHideMediaControls(unsigned behaviorFlags) const
 
 void MediaControls::playbackStarted()
 {
-    m_currentTimeDisplay->show();
-    m_durationDisplay->hide();
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        m_currentTimeDisplay->setIsWanted(true);
+        m_durationDisplay->setIsWanted(false);
+    }
 
     updatePlayState();
     m_timeline->setPosition(mediaElement().currentTime());
@@ -325,9 +375,9 @@ void MediaControls::updateCurrentTimeDisplay()
     double duration = mediaElement().duration();
 
     // After seek, hide duration display and show current time.
-    if (now > 0) {
-        m_currentTimeDisplay->show();
-        m_durationDisplay->hide();
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled() && now > 0) {
+        m_currentTimeDisplay->setIsWanted(true);
+        m_durationDisplay->setIsWanted(false);
     }
 
     // Allow the theme to format the time.
@@ -342,10 +392,34 @@ void MediaControls::updateVolume()
     if (LayoutObject* layoutObject = m_muteButton->layoutObject())
         layoutObject->setShouldDoFullPaintInvalidation();
 
-    if (mediaElement().muted())
+    if (mediaElement().muted()) {
         m_volumeSlider->setVolume(0);
-    else
+    } else {
         m_volumeSlider->setVolume(mediaElement().volume());
+    }
+
+    // Update the visibility of our audio elements.
+    // Old and new UI never want the volume slider if there's no audio.
+    // If there is audio, then we want it unless hiding audio is enabled and
+    // we prefer to hide it.
+    const bool allowHiddenAudio = allowHiddenAudioElements(document());
+    m_volumeSlider->setIsWanted(mediaElement().hasAudio()
+        && !(allowHiddenAudio && preferHiddenVolumeSlider(document())));
+
+    // The mute button is a little more complicated.  The old UI never
+    // sets it; it lets CSS choose.  The new UI does.  If we're allowing

[philipj_slow, 2015/07/10 14:51:59]

I would be nice if these descriptions were in terms of the settings and not
old/new UI, or they'll have to be rewritten later. Commenting on this line
because I couldn't parse "sets it".

I think all of this would be simpler if the question of when to show/hide the
mute button is decoupled from the old/new UI. To ship the new UI, first enable
the runtime flag, then fiddle with the settings on Android.

[liberato (no reviews please), 2015/07/10 15:32:19]

i agree that 'old' and 'new' are awful names.  i've tried to improve it in the
most recent CL, with mixed success.

since most of the references are immediately around the REF checks.  when the
flag goes away, the comments should get changed at the same time.  at least,
that's the best i can come up with. :(

+    // hidden audio, then we may set it.  Note that this is why
+    // allowHiddenAudio isn't rolled into prefer...().
+    if (allowHiddenAudio) {
+        // If there is no audio track, then hide the mute button.  If there
+        // is an audio track, then we always show the mute button unless
+        // we prefer to hide it and the media isn't muted.  If it's muted,
+        // then we show it to let the user unmute it.
+        m_muteButton->setIsWanted(mediaElement().hasAudio()
+            && (!preferHiddenMuteButton(document()) || mediaElement().muted()));
+    }
+
+
     // Invalidate the volume slider because it paints differently according to volume.
     if (LayoutObject* layoutObject = m_volumeSlider->layoutObject())
         layoutObject->setShouldDoFullPaintInvalidation();
@@ -358,10 +432,7 @@ void MediaControls::changedClosedCaptionsVisibility()
 
 void MediaControls::refreshClosedCaptionsButtonVisibility()
 {
-    if (mediaElement().hasClosedCaptions())
-        m_toggleClosedCaptionsButton->show();
-    else
-        m_toggleClosedCaptionsButton->hide();
+    m_toggleClosedCaptionsButton->setIsWanted(mediaElement().hasClosedCaptions());
 }
 
 static Element* elementFromCenter(Element& element)
@@ -376,14 +447,19 @@ static Element* elementFromCenter(Element& element)
 void MediaControls::tryShowOverlayCastButton()
 {
     // The element needs to be shown to have its dimensions and position.
-    m_overlayCastButton->show();
-
+    m_overlayCastButton->setIsWanted(true);
     if (elementFromCenter(*m_overlayCastButton) != &mediaElement())
-        m_overlayCastButton->hide();
+        m_overlayCastButton->setIsWanted(false);
 }
 
 void MediaControls::refreshCastButtonVisibility()
 {
+    refreshCastButtonVisibilityWithoutUpdate();
+    changedControlSelections();
+}
+
+void MediaControls::refreshCastButtonVisibilityWithoutUpdate()
+{
     if (mediaElement().hasRemoteRoutes()) {
         // The reason for the autoplay test is that some pages (e.g. vimeo.com) have an autoplay background video, which
         // doesn't autoplay on Chrome for Android (we prevent it) so starts paused. In such cases we don't want to automatically
@@ -391,19 +467,30 @@ void MediaControls::refreshCastButtonVisibility()
         // If a user does want to cast a paused autoplay video then they can still do so by touching or clicking on the
         // video, which will cause the cast button to appear.
         if (!mediaElement().shouldShowControls() && !mediaElement().autoplay() && mediaElement().paused()) {
-            showOverlayCastButton();
+            // Note that this is a case where we add the overlay cast button
+            // without wanting the panel cast button.  We depend on the fact
+            // that computeWhichControlsFit() won't change overlay cast button
+            // visibility in the case where the cast button isn't wanted.
+            // We don't call compute...() here, but it will be called as
+            // non-cast changes (e.g., resize) occur.  If the panel button
+            // is shown, however, compute...() will take control of the
+            // overlay cast button if it needs to hide it from the panel.
+            tryShowOverlayCastButton();
+            m_castButton->setIsWanted(false);
         } else if (mediaElement().shouldShowControls()) {
-            m_overlayCastButton->hide();
-            m_castButton->show();
-            // Check that the cast button actually fits on the bar.
-            if (m_fullScreenButton->getBoundingClientRect()->right() > m_panel->getBoundingClientRect()->right()) {
-                m_castButton->hide();
+            m_overlayCastButton->setIsWanted(false);
+            m_castButton->setIsWanted(true);
+            // Check that the cast button actually fits on the bar.  For the
+            // new ui, we let changedControlSelections() handle this.
+            if ( !RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()
+                && m_fullScreenButton->getBoundingClientRect()->right() > m_panel->getBoundingClientRect()->right()) {
+                m_castButton->setIsWanted(false);
                 tryShowOverlayCastButton();
             }
         }
     } else {
-        m_castButton->hide();
-        m_overlayCastButton->hide();
+        m_castButton->setIsWanted(false);
+        m_overlayCastButton->setIsWanted(false);
     }
 }
 
@@ -494,7 +581,7 @@ void MediaControls::hideMediaControlsTimerFired(Timer<MediaControls>*)
         return;
 
     makeTransparent();
-    m_overlayCastButton->hide();
+    m_overlayCastButton->setIsWanted(false);
 }
 
 void MediaControls::startHideMediaControlsTimer()
@@ -525,6 +612,88 @@ bool MediaControls::containsRelatedTarget(Event* event)
     return contains(relatedTarget->toNode());
 }
 
+void MediaControls::notifyPanelWidthChanged(int panelWidth)
+{
+    // Don't bother to do any work if this matches the most recent panel
+    // width, since we're called after layout.
+    if (panelWidth == 0)
+        return;
+
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        return;
+
+    m_panelWidth = panelWidth;
+    m_panelWidthChangedTimer.startOneShot(0, FROM_HERE);
+}
+
+void MediaControls::changedControlSelections()
+{
+    int panelWidth = m_panel->clientWidth();
+    // Don't short-circuit update if the panel hasn't changed.  The fit state
+    // is a function of the controls we want, so recompute if we can.
+    if (panelWidth == 0)
+        return;
+
+    m_panelWidth = panelWidth;
+    computeWhichControlsFit();
+}
+
+void MediaControls::panelWidthChangedTimerFired(Timer<MediaControls>*)
+{
+    computeWhichControlsFit();
+}
+
+void MediaControls::computeWhichControlsFit()
+{
+    // Hide all controls that don't fit, and show the ones that do.
+    // This might be better suited for a layout, but since JS media controls
+    // won't benefit from that anwyay, we just do it here like JS will.
+    // The order, in order of decreasing droppiness:
+    // Volume, time, seek bar, cast.
+
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        return;
+
+    if (!m_panelWidth)
+        return;
+
+    // Controls that we'll hide / show, in order of decreasing priority.
+    MediaControlElement* elements[] = {
+        m_playButton.get(),
+        m_toggleClosedCaptionsButton.get(),
+        m_fullScreenButton.get(),
+        m_timeline.get(),
+        m_currentTimeDisplay.get(),
+        m_volumeSlider.get(),
+        m_castButton.get(),
+        m_muteButton.get(),
+        m_durationDisplay.get(),
+    };
+
+    int usedWidth = 0;
+    bool droppedCastButton = false;
+    for (MediaControlElement* element : elements) {
+        if (!element)
+            continue;
+
+        if (element->isWanted()) {
+            if (usedWidth + element->minimumWidth() <= m_panelWidth) {
+                element->setDoesFit(true);
+                usedWidth += element->minimumWidth();
+            } else {
+                element->setDoesFit(false);
+                if (element == m_castButton.get())
+                    droppedCastButton = true;
+            }
+        }
+    }
+
+    // Special case for cast: if we want a cast button but dropped it, then
+    // show the overlay cast button instead.
+    if (m_castButton->isWanted())
+        m_overlayCastButton->setIsWanted(!droppedCastButton);
+}
+
 DEFINE_TRACE(MediaControls)
 {
     visitor->trace(m_mediaElement);