Reland "[Media Controls] Added animation to overflow menu"

Change-Id: Ic3f0448ae77c9226421132ce911181f53b5ceb7d
Reviewed-on: https://chromium-review.googlesource.com/c/1303099Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Jazz Xu <jazzhsu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#603271}

third_party/WebKit/LayoutTests/TestExpectations

@@ -529,6 +529,10 @@ crbug.com/724701 overflow/overflow-basic-004.html [ Failure ]
 
 crbug.com/846753 [ Mac ] http/tests/media/reload-after-dialog.html [ Failure Pass Timeout ]
 
+crbug.com/899391 [ Mac ] media/controls/overflow-menu-toggle-class-for-animation.html [ Failure Pass ]
+crbug.com/899391 [ Mac ] virtual/new-remote-playback-pipeline/media/controls/overflow-menu-toggle-class-for-animation.html [ Failure Pass ]
+crbug.com/899391 [ Mac ] virtual/video-surface-layer/media/controls/overflow-menu-toggle-class-for-animation.html [ Failure Pass ]
+
 ### external/wpt/css/css-tables/
 crbug.com/598134 external/wpt/css/css-tables/table-has-box-sizing-border-box-002.html [ Failure ]
 crbug.com/708345 external/wpt/css/css-tables/height-distribution/extra-height-given-to-all-row-groups-001.html [ Failure ]

third_party/WebKit/LayoutTests/http/tests/media/video-controls-download-button-saves-media-cross-origin.html

@@ -17,6 +17,7 @@ async_test(function(t) {
   // Set up video
   var video = document.querySelector("video");
   video.src = "http://localhost:8000/media/resources/test.ogv";
+  enableTestMode(video);
 
   video.onloadeddata = t.step_func(function() {
     // Click on the download button

third_party/WebKit/LayoutTests/http/tests/media/video-controls-download-button-saves-media.html

@@ -17,6 +17,7 @@ async_test(function(t) {
   // Set up video
   var video = document.querySelector("video");
   video.src = "resources/test.ogv";
+  enableTestMode(video);
 
   video.onloadeddata = t.step_func(function() {
     // Click on the download button

third_party/WebKit/LayoutTests/http/tests/media/video-controls-overflow-menu-download-button.html

@@ -17,6 +17,7 @@ async_test(function(t) {
   video.src = "resources/test.ogv";
   video.setAttribute("width", "60");
   video.setAttribute("height", "100");
+  enableTestMode(video);
 
   var controlID = "-internal-media-controls-download-button";
   var downloadButton = mediaControlsElement(internals.shadowRoot(video).firstChild, controlID);

third_party/WebKit/LayoutTests/media/controls/closed-captions-dynamic-update.html

@@ -10,6 +10,7 @@
 <script>
 async_test(t => {
   var video = document.querySelector('video');
+  enableTestMode(video);
 
   video.oncanplaythrough = t.step_func(_ => {
     assert_true(isClosedCaptionsButtonEnabled(video));

third_party/WebKit/LayoutTests/media/controls/closed-captions-on-off.html

@@ -9,6 +9,8 @@ async_test(t => {
   var captions = ['First', 'Second', 'Third'];
   var video = document.querySelector('video');
 
+  enableTestMode(video);
+
   video.oncanplaythrough = t.step_func(_ => {
     var track1 = video.addTextTrack('captions');
     var track2 = video.addTextTrack('captions');

third_party/WebKit/LayoutTests/media/controls/closed-captions-single-track.html

@@ -8,6 +8,7 @@
 async_test(t => {
   var captions = ["Caption"];
   var video = document.querySelector("video");
+  enableTestMode(video);
 
   video.oncanplaythrough = t.step_func(_ => {
     var track1 = video.addTextTrack("captions");

third_party/WebKit/LayoutTests/media/controls/closed-captions-switch-track.html

@@ -11,6 +11,8 @@ async_test(t => {
   var trackLanguages = ['en', 'ru', 'fr', 'jp', 'de'];
   var trackCueText = ['English', 'Russian', 'French', 'Japanese', 'German'];
 
+  enableTestMode(video);
+
   video.oncanplaythrough = t.step_func(_ => {
     for (var i = 0; i < trackLanguages.length; i++) {
       var track = video.addTextTrack('captions', trackCueText[i], trackLanguages[i]);

third_party/WebKit/LayoutTests/media/controls/overflow-menu-hide-on-click-item.html

@@ -8,6 +8,7 @@
 async_test(t => {
   const video = document.querySelector('video');
   video.src = '../content/test.ogv';
+  enableTestMode(video);
   const track = video.addTextTrack('captions');
 
   video.onloadeddata = t.step_func(() => {

third_party/WebKit/LayoutTests/media/controls/overflow-menu-toggle-class-for-animation.html

+<!DOCTYPE html>
+<title>Media Controls: overflow menu toggle class for animation.</title>
+<script src='../../resources/testharness.js'></script>
+<script src='../../resources/testharnessreport.js'></script>
+<script src='../media-controls.js'></script>
+<video controls width=400></video>
+<script>
+async_test(t => {
+  const video = document.querySelector('video');
+  enableTestMode(video);
+  video.src = '../content/test.ogv';
+  video.addTextTrack('captions', 'foo');
+  video.addTextTrack('captions', 'bar');
+
+  video.onloadeddata = t.step_func(() => {
+    const menu = overflowMenu(video);
+    const captionsList = textTrackMenu(video);
+
+    // Open overflow => close overflow
+    expectAllMenuClosed();
+    singleTapOnControl(overflowButton(video), t.step_func(() => {
+      expectOpenMenu();
+
+      singleTapOutsideControl(menu, t.step_func(() => {
+        expectAllMenuClosed();
+        // End of scenario
+
+        // Open overflow => open captions list => close captions list
+        clickCaptionButton(video, t.step_func(() => {
+          expectOpenMenu();
+
+          singleTapOutsideControl(captionsList, t.step_func(() => {
+            expectAllMenuClosed();
+            // End of scenario
+
+            // Open overflow => open captions list => select track
+            clickTextTrackAtIndex(video, 0, t.step_func(() => {
+              expectAllMenuClosed();
+              // End of scenario
+
+              // Open overflow => open captions list => click back to overflow => close overflow
+              clickCaptionButton(video, t.step_func(() => {
+                expectOpenMenu();
+                const trackListHeader = textTrackListHeader(video);
+
+                singleTapOnControl(trackListHeader, t.step_func(() => {
+                  expectOpenMenu();
+
+                  singleTapOutsideControl(menu, t.step_func_done(() => {
+                    expectAllMenuClosed();
+                    // End of scenario
+                  }));
+                }));
+              }));
+            }));
+          }));
+        }));
+      }));
+    }));
+
+    function expectClosedMenu() {
+      assert_true(menu.classList.contains('closed'));
+    }
+
+    function expectOpenMenu() {
+      assert_false(menu.classList.contains('closed'));
+    }
+
+    function expectAllMenuClosed() {
+      assert_equals(getComputedStyle(menu).display, 'none');
+      assert_equals(getComputedStyle(captionsList).display, 'none');
+      expectClosedMenu();
+    }
+  });
+
+});
+</script>

third_party/WebKit/LayoutTests/media/controls/text-track-menu-keyboard-navigation.html

@@ -66,9 +66,11 @@ async_test(t => {
   assert_equals(video.textTracks.length, 2);
 
   document.body.appendChild(video);
+  enableTestMode(video);
 
   video.addEventListener('loadedmetadata', t.step_func(() => {
     assert_true(isVisible(overflowButton(video)));
+
     openOverflowAndClickButton(video, captionsOverflowItem(video), t.step_func_done(() => {
       const menu = textTrackMenu(video);
       assert_true(isVisible(menu));

third_party/WebKit/LayoutTests/media/controls/text-track-menu-pointer-selection.html

@@ -55,9 +55,11 @@ async_test(t => {
   assert_equals(video.textTracks.length, 2);
 
   document.body.appendChild(video);
+  enableTestMode(video);
 
   video.addEventListener('loadedmetadata', t.step_func(() => {
     assert_true(isVisible(overflowButton(video)));
+
     openOverflowAndClickButton(video, captionsOverflowItem(video), t.step_func(() => {
       const menu = textTrackMenu(video);
       assert_true(isVisible(menu));

third_party/WebKit/LayoutTests/media/media-controls.js

@@ -106,6 +106,14 @@ function textTrackMenu(video)
   return element;
 }
 
+function textTrackListHeader(video)
+{
+  var element = textTrackMenu(video).childNodes[0];
+  if (!element)
+    throw 'Failed to find the track list header'
+  return element;
+}
+
 function overflowMenu(video)
 {
   var controlID = '-internal-media-controls-overflow-menu-list';
@@ -529,6 +537,11 @@ function singleTapAtCoordinates(xPos, yPos, callback) {
   ], callback);
 }
 
+function singleTapOutsideControl(control, callback) {
+  const coordinates = coordinatesOutsideElement(control);
+  singleTapAtCoordinates(coordinates[0], coordinates[1], callback);
+}
+
 function singleTapOnControl(control, callback) {
   const coordinates = elementCoordinates(control);
   singleTapAtCoordinates(coordinates[0], coordinates[1], callback);

third_party/WebKit/LayoutTests/media/picture-in-picture/controls/picture-in-picture-button.html

@@ -13,6 +13,7 @@ async_test(t => {
 
   var video = document.querySelector("video");
   video.src = "../../content/test.ogv";
+  enableTestMode(video);
 
   video.onloadedmetadata = t.step_func(function() {
     assert_true(isPictureInPictureButtonEnabled(video), "button should exist");

third_party/WebKit/LayoutTests/media/picture-in-picture/picture-in-picture-interstitial-sizing.html

@@ -16,6 +16,7 @@ const testCases = [
 ];
 
 const video = document.getElementsByTagName('video')[0];
+enableTestMode(video);
 
 function runSizingTest(t, num) {
   if (num >= testCases.length)

third_party/WebKit/LayoutTests/media/picture-in-picture/picture-in-picture-interstitial.html

@@ -13,6 +13,7 @@ async_test(t => {
 
   var video = document.querySelector("video");
   video.src = "../content/test.ogv";
+  enableTestMode(video);
 
   video.onloadedmetadata = t.step_func(function() {
     assert_true(isPictureInPictureButtonEnabled(video), "button should exist");

third_party/WebKit/LayoutTests/media/track/text-track-selection-menu-add-track.html

@@ -11,6 +11,7 @@
 async_test(function(t) {
     var trackCueText = "Bonjour";
     var video = document.querySelector("video");
+    enableTestMode(video);
 
     video.oncanplaythrough = t.step_func(function() {
         var track = video.addTextTrack("captions", "French", "fr");

third_party/WebKit/LayoutTests/media/video-controls-labels.html

@@ -11,6 +11,7 @@
 <script>
 async_test(function(t) {
     var video = document.querySelector("video");
+    enableTestMode(video);
 
     video.oncanplaythrough = t.step_func(function() {
       clickCaptionButton(video, t.step_func_done(function() {

third_party/WebKit/LayoutTests/media/video-controls-overflow-menu-closed-captions-button.html

@@ -19,6 +19,8 @@ async_test(function(t) {
   video.addTextTrack("captions");
   video.addTextTrack("captions");
 
+  enableTestMode(video);
+
   video.onloadeddata = t.step_func_done(function() {
     var overflowList = getOverflowList(video);
     var overflowMenu = getOverflowMenuButton(video);

third_party/WebKit/LayoutTests/media/video-controls-overflow-menu-fullscreen-button.html

@@ -16,6 +16,8 @@ async_test(function(t) {
   video.setAttribute("width", "60");
   video.setAttribute("height", "100");
 
+  enableTestMode(video);
+
   window.addEventListener("load", t.step_func(function() {
     var overflowList = getOverflowList(video);
     var overflowMenu = getOverflowMenuButton(video);

third_party/WebKit/LayoutTests/media/video-controls-overflow-menu-mute-button.html

@@ -16,6 +16,8 @@ async_test(function(t) {
   video.setAttribute("width", "60");
   video.setAttribute("height", "100");
 
+  enableTestMode(video);
+
   video.onloadeddata = t.step_func_done(function() {
     var overflowList = getOverflowList(video);
     var overflowMenu = getOverflowMenuButton(video);

third_party/WebKit/LayoutTests/media/video-controls-overflow-menu-play-button.html

@@ -16,6 +16,8 @@ async_test(function(t) {
   video.setAttribute("width", "60");
   video.setAttribute("height", "100");
 
+  enableTestMode(video);
+
   video.onloadeddata = t.step_func_done(function() {
     var overflowList = getOverflowList(video);
     var overflowMenu = getOverflowMenuButton(video);

third_party/WebKit/LayoutTests/media/video-controls-track-selection-menu.html

@@ -11,6 +11,7 @@
 <script>
 async_test(function(t) {
     var video = document.querySelector("video");
+    enableTestMode(video);
 
     var trackElements = document.querySelectorAll("track");
     var textTracks = video.textTracks;

third_party/blink/renderer/modules/media_controls/elements/media_control_overflow_menu_list_element.cc

@@ -6,6 +6,7 @@
 
 #include "third_party/blink/public/platform/task_type.h"
 #include "third_party/blink/renderer/core/dom/document.h"
+#include "third_party/blink/renderer/core/dom/dom_token_list.h"
 #include "third_party/blink/renderer/core/dom/events/event.h"
 #include "third_party/blink/renderer/modules/media_controls/elements/media_control_overflow_menu_button_element.h"
 #include "third_party/blink/renderer/modules/media_controls/media_controls_impl.h"
@@ -13,11 +14,26 @@
 
 namespace blink {
 
+namespace {
+
+const char kClosedCSSClass[] = "closed";
+
+}
+
 MediaControlOverflowMenuListElement::MediaControlOverflowMenuListElement(
     MediaControlsImpl& media_controls)
     : MediaControlPopupMenuElement(media_controls, kMediaOverflowList) {
   SetShadowPseudoId(
       AtomicString("-internal-media-controls-overflow-menu-list"));
+  CloseOverflowMenu();
+}
+
+void MediaControlOverflowMenuListElement::OpenOverflowMenu() {
+  classList().Remove(kClosedCSSClass);
+}
+
+void MediaControlOverflowMenuListElement::CloseOverflowMenu() {
+  classList().Add(kClosedCSSClass);
 }
 
 void MediaControlOverflowMenuListElement::MaybeRecordTimeTaken(
@@ -47,6 +63,11 @@ void MediaControlOverflowMenuListElement::DefaultEventHandler(Event& event) {
 void MediaControlOverflowMenuListElement::SetIsWanted(bool wanted) {
   MediaControlPopupMenuElement::SetIsWanted(wanted);
 
+  if (wanted)
+    OpenOverflowMenu();
+  else if (!GetMediaControls().TextTrackListIsWanted())
+    CloseOverflowMenu();
+
   // Record the time the overflow menu was shown to a histogram.
   if (wanted) {
     DCHECK(!time_shown_);

third_party/blink/renderer/modules/media_controls/elements/media_control_overflow_menu_list_element.h

@@ -21,6 +21,9 @@ class MediaControlOverflowMenuListElement final
  public:
   explicit MediaControlOverflowMenuListElement(MediaControlsImpl&);
 
+  void OpenOverflowMenu();
+  void CloseOverflowMenu();
+
   // Override MediaControlPopupMenuElement
   void SetIsWanted(bool) final;
   Element* PopupAnchor() const final;

third_party/blink/renderer/modules/media_controls/elements/media_control_text_track_list_element.cc

@@ -63,6 +63,9 @@ void MediaControlTextTrackListElement::SetIsWanted(bool wanted) {
   if (wanted)
     RefreshTextTrackListMenu();
 
+  if (!wanted && !GetMediaControls().OverflowMenuIsWanted())
+    GetMediaControls().CloseOverflowMenu();
+
   MediaControlPopupMenuElement::SetIsWanted(wanted);
 }
 

third_party/blink/renderer/modules/media_controls/media_controls_impl.cc

@@ -1154,6 +1154,10 @@ void MediaControlsImpl::DisableShowingTextTracks() {
   }
 }
 
+bool MediaControlsImpl::TextTrackListIsWanted() {
+  return text_track_list_->IsWanted();
+}
+
 String MediaControlsImpl::GetTextTrackLabel(TextTrack* track) const {
   if (!track) {
     return MediaElement().GetLocale().QueryString(
@@ -2098,6 +2102,18 @@ void MediaControlsImpl::NetworkStateChanged() {
   UpdateCSSClassFromState();
 }
 
+void MediaControlsImpl::OpenOverflowMenu() {
+  overflow_list_->OpenOverflowMenu();
+}
+
+void MediaControlsImpl::CloseOverflowMenu() {
+  overflow_list_->CloseOverflowMenu();
+}
+
+bool MediaControlsImpl::OverflowMenuIsWanted() {
+  return overflow_list_->IsWanted();
+}
+
 bool MediaControlsImpl::OverflowMenuVisible() {
   return overflow_list_ ? overflow_list_->IsWanted() : false;
 }

third_party/blink/renderer/modules/media_controls/media_controls_impl.h

@@ -128,12 +128,17 @@ class MODULES_EXPORT MediaControlsImpl final : public HTMLDivElement,
   void ToggleTextTrackList();
   void ShowTextTrackAtIndex(unsigned);
   void DisableShowingTextTracks();
+  bool TextTrackListIsWanted();
 
   // Returns the label for the track when a valid track is passed in and "Off"
   // when the parameter is null.
   String GetTextTrackLabel(TextTrack*) const;
 
   // Methods related to the overflow menu.
+  void OpenOverflowMenu();
+  void CloseOverflowMenu();
+  bool OverflowMenuIsWanted();
+
   void ToggleOverflowMenu();
   bool OverflowMenuVisible();
 

third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css

@@ -637,8 +637,29 @@ video::-internal-media-controls-overflow-menu-list {
   background: #FFFFFF;
   box-shadow: 0 1px 9px 0 rgba(0,0,0,0.40);
   border-radius: 2px;
+  transition: transform .2s ease-out, opacity .2s linear;
+  transform-origin: bottom right;
 }
 
+audio::-internal-media-controls-overflow-menu-list.closed,
+video::-internal-media-controls-overflow-menu-list.closed {
+  transform: scale(0);
+  opacity: 0;
+}
+
+
+audio::-webkit-media-controls div[pseudo="-internal-media-controls-overflow-menu-list" i].closed > *,
+video::-webkit-media-controls div[pseudo="-internal-media-controls-overflow-menu-list" i].closed > * {
+  opacity: 0;
+}
+
+audio::-webkit-media-controls div[pseudo="-internal-media-controls-overflow-menu-list" i] > *,
+video::-webkit-media-controls div[pseudo="-internal-media-controls-overflow-menu-list" i] > * {
+  transition: opacity .2s linear .2s;
+}
+
+
+
 audio::-internal-media-controls-text-track-list-header,
 video::-internal-media-controls-text-track-list-header,
 audio::-internal-media-controls-text-track-list-item,