Improving HTML5 video controls

- correct support for the fullscreen button
- change the controls to be 48px high
- auto-hide the controls, touching the video makes them appear again

bug:2126902
Change-Id: Idd2b720034de3d5d432c9ea62d9045934c46f6c1

6 files changed, 59 insertions, 30 deletions

diff --git a/WebCore/css/mediaControlsAndroid.css b/WebCore/css/mediaControlsAndroid.css
index f33c7d5..77f8b08 100644
--- a/WebCore/css/mediaControlsAndroid.css
+++ b/WebCore/css/mediaControlsAndroid.css
@@ -27,7 +27,7 @@
 
 audio {
     width: 200px;
-    height: 32px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
@@ -40,26 +40,26 @@ audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     width: 100%;
     z-index: 0;
     overflow: hidden;
-    height: 32px;
+    height: 48px;
     text-align: right;
 }
 
 video:-webkit-full-page-media::-webkit-media-controls-panel {
-    bottom: -32px;
+    bottom: -48px;
 }
 
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     -webkit-appearance: media-mute-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
     -webkit-appearance: media-play-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
@@ -70,7 +70,7 @@ audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
     -webkit-box-pack: end;
     -webkit-box-flex: 1;
     -webkit-user-select: none;
-    height: 32px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
@@ -85,8 +85,8 @@ audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     -webkit-appearance: media-slider;
     display: -webkit-box;
     -webkit-box-flex: 1;
-    height: 32px;
-    padding: 0px 2px;
+    height: 48px;
+    padding: 0px 0px;
 }
 
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
@@ -100,22 +100,22 @@ audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
     -webkit-appearance: media-seek-back-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
     -webkit-appearance: media-seek-forward-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
-    -webkit-appearance: media-play-button;
+    -webkit-appearance: media-fullscreen-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px;
+    width: 48px;
+    height: 48px;
 }
 
 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
@@ -129,6 +129,6 @@ audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
     -webkit-appearance: media-toggle-closed-captions-button;
     display: -webkit-box;
-    width: 32px;
-    height: 32px
+    width: 48px;
+    height: 48px
 }
diff --git a/WebCore/platform/android/RenderThemeAndroid.cpp b/WebCore/platform/android/RenderThemeAndroid.cpp
index 5253219..5a0bfb8 100644
--- a/WebCore/platform/android/RenderThemeAndroid.cpp
+++ b/WebCore/platform/android/RenderThemeAndroid.cpp
@@ -262,12 +262,12 @@ bool RenderThemeAndroid::shouldRenderMediaControlPart(ControlPart part, Element*
       }
 }
 
-bool paintMediaFullscreenButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& rect)
+bool RenderThemeAndroid::paintMediaFullscreenButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& rect)
 {
       bool translucent = false;
       if (o && toParentMediaElement(o) && toParentMediaElement(o)->hasTagName(HTMLNames::videoTag))
           translucent = true;
-      RenderSkinMediaButton::Draw(getCanvasFromInfo(paintInfo), rect, RenderSkinMediaButton::PLAY, translucent);
+      RenderSkinMediaButton::Draw(getCanvasFromInfo(paintInfo), rect, RenderSkinMediaButton::FULLSCREEN, translucent);
       return false;
 }
 
diff --git a/WebCore/platform/android/RenderThemeAndroid.h b/WebCore/platform/android/RenderThemeAndroid.h
index 74820f2..8314a9c 100644
--- a/WebCore/platform/android/RenderThemeAndroid.h
+++ b/WebCore/platform/android/RenderThemeAndroid.h
@@ -81,13 +81,16 @@ protected:
     virtual String extraMediaControlsStyleSheet();
     virtual void adjustSliderThumbSize(RenderObject* o) const;
     virtual bool shouldRenderMediaControlPart(ControlPart part, Element* e);
-    bool paintMediaMuteButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
-    bool paintMediaPlayButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
-    bool paintMediaSeekBackButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
-    bool paintMediaSeekForwardButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
-    bool paintMediaSliderTrack(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
-    bool paintMediaSliderThumb(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaFullscreenButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaMuteButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaPlayButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaSeekBackButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaSeekForwardButton(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaSliderTrack(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
+    virtual bool paintMediaSliderThumb(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r);
     virtual bool paintMediaControlsBackground(RenderObject* object, const PaintInfo& paintInfo, const IntRect& rect);
+    virtual double mediaControlsFadeInDuration() { return 0.5; }
+    virtual double mediaControlsFadeOutDuration() { return 0.5; }
 #endif
 
     virtual bool paintRadio(RenderObject*, const PaintInfo&, const IntRect&);
diff --git a/WebCore/platform/graphics/android/MediaPlayerPrivateAndroid.h b/WebCore/platform/graphics/android/MediaPlayerPrivateAndroid.h
index 66b35dd..6948799 100644
--- a/WebCore/platform/graphics/android/MediaPlayerPrivateAndroid.h
+++ b/WebCore/platform/graphics/android/MediaPlayerPrivateAndroid.h
@@ -50,8 +50,9 @@ public:
 
     virtual IntSize naturalSize() const { return m_naturalSize; }
 
-    virtual bool hasAudio() const { return false; }
-    virtual bool hasVideo() const { return false; }
+    virtual bool supportsFullscreen() const = 0;
+    virtual bool hasAudio() const = 0;
+    virtual bool hasVideo() const = 0;
 
     virtual void setVisible(bool);
 
diff --git a/WebCore/rendering/RenderMedia.cpp b/WebCore/rendering/RenderMedia.cpp
index 49a536c..f19ca96 100644
--- a/WebCore/rendering/RenderMedia.cpp
+++ b/WebCore/rendering/RenderMedia.cpp
@@ -39,6 +39,10 @@
 #include <wtf/CurrentTime.h>
 #include <wtf/MathExtras.h>
 
+#if PLATFORM(ANDROID)
+#define TOUCH_DELAY 4
+#endif
+
 using namespace std;
 
 namespace WebCore {
@@ -57,6 +61,9 @@ RenderMedia::RenderMedia(HTMLMediaElement* video)
     , m_opacityAnimationDuration(0)
     , m_opacityAnimationFrom(0)
     , m_opacityAnimationTo(1.0f)
+#if PLATFORM(ANDROID)
+    , m_lastTouch(0)
+#endif
 {
     setImageResource(RenderImageResource::create());
 }
@@ -70,6 +77,9 @@ RenderMedia::RenderMedia(HTMLMediaElement* video, const IntSize& intrinsicSize)
     , m_opacityAnimationDuration(0)
     , m_opacityAnimationFrom(0)
     , m_opacityAnimationTo(1.0f)
+#if PLATFORM(ANDROID)
+    , m_lastTouch(0)
+#endif
 {
     setImageResource(RenderImageResource::create());
     setIntrinsicSize(intrinsicSize);
@@ -456,7 +466,14 @@ void RenderMedia::updateControlVisibility()
     // Don't fade if the media element is not visible
     if (style()->visibility() != VISIBLE)
         return;
-    
+
+#if PLATFORM(ANDROID)
+    if (WTF::currentTime() - m_lastTouch > TOUCH_DELAY)
+        m_mouseOver = false;
+    else
+        m_mouseOver = true;
+#endif
+
     bool shouldHideController = !m_mouseOver && !media->canPlay();
 
     // Do fading manually, css animations don't work with shadow trees
@@ -535,6 +552,11 @@ void RenderMedia::updateVolumeSliderContainer(bool visible)
 
 void RenderMedia::forwardEvent(Event* event)
 {
+#if PLATFORM(ANDROID)
+    if (event->isMouseEvent())
+        m_lastTouch = WTF::currentTime();
+#endif
+
     if (event->isMouseEvent() && m_controlsShadowRoot) {
         MouseEvent* mouseEvent = static_cast<MouseEvent*>(event);
         IntPoint point(mouseEvent->absoluteLocation());
diff --git a/WebCore/rendering/RenderMedia.h b/WebCore/rendering/RenderMedia.h
index aa725ff..65fdc7d 100644
--- a/WebCore/rendering/RenderMedia.h
+++ b/WebCore/rendering/RenderMedia.h
@@ -151,6 +151,9 @@ private:
     double m_opacityAnimationDuration;
     float m_opacityAnimationFrom;
     float m_opacityAnimationTo;
+#if PLATFORM(ANDROID)
+    double m_lastTouch;
+#endif
 };
 
 inline RenderMedia* toRenderMedia(RenderObject* object)