Modified: trunk/Source/WebCore/ChangeLog (182262 => 182263)
--- trunk/Source/WebCore/ChangeLog 2015-04-01 23:43:50 UTC (rev 182262)
+++ trunk/Source/WebCore/ChangeLog 2015-04-01 23:47:35 UTC (rev 182263)
@@ -1,3 +1,39 @@
+2015-04-01 Roger Fong <[email protected]>
+
+ Fixes to material of inline media controls on OSX.
+ https://bugs.webkit.org/show_bug.cgi?id=143317
+ <rdar://problem/20357847>
+
+ Reviewed by Dean Jackson.
+
+ There are many existing tests for the media controls appearance.
+ They are currently skipped while we are still updating the controls.
+
+ Expand backgrounds of control panel and volume box.
+ Clip the darker edges away.
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (audio::-webkit-media-controls-panel):
+ (audio::-webkit-media-controls-panel-background-container):
+ (audio::-webkit-media-controls-panel-tint):
+ (audio::-webkit-media-controls-panel-background):
+ (audio::-webkit-media-controls-panel .volume-box):
+ (audio::-webkit-media-controls-volume-slider-container-background):
+ (audio::-webkit-media-controls-volume-slider-container-tint):
+ (audio::-webkit-media-controls-panel .volume-box:active):
+ (video::-webkit-media-controls-volume-slider):
+ This needs to be above the background so it can be interacted with.
+ (video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.createControls): Create a new div for the control material.
+ We need to clip the material and not the controls themselves.
+ (Controller.prototype.configureInlineControls): Use new div.
+ Remove some unnecessary logic involving hiding materials here.
+ It just causes the materials to turn on and off at the wrong times.
+ (Controller.prototype.handlePanelTransitionEnd):
+ (Controller.prototype.setPlaying):
+ (Controller.prototype.showControls):
+ (Controller.prototype.hideControls):
+
2015-04-01 Eric Carlson <[email protected]>
Media controls should not always auto-hide
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (182262 => 182263)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-04-01 23:43:50 UTC (rev 182262)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-04-01 23:47:35 UTC (rev 182263)
@@ -73,12 +73,13 @@
z-index: 0;
bottom: 0;
width: 100%;
- min-height: 25px;
- height: 25px;
+ min-height: 45px;
+ height: 45px;
line-height: 25px;
-webkit-user-select: none;
-webkit-user-drag: element;
background-color: transparent;
+ padding-top: 20px;
display: -webkit-flex;
-webkit-flex-direction: row;
@@ -91,14 +92,25 @@
transition: opacity 0.25s linear;
}
+video::-webkit-media-controls-panel-background-container,
+audio::-webkit-media-controls-panel-background-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ min-height: 45px;
+ height: 45px;
+ -webkit-clip-path: inset(20px 0px 0px 0px);
+}
+
video::-webkit-media-controls-panel-tint,
audio::-webkit-media-controls-panel-tint {
position: absolute;
left: 0;
top: 0;
width: 100%;
- min-height: 25px;
- height: 25px;
+ min-height: 45px;
+ height: 45px;
background-color: rgb(41, 41, 41);
mix-blend-mode: lighten;
}
@@ -109,8 +121,8 @@
left: 0;
top: 0;
width: 100%;
- min-height: 25px;
- height: 25px;
+ min-height: 45px;
+ height: 45px;
background-color: rgba(30, 30, 30, 0.45);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
@@ -191,12 +203,13 @@
audio::-webkit-media-controls-panel .volume-box {
position: absolute;
box-sizing: border-box;
- height: 23px;
+ height: 63px;
bottom: 0;
left: 0;
+
+ -webkit-clip-path: inset(20px 20px 20px 20px round 0px 4px 4px 0px);
+ -webkit-transform: rotate(-90deg) translateY(-51.5px) translateX(31.5px);
- -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
-
background-color: transparent;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
@@ -217,7 +230,8 @@
position: absolute;
left: 0;
top: 0;
- height: 23px;
+ width: 116px;
+ height: 63px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-color: rgba(30, 30, 30, 0.45);
@@ -229,7 +243,8 @@
position: absolute;
left: 0;
top: 0;
- height: 23px;
+ height: 63px;
+ width: 116px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-color: rgb(41, 41, 41);
@@ -244,12 +259,10 @@
video::-webkit-media-controls-volume-slider-container-tint,
audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
audio::-webkit-media-controls-panel .volume-box:hover,
-audio::-webkit-media-controls-panel .volume-box:active
-audio::-webkit-media-controls-volume-slider-container-background,
-audio::-webkit-media-controls-volume-slider-container-tint {
+audio::-webkit-media-controls-panel .volume-box:active {
opacity: 1;
/* resize to usable amount (rather than display:none) for AX and FKA */
- width: 76px;
+ width: 116px;
}
audio::-webkit-media-controls-volume-slider,
@@ -259,11 +272,12 @@
height: 9px !important;
width: 64px !important;
padding: 0 !important;
- margin-right: 10px !important;
+ margin-right: 30px !important;
background-color: transparent !important;
background-size: 100% 100%;
background-repeat: no-repeat;
+ z-index: 1;
}
video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
@@ -626,6 +640,7 @@
video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
-webkit-transform: none;
+ -webkit-clip-path: none;
opacity: 1;
left: 32px;
top: 35px;
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (182262 => 182263)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-04-01 23:43:50 UTC (rev 182262)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-04-01 23:47:35 UTC (rev 182263)
@@ -315,6 +315,9 @@
this.listenFor(panel, 'dblclick', this.handlePanelClick);
this.listenFor(panel, 'dragstart', this.handlePanelDragStart);
+ var panelBackgroundContainer = this.controls.panelBackgroundContainer = document.createElement('div');
+ panelBackgroundContainer.setAttribute('pseudo', '-webkit-media-controls-panel-background-container');
+
var panelTint = this.controls.panelTint = document.createElement('div');
panelTint.setAttribute('pseudo', '-webkit-media-controls-panel-tint');
this.listenFor(panelTint, 'mousedown', this.handlePanelMouseDown);
@@ -507,8 +510,9 @@
configureInlineControls: function()
{
- this.controls.panel.appendChild(this.controls.panelBackground);
- this.controls.panel.appendChild(this.controls.panelTint);
+ this.controls.panel.appendChild(this.controls.panelBackgroundContainer);
+ this.controls.panelBackgroundContainer.appendChild(this.controls.panelBackground);
+ this.controls.panelBackgroundContainer.appendChild(this.controls.panelTint);
this.controls.panel.appendChild(this.controls.playButton);
if (!this.isLive)
this.controls.panel.appendChild(this.controls.rewindButton);
@@ -779,12 +783,8 @@
var opacity = window.getComputedStyle(this.controls.panel).opacity;
if (parseInt(opacity) > 0) {
this.controls.panel.classList.remove(this.ClassNames.hidden);
- if (this.controls.panelBackground)
- this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
} else {
this.controls.panel.classList.add(this.ClassNames.hidden);
- if (this.controls.panelBackground)
- this.controls.panelBackground.classList.add(this.ClassNames.hidden);
}
},
@@ -1248,18 +1248,10 @@
if (!isPlaying) {
this.controls.panel.classList.add(this.ClassNames.paused);
- if (this.controls.panelBackground)
- this.controls.panelBackground.classList.add(this.ClassNames.paused);
- if (this.controls.panelTint)
- this.controls.panelTint.classList.add(this.ClassNames.paused);
this.controls.playButton.classList.add(this.ClassNames.paused);
this.controls.playButton.setAttribute('aria-label', this.UIString('Play'));
} else {
this.controls.panel.classList.remove(this.ClassNames.paused);
- if (this.controls.panelBackground)
- this.controls.panelBackground.classList.remove(this.ClassNames.paused);
- if (this.controls.panelTint)
- this.controls.panelTint.classList.add(this.ClassNames.paused);
this.controls.playButton.classList.remove(this.ClassNames.paused);
this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
this.resetHideControlsTimer();
@@ -1277,11 +1269,6 @@
this.controls.panel.classList.add(this.ClassNames.show);
this.controls.panel.classList.remove(this.ClassNames.hidden);
- if (this.controls.panelBackground) {
- this.controls.panelBackground.classList.add(this.ClassNames.show);
- this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
- }
-
this.updateShouldListenForPlaybackTargetAvailabilityEvent();
},
@@ -1292,8 +1279,6 @@
this.updateShouldListenForPlaybackTargetAvailabilityEvent();
this.controls.panel.classList.remove(this.ClassNames.show);
- if (this.controls.panelBackground)
- this.controls.panelBackground.classList.remove(this.ClassNames.show);
},
controlsAlwaysVisible: function()
