[Picture in Picture] Update interstitial style.

This change removes the icon from the Picture-in-Picture interstitial.
The text is also moved to the top left of the interstitial and styled
to play well with the modern media controls, e.g. Play/Pause button
will no longer cover the interstitial content.

BUG: 844357
Change-Id: I3eed46bece9f9b26257a4d2ed4b7a0b6cb3818b8
Reviewed-on: https://chromium-review.googlesource.com/1071231
Commit-Queue: Mounir Lamouri <mlamouri@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561889}

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

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

third_party/WebKit/LayoutTests/media/picture-in-picture/utils.js

@@ -12,7 +12,7 @@ function clickPictureInPictureButton(video, callback) {
 }
 
 function checkPictureInPictureInterstitialDoesNotExist(video) {
-  var controlID = '-internal-picture-in-picture-icon';
+  var controlID = '-internal-picture-in-picture-interstitial-message';
 
   var interstitial = getElementByPseudoId(internals.shadowRoot(video), controlID);
   if (interstitial)

third_party/blink/renderer/core/html/media/picture_in_picture_interstitial.cc

@@ -36,14 +36,9 @@ PictureInPictureInterstitial::PictureInPictureInterstitial(
   background_image_->SetSrc(videoElement.getAttribute(HTMLNames::posterAttr));
   AppendChild(background_image_);
 
-  pip_icon_ = HTMLDivElement::Create(GetDocument());
-  pip_icon_->SetShadowPseudoId(
-      AtomicString("-internal-picture-in-picture-icon"));
-  AppendChild(pip_icon_);
-
   HTMLDivElement* message_element_ = HTMLDivElement::Create(GetDocument());
   message_element_->SetShadowPseudoId(
-      AtomicString("-internal-media-interstitial-message"));
+      AtomicString("-internal-picture-in-picture-interstitial-message"));
   message_element_->setInnerText(
       GetVideoElement().GetLocale().QueryString(
           WebLocalizedString::kPictureInPictureInterstitialText),
@@ -101,7 +96,6 @@ void PictureInPictureInterstitial::OnPosterImageChanged() {
 void PictureInPictureInterstitial::Trace(blink::Visitor* visitor) {
   visitor->Trace(video_element_);
   visitor->Trace(background_image_);
-  visitor->Trace(pip_icon_);
   visitor->Trace(message_element_);
   HTMLDivElement::Trace(visitor);
 }

third_party/blink/renderer/core/html/media/picture_in_picture_interstitial.h

@@ -20,9 +20,7 @@ class HTMLVideoElement;
 // +-HTMLImageElement
 // |    (-internal-media-interstitial-background-image)
 // \-HTMLDivElement
-// |    (-internal-picture-in-picture-icon)
-// \-HTMLDivElement
-// |    (-internal-media-interstitial-message)
+// |    (-internal-picture-in-picture-interstitial-message)
 class PictureInPictureInterstitial final : public HTMLDivElement {
  public:
   explicit PictureInPictureInterstitial(HTMLVideoElement&);
@@ -51,7 +49,6 @@ class PictureInPictureInterstitial final : public HTMLDivElement {
   TaskRunnerTimer<PictureInPictureInterstitial> interstitial_timer_;
   Member<HTMLVideoElement> video_element_;
   Member<HTMLImageElement> background_image_;
-  Member<HTMLDivElement> pip_icon_;
   Member<HTMLDivElement> message_element_;
 };
 

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

@@ -37,8 +37,7 @@ video::-internal-media-interstitial-background-image {
     filter: grayscale(100%) blur(5px) opacity(40%);
 }
 
-video::-internal-media-remoting-cast-icon,
-video::-internal-picture-in-picture-icon {
+video::-internal-media-remoting-cast-icon {
     -webkit-appearance: none;
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -55,7 +54,8 @@ video::-internal-picture-in-picture-icon {
     top: calc(50% - 3vw);
 }
 
-video::-internal-media-interstitial-message {
+video::-internal-media-interstitial-message,
+video::-internal-picture-in-picture-interstitial-message {
     display: inline;
     position: absolute;
     top: calc(50% + 1vw);
@@ -71,6 +71,14 @@ video::-internal-media-interstitial-message {
     margin: 0px;
 }
 
+video::-internal-picture-in-picture-interstitial-message {
+    top: calc(1vw);
+    color: rgba(255,255,255,0.8);
+    text-align: left;
+    font-size: 0.75em;
+    margin: 15px; /* Follows modern controls margins. */
+}
+
 video::-internal-media-remoting-toast-message {
     display: inline;
     position: absolute;
@@ -93,8 +101,3 @@ video::-internal-media-remoting-cast-icon {
     url(default_100_percent/legacy/mediaremoting_cast.png) 1x,
     url(default_200_percent/legacy/mediaremoting_cast.png) 2x);
 }
-
-video::-internal-picture-in-picture-icon {
-  background-image: -webkit-image-set(
-    url(default_100_percent/legacy/mediaplayer_pictureinpicture.png) 1x);
-}