[GTK] MEDIA_CONTROLS_SCRIPT support
authorcalvaris@igalia.com <calvaris@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Feb 2014 11:28:34 +0000 (11:28 +0000)
committercalvaris@igalia.com <calvaris@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 13 Feb 2014 11:28:34 +0000 (11:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=123097

Reviewed by Jer Noble.

.:

Part of the Autotools and CMake structure to build the media
controls script.

* Source/autotools/SetupWebKitFeatures.m4: Activated the media
controls script by default.
* Source/cmake/OptionsGTK.cmake: Activated the media controls
script by default.
* Source/cmake/WebKitFeatures.cmake: Created the option to
activate the controls script.
* Source/cmakeconfig.h.cmake: Created the define template the the
media controls script.

Source/WebCore:

WebKitGTK+ multimedia controls are now managed from Javascript
code. Apple controls are kept as common code and GTK+ ones are
subclassed for the specific behavior.

Both CMake and Autotools build support is provided.

* CMakeLists.txt: Added support to build the media controls
script and their associated files.
* GNUmakefile.am: Added support to generate the C++ code from the
Javascript.
* GNUmakefile.list.am: Added the media controls script associated
files.
* Modules/mediacontrols/MediaControlsHost.cpp:
* Modules/mediacontrols/MediaControlsHost.h:
* Modules/mediacontrols/MediaControlsHost.idl:
(WebCore::MediaControlsHost::supportsFullscreen): Added attribute
to know if the element supports fullscreen.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.handleWrapperMouseMove):
(Controller.prototype.handleWrapperMouseOut):
(Controller.prototype.updatePlaying): Use clear and
resetHideControlsTimer.
(Controller.prototype.clearHideControlsTimer): Added.
(Controller.prototype.resetHideControlsTimer): Added.
* Modules/mediacontrols/mediaControlsGtk.js: Added.
(createControls): Calls ControllerGtk.
(ControllerGtk): Calls the superclass.
(contains): Defines a function to know if an object is contained
in an array.
(ControllerGtk.prototype.inheritFrom): Copies the method of the
superclass that are not reimplemented in the subclass.
(ControllerGtk.prototype.createControls): Calls the superclass and
create the remaining needed elements.
(ControllerGtk.prototype.configureInlineControls): Configures the
controls.
(ControllerGtk.prototype.setStatusHidden): Redefined empty.
(ControllerGtk.prototype.updateTime): Writes the duration and
current position. As it was so far, current time also includes
duration. If current time is bigger than 0 we show that.
(ControllerGtk.prototype.showCurrentTime): Shows current time and
hides duration label (that is included in current time).
(ControllerGtk.prototype.handlePlay): Calls the superclass and
force showing the current time.
(ControllerGtk.prototype.handleTimeUpdate): Always update the
time.
(ControllerGtk.prototype.handleMuteButtonMouseOver): Shows the
volume slider.
(ControllerGtk.prototype.handleVolumeBoxMouseOut): Hides the
volume slider.
(ControllerGtk.prototype.addControls): Adds the enclosure instead
of the panel directly. Panel is, of course, part of the enclosure.
(ControllerGtk.prototype.updateReadyState): Shows the fullscreen
button only if fullscreen is supported. Sets the volume in up or
down mode depending on its position in the document. Updates the
volume.
(ControllerGtk.prototype.setControlsType): Creates the controls it
they were not created before. Unlike Apple ones, WebKitGTK+
fullscreen and inline controls are the same.
(ControllerGtk.prototype.updatePlaying): Calls the superclass and
shows the controls if not playing.
(ControllerGtk.prototype.handleCaptionButtonClicked): Redefined
empty. To be coherent with volume, that also shows a popup, this
is handled with mouseover instead of click.
(ControllerGtk.prototype.buildCaptionMenu): Calls the superclass
to build the menu, sets some listeners, centers the popup with the
captions button, keeps the current height and sets the style to 0,
which is needed to animate it.
(ControllerGtk.prototype.destroyCaptionMenu): Hides the caption menu.
(ControllerGtk.prototype.showCaptionMenu): Resets the height to
its original. We don't animate it with CSS because we would need
to specify a height in the style and we don't know it in advance.
(ControllerGtk.prototype.hideCaptionMenu): Sets height to 0.
(ControllerGtk.prototype.captionMenuTransitionEnd): When the
captions menu transtition ends, it is destroyed.
(ControllerGtk.prototype.handleCaptionButtonMouseOver): Creates
the caption menu and shows it.
(ControllerGtk.prototype.handleCaptionButtonMouseOut): Hides the
captions menu.
(ControllerGtk.prototype.handleCaptionMouseOut): Hides the
captions menu.
* PlatformGTK.cmake: Added WebCore to the target link libraries
and initialized the variables needed at CMakelists.txt
* css/mediaControlsGtk.css:
(audio::-webkit-media-controls-panel)
(video::-webkit-media-controls-panel): Added transtion based on opacity.
(video::-webkit-media-controls-panel): Set video opacity to 0.
(video::-webkit-media-controls-panel.paused): Set video opacity to 1.
(audio::-webkit-media-controls-panel div.mute-box): Set the same
style as the mute button to preserve the layout.
(audio::-webkit-media-controls-panel div.mute-box.hidden): Sets
the display to none.
(audio::-webkit-media-controls-mute-button)
(video::-webkit-media-controls-mute-button): Removed the outline
and the margin that is managed by the mute box now.
(audio::-webkit-media-controls-play-button)
(video::-webkit-media-controls-play-button): Removed the outline.
(audio::-webkit-media-controls-time-remaining-display)
(video::-webkit-media-controls-time-remaining-display): Removed
the display.
(audio::-webkit-media-controls-current-time-display)
(video::-webkit-media-controls-current-time-display): Added the
display block.
(video::-webkit-media-controls-time-remaining-display): Set
display none.
(video::-webkit-media-controls-time-remaining-display.show): Set
display block.
(video::-webkit-media-controls-time-remaining-display.hidden): Set
display none.
(audio::-webkit-media-controls-timeline)
(video::-webkit-media-controls-timeline): Removed outline.
(audio::-webkit-media-controls-volume-slider-container)
(video::-webkit-media-controls-volume-slider-container): Set
overflow hidden and set a transition by height.
(video::-webkit-media-controls-volume-slider-container.hidden):
Set height 0.
(video::-webkit-media-controls-volume-slider-container.down): Set
bottom to be below the panel. Changed the border radius and
transition accordingly.
(video::-webkit-media-controls-panel .hidden.down): Sets default
bottom as 0.
(audio::-webkit-media-controls-volume-slider)
(video::-webkit-media-controls-volume-slider): Removed the outline.
(audio::-webkit-media-controls-toggle-closed-captions-button)
(video::-webkit-media-controls-toggle-closed-captions-button):
Removed the background that is painted from C++ and removed the
outline.
(video::-webkit-media-controls-closed-captions-container):
(video::-webkit-media-controls-closed-captions-container h3):
(video::-webkit-media-controls-closed-captions-container ul):
(video::-webkit-media-controls-closed-captions-container li):
(video::-webkit-media-controls-closed-captions-container li.selected): Changed
the style to make it more coherent with the rest of the controls.
(audio::-webkit-media-controls-fullscreen-button)
(video::-webkit-media-controls-fullscreen-button): Removed the outline.
(audio::-webkit-media-controls-panel button.hidden): Sets the
display to none.
* html/HTMLMediaElement.cpp: UserAgentScripts.h is not needed here
and build cmake build would need for changes to get this compiled.
* platform/gtk/RenderThemeGtk.cpp:
(WebCore::nodeHasPseudo): Added. Checks if a node has a certain
pseudo.
(WebCore::nodeHasClass): Added. Checks if a node has a certain
class.
(WebCore::supportsFocus): Removed some element types as outline is
now handled in CSS.
(WebCore::RenderThemeGtk::paintMediaPlayButton): Checks if the
play button has the class paused to show the play icon instead of
the pause one.
(WebCore::RenderThemeGtk::paintMediaToggleClosedCaptionsButton):
Added. Paints the captions icon.
(WebCore::RenderThemeGtk::mediaControlsScript): Added. Loads the
bundled scripts.
* platform/gtk/RenderThemeGtk.h: Added the mediaControlsScript
method and declared the redefinition of the method to play the
captions icon.

LayoutTests:

Tests infrastructure for the media controls script.

* media/click-volume-bar-not-pausing.html:
* media/media-volume-slider-rendered-normal.html:
* media/video-controls-captions-trackmenu-hide-on-click-outside.html:
* media/video-volume-slider.html: Fixed.
* platform/gtk-wk2/TestExpectations: Tests flagged.
* platform/gtk/TestExpectations: Changed tests flags.
* platform/gtk/accessibility/media-element-expected.txt:
* platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt:
* platform/gtk/fast/layers/video-layer-expected.txt: Rebaseline.
* platform/gtk/fullscreen/video-controls-override-expected.txt: Added.
* platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png:
* platform/gtk/media/audio-controls-rendering-expected.png:
* platform/gtk/media/audio-controls-rendering-expected.txt:
* platform/gtk/media/audio-repaint-expected.txt:
* platform/gtk/media/controls-after-reload-expected.png:
* platform/gtk/media/controls-after-reload-expected.txt:
* platform/gtk/media/controls-strict-expected.png:
* platform/gtk/media/controls-strict-expected.txt:
* platform/gtk/media/controls-styling-strict-expected.png:
* platform/gtk/media/controls-styling-strict-expected.txt:
* platform/gtk/media/controls-without-preload-expected.png:
* platform/gtk/media/controls-without-preload-expected.txt:
* platform/gtk/media/video-controls-rendering-expected.png:
* platform/gtk/media/video-controls-rendering-expected.txt:
* platform/gtk/media/video-display-toggle-expected.png:
* platform/gtk/media/video-display-toggle-expected.txt:
* platform/gtk/media/video-empty-source-expected.txt:
* platform/gtk/media/video-no-audio-expected.png:
* platform/gtk/media/video-no-audio-expected.txt:
* platform/gtk/media/video-volume-slider-expected.png:
* platform/gtk/media/video-volume-slider-expected.txt:
* platform/gtk/media/video-zoom-controls-expected.png:
* platform/gtk/media/video-zoom-controls-expected.txt:
Rebaseline.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@164024 268f45cc-cd09-0410-ab3c-d52691b4dbfc

53 files changed:
ChangeLog
LayoutTests/ChangeLog
LayoutTests/media/click-volume-bar-not-pausing.html
LayoutTests/media/media-volume-slider-rendered-normal.html
LayoutTests/media/video-controls-captions-trackmenu-hide-on-click-outside.html
LayoutTests/media/video-volume-slider.html
LayoutTests/platform/gtk-wk2/TestExpectations
LayoutTests/platform/gtk/TestExpectations
LayoutTests/platform/gtk/accessibility/media-element-expected.txt
LayoutTests/platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt
LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt
LayoutTests/platform/gtk/fullscreen/video-controls-override-expected.txt [new file with mode: 0644]
LayoutTests/platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png
LayoutTests/platform/gtk/media/audio-controls-rendering-expected.png
LayoutTests/platform/gtk/media/audio-controls-rendering-expected.txt
LayoutTests/platform/gtk/media/audio-repaint-expected.txt
LayoutTests/platform/gtk/media/controls-after-reload-expected.png
LayoutTests/platform/gtk/media/controls-after-reload-expected.txt
LayoutTests/platform/gtk/media/controls-strict-expected.png
LayoutTests/platform/gtk/media/controls-strict-expected.txt
LayoutTests/platform/gtk/media/controls-styling-strict-expected.png
LayoutTests/platform/gtk/media/controls-styling-strict-expected.txt
LayoutTests/platform/gtk/media/controls-without-preload-expected.png
LayoutTests/platform/gtk/media/controls-without-preload-expected.txt
LayoutTests/platform/gtk/media/video-controls-rendering-expected.png
LayoutTests/platform/gtk/media/video-controls-rendering-expected.txt
LayoutTests/platform/gtk/media/video-display-toggle-expected.png
LayoutTests/platform/gtk/media/video-display-toggle-expected.txt
LayoutTests/platform/gtk/media/video-empty-source-expected.txt
LayoutTests/platform/gtk/media/video-no-audio-expected.png
LayoutTests/platform/gtk/media/video-no-audio-expected.txt
LayoutTests/platform/gtk/media/video-volume-slider-expected.png
LayoutTests/platform/gtk/media/video-volume-slider-expected.txt
LayoutTests/platform/gtk/media/video-zoom-controls-expected.png
LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt
Source/WebCore/CMakeLists.txt
Source/WebCore/ChangeLog
Source/WebCore/GNUmakefile.am
Source/WebCore/GNUmakefile.list.am
Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp
Source/WebCore/Modules/mediacontrols/MediaControlsHost.h
Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js [new file with mode: 0644]
Source/WebCore/PlatformGTK.cmake
Source/WebCore/css/mediaControlsGtk.css
Source/WebCore/html/HTMLMediaElement.cpp
Source/WebCore/platform/gtk/RenderThemeGtk.cpp
Source/WebCore/platform/gtk/RenderThemeGtk.h
Source/autotools/SetupWebKitFeatures.m4
Source/cmake/OptionsGTK.cmake
Source/cmake/WebKitFeatures.cmake
Source/cmakeconfig.h.cmake

index 202786c..1a0d702 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,22 @@
+2014-02-13  Xabier Rodriguez Calvar  <calvaris@igalia.com>
+
+        [GTK] MEDIA_CONTROLS_SCRIPT support
+        https://bugs.webkit.org/show_bug.cgi?id=123097
+
+        Reviewed by Jer Noble.
+
+        Part of the Autotools and CMake structure to build the media
+        controls script.
+
+        * Source/autotools/SetupWebKitFeatures.m4: Activated the media
+        controls script by default.
+        * Source/cmake/OptionsGTK.cmake: Activated the media controls
+        script by default.
+        * Source/cmake/WebKitFeatures.cmake: Created the option to
+        activate the controls script.
+        * Source/cmakeconfig.h.cmake: Created the define template the the
+        media controls script.
+
 2014-02-12  Zan Dobersek  <zdobersek@igalia.com>
 
         [GDB] Add .gdbinit to the list of files ignored by Git
index ea0714b..a2713fe 100644 (file)
@@ -1,3 +1,47 @@
+2014-02-13  Xabier Rodriguez Calvar  <calvaris@igalia.com>
+
+        [GTK] MEDIA_CONTROLS_SCRIPT support
+        https://bugs.webkit.org/show_bug.cgi?id=123097
+
+        Reviewed by Jer Noble.
+
+        Tests infrastructure for the media controls script.
+
+        * media/click-volume-bar-not-pausing.html:
+        * media/media-volume-slider-rendered-normal.html:
+        * media/video-controls-captions-trackmenu-hide-on-click-outside.html:
+        * media/video-volume-slider.html: Fixed.
+        * platform/gtk-wk2/TestExpectations: Tests flagged.
+        * platform/gtk/TestExpectations: Changed tests flags.
+        * platform/gtk/accessibility/media-element-expected.txt:
+        * platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt:
+        * platform/gtk/fast/layers/video-layer-expected.txt: Rebaseline.
+        * platform/gtk/fullscreen/video-controls-override-expected.txt: Added.
+        * platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png:
+        * platform/gtk/media/audio-controls-rendering-expected.png:
+        * platform/gtk/media/audio-controls-rendering-expected.txt:
+        * platform/gtk/media/audio-repaint-expected.txt:
+        * platform/gtk/media/controls-after-reload-expected.png:
+        * platform/gtk/media/controls-after-reload-expected.txt:
+        * platform/gtk/media/controls-strict-expected.png:
+        * platform/gtk/media/controls-strict-expected.txt:
+        * platform/gtk/media/controls-styling-strict-expected.png:
+        * platform/gtk/media/controls-styling-strict-expected.txt:
+        * platform/gtk/media/controls-without-preload-expected.png:
+        * platform/gtk/media/controls-without-preload-expected.txt:
+        * platform/gtk/media/video-controls-rendering-expected.png:
+        * platform/gtk/media/video-controls-rendering-expected.txt:
+        * platform/gtk/media/video-display-toggle-expected.png:
+        * platform/gtk/media/video-display-toggle-expected.txt:
+        * platform/gtk/media/video-empty-source-expected.txt:
+        * platform/gtk/media/video-no-audio-expected.png:
+        * platform/gtk/media/video-no-audio-expected.txt:
+        * platform/gtk/media/video-volume-slider-expected.png:
+        * platform/gtk/media/video-volume-slider-expected.txt:
+        * platform/gtk/media/video-zoom-controls-expected.png:
+        * platform/gtk/media/video-zoom-controls-expected.txt:
+        Rebaseline.
+
 2014-02-12  Ryosuke Niwa  <rniwa@webkit.org>
 
         Another Windows test expectations update.
index 952e7a5..d907ef6 100644 (file)
                     return;
                 }
 
+                internals.suspendAnimations(); // Volumebar can be animated and we would need a timeout to have it shown.
+
+                mediaElement.volume = 1;
+
                 waitForEventAndFail("error");
                 waitForEventOnce('playing', playing);
 
index d997c06..d1f5a12 100644 (file)
@@ -17,6 +17,7 @@
 
         function init()
         {
+            internals.suspendAnimations(); // Volumebar can be animated and we would need a timeout to have it shown.
             video = document.getElementsByTagName("video")[0];
             video.src = findMediaFile("video", "content/test");
         }
index 31ec8aa..ba3642c 100644 (file)
@@ -44,6 +44,8 @@
                 findMediaElement();
                 video.src = findMediaFile('video', 'content/test');
                 waitForEvent('canplaythrough', function () { startTrackMenuTest(startTest); });
+
+                internals.suspendAnimations(); // Captions menu can be animated and allowing the animation can create flakyness.
             }
         </script>
     </head>
index 486eb0f..835ca9e 100644 (file)
@@ -11,6 +11,8 @@
             if (window.testRunner)
                 testRunner.waitUntilDone();
 
+            internals.suspendAnimations(); // Volumebar can be animated and we would need a timeout to have it shown.
+
             video = document.getElementsByTagName("video")[0];
             video.src = findMediaFile("video", "content/test");
         }
index 3c159a3..6cc1ff5 100644 (file)
@@ -474,6 +474,8 @@ Bug(GTK) fast/media/media-query-list-06.html [ Failure ]
 
 Bug(GTK) fast/media/view-mode-media-feature.html [ ImageOnlyFailure ]
 
+Bug(GTK) media/video-volume-slider.html [ ImageOnlyFailure ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # End of Tests failing
 #////////////////////////////////////////////////////////////////////////////////////////
index 179c1a7..54d6d6c 100644 (file)
@@ -441,9 +441,7 @@ webkit.org/b/103771 media/track/track-in-band-mode.html [ Skip ]
 webkit.org/b/107818 media/controls-styling.html [ Failure ]
 
 # New chromium based controls
-webkit.org/b/107825 fullscreen/video-controls-drag.html [ Failure ]
 webkit.org/b/107825 media/audio-delete-while-step-button-clicked.html [ Failure ]
-webkit.org/b/107825 media/media-volume-slider-rendered-below.html [ Failure ]
 webkit.org/b/107825 media/nodesFromRect-shadowContent.html [ Failure ]
 webkit.org/b/107825 media/video-controls-fullscreen-volume.html [ Failure ]
 webkit.org/b/107825 media/media-controls-clone.html [ Failure ]
@@ -993,7 +991,7 @@ webkit.org/b/44478 fast/text/hyphenate-locale.html [ Skip ]
 webkit.org/b/44478 fast/text/hyphen-min-preferred-width.html [ Skip ]
 
 # GTK is moving from toggle button to a menu of tracks.
-webkit.org/b/101670 media/video-controls-captions-trackmenu.html [ Failure ]
+webkit.org/b/101670 media/video-controls-captions-trackmenu.html [ Timeout Failure ]
 webkit.org/b/101670 media/track/track-user-preferences.html [ Failure ]
 webkit.org/b/101670 media/video-controls-captions-trackmenu-includes-enabled-track.html [ Failure ]
 
@@ -1484,7 +1482,7 @@ webkit.org/b/124504 fast/text/break-word-pre-wrap.html [ ImageOnlyFailure ]
 webkit.org/b/124507 fast/css3-text/css3-text-decoration/text-decoration-skip/text-decoration-skip-ink.html [ ImageOnlyFailure ]
 
 webkit.org/b/124509 media/video-controls-captions-trackmenu-hide-on-click-outside.html [ Failure ]
-webkit.org/b/124509 media/video-controls-captions-trackmenu-hide-on-click.html [ Failure ]
+webkit.org/b/124509 media/video-controls-captions-trackmenu-hide-on-click.html [ Timeout Failure ]
 
 webkit.org/b/124566 fast/dom/SelectorAPI/resig-SelectorsAPI-test.xhtml [ Failure ]
 
@@ -1515,8 +1513,6 @@ webkit.org/b/126425 scrollbars/scrollbar-large-overflow-rectangle.html [ Failure
 
 webkit.org/b/126519 inspector-protocol/model/highlight-shape-outside-margin.html [ Failure ]
 
-webkit.org/b/126520 media/click-volume-bar-not-pausing.html [ Failure ]
-
 webkit.org/b/126521 accessibility/menu-list-sends-change-notification.html [ Failure ]
 
 webkit.org/b/126619 http/tests/media/video-auth.html [ Failure ]
@@ -1547,6 +1543,11 @@ webkit.org/b/128061 svg/zoom/page/zoom-svg-through-object-with-auto-size.html [
 webkit.org/b/128061 tables/mozilla_expected_failures/bugs/bug1055-2.html [ Failure ]
 # End of subpixel failures.
 
+# After webkit.org/b/123097 we flag these tests that also fail in mac
+webkit.org/b/123097 media/track/track-cue-mutable-text.html [ Failure ]
+webkit.org/b/123097 media/video-controls-captions-trackmenu-sorted.html [ Failure ]
+webkit.org/b/123097 media/video-controls-toggling.html [ Timeout ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # End of Tests failing
 #////////////////////////////////////////////////////////////////////////////////////////
index 6a5be95..5ecf81b 100644 (file)
@@ -9,28 +9,32 @@ State at 'canplaythrough' event:
     role: AXRole: AXEmbedded
 
 
-        description: AXDescription: video playback
+        description: AXDescription: Video Playback
         role: AXRole: AXToolbar
 
 
-            description: AXDescription: video playback
-            role: AXRole: AXToolbar
+            description: AXDescription: Play
+            role: AXRole: AXButton
 
 
-                description: AXDescription: play
-                role: AXRole: AXButton
+            description: AXDescription: Duration
+            role: AXRole: AXSlider
 
 
-                description: AXDescription: 
-                role: AXRole: AXSlider
+            description: AXDescription: Remaining
+            role: AXRole: AXTimer
 
 
-                description: AXDescription: enter fullscreen
-                role: AXRole: AXButton
+            description: AXDescription: Display Full Screen
+            role: AXRole: AXButton
 
 
-                description: AXDescription: mute
-                role: AXRole: AXButton
+            description: AXDescription: Mute
+            role: AXRole: AXButton
+
+
+            description: AXDescription: Volume
+            role: AXRole: AXSlider
 
 
 
index 99e0c66..300b5a5 100644 (file)
@@ -15,7 +15,7 @@ layer at (8,25) size 300x150
     RenderBlock {DIV} at (0,110) size 300x40
 layer at (13,140) size 290x30
   RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 179x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 179x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 191x12
index a35535a..2f8c442 100644 (file)
@@ -20,7 +20,7 @@ layer at (59,109) size 300x150
     RenderBlock {DIV} at (0,110) size 300x40
 layer at (64,224) size 290x30
   RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 179x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 179x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 191x12
diff --git a/LayoutTests/platform/gtk/fullscreen/video-controls-override-expected.txt b/LayoutTests/platform/gtk/fullscreen/video-controls-override-expected.txt
new file mode 100644 (file)
index 0000000..06225a1
--- /dev/null
@@ -0,0 +1,13 @@
+This tests that the video element's "controls" attribute is overridden in full screen mode, and that the controls are correctly hidden upon exiting full screen. Press any key to continue.
+
+
+EVENT(webkitfullscreenchange)
+EXPECTED (shadowRoot = internals.shadowRoot(video) != 'null') OK
+EXPECTED (panel = mediaControlsElement(shadowRoot.firstChild, '-webkit-media-controls-panel') != 'null') OK
+EXPECTED (internals.shadowPseudoId(panel) == '-webkit-media-controls-panel') OK
+EXPECTED (document.defaultView.getComputedStyle(panel)['display'] != 'none') OK
+EXPECTED (document.defaultView.getComputedStyle(panel)['height'] >= '20px') OK
+EVENT(webkitfullscreenchange)
+EXPECTED (document.defaultView.getComputedStyle(panel)['display'] == 'none'), OBSERVED '' FAIL
+END OF TEST
+
index 81f0c61..7c53e85 100644 (file)
Binary files a/LayoutTests/platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png and b/LayoutTests/platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png differ
index df2aec3..86b6efc 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.png and b/LayoutTests/platform/gtk/media/audio-controls-rendering-expected.png differ
index 531bec3..d281d9e 100644 (file)
@@ -19,7 +19,7 @@ layer at (8,41) size 300x30
     RenderBlock {DIV} at (0,0) size 300x30
 layer at (8,41) size 300x30
   RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 157x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 157x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 169x12
@@ -27,13 +27,14 @@ layer at (8,41) size 300x30
     RenderBlock {DIV} at (221,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:07"
-    RenderButton {INPUT} at (261,0) size 30x30
+    RenderFlexibleBox {DIV} at (261,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,88) size 320x30
   RenderFlexibleBox {DIV} at (0,0) size 320x30
     RenderBlock {DIV} at (0,0) size 320x30
 layer at (8,88) size 320x30
   RenderFlexibleBox {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 177x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 189x12
@@ -41,7 +42,8 @@ layer at (8,88) size 320x30
     RenderBlock {DIV} at (241,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:07"
-    RenderButton {INPUT} at (281,0) size 30x30
+    RenderFlexibleBox {DIV} at (281,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,135) size 320x100
   RenderMedia {AUDIO} at (8,135) size 320x100 [bgcolor=#0000FF]
 layer at (8,135) size 320x100
@@ -49,7 +51,7 @@ layer at (8,135) size 320x100
     RenderBlock {DIV} at (0,70) size 320x30
 layer at (8,205) size 320x30
   RenderFlexibleBox {DIV} at (0,0) size 320x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 177x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 177x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 189x12
@@ -57,4 +59,5 @@ layer at (8,205) size 320x30
     RenderBlock {DIV} at (241,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:07"
-    RenderButton {INPUT} at (281,0) size 30x30
+    RenderFlexibleBox {DIV} at (281,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index 9cca2ea..605a559 100644 (file)
@@ -19,7 +19,7 @@ layer at (8,71) size 300x30
     RenderBlock {DIV} at (0,0) size 300x30
 layer at (8,71) size 300x30
   RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 115x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 127x12
@@ -27,13 +27,14 @@ layer at (8,71) size 300x30
     RenderBlock {DIV} at (179,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:01"
-    RenderButton {INPUT} at (261,0) size 30x30
+    RenderFlexibleBox {DIV} at (261,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,41) size 300x30
   RenderFlexibleBox {DIV} at (0,0) size 300x30
     RenderBlock {DIV} at (0,0) size 300x30
 layer at (8,41) size 300x30
   RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 115x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 127x12
@@ -41,7 +42,8 @@ layer at (8,41) size 300x30
     RenderBlock {DIV} at (179,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:01"
-    RenderButton {INPUT} at (261,0) size 30x30
+    RenderFlexibleBox {DIV} at (261,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,153) size 300x30
   RenderMedia {AUDIO} at (0,112) size 300x30
 layer at (8,153) size 300x30
@@ -49,7 +51,7 @@ layer at (8,153) size 300x30
     RenderBlock {DIV} at (0,0) size 300x30
 layer at (8,153) size 300x30
   RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 115x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 115x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 127x12
@@ -57,4 +59,5 @@ layer at (8,153) size 300x30
     RenderBlock {DIV} at (179,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:01"
-    RenderButton {INPUT} at (261,0) size 30x30
+    RenderFlexibleBox {DIV} at (261,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index 3aa8e10..b80159b 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/controls-after-reload-expected.png and b/LayoutTests/platform/gtk/media/controls-after-reload-expected.png differ
index aa1419d..3cefca4 100644 (file)
@@ -15,7 +15,7 @@ layer at (8,41) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,246) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -23,5 +23,6 @@ layer at (13,246) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index 1d7bf7c..a700f6f 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/controls-strict-expected.png and b/LayoutTests/platform/gtk/media/controls-strict-expected.png differ
index 4112672..f3bf7ab 100644 (file)
@@ -15,7 +15,7 @@ layer at (8,49) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,254) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -23,5 +23,6 @@ layer at (13,254) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index dee5cc4..7664e11 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/controls-styling-strict-expected.png and b/LayoutTests/platform/gtk/media/controls-styling-strict-expected.png differ
index 5286a51..7a2b5a3 100644 (file)
@@ -19,7 +19,7 @@ layer at (8,49) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,254) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -27,14 +27,15 @@ layer at (13,254) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (332,49) size 320x240
   RenderFlexibleBox {DIV} at (0,0) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (337,254) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -42,5 +43,6 @@ layer at (337,254) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index 5bc8889..3fd47b0 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/controls-without-preload-expected.png and b/LayoutTests/platform/gtk/media/controls-without-preload-expected.png differ
index 5a897a9..8bd5cb6 100644 (file)
@@ -15,7 +15,7 @@ layer at (8,41) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,246) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -23,5 +23,6 @@ layer at (13,246) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index f86cbd4..8fe1e9a 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-controls-rendering-expected.png and b/LayoutTests/platform/gtk/media/video-controls-rendering-expected.png differ
index 40b08a6..3381fd5 100644 (file)
@@ -20,7 +20,7 @@ layer at (8,41) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,246) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -28,14 +28,15 @@ layer at (13,246) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,281) size 320x240
   RenderFlexibleBox {DIV} at (0,0) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,486) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -43,8 +44,9 @@ layer at (13,486) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
 layer at (8,521) size 320x240
   RenderVideo {VIDEO} at (8,521) size 320x240
 layer at (8,521) size 320x240
@@ -52,7 +54,7 @@ layer at (8,521) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,726) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 93x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 93x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 105x12
@@ -60,5 +62,6 @@ layer at (13,726) size 310x30
     RenderBlock {DIV} at (157,0) size 74x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 74x15
         text run at (0,7) width 74: "00:00 / 00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index b3171be..4325920 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-display-toggle-expected.png and b/LayoutTests/platform/gtk/media/video-display-toggle-expected.png differ
index 9fb1a36..e127f55 100644 (file)
@@ -14,7 +14,7 @@ layer at (8,25) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
 layer at (13,230) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 135x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 135x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 147x12
@@ -22,5 +22,6 @@ layer at (13,230) size 310x30
     RenderBlock {DIV} at (199,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
index 70ffc32..65c96c0 100644 (file)
@@ -15,7 +15,7 @@ layer at (9,42) size 300x150
     RenderBlock {DIV} at (0,110) size 300x40
 layer at (14,157) size 290x30
   RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 179x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 179x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 191x12
index 75eea7e..788f9ad 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-no-audio-expected.png and b/LayoutTests/platform/gtk/media/video-no-audio-expected.png differ
index d349a8c..074eb2e 100644 (file)
@@ -15,7 +15,7 @@ layer at (8,41) size 352x288
     RenderBlock {DIV} at (0,248) size 352x40
 layer at (13,294) size 342x30
   RenderFlexibleBox {DIV} at (5,5) size 342x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 199x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 199x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 211x12
@@ -23,4 +23,4 @@ layer at (13,294) size 342x30
     RenderBlock {DIV} at (263,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:09"
-    RenderButton {INPUT} at (303,0) size 30x30
+    RenderButton {BUTTON} at (303,0) size 30x30
index f1aacee..2834d42 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-volume-slider-expected.png and b/LayoutTests/platform/gtk/media/video-volume-slider-expected.png differ
index 7b64334..49d6172 100644 (file)
@@ -6,21 +6,21 @@ layer at (0,0) size 800x600
       RenderText {#text} at (0,0) size 433x17
         text run at (0,0) width 433: "Tests if the volume slider is rendererd properly. This test assumes the"
       RenderBR {BR} at (433,14) size 0x0
-      RenderText {#text} at (0,17) size 453x17
-        text run at (0,17) width 453: "volume slider is implemented and mouse over the right bottom corner of"
-      RenderBR {BR} at (453,31) size 0x0
-      RenderText {#text} at (0,34) size 270x17
-        text run at (0,34) width 270: "video element will show the volume slider."
-      RenderBR {BR} at (270,48) size 0x0
+      RenderText {#text} at (0,18) size 453x17
+        text run at (0,18) width 453: "volume slider is implemented and mouse over the right bottom corner of"
+      RenderBR {BR} at (453,32) size 0x0
+      RenderText {#text} at (0,36) size 270x17
+        text run at (0,36) width 270: "video element will show the volume slider."
+      RenderBR {BR} at (270,50) size 0x0
       RenderText {#text} at (0,0) size 0x0
-layer at (8,59) size 320x240
-  RenderVideo {VIDEO} at (0,51) size 320x240
-layer at (8,59) size 320x240
+layer at (8,62) size 320x240
+  RenderVideo {VIDEO} at (0,54) size 320x240
+layer at (8,62) size 320x240
   RenderFlexibleBox {DIV} at (0,0) size 320x240
     RenderBlock {DIV} at (0,200) size 320x40
-layer at (13,264) size 310x30
+layer at (13,267) size 310x30
   RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (9,0) size 30x30
+    RenderButton {BUTTON} at (9,0) size 30x30
     RenderSlider {INPUT} at (49,11) size 135x8 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 135x8 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-2) size 147x12
@@ -28,11 +28,12 @@ layer at (13,264) size 310x30
     RenderBlock {DIV} at (199,0) size 32x30 [color=#FFFFFF]
       RenderText {#text} at (0,7) size 32x15
         text run at (0,7) width 32: "00:06"
-    RenderButton {INPUT} at (239,0) size 30x30
-    RenderButton {INPUT} at (271,0) size 30x30
-layer at (284,164) size 30x100
-  RenderBlock (positioned) zI: 2 {DIV} at (271,-100) size 30x100
+    RenderButton {BUTTON} at (239,0) size 30x30
+    RenderFlexibleBox {DIV} at (271,0) size 30x30
+      RenderButton {BUTTON} at (0,0) size 30x30
+layer at (284,167) size 30x100
+  RenderBlock (positioned) zI: 2 {DIV} at (271,-100) size 30x100 [bgcolor=#141414CC]
     RenderSlider {INPUT} at (11,10) size 8x80 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 8x80 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (-2,-6) size 12x92
-          RenderBlock {DIV} at (0,24) size 12x13 [color=#FFFFFF]
+          RenderBlock {DIV} at (0,24) size 12x12 [color=#FFFFFF]
index 64463a3..8dbc16c 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-zoom-controls-expected.png and b/LayoutTests/platform/gtk/media/video-zoom-controls-expected.png differ
index 30dc74e..d9f901b 100644 (file)
@@ -13,7 +13,7 @@ layer at (57,83) size 240x180
     RenderBlock {DIV} at (0,120) size 240x60
 layer at (65,211) size 225x45
   RenderFlexibleBox {DIV} at (7,7) size 226x46 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (13,0) size 46x45
+    RenderButton {BUTTON} at (13,0) size 46x45
     RenderSlider {INPUT} at (73,16) size 38x13 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-3) size 57x18
@@ -21,8 +21,9 @@ layer at (65,211) size 225x45
     RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]
       RenderText {#text} at (0,11) size 108x22
         text run at (0,11) width 108: "00:00 / 00:06"
-    RenderButton {INPUT} at (253,0) size 46x45
-    RenderButton {INPUT} at (301,0) size 46x45
+    RenderButton {BUTTON} at (253,0) size 46x45
+    RenderFlexibleBox {DIV} at (301,0) size 46x45
+      RenderButton {BUTTON} at (0,0) size 45x45
 layer at (57,308) size 240x180
   RenderVideo {VIDEO} at (45,296) size 240x180
 layer at (57,308) size 240x180
@@ -30,7 +31,7 @@ layer at (57,308) size 240x180
     RenderBlock {DIV} at (0,120) size 240x60
 layer at (65,436) size 225x45
   RenderFlexibleBox {DIV} at (7,7) size 226x46 [bgcolor=#141414CC]
-    RenderButton {INPUT} at (13,0) size 46x45
+    RenderButton {BUTTON} at (13,0) size 46x45
     RenderSlider {INPUT} at (73,16) size 38x13 [color=#E6E6E659]
       RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1px solid #E6E6E659)]
         RenderBlock {DIV} at (1,-3) size 57x18
@@ -38,5 +39,6 @@ layer at (65,436) size 225x45
     RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]
       RenderText {#text} at (0,11) size 108x22
         text run at (0,11) width 108: "00:00 / 00:06"
-    RenderButton {INPUT} at (253,0) size 46x45
-    RenderButton {INPUT} at (301,0) size 46x45
+    RenderButton {BUTTON} at (253,0) size 46x45
+    RenderFlexibleBox {DIV} at (301,0) size 46x45
+      RenderButton {BUTTON} at (0,0) size 45x45
index 47c0a4c..6675357 100644 (file)
@@ -6,6 +6,7 @@ set(WebCore_INCLUDE_DIRECTORIES
     "${WEBCORE_DIR}/Modules/indexeddb"
     "${WEBCORE_DIR}/Modules/indexeddb/leveldb"
     "${WEBCORE_DIR}/Modules/indieui"
+    "${WEBCORE_DIR}/Modules/mediacontrols/"
     "${WEBCORE_DIR}/Modules/mediasource"
     "${WEBCORE_DIR}/Modules/mediastream"
     "${WEBCORE_DIR}/Modules/navigatorcontentutils"
@@ -185,6 +186,8 @@ set(WebCore_IDL_FILES
     Modules/indexeddb/IDBVersionChangeEvent.idl
     Modules/indexeddb/WorkerGlobalScopeIndexedDatabase.idl
 
+    Modules/mediacontrols/MediaControlsHost.idl
+
     Modules/mediasource/DOMURLMediaSource.idl
     Modules/mediasource/MediaSource.idl
     Modules/mediasource/SourceBuffer.idl
@@ -831,6 +834,8 @@ set(WebCore_SOURCES
     Modules/indexeddb/leveldb/IDBLevelDBCoding.cpp
     Modules/indexeddb/leveldb/IDBServerConnectionLevelDB.cpp
 
+    Modules/mediacontrols/MediaControlsHost.cpp
+
     Modules/mediasource/DOMURLMediaSource.cpp
     Modules/mediasource/MediaSource.cpp
     Modules/mediasource/MediaSourceRegistry.cpp
@@ -2983,8 +2988,6 @@ set(SHAREDWORKERGLOBALSCOPE_CONSTRUCTORS_FILE ${DERIVED_SOURCES_WEBCORE_DIR}/Sha
 set(DEDICATEDWORKERGLOBALSCOPE_CONSTRUCTORS_FILE ${DERIVED_SOURCES_WEBCORE_DIR}/DedicatedWorkerGlobalScopeConstructors.idl)
 set(IDL_ATTRIBUTES_FILE ${WEBCORE_DIR}/bindings/scripts/IDLAttributes.txt)
 
-include(${WEBCORE_DIR}/UseJSC.cmake)
-
 WEBKIT_INCLUDE_CONFIG_FILES_IF_EXISTS()
 
 # ANGLE tokenizer & parser
@@ -3133,6 +3136,22 @@ add_custom_command(
 list(APPEND WebCore_SOURCES ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentStyleSheetsData.cpp)
 ADD_SOURCE_WEBCORE_DERIVED_DEPENDENCIES(${WEBCORE_DIR}/css/StyleResolver.cpp UserAgentStyleSheetsData.cpp UserAgentStyleSheets.h)
 
+if (WebCore_USER_AGENT_SCRIPTS)
+    # Necessary variables:
+    # WebCore_USER_AGENT_SCRIPTS containing the JavaScript sources list
+    # WebCore_USER_AGENT_SCRIPTS_DEPENDENCIES containing the source file that will load the scripts to add the proper
+    #   dependency and having them built at the right moment
+
+    add_custom_command(
+        OUTPUT ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentScriptsData.cpp ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentScripts.h
+        MAIN_DEPENDENCY ${WEBCORE_DIR}/Scripts/make-js-file-arrays.py
+        DEPENDS ${WebCore_USER_AGENT_SCRIPTS}
+        COMMAND "PYTHONPATH=${WebCore_INSPECTOR_SCRIPTS_DIR}" ${PYTHON_EXECUTABLE} ${WEBCORE_DIR}/Scripts/make-js-file-arrays.py ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentScripts.h ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentScriptsData.cpp ${WebCore_USER_AGENT_SCRIPTS}
+        VERBATIM)
+    list(APPEND WebCore_SOURCES ${DERIVED_SOURCES_WEBCORE_DIR}/UserAgentScriptsData.cpp)
+    ADD_SOURCE_WEBCORE_DERIVED_DEPENDENCIES(${WebCore_USER_AGENT_SCRIPTS_DEPENDENCIES} UserAgentScriptsData.cpp UserAgentScripts.h)
+endif ()
+
 # Generate plug-in resources
 add_custom_command(
     OUTPUT ${DERIVED_SOURCES_WEBCORE_DIR}/PlugInsResourcesData.cpp ${DERIVED_SOURCES_WEBCORE_DIR}/PlugInsResources.h
@@ -3151,6 +3170,7 @@ GENERATE_GRAMMAR(xpathyy ${WEBCORE_DIR}/xml/XPathGrammar.y ${DERIVED_SOURCES_WEB
 list(APPEND WebCore_SOURCES ${DERIVED_SOURCES_WEBCORE_DIR}/XPathGrammar.cpp)
 
 
+include(${WEBCORE_DIR}/UseJSC.cmake)
 
 ADD_SOURCE_WEBCORE_DERIVED_DEPENDENCIES(${WEBCORE_DIR}/html/HTMLTreeBuilder.cpp MathMLNames.cpp)
 
index ec742a5..6340711 100644 (file)
@@ -1,3 +1,166 @@
+2014-02-13  Xabier Rodriguez Calvar  <calvaris@igalia.com>
+
+        [GTK] MEDIA_CONTROLS_SCRIPT support
+        https://bugs.webkit.org/show_bug.cgi?id=123097
+
+        Reviewed by Jer Noble.
+
+        WebKitGTK+ multimedia controls are now managed from Javascript
+        code. Apple controls are kept as common code and GTK+ ones are
+        subclassed for the specific behavior.
+
+        Both CMake and Autotools build support is provided.
+
+        * CMakeLists.txt: Added support to build the media controls
+        script and their associated files.
+        * GNUmakefile.am: Added support to generate the C++ code from the
+        Javascript.
+        * GNUmakefile.list.am: Added the media controls script associated
+        files.
+        * Modules/mediacontrols/MediaControlsHost.cpp:
+        * Modules/mediacontrols/MediaControlsHost.h:
+        * Modules/mediacontrols/MediaControlsHost.idl:
+        (WebCore::MediaControlsHost::supportsFullscreen): Added attribute
+        to know if the element supports fullscreen.
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.handleWrapperMouseMove):
+        (Controller.prototype.handleWrapperMouseOut):
+        (Controller.prototype.updatePlaying): Use clear and
+        resetHideControlsTimer.
+        (Controller.prototype.clearHideControlsTimer): Added.
+        (Controller.prototype.resetHideControlsTimer): Added.
+        * Modules/mediacontrols/mediaControlsGtk.js: Added.
+        (createControls): Calls ControllerGtk.
+        (ControllerGtk): Calls the superclass.
+        (contains): Defines a function to know if an object is contained
+        in an array.
+        (ControllerGtk.prototype.inheritFrom): Copies the method of the
+        superclass that are not reimplemented in the subclass.
+        (ControllerGtk.prototype.createControls): Calls the superclass and
+        create the remaining needed elements.
+        (ControllerGtk.prototype.configureInlineControls): Configures the
+        controls.
+        (ControllerGtk.prototype.setStatusHidden): Redefined empty.
+        (ControllerGtk.prototype.updateTime): Writes the duration and
+        current position. As it was so far, current time also includes
+        duration. If current time is bigger than 0 we show that.
+        (ControllerGtk.prototype.showCurrentTime): Shows current time and
+        hides duration label (that is included in current time).
+        (ControllerGtk.prototype.handlePlay): Calls the superclass and
+        force showing the current time.
+        (ControllerGtk.prototype.handleTimeUpdate): Always update the
+        time.
+        (ControllerGtk.prototype.handleMuteButtonMouseOver): Shows the
+        volume slider.
+        (ControllerGtk.prototype.handleVolumeBoxMouseOut): Hides the
+        volume slider.
+        (ControllerGtk.prototype.addControls): Adds the enclosure instead
+        of the panel directly. Panel is, of course, part of the enclosure.
+        (ControllerGtk.prototype.updateReadyState): Shows the fullscreen
+        button only if fullscreen is supported. Sets the volume in up or
+        down mode depending on its position in the document. Updates the
+        volume.
+        (ControllerGtk.prototype.setControlsType): Creates the controls it
+        they were not created before. Unlike Apple ones, WebKitGTK+
+        fullscreen and inline controls are the same.
+        (ControllerGtk.prototype.updatePlaying): Calls the superclass and
+        shows the controls if not playing.
+        (ControllerGtk.prototype.handleCaptionButtonClicked): Redefined
+        empty. To be coherent with volume, that also shows a popup, this
+        is handled with mouseover instead of click.
+        (ControllerGtk.prototype.buildCaptionMenu): Calls the superclass
+        to build the menu, sets some listeners, centers the popup with the
+        captions button, keeps the current height and sets the style to 0,
+        which is needed to animate it.
+        (ControllerGtk.prototype.destroyCaptionMenu): Hides the caption menu.
+        (ControllerGtk.prototype.showCaptionMenu): Resets the height to
+        its original. We don't animate it with CSS because we would need
+        to specify a height in the style and we don't know it in advance.
+        (ControllerGtk.prototype.hideCaptionMenu): Sets height to 0.
+        (ControllerGtk.prototype.captionMenuTransitionEnd): When the
+        captions menu transtition ends, it is destroyed.
+        (ControllerGtk.prototype.handleCaptionButtonMouseOver): Creates
+        the caption menu and shows it.
+        (ControllerGtk.prototype.handleCaptionButtonMouseOut): Hides the
+        captions menu.
+        (ControllerGtk.prototype.handleCaptionMouseOut): Hides the
+        captions menu.
+        * PlatformGTK.cmake: Added WebCore to the target link libraries
+        and initialized the variables needed at CMakelists.txt
+        * css/mediaControlsGtk.css:
+        (audio::-webkit-media-controls-panel)
+        (video::-webkit-media-controls-panel): Added transtion based on opacity.
+        (video::-webkit-media-controls-panel): Set video opacity to 0.
+        (video::-webkit-media-controls-panel.paused): Set video opacity to 1.
+        (audio::-webkit-media-controls-panel div.mute-box): Set the same
+        style as the mute button to preserve the layout.
+        (audio::-webkit-media-controls-panel div.mute-box.hidden): Sets
+        the display to none.
+        (audio::-webkit-media-controls-mute-button)
+        (video::-webkit-media-controls-mute-button): Removed the outline
+        and the margin that is managed by the mute box now.
+        (audio::-webkit-media-controls-play-button)
+        (video::-webkit-media-controls-play-button): Removed the outline.
+        (audio::-webkit-media-controls-time-remaining-display)
+        (video::-webkit-media-controls-time-remaining-display): Removed
+        the display.
+        (audio::-webkit-media-controls-current-time-display)
+        (video::-webkit-media-controls-current-time-display): Added the
+        display block.
+        (video::-webkit-media-controls-time-remaining-display): Set
+        display none.
+        (video::-webkit-media-controls-time-remaining-display.show): Set
+        display block.
+        (video::-webkit-media-controls-time-remaining-display.hidden): Set
+        display none.
+        (audio::-webkit-media-controls-timeline)
+        (video::-webkit-media-controls-timeline): Removed outline.
+        (audio::-webkit-media-controls-volume-slider-container)
+        (video::-webkit-media-controls-volume-slider-container): Set
+        overflow hidden and set a transition by height.
+        (video::-webkit-media-controls-volume-slider-container.hidden):
+        Set height 0.
+        (video::-webkit-media-controls-volume-slider-container.down): Set
+        bottom to be below the panel. Changed the border radius and
+        transition accordingly.
+        (video::-webkit-media-controls-panel .hidden.down): Sets default
+        bottom as 0.
+        (audio::-webkit-media-controls-volume-slider)
+        (video::-webkit-media-controls-volume-slider): Removed the outline.
+        (audio::-webkit-media-controls-toggle-closed-captions-button)
+        (video::-webkit-media-controls-toggle-closed-captions-button):
+        Removed the background that is painted from C++ and removed the
+        outline.
+        (video::-webkit-media-controls-closed-captions-container):
+        (video::-webkit-media-controls-closed-captions-container h3):
+        (video::-webkit-media-controls-closed-captions-container ul):
+        (video::-webkit-media-controls-closed-captions-container li):
+        (video::-webkit-media-controls-closed-captions-container li.selected): Changed
+        the style to make it more coherent with the rest of the controls.
+        (audio::-webkit-media-controls-fullscreen-button)
+        (video::-webkit-media-controls-fullscreen-button): Removed the outline.
+        (audio::-webkit-media-controls-panel button.hidden): Sets the
+        display to none.
+        * html/HTMLMediaElement.cpp: UserAgentScripts.h is not needed here
+        and build cmake build would need for changes to get this compiled.
+        * platform/gtk/RenderThemeGtk.cpp:
+        (WebCore::nodeHasPseudo): Added. Checks if a node has a certain
+        pseudo.
+        (WebCore::nodeHasClass): Added. Checks if a node has a certain
+        class.
+        (WebCore::supportsFocus): Removed some element types as outline is
+        now handled in CSS.
+        (WebCore::RenderThemeGtk::paintMediaPlayButton): Checks if the
+        play button has the class paused to show the play icon instead of
+        the pause one.
+        (WebCore::RenderThemeGtk::paintMediaToggleClosedCaptionsButton):
+        Added. Paints the captions icon.
+        (WebCore::RenderThemeGtk::mediaControlsScript): Added. Loads the
+        bundled scripts.
+        * platform/gtk/RenderThemeGtk.h: Added the mediaControlsScript
+        method and declared the redefinition of the method to play the
+        captions icon.
+
 2014-02-11  Alexey Proskuryakov  <ap@apple.com>
 
         Don't crash when SerializedScriptValue deserialization fails
index 2e2accb..4c371fa 100644 (file)
@@ -15,6 +15,7 @@ webcore_cppflags += \
        -I$(srcdir)/Source/WebCore/Modules/indexeddb \
        -I$(srcdir)/Source/WebCore/Modules/indexeddb/leveldb \
        -I$(srcdir)/Source/WebCore/Modules/indieui \
+       -I$(srcdir)/Source/WebCore/Modules/mediacontrols \
        -I$(srcdir)/Source/WebCore/Modules/mediasource \
        -I$(srcdir)/Source/WebCore/Modules/mediastream \
        -I$(srcdir)/Source/WebCore/Modules/navigatorcontentutils \
@@ -264,6 +265,12 @@ DerivedSources/WebCore/CSSGrammar.cpp: $(WebCore)/css/CSSGrammar.y.in
        $(AM_V_GEN)
        $(AM_V_at)perl -I $(WebCore)/bindings/scripts $(WebCore)/css/makegrammar.pl --extraDefines "$(feature_defines)" --outputDir $(GENSOURCES_WEBCORE) --bison "$(BISON)" --symbolsPrefix cssyy $<
 
+USER_AGENT_SCRIPT_FILES = $(WebCore)/Modules/mediacontrols/mediaControlsApple.js $(WebCore)/Modules/mediacontrols/mediaControlsGtk.js
+DerivedSources/WebCore/UserAgentScriptsData.cpp: DerivedSources/WebCore/UserAgentScripts.h
+DerivedSources/WebCore/UserAgentScripts.h: PYTHONPATH=$(INSPECTOR_SCRIPTS_DIR)
+DerivedSources/WebCore/UserAgentScripts.h: $(WebCore)/Scripts/make-js-file-arrays.py $(USER_AGENT_SCRIPT_FILES)
+       $(AM_V_GEN)$(PYTHON) $< $@ DerivedSources/WebCore/UserAgentScriptsData.cpp $(USER_AGENT_SCRIPT_FILES)
+
 # user agent style sheets
 USER_AGENT_STYLE_SHEETS = \
        $(WebCore)/css/html.css \
@@ -398,6 +405,7 @@ IDL_PATH := \
     $(WebCore)/Modules/gamepad \
     $(WebCore)/Modules/geolocation \
     $(WebCore)/Modules/indexeddb \
+    $(WebCore)/Modules/mediacontrols \
     $(WebCore)/Modules/mediasource \
     $(WebCore)/Modules/mediastream \
     $(WebCore)/Modules/notifications \
index 378a330..33c168c 100644 (file)
@@ -463,6 +463,8 @@ webcore_built_sources += \
        DerivedSources/WebCore/JSLocation.h \
        DerivedSources/WebCore/JSMediaController.cpp \
        DerivedSources/WebCore/JSMediaController.h \
+       DerivedSources/WebCore/JSMediaControlsHost.cpp \
+       DerivedSources/WebCore/JSMediaControlsHost.h \
        DerivedSources/WebCore/JSMediaElementAudioSourceNode.cpp \
        DerivedSources/WebCore/JSMediaElementAudioSourceNode.h \
        DerivedSources/WebCore/JSMediaError.cpp \
@@ -854,6 +856,8 @@ webcore_built_sources += \
        DerivedSources/WebCore/PlugInsResourcesData.cpp \
        DerivedSources/WebCore/PlugInsResources.h \
        DerivedSources/WebCore/SettingsMacros.h \
+       DerivedSources/WebCore/UserAgentScriptsData.cpp \
+       DerivedSources/WebCore/UserAgentScripts.h \
        DerivedSources/WebCore/UserAgentStyleSheetsData.cpp \
        DerivedSources/WebCore/UserAgentStyleSheets.h \
        DerivedSources/WebCore/XLinkNames.cpp \
@@ -1200,6 +1204,7 @@ dom_binding_idls += \
        $(WebCore)/Modules/indexeddb/IDBTransaction.idl \
        $(WebCore)/Modules/indexeddb/IDBVersionChangeEvent.idl \
        $(WebCore)/Modules/indexeddb/WorkerGlobalScopeIndexedDatabase.idl \
+       $(WebCore)/Modules/mediacontrols/MediaControlsHost.idl \
        $(WebCore)/Modules/mediasource/DOMURLMediaSource.idl \
        $(WebCore)/Modules/mediasource/MediaSource.idl \
        $(WebCore)/Modules/mediasource/SourceBuffer.idl \
@@ -1879,6 +1884,8 @@ webcore_modules_sources += \
        Source/WebCore/Modules/indexeddb/PageGroupIndexedDatabase.h \
        Source/WebCore/Modules/indexeddb/WorkerGlobalScopeIndexedDatabase.cpp \
        Source/WebCore/Modules/indexeddb/WorkerGlobalScopeIndexedDatabase.h \
+       Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp \
+       Source/WebCore/Modules/mediacontrols/MediaControlsHost.h \
        Source/WebCore/Modules/mediasource/MediaSource.cpp \
        Source/WebCore/Modules/mediasource/MediaSource.h \
        Source/WebCore/Modules/mediasource/MediaSourceRegistry.cpp \
index b02ecdc..e4173e9 100644 (file)
@@ -153,6 +153,11 @@ bool MediaControlsHost::mediaPlaybackAllowsInline() const
     return !m_mediaElement->mediaSession().requiresFullscreenForVideoPlayback(*m_mediaElement);
 }
 
+bool MediaControlsHost::supportsFullscreen()
+{
+    return m_mediaElement->supportsFullscreen();
+}
+
 }
 
 #endif
index a3a95bf..442e642 100644 (file)
@@ -59,6 +59,7 @@ public:
     Element* textTrackContainer();
     void updateTextTrackContainer();
     bool mediaPlaybackAllowsInline() const;
+    bool supportsFullscreen();
 
 private:
     MediaControlsHost(HTMLMediaElement*);
index 52b31d0..62639c8 100644 (file)
@@ -37,4 +37,5 @@
     readonly attribute HTMLElement textTrackContainer;
     void updateTextTrackContainer();
     readonly attribute boolean mediaPlaybackAllowsInline;
+    readonly attribute boolean supportsFullscreen;
 };
index 23b1c87..1b1e2bf 100644 (file)
@@ -76,6 +76,7 @@ Controller.prototype = {
         thumbnailTrack: 'thumbnail-track',
         volumeBox: 'volume-box',
         noVideo: 'no-video',
+        down: 'down',
     },
     KeyCodes: {
         enter: 13,
@@ -572,9 +573,7 @@ Controller.prototype = {
     handleWrapperMouseMove: function(event)
     {
         this.showControls();
-        if (this.hideTimer)
-            clearTimeout(this.hideTimer);
-        this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
+        this.resetHideControlsTimer();
 
         if (!this.isDragging)
             return;
@@ -587,8 +586,7 @@ Controller.prototype = {
     handleWrapperMouseOut: function(event)
     {
         this.hideControls();
-        if (this.hideTimer)
-            clearTimeout(this.hideTimer);
+        this.clearHideControlsTimer();
     },
 
     handleWrapperMouseUp: function(event)
@@ -864,9 +862,7 @@ Controller.prototype = {
             this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
 
             this.hideControls();
-            if (this.hideTimer)
-                clearTimeout(this.hideTimer);
-            this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
+            this.resetHideControlsTimer();
         }
     },
 
@@ -1152,4 +1148,17 @@ Controller.prototype = {
         return this.video instanceof HTMLAudioElement;
     },
 
+    clearHideControlsTimer: function()
+    {
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+    },
+
+    resetHideControlsTimer: function()
+    {
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
+    },
 };
diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js b/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js
new file mode 100644 (file)
index 0000000..ad71ec2
--- /dev/null
@@ -0,0 +1,217 @@
+function createControls(root, video, host)
+{
+    return new ControllerGtk(root, video, host);
+};
+
+function ControllerGtk(root, video, host)
+{
+    Controller.call(this, root, video, host);
+};
+
+function contains(list, obj)
+{
+    var i = list.length;
+    while (i--)
+        if (list[i] === obj)
+            return true;
+    return false;
+};
+
+ControllerGtk.prototype = {
+
+    inheritFrom: function(parent) {
+        for (var property in parent) {
+            if (!this.hasOwnProperty(property))
+                this[property] = parent[property];
+        }
+    },
+
+    createControls: function()
+    {
+        Controller.prototype.createControls.apply(this);
+
+        this.controls.currentTime.classList.add(this.ClassNames.hidden);
+
+        this.controls.volumeBox.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container');
+        this.controls.volumeBox.classList.add(this.ClassNames.hidden);
+
+        this.listenFor(this.controls.muteBox, 'mouseout', this.handleVolumeBoxMouseOut);
+        this.listenFor(this.controls.muteButton, 'mouseover', this.handleMuteButtonMouseOver);
+        this.listenFor(this.controls.volumeBox, 'mouseover', this.handleMuteButtonMouseOver);
+        this.listenFor(this.controls.volume, 'mouseover', this.handleMuteButtonMouseOver);
+        this.listenFor(this.controls.captionButton, 'mouseover', this.handleCaptionButtonMouseOver);
+        this.listenFor(this.controls.captionButton, 'mouseout', this.handleCaptionButtonMouseOut);
+
+        var enclosure = this.controls.enclosure = document.createElement('div');
+        enclosure.setAttribute('pseudo', '-webkit-media-controls-enclosure');
+    },
+
+    configureInlineControls: function()
+    {
+        this.controls.panel.appendChild(this.controls.playButton);
+        this.controls.panel.appendChild(this.controls.timeline);
+        this.controls.panel.appendChild(this.controls.currentTime);
+        this.controls.panel.appendChild(this.controls.remainingTime);
+        this.controls.panel.appendChild(this.controls.captionButton);
+        this.controls.panel.appendChild(this.controls.fullscreenButton);
+        this.controls.panel.appendChild(this.controls.muteBox);
+        this.controls.muteBox.appendChild(this.controls.muteButton);
+        this.controls.muteBox.appendChild(this.controls.volumeBox);
+        this.controls.volumeBox.appendChild(this.controls.volume);
+        this.controls.enclosure.appendChild(this.controls.panel);
+    },
+
+    setStatusHidden: function(hidden)
+    {
+    },
+
+    updateTime: function()
+    {
+        var currentTime = this.video.currentTime;
+        var duration = this.video.duration;
+
+        this.controls.currentTime.innerText = this.formatTime(currentTime);
+        this.controls.timeline.value = currentTime;
+        if (duration === Infinity || duration === NaN) {
+            this.controls.remainingTime.classList.remove(this.ClassNames.show);
+        } else {
+            this.controls.currentTime.innerText += " / " + this.formatTime(duration);
+            this.controls.remainingTime.innerText = this.formatTime(duration);
+            this.controls.remainingTime.classList.add(this.ClassNames.show);
+        }
+
+        if (currentTime > 0)
+            this.showCurrentTime();
+    },
+
+    showCurrentTime: function()
+    {
+        this.controls.currentTime.classList.remove(this.ClassNames.hidden);
+        this.controls.remainingTime.classList.add(this.ClassNames.hidden);
+    },
+
+    handlePlay: function(event)
+    {
+        Controller.prototype.handlePlay.apply(this, arguments);
+        this.showCurrentTime();
+    },
+
+    handleTimeUpdate: function(event)
+    {
+        this.updateTime();
+    },
+
+    handleMuteButtonMouseOver: function(event)
+    {
+        this.controls.volumeBox.classList.remove(this.ClassNames.hidden);
+    },
+
+    handleVolumeBoxMouseOut: function(event)
+    {
+        this.controls.volumeBox.classList.add(this.ClassNames.hidden);
+    },
+
+    addControls: function()
+    {
+        this.base.appendChild(this.controls.enclosure);
+    },
+
+    updateReadyState: function()
+    {
+        if (this.host.supportsFullscreen && this.video.videoTracks.length) {
+            this.controls.fullscreenButton.classList.remove(this.ClassNames.hidden);
+        } else {
+            this.controls.fullscreenButton.classList.add(this.ClassNames.hidden);
+        }
+        if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105)
+            this.controls.volumeBox.classList.add(this.ClassNames.down);
+        else
+            this.controls.volumeBox.classList.remove(this.ClassNames.down);
+        this.updateVolume();
+    },
+
+    setControlsType: function(type)
+    {
+        if (!this.controls.configured) {
+            this.configureInlineControls();
+            this.controls.configured = true;
+            this.addControls();
+        }
+    },
+
+    updatePlaying: function()
+    {
+        Controller.prototype.updatePlaying.apply(this, arguments);
+        if (!this.canPlay()) {
+            this.showControls();
+        }
+    },
+
+    handleCaptionButtonClicked: function(event)
+    {
+        // Handled with mouseover and mouseout.
+    },
+
+    buildCaptionMenu: function()
+    {
+        Controller.prototype.buildCaptionMenu.apply(this, arguments);
+
+        this.listenFor(this.captionMenu, 'mouseout', this.handleCaptionMouseOut);
+        this.listenFor(this.captionMenu, 'transitionend', this.captionMenuTransitionEnd);
+
+        this.captionMenu.captionMenuTreeElements = this.captionMenu.getElementsByTagName("*");
+
+        // Caption menu has to be centered to the caption button.
+        var captionButtonCenter =  this.controls.panel.offsetLeft + this.controls.captionButton.offsetLeft +
+            this.controls.captionButton.offsetWidth / 2;
+        this.captionMenu.style.left = (captionButtonCenter - this.captionMenu.offsetWidth / 2);
+        // As height is not in the css, it needs to be specified to animate it.
+        this.captionMenu.height = this.captionMenu.offsetHeight;
+        this.captionMenu.style.height = 0;
+    },
+
+    destroyCaptionMenu: function()
+    {
+        this.hideCaptionMenu();
+    },
+
+    showCaptionMenu: function()
+    {
+        this.captionMenu.style.height = this.captionMenu.height;
+    },
+
+    hideCaptionMenu: function()
+    {
+        this.captionMenu.style.height = 0;
+    },
+
+    captionMenuTransitionEnd: function(event)
+    {
+        if (this.captionMenu.offsetHeight === 0)
+            Controller.prototype.destroyCaptionMenu.apply(this, arguments);
+    },
+
+    handleCaptionButtonMouseOver: function(event)
+    {
+        if (!this.captionMenu)
+            this.buildCaptionMenu();
+        if (!contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+            this.showCaptionMenu();
+    },
+
+    handleCaptionButtonMouseOut: function(event)
+    {
+        if (this.captionMenu && !contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+            this.hideCaptionMenu();
+    },
+
+    handleCaptionMouseOut: function(event)
+    {
+        if (event.relatedTarget != this.controls.captionButton &&
+            !contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+            this.hideCaptionMenu();
+    },
+};
+
+ControllerGtk.prototype.inheritFrom(Object.create(Controller.prototype));
+Object.defineProperty(ControllerGtk.prototype, 'constructor', { enumerable:false, value:ControllerGtk });
index 9a4bd8c..266be28 100644 (file)
@@ -295,6 +295,13 @@ list(APPEND WebCore_USER_AGENT_STYLE_SHEETS
     ${WEBCORE_DIR}/css/mediaControlsGtk.css
 )
 
+set(WebCore_USER_AGENT_SCRIPTS
+    ${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsApple.js
+    ${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsGtk.js
+)
+
+set(WebCore_USER_AGENT_SCRIPTS_DEPENDENCIES ${WEBCORE_DIR}/platform/gtk/RenderThemeGtk.cpp)
+
 list(APPEND WebCore_LIBRARIES
     ${ATK_LIBRARIES}
     ${CAIRO_LIBRARIES}
@@ -455,6 +462,7 @@ set_property(
         ${GDK_INCLUDE_DIRS}
 )
 target_link_libraries(WebCorePlatformGTK
+    WebCore
     ${WebCore_LIBRARIES}
     ${GTK_LIBRARIES}
     ${GDK_LIBRARIES}
index 61ba12a..475e2d4 100644 (file)
@@ -79,6 +79,31 @@ audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
     background-color: rgba(20, 20, 20, 0.8);
     border-radius: 5px;
     overflow: visible;
+    transition: opacity 0.25s linear;
+}
+
+video::-webkit-media-controls-panel {
+    opacity: 0;
+}
+
+video::-webkit-media-controls-panel.show,
+video::-webkit-media-controls-panel.paused {
+    opacity: 1;
+}
+
+video::-webkit-media-controls-panel div.mute-box,
+audio::-webkit-media-controls-panel div.mute-box {
+    display: -webkit-flex;
+    -webkit-flex: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    margin: 0 9px 0 -7px;
+}
+
+video::-webkit-media-controls-panel div.mute-box.hidden,
+audio::-webkit-media-controls-panel div.mute-box.hidden {
+    display: none;
 }
 
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
@@ -90,7 +115,7 @@ audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
     width: 30px;
     height: 30px;
     line-height: 30px;
-    margin: 0 9px 0 -7px;
+    outline: none;
 }
 
 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
@@ -103,6 +128,7 @@ audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
     height: 30px;
     line-height: 30px;
     margin: 0 9px;
+    outline: none;
 }
 
 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
@@ -110,7 +136,6 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     -webkit-appearance: media-current-time-display;
     -webkit-user-select: none;
     -webkit-flex: none;
-    display: block;
     border: none;
     cursor: default;
 
@@ -132,6 +157,27 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     text-decoration: none;
 }
 
+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
+    display: block;
+}
+
+audio::-webkit-media-controls-time-remaining-display,
+video::-webkit-media-controls-time-remaining-display {
+    display: none;
+}
+
+audio::-webkit-media-controls-time-remaining-display.show,
+video::-webkit-media-controls-time-remaining-display.show {
+    display: block;
+}
+
+audio::-webkit-media-controls-current-time-display.hidden,
+video::-webkit-media-controls-current-time-display.hidden,
+audio::-webkit-media-controls-time-remaining-display.hidden,
+video::-webkit-media-controls-time-remaining-display.hidden {
+    display: none;
+}
+
 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     -webkit-appearance: media-slider;
     display: -webkit-flex;
@@ -143,10 +189,12 @@ audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     min-width: 25px;
     border-radius: 4px;
     color: rgba(230, 230, 230, 0.35);
+    outline: none;
 }
 
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
+    overflow: hidden;
     position: absolute;
     padding: 0;
     height: 100px;
@@ -156,6 +204,24 @@ audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-cont
     background-color: rgba(20, 20, 20, 0.8);
     right: 9px;
     border-radius: 5px 5px 0px 0px;
+    transition: height 0.10s linear;
+}
+
+audio::-webkit-media-controls-volume-slider-container.hidden,
+video::-webkit-media-controls-volume-slider-container.hidden {
+    height: 0;
+}
+
+audio::-webkit-media-controls-volume-slider-container.down,
+video::-webkit-media-controls-volume-slider-container.down {
+    bottom: -100px;
+    border-radius: 0px 0px 5px 5px;
+    transition: height 0.10s linear, bottom 0.10s linear;
+}
+
+audio::-webkit-media-controls-panel .hidden.down,
+video::-webkit-media-controls-panel .hidden.down {
+    bottom: 0;
 }
 
 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
@@ -170,6 +236,7 @@ audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
     border-radius: 4px;
     background-color: transparent;
     color: rgba(230, 230, 230, 0.35);
+    outline: none;
 }
 
 audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
@@ -222,68 +289,56 @@ audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
     height: 30px;
     line-height: 30px;
     margin: 0 9px 0 -7px;
-    background-repeat:no-repeat;
-    background-position:center;
-    background-image: url('data:image/svg+xml,<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata90"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>Gnome Symbolic Icon Theme</dc:title></cc:Work></rdf:RDF></metadata><g id="layer9" transform="translate(-101,-357)"><path id="path12148" style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:accumulate;text-transform:none;" fill="#bebebe" d="m104.75,357.06c-2.0602,0-3.75,1.6898-3.75,3.75v4.4375c0,2.0602,1.6898,3.75,3.75,3.75h4.9375l3.75,2.6562,1.5938,1.125v-1.9688l-0.0313-2.5c1.1106-0.59715,1.9688-1.6526,1.9688-3.0625v-4.4375c0-2.0602-1.6898-3.75-3.75-3.75h-8.4688zm0,2,8.4688,0c0.9868,0,1.75,0.7632,1.75,1.75v4.4375c0,0.86273-0.63508,1.541-1.125,1.625l-0.84,0.12v0.84375,1.0312l-2.4062-1.6875-0.25-0.1875h-0.3125-5.2812c-0.9868,0-1.75-0.7632-1.75-1.75v-4.4375c0-0.9868,0.7632-1.75,1.75-1.75z"/></g></svg>');
+    outline: none;
 }
 
 video::-webkit-media-controls-closed-captions-container {
     -webkit-appearance: media-closed-captions-container;
+    display: -webkit-flex;
     position: absolute;
-    display: block;
-    right: 38px;
     bottom: 35px;
+    z-index: 2;
+    background-color: rgba(20, 20, 20, 0.8);
+    border-radius: 5px 5px 0px 0px;
+    overflow: hidden;
     max-width: -webkit-calc(100% - 48px); /* right + 10px */
     max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: rgba(20, 20, 20, 0.8);
-    border-radius: 10px;
     cursor: default;
-    z-index: 2;
-}
-
-video::-webkit-media-controls-closed-captions-track-list {
-    display: block;
-    font-family: "Helvetica Bold", Helvetica;
+    font-family: -webkit-small-control;
     font-size: 10pt;
+    font-weight: normal;
+    font-style: normal;
+    color: white;
     -webkit-user-select: none;
+    transition: height 0.10s linear;
 }
 
-video::-webkit-media-controls-closed-captions-track-list h3 {
-    margin: 1px 30px;
-    color: #757575;
-    text-shadow: 0 1px 0 black;
-    padding-top: 0px;
-    font-weight: bold;
-    font-size: 10pt;
+video::-webkit-media-controls-closed-captions-container h3 {
+    margin: 1px 10px;
+    padding-top: 4px;
 }
 
-video::-webkit-media-controls-closed-captions-track-list ul {
+video::-webkit-media-controls-closed-captions-container ul {
     list-style-type: none;
     margin: 0 0 4px 0;
     padding: 0;
-    font-weight: bold;
 }
 
-video::-webkit-media-controls-closed-captions-track-list li {
+video::-webkit-media-controls-closed-captions-container li {
     position: relative;
     color: white;
-    background-image: none;
-    text-shadow: 0 1px 0 black;
     margin: 0;
-    padding-left: 37px;
-    padding-right: 35px;
+    padding-left: 17px;
+    padding-right: 15px;
     padding-top: 0.15em;
     padding-bottom: 0.2em;
     box-sizing: border-box;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    border-top: 1px solid rgba(0, 0, 0, 0);
-    border-bottom: 1px solid rgba(0, 0, 0, 0);
+    outline: none;
 }
-video::-webkit-media-controls-closed-captions-track-list li.selected {
+video::-webkit-media-controls-closed-captions-container li.selected {
     background-color: rgba(230, 230, 230, 0.15);
 }
 
@@ -297,4 +352,10 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
     height: 30px;
     line-height: 30px;
     margin: 0 9px 0 -7px;
+    outline: none;
+}
+
+video::-webkit-media-controls-panel button.hidden,
+audio::-webkit-media-controls-panel button.hidden {
+    display: none;
 }
index 1ba83f6..998b1ef 100644 (file)
 #include "JSMediaControlsHost.h"
 #include "MediaControlsHost.h"
 #include "ScriptGlobalObject.h"
-#include "UserAgentScripts.h"
 #include <bindings/ScriptObject.h>
 #endif
 
index 55c439f..fd29bee 100644 (file)
 #include "HTMLMediaElement.h"
 #include "LocalizedStrings.h"
 #include "MediaControlElements.h"
+#include "NamedNodeMap.h"
 #include "PaintInfo.h"
 #include "PlatformContextCairo.h"
 #include "RenderBox.h"
 #include "RenderObject.h"
 #include "StringTruncator.h"
 #include "TimeRanges.h"
+#include "UserAgentScripts.h"
 #include "UserAgentStyleSheets.h"
 #include <cmath>
 #include <gdk/gdk.h>
@@ -49,6 +51,7 @@
 #include <gtk/gtk.h>
 #include <wtf/gobject/GUniquePtr.h>
 #include <wtf/text/CString.h>
+#include <wtf/text/StringBuilder.h>
 
 #if ENABLE(PROGRESS_ELEMENT)
 #include "RenderProgress.h"
@@ -101,6 +104,18 @@ void RenderThemeGtk::initMediaButtons()
 }
 #endif
 
+static bool nodeHasPseudo(Node* node, const char* pseudo)
+{
+    RefPtr<Node> attributeNode = node->attributes()->getNamedItem("pseudo");
+
+    return attributeNode ? attributeNode->nodeValue() == pseudo : false;
+}
+
+static bool nodeHasClass(Node* node, const char* className)
+{
+    return node->isElementNode() ? toElement(node)->classNames().contains(className) : false;
+}
+
 PassRefPtr<RenderTheme> RenderThemeGtk::create()
 {
     return adoptRef(new RenderThemeGtk());
@@ -139,11 +154,6 @@ static bool supportsFocus(ControlPart appearance)
     case CheckboxPart:
     case SliderHorizontalPart:
     case SliderVerticalPart:
-    case MediaPlayButtonPart:
-    case MediaVolumeSliderPart:
-    case MediaMuteButtonPart:
-    case MediaEnterFullscreenButtonPart:
-    case MediaSliderPart:
         return true;
     default:
         return false;
@@ -525,13 +535,14 @@ bool RenderThemeGtk::paintMediaPlayButton(RenderObject* renderObject, const Pain
     Node* node = renderObject->node();
     if (!node)
         return false;
-    if (!node->isMediaControlElement())
+
+    if (!nodeHasPseudo(node, "-webkit-media-controls-play-button"))
         return false;
+    bool showPlayButton = nodeHasClass(node, "paused");
 
-    bool play = mediaControlElementType(node) == MediaPlayButton;
     return paintMediaButton(renderObject, paintInfo.context, rect,
-        play ? "media-playback-start-symbolic" : "media-playback-pause-symbolic",
-        play ? GTK_STOCK_MEDIA_PLAY : GTK_STOCK_MEDIA_PAUSE);
+        showPlayButton ? "media-playback-start-symbolic" : "media-playback-pause-symbolic",
+        showPlayButton ? GTK_STOCK_MEDIA_PLAY : GTK_STOCK_MEDIA_PAUSE);
 }
 
 bool RenderThemeGtk::paintMediaSeekBackButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
@@ -544,6 +555,13 @@ bool RenderThemeGtk::paintMediaSeekForwardButton(RenderObject* renderObject, con
     return paintMediaButton(renderObject, paintInfo.context, rect, "media-seek-forward-symbolic", GTK_STOCK_MEDIA_FORWARD);
 }
 
+#if ENABLE(VIDEO_TRACK)
+bool RenderThemeGtk::paintMediaToggleClosedCaptionsButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
+{
+    return paintMediaButton(renderObject, paintInfo.context, rect, "user-invisible-symbolic", GTK_STOCK_JUSTIFY_FILL);
+}
+#endif
+
 static RoundedRect::Radii borderRadiiFromStyle(RenderStyle* style)
 {
     return RoundedRect::Radii(
@@ -726,4 +744,11 @@ int RenderThemeGtk::sliderTickOffsetFromTrackCenter() const
 }
 #endif
 
+String RenderThemeGtk::mediaControlsScript()
+{
+    StringBuilder scriptBuilder;
+    scriptBuilder.append(mediaControlsAppleJavaScript, sizeof(mediaControlsAppleJavaScript));
+    scriptBuilder.append(mediaControlsGtkJavaScript, sizeof(mediaControlsGtkJavaScript));
+    return scriptBuilder.toString();
+}
 }
index 55e0067..bcb4fbf 100644 (file)
@@ -88,6 +88,7 @@ public:
     virtual String extraMediaControlsStyleSheet();
     virtual String formatMediaControlsCurrentTime(float currentTime, float duration) const;
     virtual bool supportsClosedCaptioning() const override { return true; }
+    virtual String mediaControlsScript();
 
 #if ENABLE(FULLSCREEN_API)
     virtual String extraFullScreenStyleSheet();
@@ -174,6 +175,9 @@ protected:
     virtual bool paintMediaVolumeSliderTrack(RenderObject*, const PaintInfo&, const IntRect&);
     virtual bool paintMediaVolumeSliderThumb(RenderObject*, const PaintInfo&, const IntRect&);
     virtual bool paintMediaCurrentTime(RenderObject*, const PaintInfo&, const IntRect&);
+#if ENABLE(VIDEO_TRACK)
+    virtual bool paintMediaToggleClosedCaptionsButton(RenderObject*, const PaintInfo&, const IntRect&);
+#endif
 #endif
 
 #if ENABLE(PROGRESS_ELEMENT)
index d30738e..f033782 100644 (file)
@@ -131,6 +131,7 @@ $srcdir/Tools/gtk/generate-feature-defines-files $CONFIGURABLE_FEATURE_DEFINES \
     ENABLE_LINK_PREFETCH=0 \
     ENABLE_MATHML=1 \
     ENABLE_MEDIA_CAPTURE=0 \
+    ENABLE_MEDIA_CONTROLS_SCRIPT=1 \
     ENABLE_MEDIA_SOURCE=0 \
     ENABLE_MEDIA_STATISTICS=0 \
     ENABLE_MEDIA_STREAM=0 \
index b1c2cad..321f4d2 100644 (file)
@@ -52,6 +52,7 @@ WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_INPUT_TYPE_COLOR OFF)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_LINK_PREFETCH ON)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_LLINT ON)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_MEDIA_CAPTURE ON)
+WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_MEDIA_CONTROLS_SCRIPT ON)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_MEMORY_SAMPLER ON)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_MHTML ON)
 WEBKIT_OPTION_DEFAULT_PORT_VALUE(ENABLE_NAVIGATOR_CONTENT_UTILS ON)
index b2ceff5..c58b943 100644 (file)
@@ -77,6 +77,7 @@ macro(WEBKIT_OPTION_BEGIN)
     WEBKIT_OPTION_DEFINE(ENABLE_LLINT_C_LOOP "Force use of the llint c loop" OFF)
     WEBKIT_OPTION_DEFINE(ENABLE_MATHML "Toggle MathML support" ON)
     WEBKIT_OPTION_DEFINE(ENABLE_MEDIA_CAPTURE "Toggle Media Capture support" OFF)
+    WEBKIT_OPTION_DEFINE(ENABLE_MEDIA_CONTROLS_SCRIPT "Toggle definition of media controls in Javascript" OFF)
     WEBKIT_OPTION_DEFINE(ENABLE_MEDIA_SOURCE "Toggle Media Source support" OFF)
     WEBKIT_OPTION_DEFINE(ENABLE_MEDIA_STATISTICS "Toggle Media Statistics support" OFF)
     WEBKIT_OPTION_DEFINE(ENABLE_MEDIA_STREAM "Toggle Media Stream API support" OFF)
index 4e49e26..57219ed 100644 (file)
@@ -69,6 +69,7 @@
 #cmakedefine01 ENABLE_LLINT_C_LOOP
 #cmakedefine01 ENABLE_MATHML
 #cmakedefine01 ENABLE_MEDIA_CAPTURE
+#cmakedefine01 ENABLE_MEDIA_CONTROLS_SCRIPT
 #cmakedefine01 ENABLE_MEDIA_SOURCE
 #cmakedefine01 ENABLE_MEDIA_STATISTICS
 #cmakedefine01 ENABLE_MEDIA_STREAM