Add CSS to media controls to shrink the timeline and button panel in VR

This CL makes use of the new "immersive" media query to add styling for
the new media controls in VR mode. Due to a bug in how the "immersive"
media query works, the changes here are not visible yet.

Bug: 809021
Change-Id: I3737a3e1f6ca27d5111cf1d7e4b5b2ae221ee97f
Reviewed-on: https://chromium-review.googlesource.com/993396Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548090}

third_party/WebKit/Source/modules/media_controls/resources/modernMediaControls.css

@@ -657,3 +657,26 @@ video::-internal-media-controls-scrubbing-message {
 .state-scrubbing input[pseudo="-webkit-media-controls-overlay-play-button" i] {
   display: none;
 }
+
+/**
+ * VR styling.
+ */
+@media (immersive) {
+  video::-webkit-media-controls-timeline,
+  video::-internal-media-controls-button-panel {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+  /* Timeline sizing does not include padding in max width. */
+  video::-webkit-media-controls-timeline {
+    max-width: 704px;
+  }
+  /* Button panel sizing does include padding in max width. */
+  video::-internal-media-controls-button-panel {
+    max-width: 800px; /* 704px + 96px padding. */
+  }
+
+  video::-webkit-media-controls-panel {
+    text-align: -webkit-center;
+  }
+}