Media Remoting: Add interstitial elements to media element shadow dom.

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

Index: third_party/WebKit/Source/core/html/shadow/MediaRemotingElements.cpp
diff --git a/third_party/WebKit/Source/core/html/shadow/MediaRemotingElements.cpp b/third_party/WebKit/Source/core/html/shadow/MediaRemotingElements.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..6504bd6a7b33fb2038e7bce3a45ef58bfa6fa9ef
--- /dev/null
+++ b/third_party/WebKit/Source/core/html/shadow/MediaRemotingElements.cpp
@@ -0,0 +1,139 @@
+// Copyright 2017 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.
+
+#include "core/html/shadow/MediaRemotingElements.h"
+
+#include "core/InputTypeNames.h"
+#include "core/dom/ClientRect.h"
+#include "core/dom/Text.h"
+#include "core/dom/shadow/ShadowRoot.h"
+#include "core/events/MouseEvent.h"
+#include "core/html/HTMLVideoElement.h"
+#include "core/input/EventHandler.h"
+#include "platform/text/PlatformLocale.h"
+#include "public/platform/Platform.h"
+#include "public/platform/WebLocalizedString.h"
+
+namespace blink {
+
+using namespace HTMLNames;
+
+class MediaRemotingDisableButtonElement::MouseEventsListener final
+    : public EventListener {
+ public:
+  explicit MouseEventsListener(MediaRemotingDisableButtonElement& element)
+      : EventListener(CPPEventListenerType), m_element(element) {}
+
+  bool operator==(const EventListener& other) const override {
+    return this == &other;
+  }
+
+  void trace(blink::Visitor* visitor) {
+    visitor->trace(m_element);
+    EventListener::trace(visitor);
+  }
+
+ private:
+  void handleEvent(ExecutionContext* context, Event* event) override {
+    DCHECK(event->type() == EventTypeNames::click);
+
+    MouseEvent* mouseEvent = toMouseEvent(event);
+    ClientRect* clientRect = m_element->getBoundingClientRect();
+    const double x = mouseEvent->x();
+    const double y = mouseEvent->y();
+    if (x < clientRect->left() || x > clientRect->right() ||
+        y < clientRect->top() || y > clientRect->bottom())
+      return;
+
+    m_element->videoElement().disableMediaRemoting();
+    event->setDefaultHandled();
+    event->stopPropagation();
+    m_element->document().removeEventListener(EventTypeNames::click, this,
+                                              true);
+  }
+
+  Member<MediaRemotingDisableButtonElement> m_element;
+};
+
+MediaRemotingDisableButtonElement::MediaRemotingDisableButtonElement(
+    MediaRemotingInterstitialElements& interstitialElements)
+    : HTMLInputElement(interstitialElements.document(), false),
+      m_interstitialElements(interstitialElements) {
+  m_listener = new MouseEventsListener(*this);
+  ensureUserAgentShadowRoot();
+  setType(InputTypeNames::text);
+  setValue(interstitialElements.videoElement().locale().queryString(
+      WebLocalizedString::MediaRemotingDisableText));
+  setShadowPseudoId(AtomicString("-internal-media-remoting-disable-button"));
+}
+
+void MediaRemotingDisableButtonElement::onShown() {
+  document().addEventListener(EventTypeNames::click, m_listener, true);

[mlamouri (slow - plz ping), 2017/04/07 13:18:34]

Can't you use `defaultEventHandler()` from HTMLInputElement and check if the
event is a click? What would be the difference from what you are doing? Sounds
like it could reduce the boilerplate.

[xjz, 2017/04/07 23:07:01]

Using 'defaultEventHandler()' does not work for websites that use custom
controls (like vimeo videos), because the mouse clicking events will be handled
by vimeo custom controls (which is on top of this disable button element). What
I am doing here is similar to what vimeo does, that to register an event
listener to the document, which can listen to the events no matter what layer
this element is. This listener will only be registered when media remoting
starts, and will be removed once it stops or the button is clicked.

[mlamouri (slow - plz ping), 2017/04/10 13:44:22]

I agree that because the event is only there when in remoting mode, it's not
that bad but it's still not ideal as we are re-inventing the behaviour for
clicking which means that even if this button isn't visible but the user clicks
on top of it, it would do its action.

Did you try PreDispatchEventHandler?

Also, happy to look more into this by applying your CL but because of the big
Blink rename, I can't until you rebase :(

[xjz, 2017/04/11 04:29:44]

I did try preDispatchEventHandler and it didn't work either. 
Rebased.

+}
+
+void MediaRemotingDisableButtonElement::onHidden() {
+  document().removeEventListener(EventTypeNames::click, m_listener, true);
+}
+
+DEFINE_TRACE(MediaRemotingDisableButtonElement) {
+  visitor->trace(m_interstitialElements);
+  visitor->trace(m_listener);
+  HTMLInputElement::trace(visitor);
+}
+
+// ----------------------------
+
+MediaRemotingCastIconElement::MediaRemotingCastIconElement(
+    MediaRemotingInterstitialElements& remotingInterstitial)
+    : HTMLInputElement(remotingInterstitial.document(), false) {
+  ensureUserAgentShadowRoot();
+  setType(InputTypeNames::button);
+  setShadowPseudoId(AtomicString("-internal-media-remoting-cast-icon"));
+}
+
+// ----------------------------
+
+MediaRemotingBackgroundImageElement::MediaRemotingBackgroundImageElement(
+    MediaRemotingInterstitial& remotingInterstitial)
+    : HTMLInputElement(remotingInterstitial.document(), false),
+      m_interstitial(remotingInterstitial) {
+  ensureUserAgentShadowRoot();
+  setType(InputTypeNames::image);
+  setShadowPseudoId(AtomicString("-internal-media-remoting-background-image"));
+  const AtomicString& posterUrl =
+      m_interstitial->videoElement().getAttribute(posterAttr);
+  if (posterUrl.isEmpty())
+    hide();
+  else
+    setAttribute(srcAttr, posterUrl);

[mlamouri (slow - plz ping), 2017/04/07 13:18:35]

Stupid question but would it work to change
HTMLVideoElement::shouldDisplayPosterImage() to return true when doing media
remoting? It could save us from having this background image element.

[xjz, 2017/04/07 23:07:01]

Yes, we can use this approach to show original poster image. The only reason I
didn't do this way because I don't know how to convert the poster image to
grayscale and get blurred in this way. So I added this element and did the
conversion using css. 

+}
+
+void MediaRemotingBackgroundImageElement::show() {
+  removeInlineStyleProperty(CSSPropertyDisplay);
+}
+
+void MediaRemotingBackgroundImageElement::hide() {
+  setInlineStyleProperty(CSSPropertyDisplay, CSSValueNone);
+}
+
+void MediaRemotingBackgroundImageElement::onPosterImageChanged() {
+  const AtomicString& posterUrl =
+      m_interstitial->videoElement().getAttribute(posterAttr);
+  if (posterUrl.isEmpty()) {
+    hide();
+  } else {
+    setAttribute(srcAttr, posterUrl);
+    if (m_interstitial->shouldShow()) {
+      hide();
+      show();
+    }
+  }
+}
+
+DEFINE_TRACE(MediaRemotingBackgroundImageElement) {
+  visitor->trace(m_interstitial);
+  HTMLInputElement::trace(visitor);
+}
+
+}  // namespace blink