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..44ba422ac26d346120ce47e7a0d03099a2147942 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);
+
+    // The order in which we append elements to the overflow list does matter.
+    m_overflowList->appendChild(m_muteButton->createOverflowElement(*this, MediaControlMuteButtonElement::create(*this)));
+    m_overflowList->appendChild(m_castButton->createOverflowElement(*this, MediaControlCastButtonElement::create(*this, false)));
+    m_overflowList->appendChild(m_toggleClosedCaptionsButton->createOverflowElement(*this, MediaControlToggleClosedCaptionsButtonElement::create(*this)));
+    m_overflowList->appendChild(m_fullScreenButton->createOverflowElement(*this, MediaControlFullscreenButtonElement::create(*this)));
+    m_overflowList->appendChild(m_playButton->createOverflowElement(*this, MediaControlPlayButtonElement::create(*this)));
 }
 
 void MediaControls::reset()
@@ -688,7 +707,8 @@ void MediaControls::computeWhichControlsFit()
 
     // Controls that we'll hide / show, in order of decreasing priority.
     MediaControlElement* elements[] = {
-        // Exclude m_playButton; we handle it specially.
+        // Exclude m_overflowMenu; we handle it specially.
+        m_playButton.get(),
         m_fullScreenButton.get(),
         m_toggleClosedCaptionsButton.get(),
         m_timeline.get(),
@@ -702,20 +722,18 @@ void MediaControls::computeWhichControlsFit()
     int usedWidth = 0;
 
     // Assume that all controls require 48px, unless we can get the computed
-    // style for the play button.  Since the play button is always shown, it
-    // should be available the first time we're called after layout.  This will
+    // style for the play button.  Since the play button or overflow is always
+    // shown, one of the two buttons should be available the first time we're
+    // called after layout.  This will
     // also be the first time we have m_panelWidth!=0, so it won't matter if
     // we get this wrong before that.
     int minimumWidth = 48;
     if (m_playButton->layoutObject() && m_playButton->layoutObject()->style()) {
         const ComputedStyle* style = m_playButton->layoutObject()->style();
         minimumWidth = ceil(style->width().pixels() / style->effectiveZoom());
-    }
-
-    // Special-case the play button; it always fits.
-    if (m_playButton->isWanted()) {
-        m_playButton->setDoesFit(true);
-        usedWidth += minimumWidth;
+    } else if (m_overflowMenu->layoutObject() && m_overflowMenu->layoutObject()->style()) {
+        const ComputedStyle* style = m_overflowMenu->layoutObject()->style();
+        minimumWidth = ceil(style->width().pixels() / style->effectiveZoom());
     }

[mlamouri (slow - plz ping), 2016/09/06 10:25:45]

Why is this needed?

[kdsilva, 2016/09/06 17:32:46]

Acknowledged.

 
     if (!m_panelWidth) {
@@ -730,20 +748,49 @@ void MediaControls::computeWhichControlsFit()
         return;
     }
 
+    int numOverflowElements = 0;
+    int widthWithOverflowMenu = minimumWidth;
+    // We take one pass assuming that we do have an overflow menu button
+    // displayed in the media controls. If it's presence results in at least
+    // two buttons in the overflow menu, we should show the overflow menu.
+    for (MediaControlElement* element : elements) {
+        if (element && element->isWanted()) {
+            if (widthWithOverflowMenu + minimumWidth <= m_panelWidth) {
+                widthWithOverflowMenu += minimumWidth;
+            } else {
+                if (element->hasOverflowButton())
+                    numOverflowElements++;
+            }
+        }
+    }

[mlamouri (slow - plz ping), 2016/09/06 10:25:45]

Do you have a test for this?

I would recommend something like this:
```
m_overflowMenu->setDoesFit(true);
m_overflowMenu->setIsWanted(true);
usedWidth = minimumWidth;

// Go trough the algorithm that updated the used width below.
// Count how many elements end up in the overflow menu.
// If 0:
m_overflowMenu->setIsWanted(false);
usedWidth -= minimumWidth;
// If 1:
m_overflowMenu->setIsWanted(false);
theElementInOverflowMenu->setIsWanted(true);
// Otherwise: do nothing.

[kdsilva, 2016/09/06 17:32:46]

Done. 

+
+    // We display an overflow menu only when we have at least two items
+    // within it.
+    if (numOverflowElements >= minOverflowMenuControlElementsNum) {
+        m_overflowMenu->setDoesFit(true);
+        m_overflowMenu->setIsWanted(true);
+        usedWidth = minimumWidth;
+    } else {
+        m_overflowMenu->setIsWanted(false);
+        m_overflowList->showOverflowMenu(false);
+    }
+
     // For each control that fits, enable it in order of decreasing priority.
     bool droppedCastButton = false;
     for (MediaControlElement* element : elements) {
         if (!element)
             continue;
-
+        element->shouldShowButtonInOverflowMenu(false);
         if (element->isWanted()) {
             if (usedWidth + minimumWidth <= m_panelWidth) {
                 element->setDoesFit(true);
                 usedWidth += minimumWidth;
+                element->shouldShowButtonInOverflowMenu(false);

[mlamouri (slow - plz ping), 2016/09/06 10:25:45]

I don't think you need this.

[kdsilva, 2016/09/06 17:32:46]

Done.

             } else {
                 element->setDoesFit(false);
                 if (element == m_castButton.get())
                     droppedCastButton = true;
+                element->shouldShowButtonInOverflowMenu(true);
             }
         }
     }
@@ -784,6 +831,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 +857,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);