Media Controls: Create arrows on demand

Create the arrows and style element on the overlay on demand when
they are first needed.

BUG=821961,821414

Change-Id: Ic695c7e3aef337e304d225575a40811a25243dbf
Reviewed-on: https://chromium-review.googlesource.com/988686Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548617}

third_party/WebKit/Source/modules/media_controls/elements/MediaControlOverlayPlayButtonElement.cpp

@@ -47,10 +47,25 @@ namespace blink {
 
 MediaControlOverlayPlayButtonElement::AnimatedArrow::AnimatedArrow(
     const AtomicString& id,
-    ContainerNode& parent)
-    : HTMLDivElement(parent.GetDocument()) {
+    Document& document)
+    : HTMLDivElement(document) {
   setAttribute("id", id);
-  parent.AppendChild(this);
+}
+
+void MediaControlOverlayPlayButtonElement::AnimatedArrow::HideInternal() {
+  DCHECK(!hidden_);
+  svg_container_->SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+  hidden_ = true;
+}
+
+void MediaControlOverlayPlayButtonElement::AnimatedArrow::ShowInternal() {
+  DCHECK(hidden_);
+  hidden_ = false;
+
+  if (svg_container_) {
+    svg_container_->RemoveInlineStyleProperty(CSSPropertyDisplay);
+    return;
+  }
 
   SetInnerHTMLFromString(MediaControlsResourceLoader::GetJumpSVGImage());
 
@@ -58,24 +73,19 @@ MediaControlOverlayPlayButtonElement::AnimatedArrow::AnimatedArrow(
   svg_container_ = getElementById("jump");
 
   event_listener_ = new MediaControlAnimationEventListener(this);
-  svg_container_->SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
 }
 
 void MediaControlOverlayPlayButtonElement::AnimatedArrow::
     OnAnimationIteration() {
   counter_--;
 
-  if (counter_ == 0) {
-    svg_container_->SetInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
-    hidden_ = true;
-  }
+  if (counter_ == 0)
+    HideInternal();
 }
 
 void MediaControlOverlayPlayButtonElement::AnimatedArrow::Show() {
-  if (hidden_) {
-    svg_container_->RemoveInlineStyleProperty(CSSPropertyDisplay);
-    hidden_ = false;
-  }
+  if (hidden_)
+    ShowInternal();
 
   counter_++;
 }
@@ -116,24 +126,9 @@ MediaControlOverlayPlayButtonElement::MediaControlOverlayPlayButtonElement(
   SetShadowPseudoId(AtomicString("-webkit-media-controls-overlay-play-button"));
 
   if (MediaControlsImpl::IsModern()) {
-    ShadowRoot* shadow_root = GetShadowRoot();
-
-    // This stylesheet element and will contain rules that are specific to the
-    // loading panel. The shadow DOM protects these rules from the parent DOM
-    // from bleeding across the shadow DOM boundary.
-    auto* style = HTMLStyleElement::Create(GetDocument(), CreateElementFlags());
-    style->setTextContent(
-        MediaControlsResourceLoader::GetOverlayPlayStyleSheet());
-    shadow_root->AppendChild(style);
-
-    left_jump_arrow_ = new MediaControlOverlayPlayButtonElement::AnimatedArrow(
-        "left-arrow", *shadow_root);
-
     internal_button_ = MediaControlElementsHelper::CreateDiv(
-        "-internal-media-controls-overlay-play-button-internal", shadow_root);
-
-    right_jump_arrow_ = new MediaControlOverlayPlayButtonElement::AnimatedArrow(
-        "right-arrow", *shadow_root);
+        "-internal-media-controls-overlay-play-button-internal",
+        GetShadowRoot());
   }
 }
 
@@ -172,6 +167,31 @@ void MediaControlOverlayPlayButtonElement::MaybePlayPause() {
 }
 
 void MediaControlOverlayPlayButtonElement::MaybeJump(int seconds) {
+  // Load the arrow icons and associate CSS the first time we jump.
+  if (!left_jump_arrow_) {
+    DCHECK(!right_jump_arrow_);
+    ShadowRoot* shadow_root = GetShadowRoot();
+
+    // This stylesheet element and will contain rules that are specific to the
+    // jump arrows. The shadow DOM protects these rules from the parent DOM
+    // from bleeding across the shadow DOM boundary.
+    auto* style = HTMLStyleElement::Create(GetDocument(), CreateElementFlags());
+    style->setTextContent(
+        MediaControlsResourceLoader::GetOverlayPlayStyleSheet());
+    shadow_root->AppendChild(style);
+
+    // Insert the left jump arrow to the left of the play button.
+    left_jump_arrow_ = new MediaControlOverlayPlayButtonElement::AnimatedArrow(
+        "left-arrow", GetDocument());
+    shadow_root->InsertBefore(left_jump_arrow_, shadow_root->firstChild());
+
+    // Insert the right jump arrow to the right of the play button.
+    right_jump_arrow_ = new MediaControlOverlayPlayButtonElement::AnimatedArrow(
+        "right-arrow", GetDocument());
+    shadow_root->AppendChild(right_jump_arrow_);
+  }
+
+  DCHECK(left_jump_arrow_ && right_jump_arrow_);
   double new_time = std::max(0.0, MediaElement().currentTime() + seconds);
   new_time = std::min(new_time, MediaElement().duration());
   MediaElement().setCurrentTime(new_time);

third_party/WebKit/Source/modules/media_controls/elements/MediaControlOverlayPlayButtonElement.h

@@ -17,7 +17,6 @@ class AtomicString;
 
 namespace blink {
 
-class ContainerNode;
 class Event;
 class MediaControlsImpl;
 
@@ -49,7 +48,7 @@ class MODULES_EXPORT MediaControlOverlayPlayButtonElement final
     USING_GARBAGE_COLLECTED_MIXIN(AnimatedArrow);
 
    public:
-    AnimatedArrow(const AtomicString& id, ContainerNode& parent);
+    AnimatedArrow(const AtomicString& id, Document& document);
 
     // MediaControlAnimationEventListener::Observer overrides
     void OnAnimationIteration() override;
@@ -64,6 +63,9 @@ class MODULES_EXPORT MediaControlOverlayPlayButtonElement final
     void Trace(Visitor*);
 
    private:
+    void HideInternal();
+    void ShowInternal();
+
     int counter_ = 0;
     bool hidden_ = true;
 

third_party/WebKit/Source/modules/media_controls/elements/MediaControlOverlayPlayButtonElementTest.cpp

@@ -18,29 +18,40 @@ class MediaControlOverlayPlayButtonElementTest : public PageTestBase {
     // Create page and instance of AnimatedArrow to run tests on.
     PageTestBase::SetUp();
     arrow_element_ = new MediaControlOverlayPlayButtonElement::AnimatedArrow(
-        "test", *GetDocument().body());
+        "test", GetDocument());
+    GetDocument().body()->AppendChild(arrow_element_);
   }
 
  protected:
-  void ExpectIsHidden() { EXPECT_TRUE(SVGElementHasDisplayValue()); }
+  void ExpectNotPresent() { EXPECT_FALSE(SVGElementIsPresent()); }
 
-  void ExpectIsShown() { EXPECT_FALSE(SVGElementHasDisplayValue()); }
+  void ExpectPresentAndShown() {
+    EXPECT_TRUE(SVGElementIsPresent());
+    EXPECT_FALSE(SVGElementHasDisplayValue());
+  }
+
+  void ExpectPresentAndHidden() {
+    EXPECT_TRUE(SVGElementIsPresent());
+    EXPECT_TRUE(SVGElementHasDisplayValue());
+  }
 
   void SimulateShow() { arrow_element_->Show(); }
 
   void SimulateAnimationIteration() {
     Event* event = Event::Create(EventTypeNames::animationiteration);
-    GetElementById("arrow-3").DispatchEvent(event);
+    GetElementById("arrow-3")->DispatchEvent(event);
   }
 
  private:
   bool SVGElementHasDisplayValue() {
-    return GetElementById("jump").InlineStyle()->HasProperty(
+    return GetElementById("jump")->InlineStyle()->HasProperty(
         CSSPropertyDisplay);
   }
 
-  Element& GetElementById(const AtomicString& id) {
-    return *GetDocument().body()->getElementById(id);
+  bool SVGElementIsPresent() { return GetElementById("jump"); }
+
+  Element* GetElementById(const AtomicString& id) {
+    return GetDocument().body()->getElementById(id);
   }
 
   Persistent<MediaControlOverlayPlayButtonElement::AnimatedArrow>
@@ -48,24 +59,24 @@ class MediaControlOverlayPlayButtonElementTest : public PageTestBase {
 };
 
 TEST_F(MediaControlOverlayPlayButtonElementTest, ShowIncrementsCounter) {
-  ExpectIsHidden();
+  ExpectNotPresent();
 
   // Start a new show.
   SimulateShow();
-  ExpectIsShown();
+  ExpectPresentAndShown();
 
   // Increment the counter and finish the first show.
   SimulateShow();
   SimulateAnimationIteration();
-  ExpectIsShown();
+  ExpectPresentAndShown();
 
   // Finish the second show.
   SimulateAnimationIteration();
-  ExpectIsHidden();
+  ExpectPresentAndHidden();
 
   // Start a new show.
   SimulateShow();
-  ExpectIsShown();
+  ExpectPresentAndShown();
 }
 
 }  // namespace blink