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

This reverts commit 4fcaee53.

Reason for revert:

Findit (https://goo.gl/kROfz5) identified CL at revision 603116 as the
culprit for flakes in the build cycles as shown on:
https://findit-for-me.appspot.com/waterfall/flake/flake-culprit?key=ag9zfmZpbmRpdC1mb3ItbWVyQwsSDEZsYWtlQ3VscHJpdCIxY2hyb21pdW0vNGZjYWVlNTMxMzliMGFmYjAwM2ZmMWJhMTNiOTAyYTZhM2YyYTMxNQw

Sample Failed Build: https://ci.chromium.org/buildbot/chromium.mac/WebKit%20Mac10.13%20%28retina%29/6030

Sample Failed Step: webkit_layout_tests on ATI GPU on Mac Retina on Mac-10.13.6

Sample Flaky Test: media/controls/overflow-menu-toggle-class-for-animation.html

Original change's description:
> [Media Controls] Added animation to overflow menu
> 
> Toggle "closed" class when open/close menu to achieve transition animation.
> This CL only has opening animation.
> 
> TODO: Add close animation; Add wave like animation to label when opening menu.
> 
> Bug: 814507
> 
> Change-Id: I2a036297741f34905fe868c7ea0a99e9ea91cea3
> Reviewed-on: https://chromium-review.googlesource.com/c/1286949
> Commit-Queue: Jazz Xu <jazzhsu@google.com>
> Reviewed-by: Tommy Steimel <steimel@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#603116}

Change-Id: Ia9b6c5e419ec201f6ac328a1de049c65528f6dc0
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 814507, 899335
Reviewed-on: https://chromium-review.googlesource.com/c/1302577
Cr-Commit-Position: refs/heads/master@{#603158}

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

@@ -17,7 +17,6 @@ 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,7 +17,6 @@ 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,7 +17,6 @@ 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,7 +10,6 @@
 <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,8 +9,6 @@ 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,7 +8,6 @@
 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,8 +11,6 @@ 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,7 +8,6 @@
 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,11 +66,9 @@ 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,11 +55,9 @@ 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,14 +106,6 @@ 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';
@@ -537,11 +529,6 @@ 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,7 +13,6 @@ 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,7 +16,6 @@ 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,7 +13,6 @@ 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,7 +11,6 @@
 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,7 +11,6 @@
 <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,8 +19,6 @@ 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,8 +16,6 @@ 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,8 +16,6 @@ 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,8 +16,6 @@ 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,7 +11,6 @@
 <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,7 +6,6 @@
 
 #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"
@@ -14,26 +13,11 @@
 
 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(
@@ -63,11 +47,6 @@ 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,9 +21,6 @@ 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,9 +63,6 @@ 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,10 +1154,6 @@ void MediaControlsImpl::DisableShowingTextTracks() {
   }
 }
 
-bool MediaControlsImpl::TextTrackListIsWanted() {
-  return text_track_list_->IsWanted();
-}
-
 String MediaControlsImpl::GetTextTrackLabel(TextTrack* track) const {
   if (!track) {
     return MediaElement().GetLocale().QueryString(
@@ -2102,18 +2098,6 @@ 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,17 +128,12 @@ 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,29 +637,8 @@ 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,