[Media Controls] Enlarge overflow menu and track list only when Picture in Picture is enabled

Add "pip-presented" CSS class to menu list and track list when picture in picture is enabled.
Remove the CSS class when pip is disabled.
So that we can have different menu width depending on whether we have pip button in menu.

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

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

@@ -127,6 +127,10 @@ void MediaControlInputElement::RemoveOverflowSubtitleElement() {
   overflow_menu_subtitle_ = nullptr;
 }
 
+bool MediaControlInputElement::OverflowElementIsWanted() {
+  return overflow_element_ && overflow_element_->IsWanted();
+}
+
 void MediaControlInputElement::SetOverflowElementIsWanted(bool wanted) {
   if (!overflow_element_)
     return;

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

@@ -25,6 +25,8 @@ class MODULES_EXPORT MediaControlInputElement : public HTMLInputElement,
   // Creates an overflow menu element with the given button as a child.
   HTMLElement* CreateOverflowElement(MediaControlInputElement*);
 
+  bool OverflowElementIsWanted();
+
   // Implements MediaControlElementBase.
   void SetOverflowElementIsWanted(bool) final;
   void MaybeRecordDisplayed() final;

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

@@ -133,6 +133,7 @@ const char kActAsAudioControlsCSSClass[] = "audio-only";
 const char kScrubbingMessageCSSClass[] = "scrubbing-message";
 const char kTestModeCSSClass[] = "test-mode";
 const char kImmersiveModeCSSClass[] = "immersive-mode";
+const char kPipPresentedCSSClass[] = "pip-presented";
 
 // The delay between two taps to be recognized as a double tap gesture.
 constexpr WTF::TimeDelta kDoubleTapDelay = TimeDelta::FromMilliseconds(300);
@@ -1411,6 +1412,8 @@ void MediaControlsImpl::UpdateOverflowMenuWanted() const {
 
   if (download_iph_manager_)
     download_iph_manager_->UpdateInProductHelp();
+
+  UpdateOverflowAndTrackListCSSClassForPip();
 }
 
 void MediaControlsImpl::UpdateScrubbingMessageFits() const {
@@ -1418,6 +1421,21 @@ void MediaControlsImpl::UpdateScrubbingMessageFits() const {
     scrubbing_message_->SetDoesFit(size_.Width() >= kMinScrubbingMessageWidth);
 }
 
+// We want to have wider menu when pip is enabled so that "Exit picture in
+// picture" text won't be truncated. When pip is disable (e.g. on mobile
+// device), we don't want to enlarged the menu because it would look empty
+// when "picture in picture" text is not presented.
+void MediaControlsImpl::UpdateOverflowAndTrackListCSSClassForPip() const {
+  if (picture_in_picture_button_.Get() &&
+      picture_in_picture_button_.Get()->OverflowElementIsWanted()) {
+    overflow_list_->classList().Add(kPipPresentedCSSClass);
+    text_track_list_->classList().Add(kPipPresentedCSSClass);
+  } else {
+    overflow_list_->classList().Remove(kPipPresentedCSSClass);
+    text_track_list_->classList().Remove(kPipPresentedCSSClass);
+  }
+}
+
 void MediaControlsImpl::UpdateSizingCSSClass() {
   MediaControlsSizingClass sizing_class =
       MediaControls::GetSizingClass(size_.Width());

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

@@ -288,6 +288,7 @@ class MODULES_EXPORT MediaControlsImpl final : public HTMLDivElement,
 
   void UpdateOverflowMenuWanted() const;
   void UpdateScrubbingMessageFits() const;
+  void UpdateOverflowAndTrackListCSSClassForPip() const;
   void UpdateSizingCSSClass();
   void MaybeRecordElementsDisplayed() const;
 

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

@@ -680,10 +680,10 @@ video::-internal-media-controls-overflow-menu-list-item {
   padding-right: 16px;
 }
 
-video::-internal-media-controls-text-track-list,
-video::-internal-media-controls-overflow-menu-list {
+video::-webkit-media-controls div[pseudo="-internal-media-controls-text-track-list" i].pip-presented,
+video::-webkit-media-controls div[pseudo="-internal-media-controls-overflow-menu-list" i].pip-presented {
   max-width: 260px;
-  width: 95%;
+  width: 100%;
 }
 
 video::-webkit-media-controls.sizing-small label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input,

third_party/blink/web_tests/media/controls/large-overflow-menu-when-pip-enabled.html

+<!DOCTYPE html>
+<title>Large overflow menu when pip enabled</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../media-controls.js"></script>
+<body>
+<video controls></video>
+<script>
+async_test(t => {
+  let video = document.querySelector("video");
+  video.src = "../content/test.ogv";
+  enableTestMode(video);
+
+  const overflowMenuList = overflowMenu(video);
+  const textTrackList = textTrackMenu(video);
+
+  assert_true(document.pictureInPictureEnabled, 'pip should be enabled');
+
+  video.onloadedmetadata = t.step_func(() => {
+    expectOverflowMenuAndTrackListContainsPip();
+
+    video.setAttribute('disablepictureinpicture', '');
+    testRunner.layoutAndPaintAsyncThen(t.step_func(() => {
+      expectOverflowMenuAndTrackListNotContainsPip();
+
+      video.removeAttribute('disablepictureinpicture');
+      testRunner.layoutAndPaintAsyncThen(t.step_func_done(() => {
+        expectOverflowMenuAndTrackListContainsPip();
+      }));
+    }));
+  });
+
+  function expectOverflowMenuAndTrackListContainsPip() {
+    assert_true(overflowMenuList.classList.contains('pip-presented'), 'overflow menu should have pip-presented');
+    assert_true(textTrackList.classList.contains('pip-presented'), 'track list should have pip-presented');
+  }
+
+  function expectOverflowMenuAndTrackListNotContainsPip() {
+    assert_false(overflowMenuList.classList.contains('pip-presented'), 'overflow menu should not have pip-presented');
+    assert_false(textTrackList.classList.contains('pip-presented'), 'track list should not have pip-presented');
+  }
+});
+</script>
+</body>

third_party/blink/web_tests/media/controls/small-overflow-menu-when-pip-disabled.html

+<!DOCTYPE html>
+<title>Small overflow menu when pip disabled</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../media-controls.js"></script>
+<body>
+<video controls></video>
+<script>
+async_test(t => {
+  let video = document.querySelector("video");
+  video.src = "../content/test.ogv";
+  enableTestMode(video);
+
+  const overflowMenuList = overflowMenu(video);
+  const textTrackList = textTrackMenu(video);
+
+  internals.settings.setPictureInPictureEnabled(false);
+  assert_false(document.pictureInPictureEnabled, 'pip should be disabled');
+
+  video.onloadedmetadata = t.step_func_done(() => {
+    assert_false(overflowMenuList.classList.contains('pip-presented'), 'overflow menu should not have pip-presented');
+    assert_false(textTrackList.classList.contains('pip-presented'), 'track list should not have pip-presented');
+  });
+});
+</script>
+</body>