[Media Controls] Clean up sizing class. Remove all sizing-large classes.

Bug: 857120

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

third_party/WebKit/LayoutTests/media/controls/resizing-changes-css-class.html

@@ -10,9 +10,9 @@ async_test(t => {
   const video = document.querySelector('video');
   const testCases = [
     { width: 500, expect: expectSmall },
-    { width: 1441, expect: expectLarge },
+    { width: 1441, expect: expectMedium },
     { width: 800, expect: expectMedium },
-    { width: 2000, expect: expectLarge },
+    { width: 2000, expect: expectMedium },
     { width: 0, expect: expectSmall },
     { width: 741, expect: expectMedium },
     { width: 308, expect: expectSmall },
@@ -39,18 +39,14 @@ async_test(t => {
 
   function expectSmall() {
     checkControlsHasClass(video, 'sizing-small');
-    checkControlsDoesNotHaveClasses(video, ['sizing-medium', 'sizing-large']);
+    checkControlsDoesNotHaveClass(video, 'sizing-medium');
   }
 
   function expectMedium() {
     checkControlsHasClass(video, 'sizing-medium');
-    checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-large']);
+    checkControlsDoesNotHaveClass(video, 'sizing-small');
   }
 
-  function expectLarge() {
-    checkControlsHasClass(video, 'sizing-large');
-    checkControlsDoesNotHaveClasses(video, ['sizing-small', 'sizing-medium']);
-  }
 });
 </script>
 </html>

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

@@ -1385,10 +1385,8 @@ void MediaControlsImpl::UpdateSizingCSSClass() {
                sizing_class == MediaControlsSizingClass::kSmall);
   SetClass(kMediaControlsSizingMediumCSSClass,
            ShouldShowVideoControls() &&
-               sizing_class == MediaControlsSizingClass::kMedium);
-  SetClass(kMediaControlsSizingLargeCSSClass,
-           ShouldShowVideoControls() &&
-               sizing_class == MediaControlsSizingClass::kLarge);
+               (sizing_class == MediaControlsSizingClass::kMedium ||
+                sizing_class == MediaControlsSizingClass::kLarge));
 }
 
 void MediaControlsImpl::MaybeToggleControlsFromTap() {

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

@@ -100,10 +100,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-webkit-media-controls-p
   background-size: auto 200px;
 }
 
-video::-webkit-media-controls.sizing-large div[pseudo="-webkit-media-controls-panel" i] {
-  background-size: auto 312px;
-}
-
 /* Need dark gradient at the top of the video when the scrubbing message is
  * shown */
 video::-webkit-media-controls:not(.audio-only) div[pseudo="-webkit-media-controls-panel" i].scrubbing-message {
@@ -122,10 +118,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-webkit-media-controls-p
   background-size: auto 120px, auto 200px;
 }
 
-video::-webkit-media-controls.sizing-large div[pseudo="-webkit-media-controls-panel" i].scrubbing-message {
-  background-size: auto 120px, auto 312px;
-}
-
 audio::-internal-media-controls-button-panel,
 video::-internal-media-controls-button-panel {
   -webkit-appearance: -internal-media-control;
@@ -229,18 +221,6 @@ video::-webkit-media-controls.sizing-medium input[pseudo="-internal-media-contro
   background-size: 32px;
 }
 
-/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
-video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-play-button" i],
-video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-mute-button" i],
-video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-fullscreen-button" i],
-video::-webkit-media-controls.sizing-large input[pseudo="-internal-media-controls-display-cutout-fullscreen-button" i],
-video::-webkit-media-controls.sizing-large input[pseudo="-internal-media-controls-overflow-button" i] {
-  width: 64px;
-  height: 64px;
-  min-width: 64px;
-  background-size: 32px;
-}
-
 video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-button-panel" i] {
   height: 48px;
   line-height: 48px;
@@ -253,13 +233,6 @@ video::-webkit-media-controls.sizing-medium div[pseudo="-internal-media-controls
   padding: 0 16px 0 32px;
 }
 
-/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
-video::-webkit-media-controls.sizing-large div[pseudo="-internal-media-controls-button-panel" i] {
-  height: 64px;
-  line-height: 64px;
-  padding: 0 16px 0 32px;
-}
-
 audio::-webkit-media-controls-play-button,
 video::-webkit-media-controls-play-button {
   background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
@@ -465,11 +438,6 @@ video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls
   padding: 0 32px 20px 32px;
 }
 
-/* TODO(https://crbug.com/857120): remove these rules and the sizing-large CSS class. */
-video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-timeline" i] {
-  padding: 0 32px 20px 32px;
-}
-
 input[pseudo="-webkit-media-controls-timeline" i],
 input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-before,
 input[pseudo="-webkit-media-controls-timeline" i]::-internal-track-segment-highlight-after,
@@ -618,8 +586,7 @@ video::-webkit-media-controls-volume-slider.closed {
   transition: width 0.3s ease, opacity 0.28s step-end;
 }
 
-video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls-volume-slider" i],
-video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-volume-slider" i] {
+video::-webkit-media-controls.sizing-medium input[pseudo="-webkit-media-controls-volume-slider" i] {
   padding: 30px 0; /* (64px button panel height - 4px slider height) / 2  */
 }
 
@@ -692,35 +659,14 @@ video::-internal-media-controls-overflow-menu-list-item {
   padding-right: 16px;
 }
 
-/* TODO(https://crbug.com/857120): All these are the same, so these are unnecessary. */
-video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-overflow-menu-list" i] {
-  min-width: 180px;
-  max-width: 180px;
-  max-height: 250px;
-}
-
+video::-webkit-media-controls.sizing-small div[pseudo="-internal-media-controls-overflow-menu-list" i],
 video::-webkit-media-controls.sizing-medium div[pseudo="-internal-media-controls-overflow-menu-list" i] {
   min-width: 180px;
   max-width: 180px;
   max-height: 250px;
 }
 
-video::-webkit-media-controls.sizing-large div[pseudo="-internal-media-controls-overflow-menu-list" i] {
-  min-width: 180px;
-  max-width: 180px;
-  max-height: 250px;
-}
-
-/* TODO(https://crbug.com/857120): All these are the same, so these are unnecessary. */
-video::-webkit-media-controls.sizing-small label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
-  margin-left: 0;
-  margin-right: 16px;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  background-size: 24px;
-}
-
+video::-webkit-media-controls.sizing-small label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input,
 video::-webkit-media-controls.sizing-medium label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
   margin-left: 0;
   margin-right: 16px;
@@ -730,15 +676,6 @@ video::-webkit-media-controls.sizing-medium label[pseudo="-internal-media-contro
   background-size: 24px;
 }
 
-video::-webkit-media-controls.sizing-large label[pseudo="-internal-media-controls-overflow-menu-list-item" i] input {
-  margin-left: 0;
-  margin-right: 16px;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  background-size: 24px;
-}
-
 label[pseudo="-internal-media-controls-overflow-menu-list-item"] input {
   margin-left: -9px;
   margin-right: 6px;