Adding overflow menu to media player

third_party/WebKit/Source/core/html/shadow/MediaControls.cpp

 /*
  * Copyright (C) 2011, 2012 Apple Inc. All rights reserved.
  * Copyright (C) 2011, 2012 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.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 24 matching lines @@
 #include "core/html/track/TextTrackContainer.h"
 #include "core/layout/LayoutTheme.h"
 #include "platform/EventDispatchForbiddenScope.h"
 
 namespace blink {
 
 // If you change this value, then also update the corresponding value in
 // LayoutTests/media/media-controls.js.
 static const double timeWithoutMouseMovementBeforeHidingMediaControls = 3;
 
+// We only want to show the overflow menu if it contains at least two buttons
+static const int minOverflowMenuControlElementsNum = 2;
+
 static bool shouldShowFullscreenButton(const HTMLMediaElement& mediaElement)
 {
     // Unconditionally allow the user to exit fullscreen if we are in it
     // now.  Especially on android, when we might not yet know if
     // 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.isFullscreen())
         return true;
 
@@ skipping 55 matching lines @@
     , m_enclosure(nullptr)
     , m_panel(nullptr)
     , m_playButton(nullptr)
     , m_timeline(nullptr)
     , m_currentTimeDisplay(nullptr)
     , m_durationDisplay(nullptr)
     , m_muteButton(nullptr)
     , m_volumeSlider(nullptr)
     , m_toggleClosedCaptionsButton(nullptr)
     , m_textTrackList(nullptr)
+    , m_overflowList(nullptr)
     , m_castButton(nullptr)
     , m_fullScreenButton(nullptr)
     , m_hideMediaControlsTimer(this, &MediaControls::hideMediaControlsTimerFired)
     , m_hideTimerBehaviorFlags(IgnoreNone)
     , m_isMouseOverControls(false)
     , m_isPausedForScrubbing(false)
     , m_panelWidthChangedTimer(this, &MediaControls::panelWidthChangedTimerFired)
     , m_panelWidth(0)
     , m_allowHiddenVolumeControls(RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
 {
@@ skipping 105 matching lines @@
 
     m_panel = panel;
     enclosure->appendChild(panel);
 
     m_enclosure = enclosure;
     appendChild(enclosure);
 
     MediaControlTextTrackListElement* textTrackList = MediaControlTextTrackListElement::create(*this);
     m_textTrackList = textTrackList;
     appendChild(textTrackList);
+
+    MediaControlOverflowMenuButtonElement* overflowMenu = MediaControlOverflowMenuButtonElement::create(*this);
+    m_overflowMenu = overflowMenu;
+    panel->appendChild(overflowMenu);
+
+    MediaControlOverflowMenuListElement* overflowList = MediaControlOverflowMenuListElement::create(*this);
+    m_overflowList = overflowList;
+    appendChild(overflowList);
+
+    std::vector<MediaControlInputElement*> buttons = { m_toggleClosedCaptionsButton,

[kdsilva, 2016/08/27 14:20:50]

Ideally here, we’d iterate through all of the children of `panel` and check
which ones have hasOverflowButton() return true rather than create an array. I
don’t know what the “best” way is to do that. It looks like ContainerNode.h has
a .children() method, but that returns a HTMLCollection* which isn’t exactly
what we want. Any suggestions?

[liberato (no reviews please), 2016/08/30 16:42:06]

please see the comment by fs in https://codereview.chromium.org/2235473002/ for
a possible approach.  don't know if it's exactly what you want or not.

the problem is that iterating then adding the items doesn't let you control the
order in which they show up in the overflow menu.  unless it's the same as the
panel order, then i'm not sure that you can get away from having at least one
array with them in the proper (UX) order.

+        m_fullScreenButton, m_muteButton, m_castButton };
+
+    for (MediaControlInputElement* elem : buttons) {
+        m_overflowList->appendChild(elem->initOverflowButton(*this));
+    }
 }
 
 void MediaControls::reset()
 {
     EventDispatchForbiddenScope::AllowUserAgentEvents allowEventsInShadow;
     const bool useNewUi = RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
     BatchedControlUpdate batch(this);
 
     m_allowHiddenVolumeControls = useNewUi;
 
@@ skipping 171 matching lines @@
     }
 
     // Allow the theme to format the time.
     m_currentTimeDisplay->setInnerText(LayoutTheme::theme().formatMediaControlsCurrentTime(now, duration), IGNORE_EXCEPTION);
     m_currentTimeDisplay->setCurrentValue(now);
 }
 
 void MediaControls::updateVolume()
 {
     m_muteButton->updateDisplayType();
+
     // Invalidate the mute button because it paints differently according to volume.
     invalidate(m_muteButton);
 
     if (mediaElement().muted())
         m_volumeSlider->setVolume(0);
     else
         m_volumeSlider->setVolume(mediaElement().volume());
 
     // Update the visibility of our audio elements.
     // We never want the volume slider if there's no audio.
@@ skipping 277 matching lines @@
         // This prevents the wrong controls from being shown briefly
         // immediately after the first layout and paint, but before we have
         // a chance to revise them.
         for (MediaControlElement* element : elements) {
             if (element)
                 element->setDoesFit(false);
         }
         return;
     }
 
+    int numOverflowElements = 0;
     // For each control that fits, enable it in order of decreasing priority.
     bool droppedCastButton = false;
     for (MediaControlElement* element : elements) {
         if (!element)
             continue;
 
         if (element->isWanted()) {
             if (usedWidth + minimumWidth <= m_panelWidth) {
                 element->setDoesFit(true);
                 usedWidth += minimumWidth;
+                element->shouldShowButtonInOverflowMenu(false);
             } else {
                 element->setDoesFit(false);
                 if (element == m_castButton.get())
                     droppedCastButton = true;
+                element->shouldShowButtonInOverflowMenu(true);
+                if (element->hasOverflowButton())
+                    numOverflowElements++;
             }
         }
     }
 
+    // We display an overflow menu only when we have at least two items
+    // within it.
+    if (numOverflowElements >= minOverflowMenuControlElementsNum) {
+        m_overflowMenu->setIsWanted(true);
+    } else {
+        m_overflowMenu->setIsWanted(false);
+        m_overflowList->showOverflowMenu(false);
+    }
+
     // Special case for cast: if we want a cast button but dropped it, then
     // show the overlay cast button instead.
     if (m_castButton->isWanted()) {
         if (droppedCastButton)
             m_overlayCastButton->tryShowOverlay();
         else
             m_overlayCastButton->setIsWanted(false);
     }
 }
 
@@ skipping 16 matching lines @@
 void MediaControls::networkStateChanged()
 {
     invalidate(m_playButton);
     invalidate(m_overlayPlayButton);
     invalidate(m_muteButton);
     invalidate(m_fullScreenButton);
     invalidate(m_timeline);
     invalidate(m_volumeSlider);
 }
 
+bool MediaControls::overflowMenuVisible()
+{
+    return m_overflowList->isWanted();
+}
+
+void MediaControls::toggleOverflowMenu()
+{
+    m_overflowList->showOverflowMenu(!m_overflowList->isWanted());
+}
+
 DEFINE_TRACE(MediaControls)
 {
     visitor->trace(m_mediaElement);
     visitor->trace(m_panel);
     visitor->trace(m_overlayPlayButton);
     visitor->trace(m_overlayEnclosure);
     visitor->trace(m_playButton);
     visitor->trace(m_currentTimeDisplay);
     visitor->trace(m_timeline);
     visitor->trace(m_muteButton);
     visitor->trace(m_volumeSlider);
     visitor->trace(m_toggleClosedCaptionsButton);
     visitor->trace(m_fullScreenButton);
     visitor->trace(m_durationDisplay);
     visitor->trace(m_enclosure);
     visitor->trace(m_textTrackList);
+    visitor->trace(m_overflowMenu);
+    visitor->trace(m_overflowList);
     visitor->trace(m_castButton);
     visitor->trace(m_overlayCastButton);
     HTMLDivElement::trace(visitor);
 }
 
 } // namespace blink