Diff
Modified: trunk/LayoutTests/ChangeLog (164781 => 164782)
--- trunk/LayoutTests/ChangeLog 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/ChangeLog 2014-02-27 09:16:18 UTC (rev 164782)
@@ -1,3 +1,18 @@
+2014-02-27 Xabier Rodriguez Calvar <calva...@igalia.com>
+
+ [GTK] Improve _javascript_ multimedia controls
+ https://bugs.webkit.org/show_bug.cgi?id=129044
+
+ Reviewed by Jer Noble.
+
+ * media/controls-without-preload.html: Fixed.
+ * platform/gtk/accessibility/media-controls-panel-title-expected.txt:
+ * platform/gtk/accessibility/media-controls-panel-title.html:
+ * platform/gtk/accessibility/media-emits-object-replacement-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.txt: Rebaseline.
+
2014-02-26 Ryosuke Niwa <rn...@webkit.org>
Indenting an indented image element resulted in an extra indentation
Modified: trunk/LayoutTests/media/controls-without-preload.html (164781 => 164782)
--- trunk/LayoutTests/media/controls-without-preload.html 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/media/controls-without-preload.html 2014-02-27 09:16:18 UTC (rev 164782)
@@ -9,6 +9,7 @@
function start()
{
+ internals.suspendAnimations();
setSrcByTagName("video", findMediaFile("video", "content/test"));
video = document.getElementsByTagName('video')[0];
video.load();
Modified: trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title-expected.txt (164781 => 164782)
--- trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title-expected.txt 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title-expected.txt 2014-02-27 09:16:18 UTC (rev 164782)
@@ -9,11 +9,11 @@
PASS element.role is 'AXRole: AXEmbedded'
PASS element.title is 'AXTitle: '
PASS element.role is 'AXRole: AXToolbar'
-PASS element.title is 'AXTitle: video playback'
+PASS element.title is 'AXTitle: Video Playback'
PASS element.role is 'AXRole: AXEmbedded'
PASS element.title is 'AXTitle: '
PASS element.role is 'AXRole: AXToolbar'
-PASS element.title is 'AXTitle: audio playback'
+PASS element.title is 'AXTitle: Audio Playback'
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title.html (164781 => 164782)
--- trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title.html 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/platform/gtk/accessibility/media-controls-panel-title.html 2014-02-27 09:16:18 UTC (rev 164782)
@@ -23,7 +23,7 @@
shouldBe("element.title", "'AXTitle: '");
element = element.childAtIndex(0);
shouldBe("element.role", "'AXRole: AXToolbar'");
- shouldBe("element.title", "'AXTitle: video playback'");
+ shouldBe("element.title", "'AXTitle: Video Playback'");
// Audio element.
element = mainBlock.childAtIndex(1);
@@ -31,7 +31,7 @@
shouldBe("element.title", "'AXTitle: '");
element = element.childAtIndex(0);
shouldBe("element.role", "'AXRole: AXToolbar'");
- shouldBe("element.title", "'AXTitle: audio playback'");
+ shouldBe("element.title", "'AXTitle: Audio Playback'");
}
</script>
Modified: trunk/LayoutTests/platform/gtk/accessibility/media-emits-object-replacement-expected.txt (164781 => 164782)
--- trunk/LayoutTests/platform/gtk/accessibility/media-emits-object-replacement-expected.txt 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/platform/gtk/accessibility/media-emits-object-replacement-expected.txt 2014-02-27 09:16:18 UTC (rev 164782)
@@ -6,16 +6,16 @@
AXRole: AXSection AXValue: a <obj> b
AXRole: AXEmbedded
AXRole: AXToolbar
- AXRole: AXToolbar
- AXRole: AXButton
- AXRole: AXSlider
+ AXRole: AXButton
+ AXRole: AXSlider
+ AXRole: AXTimer AXValue: 00:00
AXRole: AXGroup AXValue: <\n>
AXRole: AXSection AXValue: a <obj> b
AXRole: AXEmbedded
AXRole: AXToolbar
- AXRole: AXToolbar
- AXRole: AXButton
- AXRole: AXSlider
+ AXRole: AXButton
+ AXRole: AXSlider
+ AXRole: AXTimer AXValue: 00:00
AXRole: AXSection AXValue: End of test
This tests ensures that if video or audio tags are used, they will emit an object replacement character in a range for string operation.
Modified: trunk/LayoutTests/platform/gtk/media/video-volume-slider-expected.png
(Binary files differ)
Modified: trunk/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt (164781 => 164782)
--- trunk/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/platform/gtk/media/video-volume-slider-expected.txt 2014-02-27 09:16:18 UTC (rev 164782)
@@ -6,19 +6,19 @@
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,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,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,0) size 0x0
-layer at (8,62) size 320x240
- RenderVideo {VIDEO} at (0,54) size 320x240
-layer at (8,62) size 320x240
+layer at (8,59) size 320x240
+ RenderVideo {VIDEO} at (0,51) size 320x240
+layer at (8,59) size 320x240
RenderFlexibleBox {DIV} at (0,0) size 320x240
RenderBlock {DIV} at (0,200) size 320x40
-layer at (13,267) size 310x30
+layer at (13,264) size 310x30
RenderFlexibleBox {DIV} at (5,5) size 310x30 [bgcolor=#141414CC]
RenderButton {BUTTON} at (9,0) size 30x30
RenderSlider {INPUT} at (49,11) size 135x8 [color=#E6E6E659]
@@ -31,8 +31,8 @@
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]
+layer at (284,164) size 30x100
+ RenderFlexibleBox 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
Modified: trunk/LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt (164781 => 164782)
--- trunk/LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/LayoutTests/platform/gtk/media/video-zoom-controls-expected.txt 2014-02-27 09:16:18 UTC (rev 164782)
@@ -15,8 +15,8 @@
RenderFlexibleBox {DIV} at (7,7) size 226x46 [bgcolor=#141414CC]
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
+ RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1.50px solid #E6E6E659)]
+ RenderBlock {DIV} at (1,-3) size 56x18
RenderBlock {DIV} at (-11,0) size 19x18 [color=#FFFFFF]
RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]
RenderText {#text} at (0,11) size 108x22
@@ -33,8 +33,8 @@
RenderFlexibleBox {DIV} at (7,7) size 226x46 [bgcolor=#141414CC]
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
+ RenderFlexibleBox {DIV} at (0,0) size 38x12 [border: (1.50px solid #E6E6E659)]
+ RenderBlock {DIV} at (1,-3) size 56x18
RenderBlock {DIV} at (-11,0) size 19x18 [color=#FFFFFF]
RenderBlock {DIV} at (133,0) size 109x45 [color=#FFFFFF]
RenderText {#text} at (0,11) size 108x22
Modified: trunk/Source/WebCore/ChangeLog (164781 => 164782)
--- trunk/Source/WebCore/ChangeLog 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/Source/WebCore/ChangeLog 2014-02-27 09:16:18 UTC (rev 164782)
@@ -1,3 +1,55 @@
+2014-02-27 Xabier Rodriguez Calvar <calva...@igalia.com>
+
+ [GTK] Improve _javascript_ multimedia controls
+ https://bugs.webkit.org/show_bug.cgi?id=129044
+
+ Reviewed by Jer Noble.
+
+ After webkit.org/b/123097 a follow up was needed to improve
+ accessibily and some other cosmetic problems, like cleaner CSS and
+ new missing baselines.
+
+ No new tests because of no new functionality.
+
+ * Modules/mediacontrols/mediaControlsApple.js:
+ Added hiding class name.
+ * Modules/mediacontrols/mediaControlsGtk.js:
+ (ControllerGtk.prototype.createControls): Set remaining time as
+ hidden by default and turned volumebox hidden into hiding.
+ (ControllerGtk.prototype.updateTime): Simplified the hiding and
+ showing by removing the show class and using hidden only.
+ (ControllerGtk.prototype.handleMuteButtonMouseOver):
+ (ControllerGtk.prototype.handleVolumeBoxMouseOut): Turned hidden
+ into hiding.
+ (ControllerGtk.prototype.updateReadyState): Changed coding style
+ and added down class for the panel too.
+ (ControllerGtk.prototype.updatePlaying): Change for coding style
+ coherence.
+ (ControllerGtk.prototype.handleCaptionButtonClicked): Call
+ handleCaptionButtonShowMenu.
+ (ControllerGtk.prototype.handleCaptionButtonMouseOver): Call
+ handleCaptionButtonShowMenu.
+ (ControllerGtk.prototype.handleCaptionButtonShowMenu): Created
+ with the former behavior of handleCaptionButtonMouseOver.
+ * css/mediaControlsGtk.css:
+ (.hidden): Set display none for all objects with hidden class.
+ (audio::-webkit-media-controls-panel *:focus):
+ (audio::-webkit-media-controls-panel.down *:focus): Added gradient
+ for the active and focus status.
+ (audio::-webkit-media-controls-time-remaining-display)
+ (video::-webkit-media-controls-time-remaining-display): Set
+ display block.
+ (audio::-webkit-media-controls-volume-slider-container)
+ (video::-webkit-media-controls-volume-slider-container): Set
+ display flex.
+ (video::-webkit-media-controls-volume-slider-container.hiding):
+ Changed from hidden.
+ (video::-webkit-media-controls-panel .hiding.down): Changed from
+ hidden.
+ * platform/gtk/RenderThemeGtk.cpp:
+ (WebCore::RenderThemeGtk::paintMediaButton): Returning true to
+ allow CSS painting the gradient.
+
2014-02-27 Zan Dobersek <zdober...@igalia.com>
Unreviewed. Fixing the GTK build fix after r164757.
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (164781 => 164782)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-02-27 09:16:18 UTC (rev 164782)
@@ -69,6 +69,7 @@
ClassNames: {
exit: 'exit',
hidden: 'hidden',
+ hiding: 'hiding',
list: 'list',
muteBox: 'mute-box',
muted: 'muted',
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js (164781 => 164782)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsGtk.js 2014-02-27 09:16:18 UTC (rev 164782)
@@ -24,9 +24,10 @@
Controller.prototype.createControls.apply(this);
this.controls.currentTime.classList.add(this.ClassNames.hidden);
+ this.controls.remainingTime.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.controls.volumeBox.classList.add(this.ClassNames.hiding);
this.listenFor(this.controls.muteBox, 'mouseout', this.handleVolumeBoxMouseOut);
this.listenFor(this.controls.muteButton, 'mouseover', this.handleMuteButtonMouseOver);
@@ -65,12 +66,13 @@
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 {
+ if (duration === Infinity || duration === NaN)
+ this.controls.remainingTime.classList.add(this.ClassNames.hidden);
+ else {
this.controls.currentTime.innerText += " / " + this.formatTime(duration);
this.controls.remainingTime.innerText = this.formatTime(duration);
- this.controls.remainingTime.classList.add(this.ClassNames.show);
+ if (this.controls.currentTime.classList.contains(this.ClassNames.hidden))
+ this.controls.remainingTime.classList.remove(this.ClassNames.hidden);
}
if (currentTime > 0)
@@ -96,12 +98,12 @@
handleMuteButtonMouseOver: function(event)
{
- this.controls.volumeBox.classList.remove(this.ClassNames.hidden);
+ this.controls.volumeBox.classList.remove(this.ClassNames.hiding);
},
handleVolumeBoxMouseOut: function(event)
{
- this.controls.volumeBox.classList.add(this.ClassNames.hidden);
+ this.controls.volumeBox.classList.add(this.ClassNames.hiding);
},
addControls: function()
@@ -111,15 +113,17 @@
updateReadyState: function()
{
- if (this.host.supportsFullscreen && this.video.videoTracks.length) {
+ if (this.host.supportsFullscreen && this.video.videoTracks.length)
this.controls.fullscreenButton.classList.remove(this.ClassNames.hidden);
- } else {
+ else
this.controls.fullscreenButton.classList.add(this.ClassNames.hidden);
- }
- if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105)
+ if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105) {
this.controls.volumeBox.classList.add(this.ClassNames.down);
- else
+ this.controls.panel.classList.add(this.ClassNames.down);
+ } else {
this.controls.volumeBox.classList.remove(this.ClassNames.down);
+ this.controls.panel.classList.remove(this.ClassNames.down);
+ }
this.updateVolume();
},
@@ -135,14 +139,13 @@
updatePlaying: function()
{
Controller.prototype.updatePlaying.apply(this, arguments);
- if (!this.canPlay()) {
+ if (!this.canPlay())
this.showControls();
- }
},
handleCaptionButtonClicked: function(event)
{
- // Handled with mouseover and mouseout.
+ this.handleCaptionButtonShowMenu(event)
},
buildCaptionMenu: function()
@@ -186,6 +189,11 @@
handleCaptionButtonMouseOver: function(event)
{
+ this.handleCaptionButtonShowMenu(event);
+ },
+
+ handleCaptionButtonShowMenu: function(event)
+ {
if (!this.captionMenu)
this.buildCaptionMenu();
if (!contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
Modified: trunk/Source/WebCore/css/mediaControlsGtk.css (164781 => 164782)
--- trunk/Source/WebCore/css/mediaControlsGtk.css 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/Source/WebCore/css/mediaControlsGtk.css 2014-02-27 09:16:18 UTC (rev 164782)
@@ -27,6 +27,22 @@
/* These are based on the Chromium media controls */
+.hidden {
+ display: none !important;
+}
+
+video::-webkit-media-controls-panel *:active,
+video::-webkit-media-controls-panel *:focus,
+audio::-webkit-media-controls-panel *:active,
+audio::-webkit-media-controls-panel *:focus {
+ background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) !important;
+}
+
+audio::-webkit-media-controls-panel.down *:active,
+audio::-webkit-media-controls-panel.down *:focus {
+ background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important;
+}
+
body:-webkit-full-page-media {
background-color: rgb(0, 0, 0);
}
@@ -86,6 +102,9 @@
opacity: 0;
}
+audio::-webkit-media-controls-panel,
+video:-webkit-full-page-media::-webkit-media-controls-panel.no-video,
+video::-webkit-media-controls-panel:hover,
video::-webkit-media-controls-panel.show,
video::-webkit-media-controls-panel.paused {
opacity: 1;
@@ -101,11 +120,6 @@
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 {
-webkit-appearance: media-mute-button;
display: -webkit-flex;
@@ -136,6 +150,7 @@
-webkit-appearance: media-current-time-display;
-webkit-user-select: none;
-webkit-flex: none;
+ display: block;
border: none;
cursor: default;
@@ -157,27 +172,6 @@
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;
@@ -194,6 +188,7 @@
audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
-webkit-appearance: media-volume-slider-container;
+ display: -webkit-flex;
overflow: hidden;
position: absolute;
padding: 0;
@@ -207,8 +202,8 @@
transition: height 0.10s linear;
}
-audio::-webkit-media-controls-volume-slider-container.hidden,
-video::-webkit-media-controls-volume-slider-container.hidden {
+audio::-webkit-media-controls-volume-slider-container.hiding,
+video::-webkit-media-controls-volume-slider-container.hiding {
height: 0;
}
@@ -219,8 +214,8 @@
transition: height 0.10s linear, bottom 0.10s linear;
}
-audio::-webkit-media-controls-panel .hidden.down,
-video::-webkit-media-controls-panel .hidden.down {
+audio::-webkit-media-controls-panel .hiding.down,
+video::-webkit-media-controls-panel .hiding.down {
bottom: 0;
}
@@ -354,8 +349,3 @@
margin: 0 9px 0 -7px;
outline: none;
}
-
-video::-webkit-media-controls-panel button.hidden,
-audio::-webkit-media-controls-panel button.hidden {
- display: none;
-}
Modified: trunk/Source/WebCore/platform/gtk/RenderThemeGtk.cpp (164781 => 164782)
--- trunk/Source/WebCore/platform/gtk/RenderThemeGtk.cpp 2014-02-27 08:45:57 UTC (rev 164781)
+++ trunk/Source/WebCore/platform/gtk/RenderThemeGtk.cpp 2014-02-27 09:16:18 UTC (rev 164782)
@@ -513,7 +513,7 @@
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;
+ return true;
}
bool RenderThemeGtk::hasOwnDisabledStateHandlingFor(ControlPart part) const
