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);
+
+    // 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()
 {
     EventDispatchForbiddenScope::AllowUserAgentEvents allowEventsInShadow;
     const bool useNewUi = RuntimeEnabledFeatures::newMediaPlaybackUiEnabled();
     BatchedControlUpdate batch(this);
 
     m_allowHiddenVolumeControls = useNewUi;
 
@@ skipping 426 matching lines @@
 {
     // 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.
 
     if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
         return;
 
     // 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(),
         m_currentTimeDisplay.get(),
         m_volumeSlider.get(),
         m_castButton.get(),
         m_muteButton.get(),
         m_durationDisplay.get(),
     };
 
     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) {
         // No layout yet -- hide everything, then make them show up later.
         // 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;
+    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);
             }
         }
     }
 
     // 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
@@ skipping 20 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