Adding overflow menu to media player

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

Index: third_party/WebKit/Source/core/html/shadow/MediaControls.cpp
diff --git a/third_party/WebKit/Source/core/html/shadow/MediaControls.cpp b/third_party/WebKit/Source/core/html/shadow/MediaControls.cpp
index 8c0f1083541509794c61c292e4bc9b1401602d05..22a14d7bc3d8c69350afe1c49b10895c5646100d 100644
--- a/third_party/WebKit/Source/core/html/shadow/MediaControls.cpp
+++ b/third_party/WebKit/Source/core/html/shadow/MediaControls.cpp
@@ -42,6 +42,9 @@ namespace blink {
 // 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
@@ -117,6 +120,7 @@ MediaControls::MediaControls(HTMLMediaElement& mediaElement)
     , m_volumeSlider(nullptr)
     , m_toggleClosedCaptionsButton(nullptr)
     , m_textTrackList(nullptr)
+    , m_overflowList(nullptr)
     , m_castButton(nullptr)
     , m_fullScreenButton(nullptr)
     , m_hideMediaControlsTimer(this, &MediaControls::hideMediaControlsTimerFired)
@@ -242,6 +246,21 @@ void MediaControls::initializeControls()
     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()
@@ -433,6 +452,7 @@ void MediaControls::updateCurrentTimeDisplay()
 void MediaControls::updateVolume()
 {
     m_muteButton->updateDisplayType();
+
     // Invalidate the mute button because it paints differently according to volume.
     invalidate(m_muteButton);
 
@@ -730,6 +750,7 @@ void MediaControls::computeWhichControlsFit()
         return;
     }
 
+    int numOverflowElements = 0;
     // For each control that fits, enable it in order of decreasing priority.
     bool droppedCastButton = false;
     for (MediaControlElement* element : elements) {
@@ -740,14 +761,27 @@ void MediaControls::computeWhichControlsFit()
             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()) {
@@ -784,6 +818,16 @@ void MediaControls::networkStateChanged()
     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);
@@ -800,6 +844,8 @@ DEFINE_TRACE(MediaControls)
     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);