[Media] Clean up interstitial CSS.

Only one interstitial (of media remoting and picture in picture) will
be shown at a time. This change renames IDs for elements in the
interstitial element with the same styling.

This change also pulls out the CSS into a separate file, per TODO.

Expected further work here includes some more styling updates with
an interstitial icon for picture in picture.

BUG: 805516
Change-Id: I6c2151f2166b4dbbf2aaa0be83f8492369008a11
Reviewed-on: https://chromium-review.googlesource.com/890025Reviewed-by: Mounir Lamouri (slow) <mlamouri@chromium.org>
Reviewed-by: Xiangjun Zhang <xjz@chromium.org>
Commit-Queue: apacible <apacible@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532917}

third_party/WebKit/LayoutTests/media/media-controls.js

@@ -331,7 +331,7 @@ function mediaControlsOverlayPlayButtonInternal(videoElement) {
 }
 
 function pictureInPictureInterstitial(videoElement) {
-  var controlID = '-internal-picture-in-picture-interstitial';
+  var controlID = '-internal-picture-in-picture-message';
 
   var interstitial = getElementByPseudoId(window.internals.shadowRoot(videoElement).firstChild, controlID);
   if (!interstitial)
@@ -340,7 +340,7 @@ function pictureInPictureInterstitial(videoElement) {
 }
 
 function checkPictureInPictureInterstitialDoesNotExist(videoElement) {
-  var controlID = '-internal-picture-in-picture-interstitial';
+  var controlID = '-internal-picture-in-picture-message';
 
   var interstitial = getElementByPseudoId(internals.oldestShadowRoot(videoElement), controlID);
   if (interstitial)

third_party/WebKit/Source/core/html/media/MediaRemotingInterstitial.cpp

@@ -29,10 +29,10 @@ MediaRemotingInterstitial::MediaRemotingInterstitial(
           this,
           &MediaRemotingInterstitial::ToggleInterstitialTimerFired),
       video_element_(&videoElement) {
-  SetShadowPseudoId(AtomicString("-internal-media-remoting-interstitial"));
+  SetShadowPseudoId(AtomicString("-internal-media-interstitial"));
   background_image_ = HTMLImageElement::Create(GetDocument());
   background_image_->SetShadowPseudoId(
-      AtomicString("-internal-media-remoting-background-image"));
+      AtomicString("-internal-media-interstitial-background-image"));
   background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr));
   AppendChild(background_image_);
 

third_party/WebKit/Source/core/html/media/PictureInPictureInterstitial.cpp

@@ -27,10 +27,10 @@ PictureInPictureInterstitial::PictureInPictureInterstitial(
           this,
           &PictureInPictureInterstitial::ToggleInterstitialTimerFired),
       video_element_(&videoElement) {
-  SetShadowPseudoId(AtomicString("-internal-picture-in-picture-interstitial"));
+  SetShadowPseudoId(AtomicString("-internal-media-interstitial"));
   background_image_ = HTMLImageElement::Create(GetDocument());
   background_image_->SetShadowPseudoId(
-      AtomicString("-internal-picture-in-picture-background-image"));
+      AtomicString("-internal-media-interstitial-background-image"));
   background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr));
   AppendChild(background_image_);
 

third_party/WebKit/Source/modules/media_controls/MediaControlsResourceLoader.cpp

@@ -77,6 +77,13 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() {
   return ResourceBundleHelper::UncompressResourceAsString(
       IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_OVERLAY_PLAY_CSS);
 };
+
+// static
+String MediaControlsResourceLoader::GetMediaInterstitialsStyleSheet() {
+  return ResourceBundleHelper::UncompressResourceAsString(
+      IDR_UASTYLE_MEDIA_INTERSTITIALS_CSS);
+};
+
 // Re-enable the warnings.
 #if defined(OS_WIN)
 #pragma warning(default : 4068)
@@ -85,9 +92,11 @@ String MediaControlsResourceLoader::GetOverlayPlayStyleSheet() {
 #endif
 
 String MediaControlsResourceLoader::GetUAStyleSheet() {
-  if (ShouldLoadAndroidCSS())
-    return GetMediaControlsCSS() + GetMediaControlsAndroidCSS();
-  return GetMediaControlsCSS();
+  if (ShouldLoadAndroidCSS()) {
+    return GetMediaControlsCSS() + GetMediaControlsAndroidCSS() +
+           GetMediaInterstitialsStyleSheet();
+  }
+  return GetMediaControlsCSS() + GetMediaInterstitialsStyleSheet();
 }
 
 void MediaControlsResourceLoader::InjectMediaControlsUAStyleSheet() {

third_party/WebKit/Source/modules/media_controls/MediaControlsResourceLoader.h

@@ -31,6 +31,9 @@ class MediaControlsResourceLoader
   // Returns the overlay play button stylesheet content as a string.
   static String GetOverlayPlayStyleSheet();
 
+  // Returns the specific stylesheet used for media related interstitials.
+  static String GetMediaInterstitialsStyleSheet();
+
   String GetUAStyleSheet() override;
 
   MediaControlsResourceLoader();

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

@@ -170,101 +170,6 @@ video::-webkit-media-controls-overlay-play-button {
     padding: 0;
 }
 
-/* TODO(xjz): Move media remoting elements to a separate css file. */
-video::-internal-media-remoting-interstitial,
-video::-internal-picture-in-picture-interstitial {
-    width: inherit;
-    height: inherit;
-    position: relative;
-    direction: ltr;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: center;
-    /* The font size is set to be proportional to the viewport width.
-     * Specifically, it is 15px for 400px width, and 36px for 1920px width. The
-     * full math expression is:
-     * 15px + (36 - 15) * ((100vw - 400px) / (1920 - 400)). */
-    font-size: calc(9.5px + 1.38vw);
-    background-color: transparent;
-    opacity: 0;
-    transition: opacity .3s ease-in-out;
-}
-
-video::-internal-media-remoting-background-image,
-video::-internal-picture-in-picture-background-image {
-    display: flex;
-    position: absolute;
-    margin: 0;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    border: none;
-    border-width: 0px;
-    background-color: transparent;
-    padding: 0;
-    filter: grayscale(100%) blur(5px) opacity(40%);
-}
-
-video::-internal-media-remoting-cast-icon {
-    -webkit-appearance: none;
-    background-image: -webkit-image-set(
-      url(default_100_percent/legacy/mediaremoting_cast.png) 1x,
-      url(default_200_percent/legacy/mediaremoting_cast.png) 2x);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center center;
-    display: flex;
-    position: absolute;
-    margin: 0px;
-    border-width: 0px;
-    background-color: transparent;
-    height: 2.5vw;
-    width: 3vw;
-    padding: 0px;
-    left: calc(50% - 1.5vw);
-    top: calc(50% - 3vw);
-}
-
-video::-internal-media-remoting-cast-text-message,
-video::-internal-picture-in-picture-message {
-    display: inline;
-    position: absolute;
-    top: calc(50% + 1vw);
-    border: none;
-    color: rgba(255,255,255,.54);
-    width: 100%;
-    text-wrap: none;
-    text-align: center;
-    background-color: transparent;
-    font-size: 90%;
-    font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
-    padding: 0px;
-    margin: 0px;
-}
-
-video::-internal-picture-in-picture-message {
-    top: calc(50%);
-}
-
-video::-internal-media-remoting-toast-message {
-    display: inline;
-    position: absolute;
-    top: 16pt;
-    border: none;
-    border-radius: 2pt;
-    color: rgba(255,255,255, 1);
-    width: auto;
-    text-wrap: none;
-    text-align: center;
-    background-color: rgba(40, 44, 50, 0.7);
-    font-size: 90%;
-    font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
-    padding: 10pt 24pt 10pt 24pt;
-    margin: 0px;
-}
-
 video::-internal-media-controls-overlay-cast-button {
     -webkit-appearance: none;
     background-image: -webkit-image-set(

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

+/* Copyright 2018 The Chromium Authors. All rights reserved.
+   Use of this source code is governed by a BSD-style license that can be
+   found in the LICENSE file. */
+
+video::-internal-media-interstitial {
+    width: inherit;
+    height: inherit;
+    position: relative;
+    direction: ltr;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    /* The font size is set to be proportional to the viewport width.
+     * Specifically, it is 15px for 400px width, and 36px for 1920px width.
+     * The full math expression is:
+     * 15px + (36 - 15) * ((100vw - 400px) / (1920 - 400)).
+     */
+    font-size: calc(9.5px + 1.38vw);
+    background-color: transparent;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+}
+
+video::-internal-media-interstitial-background-image {
+    display: flex;
+    position: absolute;
+    margin: 0;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-width: 0px;
+    background-color: transparent;
+    padding: 0;
+    filter: grayscale(100%) blur(5px) opacity(40%);
+}
+
+video::-internal-media-remoting-cast-icon {
+    -webkit-appearance: none;
+    background-image: -webkit-image-set(
+      url(default_100_percent/legacy/mediaremoting_cast.png) 1x,
+      url(default_200_percent/legacy/mediaremoting_cast.png) 2x);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    position: absolute;
+    margin: 0px;
+    border-width: 0px;
+    background-color: transparent;
+    height: 2.5vw;
+    width: 3vw;
+    padding: 0px;
+    left: calc(50% - 1.5vw);
+    top: calc(50% - 3vw);
+}
+
+video::-internal-media-remoting-cast-text-message,
+video::-internal-picture-in-picture-message {
+    display: inline;
+    position: absolute;
+    top: calc(50% + 1vw);
+    border: none;
+    color: rgba(255,255,255,.54);
+    width: 100%;
+    text-wrap: none;
+    text-align: center;
+    background-color: transparent;
+    font-size: 90%;
+    font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
+    padding: 0px;
+    margin: 0px;
+}
+
+video::-internal-picture-in-picture-message {
+    top: calc(50%);
+}
+
+video::-internal-media-remoting-toast-message {
+    display: inline;
+    position: absolute;
+    top: 16pt;
+    border: none;
+    border-radius: 2pt;
+    color: rgba(255,255,255, 1);
+    width: auto;
+    text-wrap: none;
+    text-align: center;
+    background-color: rgba(40, 44, 50, 0.7);
+    font-size: 90%;
+    font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica;
+    padding: 10pt 24pt 10pt 24pt;
+    margin: 0px;
+}

third_party/WebKit/Source/modules/media_controls/resources/media_controls_resources.grd

@@ -11,6 +11,7 @@
     <structures fallback_to_low_resolution="true">
       <structure type="chrome_html" name="IDR_UASTYLE_LEGACY_MEDIA_CONTROLS_CSS" file="legacyMediaControls.css" flattenhtml="true" compress="gzip" />
       <structure type="chrome_html" name="IDR_UASTYLE_MODERN_MEDIA_CONTROLS_CSS" file="modernMediaControls.css" flattenhtml="true" compress="gzip" />
+      <structure type="chrome_html" name="IDR_UASTYLE_MEDIA_INTERSTITIALS_CSS" file="mediaInterstitials.css" flattenhtml="true" compress="gzip" />
       <structure type="chrome_html" name="IDR_SHADOWSTYLE_MODERN_MEDIA_CONTROLS_LOADING_CSS" file="modernMediaControls_loading.css" flattenhtml="true" compress="gzip" />
     </structures>
     <includes>