[Media Controls] Immersive mode styling fixes

This CL updates the immersive mode styles to handle the new overlay
play button positioning, as well as fixing an issue where the loading
spinner was incorrectly styled for immersive mode.

Bug: 884770
Change-Id: I395bea19f0047deaf85e4923735418105f833def
Reviewed-on: https://chromium-review.googlesource.com/1241841Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593752}

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

@@ -522,6 +522,14 @@ video::-webkit-media-controls.sizing-large input[pseudo="-webkit-media-controls-
 }
 
 video::-webkit-media-controls div[pseudo="-internal-media-controls-loading-panel" i]::-internal-media-controls-loading-panel-spinner-frame {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: hidden;
+
+  height: var(--overlay-play-button-width, 48px);
+  width: var(--overlay-play-button-width, 48px);
+  margin-left: calc(var(--overlay-play-button-width) / -2);
   margin-top: calc(
       (var(--overlay-play-button-width, 48px)
           + 24px /* timeline height + padding-bottom */)
@@ -1094,6 +1102,11 @@ video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-control
   margin-top: -5px;
 }
 
+video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-overlay-play-button" i] {
+  margin-left: -52px /* (play button width / 2) + 20px Padding */;
+  margin-top: -64px /* (play button width + timeline height + padding-bottom) / 2 + padding */
+}
+
 video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-overlay-play-button" i]::-internal-media-controls-overlay-play-button-internal {
   width: 64px;
   height: 64px;
@@ -1101,6 +1114,14 @@ video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-control
   background-size: 36px;
 }
 
+video::-webkit-media-controls.immersive-mode div[pseudo="-internal-media-controls-loading-panel" i]::-internal-media-controls-loading-panel-spinner-frame {
+  width: 64px; /* play button width */
+  height: 64px; /* play button width */
+  margin-top: -44px; /* (play button width + timeline height + padding-bottom) / -2 */
+  margin-left: -32px; /* play button width / -2 */
+}
+
+
 video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-mute-button" i],
 video::-webkit-media-controls.immersive-mode input[pseudo="-webkit-media-controls-fullscreen-button" i],
 video::-webkit-media-controls.immersive-mode input[pseudo="-internal-media-controls-overflow-button" i] {

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

@@ -2,16 +2,6 @@
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file.*/
 
-#spinner-frame {
-  position: absolute;
-  height: var(--overlay-play-button-width, 48px);
-  width: var(--overlay-play-button-width, 48px);
-  top: 50%;
-  left: 50%;
-  margin-left: calc(var(--overlay-play-button-width) / -2);
-  overflow: hidden;
-}
-
 #spinner {
   animation: container-rotate 1568ms linear infinite;
   height: 100%;