Enable smooth transition when show/hide media remoting interstitial.

BUG=712479

Review-Url: https://codereview.chromium.org/2825493005
Cr-Commit-Position: refs/heads/master@{#465712}

third_party/WebKit/Source/core/css/mediaControls.css

@@ -157,7 +157,8 @@ video::-internal-media-remoting-interstitial {
     align-items: center;
     font-size: 16px;
     background-color: black;
-    transition: opacity .2s ease-in-out;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
 }
 
 video::-internal-media-remoting-background-image {

third_party/WebKit/Source/core/html/HTMLVideoElement.cpp

@@ -492,7 +492,7 @@ ScriptPromise HTMLVideoElement::CreateImageBitmap(
 }
 
 void HTMLVideoElement::MediaRemotingStarted() {
-  DCHECK_EQ(media_remoting_status_, MediaRemotingStatus::kNotStarted);
+  DCHECK(media_remoting_status_ == MediaRemotingStatus::kNotStarted);
   media_remoting_status_ = MediaRemotingStatus::kStarted;
   if (!remoting_interstitial_) {
     remoting_interstitial_ = new MediaRemotingInterstitial(*this);
@@ -504,9 +504,13 @@ void HTMLVideoElement::MediaRemotingStarted() {
 }
 
 void HTMLVideoElement::MediaRemotingStopped() {
-  if (media_remoting_status_ != MediaRemotingStatus::kDisabled)
-    media_remoting_status_ = MediaRemotingStatus::kNotStarted;
+  // Early return because this was already called when media remoting was
+  // disabled.
+  if (media_remoting_status_ == MediaRemotingStatus::kDisabled)
+    return;
+  DCHECK(media_remoting_status_ == MediaRemotingStatus::kStarted);
   DCHECK(remoting_interstitial_);
+  media_remoting_status_ = MediaRemotingStatus::kNotStarted;
   remoting_interstitial_->Hide();
 }
 

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

@@ -4,15 +4,28 @@
 
 #include "core/html/shadow/MediaRemotingInterstitial.h"
 
+#include "core/dom/TaskRunnerHelper.h"
 #include "core/html/HTMLImageElement.h"
 #include "core/html/HTMLVideoElement.h"
 #include "core/html/shadow/MediaRemotingElements.h"
 
+namespace {
+
+constexpr double kStyleChangeTransSeconds = 0.2;
+constexpr double kHiddenAnimationSeconds = 0.3;
+
+}  // namespace
+
 namespace blink {
 
 MediaRemotingInterstitial::MediaRemotingInterstitial(
     HTMLVideoElement& videoElement)
     : HTMLDivElement(videoElement.GetDocument()),
+      toggle_insterstitial_timer_(
+          TaskRunnerHelper::Get(TaskType::kUnthrottled,
+                                &videoElement.GetDocument()),
+          this,
+          &MediaRemotingInterstitial::ToggleInterstitialTimerFired),
       video_element_(&videoElement) {
   SetShadowPseudoId(AtomicString("-internal-media-remoting-interstitial"));
   background_image_ = HTMLImageElement::Create(videoElement.GetDocument());
@@ -32,13 +45,43 @@ MediaRemotingInterstitial::MediaRemotingInterstitial(
 }
 
 void MediaRemotingInterstitial::Show() {
+  DCHECK(!should_be_visible_);
+  if (toggle_insterstitial_timer_.IsActive())
+    toggle_insterstitial_timer_.Stop();
+  should_be_visible_ = true;
   RemoveInlineStyleProperty(CSSPropertyDisplay);
   exit_button_->OnShown();
+  toggle_insterstitial_timer_.StartOneShot(kStyleChangeTransSeconds,
+                                           BLINK_FROM_HERE);
 }
 
 void MediaRemotingInterstitial::Hide() {
-  SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+  DCHECK(should_be_visible_);
+  if (toggle_insterstitial_timer_.IsActive())
+    toggle_insterstitial_timer_.Stop();
+  should_be_visible_ = false;
+  SetInlineStyleProperty(CSSPropertyOpacity, 0,
+                         CSSPrimitiveValue::UnitType::kNumber);
   exit_button_->OnHidden();
+  toggle_insterstitial_timer_.StartOneShot(kHiddenAnimationSeconds,
+                                           BLINK_FROM_HERE);
+}
+
+void MediaRemotingInterstitial::ToggleInterstitialTimerFired(TimerBase*) {
+  toggle_insterstitial_timer_.Stop();
+  if (should_be_visible_) {
+    SetInlineStyleProperty(CSSPropertyOpacity, 1,
+                           CSSPrimitiveValue::UnitType::kNumber);
+  } else {
+    SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+  }
+}
+
+void MediaRemotingInterstitial::DidMoveToNewDocument(Document& old_document) {
+  toggle_insterstitial_timer_.MoveToNewTaskRunner(
+      TaskRunnerHelper::Get(TaskType::kUnthrottled, &GetDocument()));
+
+  HTMLDivElement::DidMoveToNewDocument(old_document);
 }
 
 void MediaRemotingInterstitial::OnPosterImageChanged() {

third_party/WebKit/Source/core/html/shadow/MediaRemotingInterstitial.h

@@ -34,6 +34,7 @@ class MediaRemotingInterstitial final : public HTMLDivElement {
   // Show/Hide Media Remoting interstitial.
   void Show();
   void Hide();
+
   void OnPosterImageChanged();
 
   HTMLVideoElement& GetVideoElement() const { return *video_element_; }
@@ -43,7 +44,15 @@ class MediaRemotingInterstitial final : public HTMLDivElement {
  private:
   // Node override.
   bool IsMediaRemotingInterstitial() const override { return true; }
+  void DidMoveToNewDocument(Document&) override;
+
+  void ToggleInterstitialTimerFired(TimerBase*);
+
+  // Indicates whether the interstitial should be visible. It is set/changed
+  // when SHow()/Hide() is called.
+  bool should_be_visible_ = false;
 
+  TaskRunnerTimer<MediaRemotingInterstitial> toggle_insterstitial_timer_;
   Member<HTMLVideoElement> video_element_;
   Member<HTMLImageElement> background_image_;
   Member<MediaRemotingExitButtonElement> exit_button_;