[Gtk] HTML5 Media controls require a design refresh
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 20 Feb 2013 15:30:15 +0000 (15:30 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 20 Feb 2013 15:30:15 +0000 (15:30 +0000)
https://bugs.webkit.org/show_bug.cgi?id=83869

Source/WebCore:

Created new controls that depend less on Gtk and more in CSS.

Patch by Xabier Rodriguez Calvar  <calvaris@igalia.com>  and  Martin Robinson <mrobinson@igalia.com> on 2013-02-20
Reviewed by Philippe Normand.

* GNUmakefile.list.am: Added compilation for MediaControlsGtk.cpp
and MediaControlsGtk.h
* css/mediaControlsGtk.css: Taken from Chromium and adapted for
WebKitGtk+.
* html/shadow/MediaControlsGtk.cpp: Added.
(WebCore): Added MediaControlsGtk class.
(WebCore::MediaControlsGtk::MediaControlsGtk): Class constructor
(WebCore::MediaControls::create): Creates the Gtk+ controls
components.
(WebCore::MediaControlsGtk::createControls): Creates the Gtk+
controls components.
(WebCore::MediaControlsGtk::initializeControls): Initializes all
media controls.
(WebCore::MediaControlsGtk::setMediaController): Sets the media
controller.
(WebCore::MediaControlsGtk::reset): Resets the controllers.
(WebCore::MediaControlsGtk::playbackStarted): Invoked when the
playback starts
(WebCore::MediaControlsGtk::updateCurrentTimeDisplay): Updates the
controls when the current time shall be updated.
(WebCore::MediaControlsGtk::changedMute): Updates the controls
then the mute changes.
(WebCore::MediaControlsGtk::showVolumeSlider): Invoked when the
volume slider is meant to be shown.
(WebCore::MediaControlsGtk::createTextTrackDisplay): Creates the
track display. Though it is not used by us, it needs to be created
to prevent immediate crashes when loading a video.
* html/shadow/MediaControlsGtk.h: Added.
(WebCore): Added the MediaControlsGtk class.
(MediaControlsGtk): Added the MediaControlsGtk class.
* platform/gtk/RenderThemeGtk.cpp:
(WebCore): Added getStockSymbolicIconForWidgetType function
signature to load symbolic icons.
(WebCore::supportsFocus): Added media control widgets to support
focus so that the focus ring is not painted by WebCore.
(WebCore::RenderThemeGtk::paintMediaButton): Added the symbolic
icon support. It supports now normal and symbolic icons at the
same time.
(WebCore::RenderThemeGtk::paintMediaFullscreenButton): Added the
symbolic icon support.
(WebCore::RenderThemeGtk::paintMediaMuteButton): Added the
symbolic icon support.
(WebCore::RenderThemeGtk::paintMediaPlayButton): Added the
symbolic icon support.
(WebCore::RenderThemeGtk::paintMediaSeekBackButton): Added the
symbolic icon support.
(WebCore::RenderThemeGtk::paintMediaSeekForwardButton): Added the
symbolic icon support.
(WebCore::borderRadiiFromStyle): Created the radii info from the
style.
(WebCore::RenderThemeGtk::paintMediaSliderTrack): Removed the
background and the Gtk widget support as it is painted with
CSS. Also paint the time ranges with the CSS style.
(WebCore::RenderThemeGtk::paintMediaSliderThumb): Paint slider
thumb according to the CSS parameters.
(WebCore::RenderThemeGtk::paintMediaVolumeSliderContainer):
Delegates in the CSS.
(WebCore::RenderThemeGtk::paintMediaVolumeSliderTrack): Fills the
track up to the volume level and delegates the border in the CSS.
(WebCore::RenderThemeGtk::paintMediaVolumeSliderThumb): Delegates
in the paintMediaSliderThumb method so the thumb is painted the
same with the CSS parameters.
(WebCore::RenderThemeGtk::paintMediaCurrentTime): Removed the Gtk
background to use only CSS.
* platform/gtk/RenderThemeGtk.h:
(RenderThemeGtk): Changed paintMediaButton to support the symbolic
and normal icons at the same time.
* platform/gtk/RenderThemeGtk2.cpp:
(WebCore::RenderThemeGtk::adjustSliderThumbSize): Not adjusting
the thumb size and letting the CSS decide that for media slider.
(WebCore::getStockSymbolicIconForWidgetType): Implemented as a
fallback to the normal stock icons.
* platform/gtk/RenderThemeGtk3.cpp:
(WebCore):
(WebCore::RenderThemeGtk::adjustSliderThumbSize): Not adjusting
the thumb size and letting the CSS decide that for the media
sliders.
(WebCore::getStockSymbolicIconForWidgetType): Added this function
to load symbolic icons. It falls back to normal icons if the
symbolic is not found.

Tools:

Patch by Xabier Rodriguez Calvar <calvaris@igalia.com> on 2013-02-20
Reviewed by Philippe Normand.

* DumpRenderTree/gtk/DumpRenderTree.cpp:
(initializeGtkFontSettings): Added gnome as default icon theme for
the DRT.
* WebKitTestRunner/InjectedBundle/gtk/ActivateFontsGtk.cpp:
(WTR::initializeGtkSettings): Added gnome as default icon theme for
the WTR.
* gtk/jhbuild.modules: Added gnome-icon-theme-symbolic as external
dependency.

LayoutTests:

Tests flagged and rebaselines.

Patch by Xabier Rodriguez Calvar <calvaris@igalia.com> on 2013-02-20
Reviewed by Philippe Normand.

* platform/gtk/TestExpectations: Tests flagged and removed some
other flags.
* platform/gtk/accessibility/media-element-expected.txt: Rebaseline
* platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt: Rebaseline
* platform/gtk/fast/layers/video-layer-expected.png: Rebaseline
* platform/gtk/fast/layers/video-layer-expected.txt: Rebaseline
* platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png: Rebaseline
* platform/gtk/media/audio-repaint-expected.png: Rebaseline
* platform/gtk/media/audio-repaint-expected.txt: Rebaseline
* platform/gtk/media/controls-styling-strict-expected.png: Rebaseline
* platform/gtk/media/video-controls-rendering-expected.png: Rebaseline
* platform/gtk/media/video-empty-source-expected.txt: Rebaseline
* platform/gtk/media/video-no-audio-expected.txt: Rebaseline
* platform/gtk/media/video-volume-slider-expected.txt: Rebaseline
* platform/gtk/media/video-zoom-controls-expected.txt: Rebaseline
* platform/gtk/media/video-zoom-expected.png: Rebaseline

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

29 files changed:
LayoutTests/ChangeLog
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.png
LayoutTests/platform/gtk/fast/layers/video-layer-expected.txt
LayoutTests/platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png
LayoutTests/platform/gtk/media/audio-repaint-expected.png
LayoutTests/platform/gtk/media/audio-repaint-expected.txt
LayoutTests/platform/gtk/media/controls-styling-strict-expected.png
LayoutTests/platform/gtk/media/video-controls-rendering-expected.png
LayoutTests/platform/gtk/media/video-empty-source-expected.txt
LayoutTests/platform/gtk/media/video-no-audio-expected.txt
LayoutTests/platform/gtk/media/video-volume-slider-expected.txt
LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt
LayoutTests/platform/gtk/media/video-zoom-expected.png
Source/WebCore/ChangeLog
Source/WebCore/GNUmakefile.list.am
Source/WebCore/css/mediaControlsGtk.css
Source/WebCore/html/shadow/MediaControlsGtk.cpp [new file with mode: 0644]
Source/WebCore/html/shadow/MediaControlsGtk.h [new file with mode: 0644]
Source/WebCore/platform/gtk/RenderThemeGtk.cpp
Source/WebCore/platform/gtk/RenderThemeGtk.h
Source/WebCore/platform/gtk/RenderThemeGtk2.cpp
Source/WebCore/platform/gtk/RenderThemeGtk3.cpp
Tools/ChangeLog
Tools/DumpRenderTree/gtk/DumpRenderTree.cpp
Tools/WebKitTestRunner/InjectedBundle/gtk/ActivateFontsGtk.cpp
Tools/gtk/jhbuild.modules

index a19a15507d28db2679226893b891274752b4c747..f4dd159c98935d3a0bfee32a02b4726e21ae8561 100644 (file)
@@ -1,3 +1,29 @@
+2013-02-20  Xabier Rodriguez Calvar  <calvaris@igalia.com>
+
+        [Gtk] HTML5 Media controls require a design refresh
+        https://bugs.webkit.org/show_bug.cgi?id=83869
+
+        Tests flagged and rebaselines.
+
+        Reviewed by Philippe Normand.
+
+        * platform/gtk/TestExpectations: Tests flagged and removed some
+        other flags.
+        * platform/gtk/accessibility/media-element-expected.txt: Rebaseline
+        * platform/gtk/fast/hidpi/video-controls-in-hidpi-expected.txt: Rebaseline
+        * platform/gtk/fast/layers/video-layer-expected.png: Rebaseline
+        * platform/gtk/fast/layers/video-layer-expected.txt: Rebaseline
+        * platform/gtk/http/tests/media/video-buffered-range-contains-currentTime-expected.png: Rebaseline
+        * platform/gtk/media/audio-repaint-expected.png: Rebaseline
+        * platform/gtk/media/audio-repaint-expected.txt: Rebaseline
+        * platform/gtk/media/controls-styling-strict-expected.png: Rebaseline
+        * platform/gtk/media/video-controls-rendering-expected.png: Rebaseline
+        * platform/gtk/media/video-empty-source-expected.txt: Rebaseline
+        * platform/gtk/media/video-no-audio-expected.txt: Rebaseline
+        * platform/gtk/media/video-volume-slider-expected.txt: Rebaseline
+        * platform/gtk/media/video-zoom-controls-expected.txt: Rebaseline
+        * platform/gtk/media/video-zoom-expected.png: Rebaseline
+
 2013-02-20  Dominik Röttsches  <dominik.rottsches@intel.com>
 
         [EFL] Unreviewed gardening.
index c1562cb9b0c72391289002cd32ab9d2af9608c4b..79298de5cbcc3e36f49469fc1466b19e9f1fb22e 100644 (file)
@@ -476,6 +476,18 @@ webkit.org/b/103771 media/track/track-in-band.html [ Failure ]
 webkit.org/b/103771 media/track/track-in-band-cues-added-once.html [ Timeout ]
 webkit.org/b/103771 media/track/track-in-band-style.html [ Timeout ]
 
+#Incorrect rebaseline
+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-zoom-controls.html [ Failure ]
+webkit.org/b/107825 media/video-controls-fullscreen-volume.html [ Failure ]
+webkit.org/b/107825 media/media-controls-clone.html [ Failure ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # End of Expected failures
 #////////////////////////////////////////////////////////////////////////////////////////
@@ -1449,16 +1461,6 @@ webkit.org/b/109353 fast/flexbox/line-clamp-link-after-ellipsis.html [ Failure ]
 webkit.org/b/109469 fast/css/cursor-parsing-image-set.html [ Failure ]
 webkit.org/b/109469 fast/events/mouse-cursor-image-set.html [ Timeout ]
 
-webkit.org/b/83869 fast/hidpi/video-controls-in-hidpi.html [ Failure ]
-webkit.org/b/83869 fast/layers/video-layer.html [ Failure ]
-webkit.org/b/83869 media/audio-repaint.html [ Failure ]
-webkit.org/b/83869 media/controls-styling.html [ Failure ]
-webkit.org/b/83869 media/media-controls-clone.html [ Failure ]
-webkit.org/b/83869 media/video-empty-source.html [ Failure ]
-webkit.org/b/83869 media/video-no-audio.html [ Failure ]
-webkit.org/b/83869 media/video-volume-slider.html [ Failure ]
-webkit.org/b/83869 media/video-zoom-controls.html [ Failure ]
-
 webkit.org/b/110089 fast/exclusions/shape-inside/shape-inside-circle.html [ ImageOnlyFailure ]
 webkit.org/b/110089 fast/exclusions/shape-inside/shape-inside-ellipse.html [ ImageOnlyFailure ]
 
index ec478c1668c89cd5ce9687fc887bc4169f29c3f9..ac3a5c820c1121d902e70d7bd8c874840762a262 100644 (file)
@@ -8,28 +8,24 @@ State at 'canplaythrough' event:
     role: AXRole: AXToolbar
 
 
-        description: AXDescription: play
-        role: AXRole: AXButton
+        description: AXDescription: video element controller
+        role: AXRole: AXToolbar
 
 
-        description: AXDescription: 
-        role: AXRole: AXSlider
+            description: AXDescription: play
+            role: AXRole: AXButton
 
 
-        description: AXDescription: fast reverse
-        role: AXRole: AXButton
+            description: AXDescription: 
+            role: AXRole: AXSlider
 
 
-        description: AXDescription: fast forward
-        role: AXRole: AXButton
+            description: AXDescription: enter fullscreen
+            role: AXRole: AXButton
 
 
-        description: AXDescription: enter fullscreen
-        role: AXRole: AXButton
-
-
-        description: AXDescription: mute
-        role: AXRole: AXButton
+            description: AXDescription: mute
+            role: AXRole: AXButton
 
 
 
index f12cfea23149e0cb6eca63d48b589e16de36d895..520b5f224d141ba091b174ffae50d07b19877ff4 100644 (file)
@@ -12,19 +12,15 @@ layer at (8,26) size 300x150
   RenderVideo {VIDEO} at (0,0) size 300x150
 layer at (8,26) size 300x150
   RenderFlexibleBox {DIV} at (0,0) size 300x150
-layer at (8,26) size 300x150 scrollHeight 160
-  RenderFlexibleBox {DIV} at (0,0) size 300x150
-    RenderButton {INPUT} at (0,130) size 20x20
-    RenderFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:00"
-      RenderSlider {INPUT} at (66,0) size 173x20
-        RenderFlexibleBox {DIV} at (2,0) size 169x20
-          RenderBlock {DIV} at (0,4) size 169x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (260,130) size 20x20
-    RenderButton {INPUT} at (280,130) size 20x20
-    RenderBlock {DIV} at (300,150) size 0x0
+    RenderBlock {DIV} at (0,110) size 300x40
+layer at (13,141) size 290x30
+  RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (243,0) size 32x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 32x30
+        RenderText {#text} at (0,7) size 32x15
+          text run at (0,7) width 32: "00:00"
index 505be7ef47bd03d7547d87d341130f70f0232162..b9b6aca96ea9f859c04ff5c55b8a0b2de9a9c5ed 100644 (file)
Binary files a/LayoutTests/platform/gtk/fast/layers/video-layer-expected.png and b/LayoutTests/platform/gtk/fast/layers/video-layer-expected.png differ
index cb30aa8669e0e6fa30fd9d107e80c41839dda9a5..d2f65b74125e736e3583918e19a0458ddf60ab9f 100644 (file)
@@ -17,19 +17,15 @@ layer at (58,110) size 302x152
   RenderVideo {VIDEO} at (50,50) size 302x152 [border: (1px solid #000000)]
 layer at (59,111) size 300x150
   RenderFlexibleBox {DIV} at (1,1) size 300x150
-layer at (59,111) size 300x150 scrollHeight 160
-  RenderFlexibleBox {DIV} at (0,0) size 300x150
-    RenderButton {INPUT} at (0,130) size 20x20
-    RenderFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:00"
-      RenderSlider {INPUT} at (66,0) size 173x20
-        RenderFlexibleBox {DIV} at (2,0) size 169x20
-          RenderBlock {DIV} at (0,4) size 169x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (260,130) size 20x20
-    RenderButton {INPUT} at (280,130) size 20x20
-    RenderBlock {DIV} at (300,150) size 0x0
+    RenderBlock {DIV} at (0,110) size 300x40
+layer at (64,226) size 290x30
+  RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (243,0) size 32x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 32x30
+        RenderText {#text} at (0,7) size 32x15
+          text run at (0,7) width 32: "00:00"
index fc40c3676141bb760ccb4001803f6fe71708ec34..5591051d645599b212ba05b5dda9ce39a0e65c8c 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 ab7bd5b99edc65d13113be363a6e8d3ddd08a9fa..5b51eb4d1acf4877938e3f6b4bf6aadffc7e5971 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/audio-repaint-expected.png and b/LayoutTests/platform/gtk/media/audio-repaint-expected.png differ
index dd5beeaaa12c720cea264a6aab2af967e5fa1ed3..0fa49a4fa0c85495f7aef38a5f8973ffdc2af9a8 100644 (file)
@@ -7,70 +7,57 @@ layer at (0,0) size 800x600
         RenderText {#text} at (0,0) size 699x19
           text run at (0,0) width 609: "This tests that in a html document with inline audio content, the media element repaints correctly "
           text run at (609,0) width 90: "while playing."
-      RenderBlock (anonymous) at (0,34) size 784x139
-        RenderMedia {AUDIO} at (0,0) size 300x20
-        RenderBR {BR} at (300,20) size 0x0
-        RenderBR {BR} at (300,65) size 0x0
-        RenderBR {BR} at (300,139) size 0x0
-layer at (8,62) size 300x20
-  RenderMedia {AUDIO} at (0,20) size 300x20
-layer at (8,62) size 300x20
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-layer at (8,62) size 300x20 scrollHeight 30
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-    RenderButton {INPUT} at (0,0) size 20x20
-    RenderFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:01"
-      RenderSlider {INPUT} at (66,0) size 153x20
-        RenderFlexibleBox {DIV} at (2,0) size 149x20
-          RenderBlock {DIV} at (0,4) size 149x12
-            RenderBlock {DIV} at (68,0) size 12x12
-    RenderButton {INPUT} at (240,0) size 20x20
-    RenderButton {INPUT} at (260,0) size 20x20
-    RenderBlock {DIV} at (280,0) size 20x20
-layer at (288,62) size 20x20
-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
-layer at (8,42) size 300x20
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-layer at (8,42) size 300x20 scrollHeight 30
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-    RenderButton {INPUT} at (0,0) size 20x20
-    RenderFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:01"
-      RenderSlider {INPUT} at (66,0) size 153x20
-        RenderFlexibleBox {DIV} at (2,0) size 149x20
-          RenderBlock {DIV} at (0,4) size 149x12
-            RenderBlock {DIV} at (68,0) size 12x12
-    RenderButton {INPUT} at (240,0) size 20x20
-    RenderButton {INPUT} at (260,0) size 20x20
-    RenderBlock {DIV} at (280,0) size 20x20
-layer at (288,42) size 20x20
-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
-layer at (8,134) size 300x20
-  RenderMedia {AUDIO} at (0,92) size 300x20
-layer at (8,134) size 300x20
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-layer at (8,134) size 300x20 scrollHeight 30
-  RenderFlexibleBox {DIV} at (0,0) size 300x20
-    RenderButton {INPUT} at (0,0) size 20x20
-    RenderFlexibleBox {DIV} at (20,0) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:01"
-      RenderSlider {INPUT} at (66,0) size 153x20
-        RenderFlexibleBox {DIV} at (2,0) size 149x20
-          RenderBlock {DIV} at (0,4) size 149x12
-            RenderBlock {DIV} at (68,0) size 12x12
-    RenderButton {INPUT} at (240,0) size 20x20
-    RenderButton {INPUT} at (260,0) size 20x20
-    RenderBlock {DIV} at (280,0) size 20x20
+      RenderBlock (anonymous) at (0,34) size 784x169
+        RenderMedia {AUDIO} at (0,0) size 300x30
+        RenderBR {BR} at (300,30) size 0x0
+        RenderBR {BR} at (300,85) size 0x0
+        RenderBR {BR} at (300,169) size 0x0
+layer at (8,72) size 300x30
+  RenderMedia {AUDIO} at (0,30) size 300x30
+layer at (8,72) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30
+    RenderBlock {DIV} at (0,0) size 300x30
+layer at (8,72) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (179,0) size 74x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 74x30
+        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
+layer at (8,42) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30
+    RenderBlock {DIV} at (0,0) size 300x30
+layer at (8,42) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (179,0) size 74x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 74x30
+        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
+layer at (8,154) size 300x30
+  RenderMedia {AUDIO} at (0,112) size 300x30
+layer at (8,154) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30
+    RenderBlock {DIV} at (0,0) size 300x30
+layer at (8,154) size 300x30
+  RenderFlexibleBox {DIV} at (0,0) size 300x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (50,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (179,0) size 74x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 74x30
+        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
index d2faef80ee8f6cbb0abcae23a023abc7e76225b6..4d72901ae78850c6ab1f62936b7eed3fb3940c6d 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 601e956a6cd780be701a276898e874ea5565f45b..9cc0eb454437349daf7597f6cf7cffa61736fb72 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 d2fea5f29e20986c8ca7424bfb7493e74158550c..e871e4fe983ae8abdae367bb02cb3f18b232210d 100644 (file)
@@ -12,19 +12,15 @@ layer at (8,42) size 302x152
   RenderVideo {VIDEO} at (0,0) size 302x152 [border: (1px solid #000000)]
 layer at (9,43) size 300x150
   RenderFlexibleBox {DIV} at (1,1) size 300x150
-layer at (9,43) size 300x150 scrollHeight 160
-  RenderFlexibleBox {DIV} at (0,0) size 300x150
-    RenderButton {INPUT} at (0,130) size 20x20
-    RenderFlexibleBox {DIV} at (20,130) size 240x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:00"
-      RenderSlider {INPUT} at (66,0) size 173x20
-        RenderFlexibleBox {DIV} at (2,0) size 169x20
-          RenderBlock {DIV} at (0,4) size 169x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (260,130) size 20x20
-    RenderButton {INPUT} at (280,130) size 20x20
-    RenderBlock {DIV} at (300,150) size 0x0
+    RenderBlock {DIV} at (0,110) size 300x40
+layer at (14,158) size 290x30
+  RenderFlexibleBox {DIV} at (5,5) size 290x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (243,0) size 32x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 32x30
+        RenderText {#text} at (0,7) size 32x15
+          text run at (0,7) width 32: "00:00"
index ccf800c9a912085d3f96d87821808dfd1dfa0b2e..1bca98a06fd434f56ca98e08d982bb155ef5154b 100644 (file)
@@ -12,20 +12,16 @@ layer at (8,42) size 352x288
   RenderVideo {VIDEO} at (0,0) size 352x288
 layer at (8,42) size 352x288
   RenderFlexibleBox {DIV} at (0,0) size 352x288
-layer at (8,42) size 352x288 scrollHeight 298
-  RenderFlexibleBox {DIV} at (0,0) size 352x288
-    RenderButton {INPUT} at (0,268) size 20x20
-    RenderFlexibleBox {DIV} at (20,268) size 272x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:09"
-      RenderSlider {INPUT} at (66,0) size 205x20
-        RenderFlexibleBox {DIV} at (2,0) size 201x20
-          RenderBlock {DIV} at (0,4) size 201x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (292,268) size 20x20
-    RenderButton {INPUT} at (312,268) size 20x20
-    RenderButton {INPUT} at (332,268) size 20x20
-    RenderBlock {DIV} at (352,288) size 0x0
+    RenderBlock {DIV} at (0,248) size 352x40
+layer at (13,295) size 342x30
+  RenderFlexibleBox {DIV} at (5,5) size 342x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (263,0) size 32x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 32x30
+        RenderText {#text} at (0,7) size 32x15
+          text run at (0,7) width 32: "00:09"
+    RenderButton {INPUT} at (303,0) size 30x30
index 8e24fc63ce7166104438d8ef85fa5c344962cbe0..84cfcb7fd750872e23046b05587d79118e3c7316 100644 (file)
@@ -16,30 +16,24 @@ layer at (0,0) size 800x600
 layer at (8,62) size 320x240
   RenderVideo {VIDEO} at (0,54) size 320x240
 layer at (8,62) size 320x240
-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
-layer at (8,62) size 320x240 scrollHeight 250
-  RenderDeprecatedFlexibleBox (relative positioned) {DIV} at (0,0) size 320x240
-    RenderButton {INPUT} at (0,220) size 20x20
-    RenderDeprecatedFlexibleBox {DIV} at (20,220) size 220x20 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 65x30
-        RenderDeprecatedFlexibleBox {DIV} at (0,0) size 65x30
-          RenderBlock (anonymous) at (5,5) size 55x20
-            RenderText {#text} at (0,0) size 55x12
-              text run at (0,0) width 55: "00:00 / 00:06"
-      RenderSlider {INPUT} at (66,0) size 153x20
-        RenderFlexibleBox {DIV} at (2,0) size 149x20
-          RenderBlock {DIV} at (0,4) size 149x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (240,220) size 20x20
-    RenderButton {INPUT} at (260,220) size 20x20
-    RenderButton {INPUT} at (280,220) size 20x20
-    RenderBlock {DIV} at (300,220) size 20x20
-layer at (308,182) size 20x100
-  RenderBlock (positioned) zI: 1 {DIV} at (300,120) size 20x100
-layer at (311,187) size 14x95
-  RenderSlider {INPUT} at (3,5) size 14x95
-    RenderFlexibleBox {DIV} at (0,0) size 14x95
-      RenderBlock {DIV} at (0,0) size 14x95
-        RenderBlock {DIV} at (0,20) size 14x31
-layer at (308,282) size 20x20
-  RenderButton zI: 2 {INPUT} at (0,0) size 20x20
+  RenderFlexibleBox {DIV} at (0,0) size 320x240
+    RenderBlock {DIV} at (0,200) size 320x40
+layer at (13,267) size 310x30
+  RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
+    RenderButton {INPUT} 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
+          RenderBlock {DIV} at (-7,0) size 12x12 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (199,0) size 32x30 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 32x30
+        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,167) size 30x100
+  RenderBlock (positioned) zI: 2 {DIV} at (271,-100) size 30x100
+    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,25) size 12x12 [color=#FFFFFF]
index 1778fdbe7ff09c79d7c1f537da6dbdd5b965d3c0..7fa4fddbd9f058a76667b6e86bc3dc518e1d7add 100644 (file)
@@ -10,47 +10,35 @@ layer at (57,85) size 240x180
   RenderVideo {VIDEO} at (45,73) size 240x180
 layer at (57,85) size 240x180
   RenderFlexibleBox {DIV} at (0,0) size 240x180
-layer at (57,85) size 240x180 scrollHeight 194
-  RenderFlexibleBox {DIV} at (0,0) size 240x180
-    RenderButton {INPUT} at (0,150) size 30x30
-    RenderFlexibleBox {DIV} at (30,150) size 90x30 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 88x44
-        RenderFlexibleBox {DIV} at (88,0) size 0x44
-          RenderBlock (anonymous) at (7,7) size 74x30
-            RenderText {#text} at (15,0) size 44x35
-              text run at (15,0) width 44: "00:00 /"
-              text run at (19,17) width 36: "00:06"
-      RenderSlider {INPUT} at (89,0) size 6x30
-        RenderFlexibleBox {DIV} at (3,0) size 0x30
-          RenderBlock {DIV} at (0,9) size 0x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (120,150) size 30x30
-    RenderButton {INPUT} at (150,150) size 30x30
-    RenderButton {INPUT} at (180,150) size 30x30
-    RenderBlock {DIV} at (210,150) size 30x30
-layer at (267,235) size 30x30
-  RenderButton zI: 2 {INPUT} at (0,0) size 30x30
+    RenderBlock {DIV} at (0,120) size 240x60
+layer at (64,212) size 226x45
+  RenderFlexibleBox {DIV} at (7,7) size 226x45 [bgcolor=#141414CC]
+    RenderButton {INPUT} at (13,0) size 45x45
+    RenderSlider {INPUT} at (72,16) size 37x12 [color=#E6E6E659]
+      RenderFlexibleBox {DIV} at (0,0) size 37x12 [border: (1px solid #E6E6E659)]
+        RenderBlock {DIV} at (1,-3) size 56x18
+          RenderBlock {DIV} at (-10,0) size 18x18 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (131,0) size 108x45 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 108x45
+        RenderText {#text} at (0,11) size 108x23
+          text run at (0,11) width 108: "00:00 / 00:06"
+    RenderButton {INPUT} at (251,0) size 45x45
+    RenderButton {INPUT} at (299,0) size 45x45
 layer at (57,310) size 240x180
   RenderVideo {VIDEO} at (45,298) size 240x180
 layer at (57,310) size 240x180
   RenderFlexibleBox {DIV} at (0,0) size 240x180
-layer at (57,310) size 240x180 scrollHeight 194
-  RenderFlexibleBox {DIV} at (0,0) size 240x180
-    RenderButton {INPUT} at (0,150) size 30x30
-    RenderFlexibleBox {DIV} at (30,150) size 90x30 [border: none (1px solid #FFFFFF33) none (1px solid #FFFFFF33)]
-      RenderBlock (anonymous) at (1,0) size 88x44
-        RenderFlexibleBox {DIV} at (88,0) size 0x44
-          RenderBlock (anonymous) at (7,7) size 74x30
-            RenderText {#text} at (15,0) size 44x35
-              text run at (15,0) width 44: "00:00 /"
-              text run at (19,17) width 36: "00:06"
-      RenderSlider {INPUT} at (89,0) size 6x30
-        RenderFlexibleBox {DIV} at (3,0) size 0x30
-          RenderBlock {DIV} at (0,9) size 0x12
-            RenderBlock {DIV} at (0,0) size 12x12
-    RenderButton {INPUT} at (120,150) size 30x30
-    RenderButton {INPUT} at (150,150) size 30x30
-    RenderButton {INPUT} at (180,150) size 30x30
-    RenderBlock {DIV} at (210,150) size 30x30
-layer at (267,460) size 30x30 backgroundClip at (74,291) size 240x180 clip at (74,291) size 240x180 outlineClip at (74,291) size 240x180
-  RenderButton zI: 2 {INPUT} at (0,0) size 30x30
+    RenderBlock {DIV} at (0,120) size 240x60
+layer at (64,437) size 226x45
+  RenderFlexibleBox {DIV} at (7,7) size 226x45 [bgcolor=#141414CC]
+    RenderButton {INPUT} at (13,0) size 45x45
+    RenderSlider {INPUT} at (72,16) size 37x12 [color=#E6E6E659]
+      RenderFlexibleBox {DIV} at (0,0) size 37x12 [border: (1px solid #E6E6E659)]
+        RenderBlock {DIV} at (1,-3) size 56x18
+          RenderBlock {DIV} at (-10,0) size 18x18 [color=#FFFFFF]
+    RenderFlexibleBox {DIV} at (131,0) size 108x45 [color=#FFFFFF]
+      RenderBlock (anonymous) at (0,0) size 108x45
+        RenderText {#text} at (0,11) size 108x23
+          text run at (0,11) width 108: "00:00 / 00:06"
+    RenderButton {INPUT} at (251,0) size 45x45
+    RenderButton {INPUT} at (299,0) size 45x45
index d8cd2216eaf56665b610d67c8ee97d153b266661..094e9ed05ecb8f570a0f6ed6943bedbcc2853703 100644 (file)
Binary files a/LayoutTests/platform/gtk/media/video-zoom-expected.png and b/LayoutTests/platform/gtk/media/video-zoom-expected.png differ
index b4044cefac81058adf7097b533659a8a4dfe5c68..7583774ccf905fed80c9ecb5efdf8d010a645a78 100644 (file)
@@ -1,3 +1,93 @@
+2013-02-20  Xabier Rodriguez Calvar  <calvaris@igalia.com>  and  Martin Robinson  <mrobinson@igalia.com>
+
+        [Gtk] HTML5 Media controls require a design refresh
+        https://bugs.webkit.org/show_bug.cgi?id=83869
+
+        Created new controls that depend less on Gtk and more in CSS.
+
+        Reviewed by Philippe Normand.
+
+        * GNUmakefile.list.am: Added compilation for MediaControlsGtk.cpp
+        and MediaControlsGtk.h
+        * css/mediaControlsGtk.css: Taken from Chromium and adapted for
+        WebKitGtk+.
+        * html/shadow/MediaControlsGtk.cpp: Added.
+        (WebCore): Added MediaControlsGtk class.
+        (WebCore::MediaControlsGtk::MediaControlsGtk): Class constructor
+        (WebCore::MediaControls::create): Creates the Gtk+ controls
+        components.
+        (WebCore::MediaControlsGtk::createControls): Creates the Gtk+
+        controls components.
+        (WebCore::MediaControlsGtk::initializeControls): Initializes all
+        media controls.
+        (WebCore::MediaControlsGtk::setMediaController): Sets the media
+        controller.
+        (WebCore::MediaControlsGtk::reset): Resets the controllers.
+        (WebCore::MediaControlsGtk::playbackStarted): Invoked when the
+        playback starts
+        (WebCore::MediaControlsGtk::updateCurrentTimeDisplay): Updates the
+        controls when the current time shall be updated.
+        (WebCore::MediaControlsGtk::changedMute): Updates the controls
+        then the mute changes.
+        (WebCore::MediaControlsGtk::showVolumeSlider): Invoked when the
+        volume slider is meant to be shown.
+        (WebCore::MediaControlsGtk::createTextTrackDisplay): Creates the
+        track display. Though it is not used by us, it needs to be created
+        to prevent immediate crashes when loading a video.
+        * html/shadow/MediaControlsGtk.h: Added.
+        (WebCore): Added the MediaControlsGtk class.
+        (MediaControlsGtk): Added the MediaControlsGtk class.
+        * platform/gtk/RenderThemeGtk.cpp:
+        (WebCore): Added getStockSymbolicIconForWidgetType function
+        signature to load symbolic icons.
+        (WebCore::supportsFocus): Added media control widgets to support
+        focus so that the focus ring is not painted by WebCore.
+        (WebCore::RenderThemeGtk::paintMediaButton): Added the symbolic
+        icon support. It supports now normal and symbolic icons at the
+        same time.
+        (WebCore::RenderThemeGtk::paintMediaFullscreenButton): Added the
+        symbolic icon support.
+        (WebCore::RenderThemeGtk::paintMediaMuteButton): Added the
+        symbolic icon support.
+        (WebCore::RenderThemeGtk::paintMediaPlayButton): Added the
+        symbolic icon support.
+        (WebCore::RenderThemeGtk::paintMediaSeekBackButton): Added the
+        symbolic icon support.
+        (WebCore::RenderThemeGtk::paintMediaSeekForwardButton): Added the
+        symbolic icon support.
+        (WebCore::borderRadiiFromStyle): Created the radii info from the
+        style.
+        (WebCore::RenderThemeGtk::paintMediaSliderTrack): Removed the
+        background and the Gtk widget support as it is painted with
+        CSS. Also paint the time ranges with the CSS style.
+        (WebCore::RenderThemeGtk::paintMediaSliderThumb): Paint slider
+        thumb according to the CSS parameters.
+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderContainer):
+        Delegates in the CSS.
+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderTrack): Fills the
+        track up to the volume level and delegates the border in the CSS.
+        (WebCore::RenderThemeGtk::paintMediaVolumeSliderThumb): Delegates
+        in the paintMediaSliderThumb method so the thumb is painted the
+        same with the CSS parameters.
+        (WebCore::RenderThemeGtk::paintMediaCurrentTime): Removed the Gtk
+        background to use only CSS.
+        * platform/gtk/RenderThemeGtk.h:
+        (RenderThemeGtk): Changed paintMediaButton to support the symbolic
+        and normal icons at the same time.
+        * platform/gtk/RenderThemeGtk2.cpp:
+        (WebCore::RenderThemeGtk::adjustSliderThumbSize): Not adjusting
+        the thumb size and letting the CSS decide that for media slider.
+        (WebCore::getStockSymbolicIconForWidgetType): Implemented as a
+        fallback to the normal stock icons.
+        * platform/gtk/RenderThemeGtk3.cpp:
+        (WebCore):
+        (WebCore::RenderThemeGtk::adjustSliderThumbSize): Not adjusting
+        the thumb size and letting the CSS decide that for the media
+        sliders.
+        (WebCore::getStockSymbolicIconForWidgetType): Added this function
+        to load symbolic icons. It falls back to normal icons if the
+        symbolic is not found.
+
 2013-02-20  Andras Becsi  <andras.becsi@digia.com>
 
         [Qt] Rename AncestorChainWalker.h to EventPathWalker.h in the project file.
index 5a088c99f7a9e4741897c23e8d03801ecfa58b9c..69ed837b28491c909aa727a4174a98e724107573 100644 (file)
@@ -3670,8 +3670,8 @@ webcore_sources += \
        Source/WebCore/html/shadow/MediaControlElementTypes.h \
        Source/WebCore/html/shadow/MediaControls.cpp \
        Source/WebCore/html/shadow/MediaControls.h \
-       Source/WebCore/html/shadow/MediaControlsApple.cpp \
-       Source/WebCore/html/shadow/MediaControlsApple.h \
+       Source/WebCore/html/shadow/MediaControlsGtk.cpp \
+       Source/WebCore/html/shadow/MediaControlsGtk.h \
        Source/WebCore/html/shadow/MeterShadowElement.cpp \
        Source/WebCore/html/shadow/MeterShadowElement.h \
        Source/WebCore/html/shadow/ProgressShadowElement.cpp \
index e6f3db1e74424667bdef41e5a775da2e7b6dd0b3..5729d458721a0d821f090bce3e2febbc23328bd7 100644 (file)
 /*
- * WebKitGTK+ specific overrides for HTML5 media elements.
+ * Copyright (C) 2009 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Google Inc.
+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
+ * Copyright (C) 2012 Igalia S.L.
  *
- * Copyright (C) 2009 Zan Dobersek <zandobersek@gmail.com>
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Library General Public
- * License as published by the Free Software Foundation; either
- * version 2 of the License, or (at your option) any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Library General Public License for more details.
- *
- * You should have received a copy of the GNU Library General Public License
- * along with this library; see the file COPYING.LIB.  If not, write to
- * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
- * Boston, MA 02110-1301, USA.
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
  *
+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+/* These are based on the Chromium media controls */
+
+body:-webkit-full-page-media {
+    background-color: rgb(0, 0, 0);
+}
+
 audio {
-    height: 20px;
     width: 300px;
+    height: 30px;
 }
 
-audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
-    -webkit-align-items: flex-end;
-    text-align: right;
-    height: 100%;
+audio:-webkit-full-page-media, video:-webkit-full-page-media {
+    max-height: 100%;
+    max-width: 100%;
 }
 
-audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    z-index: 2;
+audio:-webkit-full-page-media::-webkit-media-controls-panel,
+video:-webkit-full-page-media::-webkit-media-controls-panel {
+    bottom: 0px;
 }
 
-audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
-    width: 20px;
-    height: 20px;
+::-webkit-media-controls {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+    -webkit-justify-content: flex-end;
+    -webkit-align-items: center;
 }
 
-audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
-    height: 20px;
-    border-left: 1px solid rgba(255, 255, 255, 0.2);
-    border-right: 1px solid rgba(255, 255, 255, 0.2);
+audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
+    width: 100%;
+    max-width: 800px;
+    height: 30px;
+    bottom: 0;
+    text-indent: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow: visible;
 }
 
-audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
-    height: 20px;
+video::-webkit-media-controls-enclosure {
+    padding: 5px;
+    height: 40px;
 }
 
-audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
-    -webkit-appearance: media-current-time-display;
-    -webkit-user-select: none;
-    display: inline-block;
-    height: 20px;
-
-    padding: 5px;
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
+    display: -webkit-flex;
+    -webkit-flex-direction: row;
+    -webkit-align-items: center;
+    -webkit-justify-content: flex-start;
+    bottom: auto;
+    height: 30px;
+    background-color: rgba(20, 20, 20, 0.8);
+    border-radius: 5px;
+    overflow: visible;
+}
 
-    text-align: center;
-    font-size: 10px;
+audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
+    -webkit-appearance: media-mute-button;
+    display: -webkit-flex;
+    -webkit-flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 9px 0 -7px;
 }
 
-audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
-    width: 20px;
-    height: 20px;
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
+    -webkit-appearance: media-play-button;
+    display: -webkit-flex;
+    -webkit-flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 9px;
 }
 
-audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
-    width: 20px;
-    height: 20px;
+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
+    -webkit-appearance: media-current-time-display;
+    -webkit-user-select: none;
+    -webkit-flex: none;
+    display: block;
+    border: none;
+    cursor: default;
+
+    height: 30px;
+    margin: 0 15px 0 0;
+
+    line-height: 30px;
+    font-family: -webkit-small-control;
+    font-size: 13px;
+    font-weight: normal;
+    font-style: normal;
+    color: white;
+
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0;
+    text-shadow: none;
+    text-decoration: none;
 }
 
-audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
-    width: 20px;
-    height: 20px;
+audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
+    -webkit-appearance: media-slider;
+    display: -webkit-flex;
+    -webkit-flex: 1 1 auto;
+    height: 8px;
+    margin: 0 15px 0 1px;
+    padding: 0;
+    background-color: transparent;
+    min-width: 25px;
+    border-radius: 4px;
+    color: rgba(230, 230, 230, 0.35);
 }
 
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
     position: absolute;
+    padding: 0;
     height: 100px;
-    width: 20px;
-    bottom: 20px;
-    z-index: 1;
+    width: 30px;
+    bottom: 30px;
+    z-index: 2;
+    background-color: rgba(20, 20, 20, 0.8);
+    right: 9px;
+    border-radius: 5px 5px 0px 0px;
 }
 
 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
     -webkit-appearance: media-volume-slider;
-    display: inline;
-    position: absolute;
-    width: 14px;
-    height: 95px;
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: column;
+    box-sizing: border-box;
+    height: 80px;
+    width: 8px;
+    margin: 10px auto;
+    border-radius: 4px;
+    background-color: transparent;
+    color: rgba(230, 230, 230, 0.35);
+}
+
+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 {
+    margin: -7px 0;
+}
+
+audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb {
+    -webkit-appearance: media-volume-sliderthumb;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    color: white;
+    margin: 0;
+}
+
+input[type="range"]::-webkit-media-slider-container {
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-direction: row; /* This property is updated by C++ code. */
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    border: 1px solid rgba(230, 230, 230, 0.35);
+    border-radius: 4px;
+    background-color: transparent;
+}
+
+/* The negative right margin causes the track to overflow its container. */
+input[type="range"]::-webkit-media-slider-container > div {
+    margin-right: -14px;
+}
 
-    left: 3px;
-    top: 5px;
+input[type="range"]::-webkit-media-slider-thumb {
+    -webkit-appearance: media-sliderthumb;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    color: white;
+    margin-left: -7px;
+    margin-right: -7px;
+}
+
+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-flex;
+    -webkit-flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 9px 0 -7px;
+}
+
+audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
+    -webkit-appearance: media-enter-fullscreen-button;
+    display: -webkit-flex;
+    -webkit-flex: none;
+    border: none;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 9px 0 -7px;
 }
diff --git a/Source/WebCore/html/shadow/MediaControlsGtk.cpp b/Source/WebCore/html/shadow/MediaControlsGtk.cpp
new file mode 100644 (file)
index 0000000..a386293
--- /dev/null
@@ -0,0 +1,234 @@
+/*
+ * Copyright (C) 2007, 2008, 2009, 2010 Apple Inc. All rights reserved.
+ * Copyright (C) 2011, 2012 Google Inc. All rights reserved.
+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
+ * Copyright (C) 2012 Igalia S.L.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include "config.h"
+
+#if ENABLE(VIDEO)
+#include "MediaControlsGtk.h"
+
+namespace WebCore {
+
+MediaControlsGtk::MediaControlsGtk(Document* document)
+    : MediaControls(document)
+    , m_durationDisplay(0)
+    , m_enclosure(0)
+{
+}
+
+PassRefPtr<MediaControls> MediaControls::create(Document* document)
+{
+    return MediaControlsGtk::createControls(document);
+}
+
+PassRefPtr<MediaControlsGtk> MediaControlsGtk::createControls(Document* document)
+{
+    if (!document->page())
+        return 0;
+
+    RefPtr<MediaControlsGtk> controls = adoptRef(new MediaControlsGtk(document));
+
+    if (controls->initializeControls(document))
+        return controls.release();
+
+    return 0;
+}
+
+bool MediaControlsGtk::initializeControls(Document* document)
+{
+    // Create an enclosing element for the panel so we can visually offset the controls correctly.
+    RefPtr<MediaControlPanelEnclosureElement> enclosure = MediaControlPanelEnclosureElement::create(document);
+    RefPtr<MediaControlPanelElement> panel = MediaControlPanelElement::create(document);
+    ExceptionCode exceptionCode;
+
+    RefPtr<MediaControlPlayButtonElement> playButton = MediaControlPlayButtonElement::create(document);
+    m_playButton = playButton.get();
+    panel->appendChild(playButton.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlTimelineElement> timeline = MediaControlTimelineElement::create(document, this);
+    m_timeline = timeline.get();
+    panel->appendChild(timeline.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlCurrentTimeDisplayElement> currentTimeDisplay = MediaControlCurrentTimeDisplayElement::create(document);
+    m_currentTimeDisplay = currentTimeDisplay.get();
+    m_currentTimeDisplay->hide();
+    panel->appendChild(currentTimeDisplay.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlTimeRemainingDisplayElement> durationDisplay = MediaControlTimeRemainingDisplayElement::create(document);
+    m_durationDisplay = durationDisplay.get();
+    panel->appendChild(durationDisplay.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    if (document->page()->theme()->supportsClosedCaptioning()) {
+        RefPtr<MediaControlToggleClosedCaptionsButtonElement> toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(document, this);
+        m_toggleClosedCaptionsButton = toggleClosedCaptionsButton.get();
+        panel->appendChild(toggleClosedCaptionsButton.release(), exceptionCode, true);
+        if (exceptionCode)
+            return false;
+    }
+
+    RefPtr<MediaControlFullscreenButtonElement> fullscreenButton = MediaControlFullscreenButtonElement::create(document);
+    m_fullScreenButton = fullscreenButton.get();
+    panel->appendChild(fullscreenButton.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlPanelMuteButtonElement> panelMuteButton = MediaControlPanelMuteButtonElement::create(document, this);
+    m_panelMuteButton = panelMuteButton.get();
+    panel->appendChild(panelMuteButton.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlVolumeSliderContainerElement> sliderContainer = MediaControlVolumeSliderContainerElement::create(document);
+    m_volumeSliderContainer = sliderContainer.get();
+    panel->appendChild(sliderContainer.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    RefPtr<MediaControlPanelVolumeSliderElement> slider = MediaControlPanelVolumeSliderElement::create(document);
+    m_volumeSlider = slider.get();
+    m_volumeSlider->setClearMutedOnUserInteraction(true);
+    m_volumeSliderContainer->appendChild(slider.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    m_panel = panel.get();
+    enclosure->appendChild(panel.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    m_enclosure = enclosure.get();
+    appendChild(enclosure.release(), exceptionCode, true);
+    if (exceptionCode)
+        return false;
+
+    return true;
+}
+
+void MediaControlsGtk::setMediaController(MediaControllerInterface* controller)
+{
+    if (m_mediaController == controller)
+        return;
+
+    MediaControls::setMediaController(controller);
+
+    if (m_durationDisplay)
+        m_durationDisplay->setMediaController(controller);
+    if (m_enclosure)
+        m_enclosure->setMediaController(controller);
+}
+
+void MediaControlsGtk::reset()
+{
+    Page* page = document()->page();
+    if (!page)
+        return;
+
+    float duration = m_mediaController->duration();
+    m_durationDisplay->setInnerText(page->theme()->formatMediaControlsTime(duration), ASSERT_NO_EXCEPTION);
+    m_durationDisplay->setCurrentValue(duration);
+
+    MediaControls::reset();
+}
+
+void MediaControlsGtk::playbackStarted()
+{
+    m_currentTimeDisplay->show();
+    m_durationDisplay->hide();
+
+    MediaControls::playbackStarted();
+}
+
+void MediaControlsGtk::updateCurrentTimeDisplay()
+{
+    float now = m_mediaController->currentTime();
+    float duration = m_mediaController->duration();
+
+    Page* page = document()->page();
+    if (!page)
+        return;
+
+    // After seek, hide duration display and show current time.
+    if (now > 0) {
+        m_currentTimeDisplay->show();
+        m_durationDisplay->hide();
+    }
+
+    // Allow the theme to format the time.
+    ExceptionCode exceptionCode;
+    m_currentTimeDisplay->setInnerText(page->theme()->formatMediaControlsCurrentTime(now, duration), exceptionCode);
+    m_currentTimeDisplay->setCurrentValue(now);
+}
+
+void MediaControlsGtk::changedMute()
+{
+    MediaControls::changedMute();
+
+    if (m_mediaController->muted())
+        m_volumeSlider->setVolume(0);
+    else
+        m_volumeSlider->setVolume(m_mediaController->volume());
+}
+
+void MediaControlsGtk::showVolumeSlider()
+{
+    if (!m_mediaController->hasAudio())
+        return;
+
+    if (m_volumeSliderContainer)
+        m_volumeSliderContainer->show();
+}
+
+#if ENABLE(VIDEO_TRACK)
+void MediaControlsGtk::createTextTrackDisplay()
+{
+    if (m_textDisplayContainer)
+        return;
+
+    RefPtr<MediaControlTextTrackContainerElement> textDisplayContainer = MediaControlTextTrackContainerElement::create(document());
+    m_textDisplayContainer = textDisplayContainer.get();
+
+    if (m_mediaController)
+        m_textDisplayContainer->setMediaController(m_mediaController);
+
+    // Insert it before the first controller element so it always displays behind the controls.
+    insertBefore(textDisplayContainer, m_enclosure, ASSERT_NO_EXCEPTION, true);
+    textDisplayContainer->createSubtrees(document());
+    textDisplayContainer.release();
+}
+#endif
+
+}
+
+#endif
diff --git a/Source/WebCore/html/shadow/MediaControlsGtk.h b/Source/WebCore/html/shadow/MediaControlsGtk.h
new file mode 100644 (file)
index 0000000..f709964
--- /dev/null
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2007, 2008, 2009, 2010 Apple Inc. All rights reserved.
+ * Copyright (C) 2011, 2012 Google Inc. All rights reserved.
+ * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
+ * Copyright (C) 2012 Igalia S.L.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#ifndef MediaControlsGtk_h
+#define MediaControlsGtk_h
+
+#if ENABLE(VIDEO)
+
+#include "MediaControls.h"
+
+namespace WebCore {
+
+class MediaControlsGtk : public MediaControls {
+public:
+    // Called from port-specific parent create function to create custom controls.
+    static PassRefPtr<MediaControlsGtk> createControls(Document*);
+
+    virtual void setMediaController(MediaControllerInterface*) OVERRIDE;
+    virtual void reset() OVERRIDE;
+    virtual void playbackStarted() OVERRIDE;
+    void changedMute() OVERRIDE;
+    virtual void updateCurrentTimeDisplay() OVERRIDE;
+    virtual void showVolumeSlider() OVERRIDE;
+
+#if ENABLE(VIDEO_TRACK)
+    void createTextTrackDisplay() OVERRIDE;
+#endif
+
+protected:
+    explicit MediaControlsGtk(Document*);
+
+    bool initializeControls(Document*);
+
+private:
+    MediaControlTimeRemainingDisplayElement* m_durationDisplay;
+    MediaControlPanelEnclosureElement* m_enclosure;
+    MediaControlVolumeSliderContainerElement* m_volumeSliderContainer;
+};
+
+}
+
+#endif
+
+#endif
index 7e82967136185024bb3efc8bb59e248508d3a30a..a2f2727eae2c1aeec37da8aa9b0b9e04c69f98ed 100644 (file)
@@ -45,6 +45,7 @@
 #include "StringTruncator.h"
 #include "TimeRanges.h"
 #include "UserAgentStyleSheets.h"
+#include <cmath>
 #include <gdk/gdk.h>
 #include <glib.h>
 #include <gtk/gtk.h>
@@ -59,6 +60,7 @@ namespace WebCore {
 // This would be a static method, except that forward declaring GType is tricky, since its
 // definition depends on including glib.h, negating the benefit of using a forward declaration.
 extern GRefPtr<GdkPixbuf> getStockIconForWidgetType(GType, const char* iconName, gint direction, gint state, gint iconSize);
+extern GRefPtr<GdkPixbuf> getStockSymbolicIconForWidgetType(GType widgetType, const char* symbolicIconName, const char *fallbackStockIconName, gint direction, gint state, gint iconSize);
 
 using namespace HTMLNames;
 
@@ -75,14 +77,6 @@ static HTMLMediaElement* getMediaElementFromRenderObject(RenderObject* o)
     return static_cast<HTMLMediaElement*>(mediaNode);
 }
 
-static GtkIconSize getMediaButtonIconSize(int mediaIconSize)
-{
-    GtkIconSize iconSize = gtk_icon_size_from_name("webkit-media-button-size");
-    if (!iconSize)
-        iconSize = gtk_icon_size_register("webkit-media-button-size", mediaIconSize, mediaIconSize);
-    return iconSize;
-}
-
 void RenderThemeGtk::initMediaButtons()
 {
     static bool iconsInitialized = false;
@@ -127,8 +121,6 @@ RenderThemeGtk::RenderThemeGtk()
     , m_sliderThumbColor(Color::white)
     , m_mediaIconSize(16)
     , m_mediaSliderHeight(14)
-    , m_mediaSliderThumbWidth(12)
-    , m_mediaSliderThumbHeight(12)
 {
     platformInit();
 #if ENABLE(VIDEO)
@@ -150,6 +142,11 @@ 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;
@@ -493,23 +490,13 @@ String RenderThemeGtk::extraFullScreenStyleSheet()
 }
 #endif
 
-void RenderThemeGtk::adjustMediaSliderThumbSize(RenderStyle* style) const
-{
-    ASSERT(style->appearance() == MediaSliderThumbPart);
-    style->setWidth(Length(m_mediaSliderThumbWidth, Fixed));
-    style->setHeight(Length(m_mediaSliderThumbHeight, Fixed));
-}
-
-bool RenderThemeGtk::paintMediaButton(RenderObject* renderObject, GraphicsContext* context, const IntRect& rect, const char* iconName)
+bool RenderThemeGtk::paintMediaButton(RenderObject* renderObject, GraphicsContext* context, const IntRect& rect, const char* symbolicIconName, const char* fallbackStockIconName)
 {
-    GRefPtr<GdkPixbuf> icon = getStockIconForWidgetType(GTK_TYPE_CONTAINER, iconName,
-                                                        gtkTextDirection(renderObject->style()->direction()),
-                                                        gtkIconState(this, renderObject),
-                                                        getMediaButtonIconSize(m_mediaIconSize));
     IntRect iconRect(rect.x() + (rect.width() - m_mediaIconSize) / 2,
                      rect.y() + (rect.height() - m_mediaIconSize) / 2,
                      m_mediaIconSize, m_mediaIconSize);
-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
+    GRefPtr<GdkPixbuf> icon = getStockSymbolicIconForWidgetType(GTK_TYPE_CONTAINER, symbolicIconName, fallbackStockIconName,
+        gtkTextDirection(renderObject->style()->direction()), gtkIconState(this, renderObject), iconRect.width());
     paintGdkPixbuf(context, icon.get(), iconRect);
     return false;
 }
@@ -521,7 +508,7 @@ bool RenderThemeGtk::hasOwnDisabledStateHandlingFor(ControlPart part) const
 
 bool RenderThemeGtk::paintMediaFullscreenButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_FULLSCREEN);
+    return paintMediaButton(renderObject, paintInfo.context, rect, "view-fullscreen-symbolic", GTK_STOCK_FULLSCREEN);
 }
 
 bool RenderThemeGtk::paintMediaMuteButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
@@ -530,7 +517,10 @@ bool RenderThemeGtk::paintMediaMuteButton(RenderObject* renderObject, const Pain
     if (!mediaElement)
         return false;
 
-    return paintMediaButton(renderObject, paintInfo.context, rect, mediaElement->muted() ? "audio-volume-muted" : "audio-volume-high");
+    bool muted = mediaElement->muted();
+    return paintMediaButton(renderObject, paintInfo.context, rect,
+        muted ? "audio-volume-muted-symbolic" : "audio-volume-high-symbolic",
+        muted ? "audio-volume-muted" : "audio-volume-high");
 }
 
 bool RenderThemeGtk::paintMediaPlayButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
@@ -541,72 +531,58 @@ bool RenderThemeGtk::paintMediaPlayButton(RenderObject* renderObject, const Pain
     if (!node->isMediaControlElement())
         return false;
 
-    return paintMediaButton(renderObject, paintInfo.context, rect, mediaControlElementType(node) == MediaPlayButton ? GTK_STOCK_MEDIA_PLAY : GTK_STOCK_MEDIA_PAUSE);
+    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);
 }
 
 bool RenderThemeGtk::paintMediaSeekBackButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_MEDIA_REWIND);
+    return paintMediaButton(renderObject, paintInfo.context, rect, "media-seek-backward-symbolic", GTK_STOCK_MEDIA_REWIND);
 }
 
 bool RenderThemeGtk::paintMediaSeekForwardButton(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    return paintMediaButton(renderObject, paintInfo.context, rect, GTK_STOCK_MEDIA_FORWARD);
+    return paintMediaButton(renderObject, paintInfo.context, rect, "media-seek-forward-symbolic", GTK_STOCK_MEDIA_FORWARD);
 }
 
-bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r)
+static RoundedRect::Radii borderRadiiFromStyle(RenderStyle* style)
 {
-    GraphicsContext* context = paintInfo.context;
-
-    context->fillRect(FloatRect(r), m_panelColor, ColorSpaceDeviceRGB);
-    context->fillRect(FloatRect(IntRect(r.x(), r.y() + (r.height() - m_mediaSliderHeight) / 2,
-                                        r.width(), m_mediaSliderHeight)), m_sliderColor, ColorSpaceDeviceRGB);
+    return RoundedRect::Radii(
+        IntSize(style->borderTopLeftRadius().width().intValue(), style->borderTopLeftRadius().height().intValue()),
+        IntSize(style->borderTopRightRadius().width().intValue(), style->borderTopRightRadius().height().intValue()),
+        IntSize(style->borderBottomLeftRadius().width().intValue(), style->borderBottomLeftRadius().height().intValue()),
+        IntSize(style->borderBottomRightRadius().width().intValue(), style->borderBottomRightRadius().height().intValue()));
+}
 
-    RenderStyle* style = o->style();
+bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r)
+{
     HTMLMediaElement* mediaElement = toParentMediaElement(o);
-
     if (!mediaElement)
         return false;
 
-    // Draw the buffered ranges. This code is highly inspired from
-    // Chrome for the gradient code.
-    float mediaDuration = mediaElement->duration();
-    RefPtr<TimeRanges> timeRanges = mediaElement->buffered();
-    IntRect trackRect = r;
-    int totalWidth = trackRect.width();
-
-    trackRect.inflate(-style->borderLeftWidth());
+    GraphicsContext* context = paintInfo.context;
     context->save();
     context->setStrokeStyle(NoStroke);
 
+    float mediaDuration = mediaElement->duration();
+    float totalTrackWidth = r.width();
+    RenderStyle* style = o->style();
+    RefPtr<TimeRanges> timeRanges = mediaElement->buffered();
     for (unsigned index = 0; index < timeRanges->length(); ++index) {
         float start = timeRanges->start(index, IGNORE_EXCEPTION);
         float end = timeRanges->end(index, IGNORE_EXCEPTION);
-        int width = ((end - start) * totalWidth) / mediaDuration;
-        IntRect rangeRect;
-        if (!index) {
-            rangeRect = trackRect;
-            rangeRect.setWidth(width);
-        } else {
-            rangeRect.setLocation(IntPoint(trackRect.x() + start / mediaDuration* totalWidth, trackRect.y()));
-            rangeRect.setSize(IntSize(width, trackRect.height()));
-        }
-
-        // Don't bother drawing empty range.
-        if (rangeRect.isEmpty())
+        float startRatio = start / mediaDuration;
+        float lengthRatio = (end - start) / mediaDuration;
+        if (!lengthRatio)
             continue;
 
-        IntPoint sliderTopLeft = rangeRect.location();
-        IntPoint sliderTopRight = sliderTopLeft;
-        sliderTopRight.move(0, rangeRect.height());
-
-        RefPtr<Gradient> gradient = Gradient::create(sliderTopLeft, sliderTopRight);
-        Color startColor = m_panelColor;
-        gradient->addColorStop(0.0, startColor);
-        gradient->addColorStop(1.0, Color(startColor.red() / 2, startColor.green() / 2, startColor.blue() / 2, startColor.alpha()));
-
-        context->setFillGradient(gradient);
-        context->fillRect(rangeRect);
+        IntRect rangeRect(r);
+        rangeRect.setWidth(lengthRatio * totalTrackWidth);
+        if (index)
+            rangeRect.move(startRatio * totalTrackWidth, 0);
+        context->fillRoundedRect(RoundedRect(rangeRect, borderRadiiFromStyle(style)), style->visitedDependentColor(CSSPropertyColor), style->colorSpace());
     }
 
     context->restore();
@@ -615,26 +591,47 @@ bool RenderThemeGtk::paintMediaSliderTrack(RenderObject* o, const PaintInfo& pai
 
 bool RenderThemeGtk::paintMediaSliderThumb(RenderObject* o, const PaintInfo& paintInfo, const IntRect& r)
 {
-    // Make the thumb nicer with rounded corners.
-    paintInfo.context->fillRoundedRect(r, IntSize(3, 3), IntSize(3, 3), IntSize(3, 3), IntSize(3, 3), m_sliderThumbColor, ColorSpaceDeviceRGB);
+    RenderStyle* style = o->style();
+    paintInfo.context->fillRoundedRect(RoundedRect(r, borderRadiiFromStyle(style)), style->visitedDependentColor(CSSPropertyColor), style->colorSpace());
     return false;
 }
 
 bool RenderThemeGtk::paintMediaVolumeSliderContainer(RenderObject*, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    GraphicsContext* context = paintInfo.context;
-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
-    return false;
+    return true;
 }
 
 bool RenderThemeGtk::paintMediaVolumeSliderTrack(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    return paintSliderTrack(renderObject, paintInfo, rect);
+    HTMLMediaElement* mediaElement = toParentMediaElement(renderObject);
+    if (!mediaElement)
+        return true;
+
+    float volume = mediaElement->volume();
+    if (!volume)
+        return true;
+
+    GraphicsContext* context = paintInfo.context;
+    context->save();
+    context->setStrokeStyle(NoStroke);
+
+    int rectHeight = rect.height();
+    float trackHeight = rectHeight * volume;
+    RenderStyle* style = renderObject->style();
+    IntRect volumeRect(rect);
+    volumeRect.move(0, rectHeight - trackHeight);
+    volumeRect.setHeight(ceil(trackHeight));
+
+    context->fillRoundedRect(RoundedRect(volumeRect, borderRadiiFromStyle(style)),
+        style->visitedDependentColor(CSSPropertyColor), style->colorSpace());
+    context->restore();
+
+    return false;
 }
 
 bool RenderThemeGtk::paintMediaVolumeSliderThumb(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    return paintSliderThumb(renderObject, paintInfo, rect);
+    return paintMediaSliderThumb(renderObject, paintInfo, rect);
 }
 
 String RenderThemeGtk::formatMediaControlsCurrentTime(float currentTime, float duration) const
@@ -644,9 +641,6 @@ String RenderThemeGtk::formatMediaControlsCurrentTime(float currentTime, float d
 
 bool RenderThemeGtk::paintMediaCurrentTime(RenderObject* renderObject, const PaintInfo& paintInfo, const IntRect& rect)
 {
-    GraphicsContext* context = paintInfo.context;
-
-    context->fillRect(FloatRect(rect), m_panelColor, ColorSpaceDeviceRGB);
     return false;
 }
 #endif
index 85645f4fef3a81806d7991674327fe32d6059e71..4a580801579f1f24f0c76e84ea61dd37d37c7962 100644 (file)
@@ -161,7 +161,6 @@ protected:
 #if ENABLE(VIDEO)
     void initMediaColors();
     void initMediaButtons();
-    void adjustMediaSliderThumbSize(RenderStyle*) const;
     virtual bool hasOwnDisabledStateHandlingFor(ControlPart) const;
     virtual bool paintMediaFullscreenButton(RenderObject*, const PaintInfo&, const IntRect&);
     virtual bool paintMediaPlayButton(RenderObject*, const PaintInfo&, const IntRect&);
@@ -196,7 +195,7 @@ private:
     static double getScreenDPI();
 
 #if ENABLE(VIDEO)
-    bool paintMediaButton(RenderObject*, GraphicsContext*, const IntRect&, const char* iconName);
+    bool paintMediaButton(RenderObject*, GraphicsContext*, const IntRect&, const char* symbolicIconName, const char* fallbackStockIconName);
 #endif
 
 #if ENABLE(PROGRESS_ELEMENT)
@@ -208,8 +207,6 @@ private:
     mutable Color m_sliderThumbColor;
     const int m_mediaIconSize;
     const int m_mediaSliderHeight;
-    const int m_mediaSliderThumbWidth;
-    const int m_mediaSliderThumbHeight;
 
 #ifdef GTK_API_VERSION_2
     void setupWidgetAndAddToContainer(GtkWidget*, GtkWidget*) const;
index 1c33e8cb4af937a26d6c696bcbdaaac8e1602a97..823a0485e7cd168e9aa7e251f58c411d63785b07 100644 (file)
@@ -528,12 +528,8 @@ bool RenderThemeGtk::paintSliderThumb(RenderObject* object, const PaintInfo& inf
 void RenderThemeGtk::adjustSliderThumbSize(RenderStyle* style, Element*) const
 {
     ControlPart part = style->appearance();
-#if ENABLE(VIDEO)
-    if (part == MediaSliderThumbPart) {
-        adjustMediaSliderThumbSize(style);
+    if (part != SliderThumbHorizontalPart && part != SliderThumbVerticalPart)
         return;
-    }
-#endif
 
     GtkWidget* widget = part == SliderThumbHorizontalPart ? gtkHScale() : gtkVScale();
     int length = 0, width = 0;
@@ -670,6 +666,10 @@ GRefPtr<GdkPixbuf> getStockIconForWidgetType(GType widgetType, const char* iconN
                                               static_cast<GtkIconSize>(iconSize), 0, 0));
 }
 
+GRefPtr<GdkPixbuf> getStockSymbolicIconForWidgetType(GType widgetType, const char* symbolicIconName, const char *fallbackStockIconName, gint direction, gint state, gint iconSize)
+{
+    return getStockIconForWidgetType(widgetType, fallbackStockIconName, direction, state, iconSize);
+}
 
 Color RenderThemeGtk::platformActiveSelectionBackgroundColor() const
 {
index dc2980574c761d4c2d79062f49d8818fc62f7a0f..9a7f5a2a2d30020d82243ce2aaf8b20560fad51f 100644 (file)
@@ -708,12 +708,8 @@ bool RenderThemeGtk::paintSliderThumb(RenderObject* renderObject, const PaintInf
 void RenderThemeGtk::adjustSliderThumbSize(RenderStyle* style, Element*) const
 {
     ControlPart part = style->appearance();
-#if ENABLE(VIDEO)
-    if (part == MediaSliderThumbPart) {
-        adjustMediaSliderThumbSize(style);
+    if (part != SliderThumbHorizontalPart && part != SliderThumbVerticalPart)
         return;
-    }
-#endif
 
     gint sliderWidth, sliderLength;
     gtk_style_context_get_style(getStyleContext(GTK_TYPE_SCALE),
@@ -899,6 +895,36 @@ GRefPtr<GdkPixbuf> getStockIconForWidgetType(GType widgetType, const char* iconN
     return adoptGRef(icon);
 }
 
+GRefPtr<GdkPixbuf> getStockSymbolicIconForWidgetType(GType widgetType, const char* symbolicIconName, const char *fallbackStockIconName, gint direction, gint state, gint iconSize)
+{
+    GtkStyleContext* context = getStyleContext(widgetType);
+
+    gtk_style_context_save(context);
+
+    guint flags = 0;
+    if (state == GTK_STATE_PRELIGHT)
+        flags |= GTK_STATE_FLAG_PRELIGHT;
+    else if (state == GTK_STATE_INSENSITIVE)
+        flags |= GTK_STATE_FLAG_INSENSITIVE;
+
+    gtk_style_context_set_state(context, static_cast<GtkStateFlags>(flags));
+    gtk_style_context_set_direction(context, static_cast<GtkTextDirection>(direction));
+    GtkIconInfo* info = gtk_icon_theme_lookup_icon(gtk_icon_theme_get_default(), symbolicIconName, iconSize,
+        static_cast<GtkIconLookupFlags>(GTK_ICON_LOOKUP_FORCE_SVG | GTK_ICON_LOOKUP_FORCE_SIZE));
+    GdkPixbuf* icon = 0;
+    if (info) {
+        icon = gtk_icon_info_load_symbolic_for_context(info, context, 0, 0);
+        gtk_icon_info_free(info);
+    }
+
+    gtk_style_context_restore(context);
+
+    if (!icon)
+        return getStockIconForWidgetType(widgetType, fallbackStockIconName, direction, state, iconSize);
+
+    return adoptGRef(icon);
+}
+
 Color RenderThemeGtk::platformActiveSelectionBackgroundColor() const
 {
     GdkRGBA gdkRGBAColor;
index fe0d9a58d74675aae6a2d9397c6028f491c845ef..f20b95735bf7aa16ee28941a8104c0a675cd7f0a 100644 (file)
@@ -1,3 +1,19 @@
+2013-02-20  Xabier Rodriguez Calvar  <calvaris@igalia.com>
+
+        [Gtk] HTML5 Media controls require a design refresh
+        https://bugs.webkit.org/show_bug.cgi?id=83869
+
+        Reviewed by Philippe Normand.
+
+        * DumpRenderTree/gtk/DumpRenderTree.cpp:
+        (initializeGtkFontSettings): Added gnome as default icon theme for
+        the DRT.
+        * WebKitTestRunner/InjectedBundle/gtk/ActivateFontsGtk.cpp:
+        (WTR::initializeGtkSettings): Added gnome as default icon theme for
+        the WTR.
+        * gtk/jhbuild.modules: Added gnome-icon-theme-symbolic as external
+        dependency.
+
 2013-02-20  Jochen Eisinger  <jochen@chromium.org>
 
         [chromium] move most of the remaining mocks to TestRunner library
index 7c8a8e143f338899ec1460f74b200f033c4f7349..cb168225f323fb3457a9c4e8b5155c7994910c97 100644 (file)
@@ -173,6 +173,7 @@ static void initializeGtkFontSettings(const char* testURL)
                  "gtk-xft-antialias", 1,
                  "gtk-xft-hinting", 0,
                  "gtk-font-name", "Liberation Sans 12",
+                 "gtk-icon-theme-name", "gnome",
                  NULL);
     gdk_screen_set_resolution(gdk_screen_get_default(), 96.0);
 
index c089242bee29a8b4189964eaf001ec36e8252b66..83ae272198965252c9789e09d36890898efab14a 100644 (file)
@@ -50,6 +50,7 @@ void initializeGtkSettings()
                  "gtk-xft-hinting", 0,
                  "gtk-font-name", "Liberation Sans 12",
                  "gtk-theme-name", "Raleigh",
+                 "gtk-icon-theme-name", "gnome",
                  "gtk-xft-rgba", "none", NULL);
 }
 
index 34cb56903735f2249e5f7a5001febd95baa1a72a..9abd92f81a966e5a94239f813bf17fa2bcb11ed5 100644 (file)
@@ -17,6 +17,7 @@
       <dep package="glib"/>
       <dep package="glib-networking"/>
       <dep package="gnome-icon-theme"/>
+      <dep package="gnome-icon-theme-symbolic"/>
       <dep package="gnome-themes-standard"/>
       <dep package="libsoup"/>
       <dep package="at-spi2-core"/>
     </branch>
   </autotools>
 
+  <autotools id="gnome-icon-theme-symbolic" autogen-sh="configure">
+    <dependencies>
+      <dep package="gtk+"/>
+    </dependencies>
+    <branch module="pub/GNOME/sources/gnome-icon-theme-symbolic/3.2/gnome-icon-theme-symbolic-3.2.1.tar.xz" version="3.2.1"
+            repo="ftp.gnome.org"
+            hash="sha256:a558af2f87f761f00421f49c1addd2149b70228158e09327fa861219ac1a63cb"
+            md5sum="94137d3c256f2cc80298a9bef15d68c4">
+    </branch>
+  </autotools>
+
   <autotools id="gnome-themes-standard" autogen-sh="configure">
     <dependencies>
       <dep package="gtk+"/>