Apply blur effect to media control background.
authorroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Mar 2015 23:23:57 +0000 (23:23 +0000)
committerroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Mar 2015 23:23:57 +0000 (23:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=143116.
<rdar://problem/20316964>.

Reviewed by Brent Fulgham.

There are still a few issues, like the borders of the controls being blurred with black,
and the volume slider background not showing the blur effect. Will fix those separately.
Add CSS for new divs to create blur effect using back drop filters and blend modes.
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-panel):
(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-toggle-closed-captions-button): Adjust fill.
(audio::-webkit-media-controls-fullscreen-button): Adjust fill.
(audio::-webkit-media-controls-fullscreen-button.exit): Adjust fill.
(video:-webkit-full-screen::-webkit-media-controls-panel):
(audio:-webkit-full-screen::-webkit-media-controls-panel-tint):
(audio:-webkit-full-screen::-webkit-media-controls-panel-background):
(video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
(video:-webkit-full-screen::-webkit-media-controls-play-button):
(video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
(video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
(video:-webkit-full-screen::-webkit-media-controls-timeline-container):
(video:-webkit-full-screen::-webkit-media-controls-status-display):
(audio::-webkit-media-controls-panel .volume-box:active): Deleted.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls):
(Controller.prototype.configureInlineControls): Add new divs for blurred background effect.
(Controller.prototype.configureFullScreenControls): Ditto.
(Controller.prototype.handlePanelMouseDown): The tint div is now in front.
(Controller.prototype.drawTimelineBackground): Adjust colors to make border look better with new background.
(Controller.prototype.drawVolumeBackground): Ditto.

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

LayoutTests/ChangeLog
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

index 7742b49..b94ad26 100644 (file)
@@ -1,3 +1,13 @@
+2015-03-26  Roger Fong  <roger_fong@apple.com>
+
+        Apply blur effect to media control background.
+        https://bugs.webkit.org/show_bug.cgi?id=143116.
+        <rdar://problem/20316964>.
+
+        Reviewed by Brent Fulgham.
+
+        * platform/mac/TestExpectations: Tests need rebaselining. Will do so with other previously skipped media tests.
+
 2015-03-26  Geoffrey Garen  <ggaren@apple.com>
 
         Assertion firing in JavaScriptCore/parser/parser.h for statesman.com site
index a8b9912..3c41e0a 100644 (file)
@@ -1265,6 +1265,9 @@ webkit.org/b/142142 media/audio-delete-while-slider-thumb-clicked.html [ Skip ]
 webkit.org/b/142142 media/controls-after-reload.html [ Skip ]
 webkit.org/b/142142 media/nodesFromRect-shadowContent.html [ Skip ]
 webkit.org/b/142142 media/video-initially-hidden-volume-slider-up.html [ Skip ]
+webkit.org/b/142142 fullscreen/video-controls-override.html [ Skip ]
+webkit.org/b/142142 http/tests/media/hls/video-controls-live-stream.html [ Skip ]
+webkit.org/b/142142 media/video-volume-slider-drag.html [ Skip ]
 
 # Test uses Yosemite blurs
 [ Mavericks ] compositing/media-controls-bar-appearance.html [ Skip ]
index 821577b..0c34fb5 100644 (file)
@@ -1,3 +1,43 @@
+2015-03-26  Roger Fong  <roger_fong@apple.com>
+
+        Apply blur effect to media control background.
+        https://bugs.webkit.org/show_bug.cgi?id=143116.
+        <rdar://problem/20316964>.
+
+        Reviewed by Brent Fulgham.
+
+        There are still a few issues, like the borders of the controls being blurred with black,
+        and the volume slider background not showing the blur effect. Will fix those separately.
+
+        Add CSS for new divs to create blur effect using back drop filters and blend modes.
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-controls-panel):
+        (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-toggle-closed-captions-button): Adjust fill.
+        (audio::-webkit-media-controls-fullscreen-button): Adjust fill.
+        (audio::-webkit-media-controls-fullscreen-button.exit): Adjust fill.
+        (video:-webkit-full-screen::-webkit-media-controls-panel):
+        (audio:-webkit-full-screen::-webkit-media-controls-panel-tint):
+        (audio:-webkit-full-screen::-webkit-media-controls-panel-background):
+        (video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
+        (video:-webkit-full-screen::-webkit-media-controls-play-button):
+        (video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
+        (video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
+        (video:-webkit-full-screen::-webkit-media-controls-timeline-container):
+        (video:-webkit-full-screen::-webkit-media-controls-status-display):
+        (audio::-webkit-media-controls-panel .volume-box:active): Deleted.
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.createControls):
+        (Controller.prototype.configureInlineControls): Add new divs for blurred background effect.
+        (Controller.prototype.configureFullScreenControls): Ditto.
+        (Controller.prototype.handlePanelMouseDown): The tint div is now in front.
+        (Controller.prototype.drawTimelineBackground): Adjust colors to make border look better with new background.
+        (Controller.prototype.drawVolumeBackground): Ditto.
+
 2015-03-26  Geoffrey Garen  <ggaren@apple.com>
 
         Assertion firing in JavaScriptCore/parser/parser.h for statesman.com site
index d284471..eb0a04f 100644 (file)
@@ -78,7 +78,7 @@ audio::-webkit-media-controls-panel {
     line-height: 25px;
     -webkit-user-select: none;
     -webkit-user-drag: element;
-    background-color: rgba(0,0,0,0.8);
+    background-color: transparent;
 
     display: -webkit-flex;
     -webkit-flex-direction: row;
@@ -91,6 +91,30 @@ audio::-webkit-media-controls-panel {
     transition: opacity 0.25s linear;
 }
 
+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;
+    background-color: rgb(41, 41, 41);
+    mix-blend-mode: lighten;
+}
+
+video::-webkit-media-controls-panel-background,
+audio::-webkit-media-controls-panel-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    min-height: 25px;
+    height: 25px;
+    background-color: rgba(30, 30, 30, 0.45);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
 video::-webkit-media-controls-panel {
     cursor: none;
 }
@@ -173,7 +197,7 @@ audio::-webkit-media-controls-panel .volume-box {
 
     -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
 
-    background-color: rgba(0,0,0,0.8);
+    background-color: transparent;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
 
@@ -188,13 +212,41 @@ audio::-webkit-media-controls-panel .volume-box {
 
 }
 
+video::-webkit-media-controls-volume-slider-container-background,
+audio::-webkit-media-controls-volume-slider-container-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 23px;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: rgba(30, 30, 30, 0.45);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+video::-webkit-media-controls-volume-slider-container-tint,
+audio::-webkit-media-controls-volume-slider-container-tint {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 23px;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    background-color: rgb(41, 41, 41);
+    mix-blend-mode: lighten;
+}
+
 /* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
 video::-webkit-media-controls-panel .mute-box:hover .volume-box,
 video::-webkit-media-controls-panel .volume-box:hover,
 video::-webkit-media-controls-panel .volume-box:active,
+video::-webkit-media-controls-volume-slider-container-background,
+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-panel .volume-box:active
+audio::-webkit-media-controls-volume-slider-container-background,
+audio::-webkit-media-controls-volume-slider-container-tint {
     opacity: 1;
     /* resize to usable amount (rather than display:none) for AX and FKA */
     width: 76px;
@@ -244,7 +296,7 @@ video::-webkit-media-controls-toggle-closed-captions-button,
 audio::-webkit-media-controls-toggle-closed-captions-button {
     width: 16px;
     margin-right: 16px;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.68)"  fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
     outline: 0;
 }
 
@@ -312,7 +364,7 @@ audio::-webkit-media-controls-closed-captions-container li {
 video::-webkit-media-controls-closed-captions-container li:focus,
 audio::-webkit-media-controls-closed-captions-container li:focus {
     outline: 0;
-    background-color: rgba(140, 140, 140, .5);
+    background-color: rgba(140, 140, 140, 0.5);
 }
 
 video::-webkit-media-controls-closed-captions-container li:hover,
@@ -340,14 +392,14 @@ audio::-webkit-media-controls-closed-captions-container li.selected:hover::befor
 
 video::-webkit-media-controls-fullscreen-button,
 audio::-webkit-media-controls-fullscreen-button {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
     margin-right: 7px;
     width: 14px;
 }
 
 video::-webkit-media-controls-fullscreen-button.exit,
 audio::-webkit-media-controls-fullscreen-button.exit {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.68)" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
     margin-right: 11px;
     margin-top: 6px;
 }
@@ -529,18 +581,44 @@ audio::-webkit-media-controls-panel .hidden {
 video:-webkit-full-screen::-webkit-media-controls-panel {
     -webkit-align-items: flex-start !important;
     -webkit-justify-content: flex-end !important;
-
-    width: 440px !important;
-    height: 64px !important;
+    -webkit-clip-path: inset(20px round 6px);
+    
+    width: 480px !important;
+    height: 104px !important;
     margin: 0 auto 32px auto !important;
-    padding-top: 10px !important;
+    padding: 20px;
+    padding-top: 30px !important;
 
-    background-color: rgba(0,0,0,0.8);
+    background-color: transparent;
     border-radius: 6px !important;
 
     transition: opacity 0.3s linear !important;
 }
 
+video:-webkit-full-screen::-webkit-media-controls-panel-tint,
+audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 480px !important;
+    height: 104px !important;
+    border-radius: 6px !important;
+    background-color: rgb(41, 41, 41);
+    mix-blend-mode: lighten;
+}
+
+video:-webkit-full-screen::-webkit-media-controls-panel-background,
+audio:-webkit-full-screen::-webkit-media-controls-panel-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 480px !important;
+    height: 104px !important;
+    border-radius: 6px !important;
+    background-color: rgba(30, 30, 30, 0.45);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
     opacity: 0 ! important;
     transition: opacity 0 ! important;
@@ -549,8 +627,8 @@ video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
 video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
     -webkit-transform: none;
     opacity: 1;
-    left: 12px;
-    top: 15px;
+    left: 32px;
+    top: 35px;
     width: 96px;
     height: 17px;
     display: -webkit-flex;
@@ -590,8 +668,8 @@ video:-webkit-full-screen::-webkit-media-controls-play-button {
 
     width: 21px;
     height: 23px;
-    left: 210px;
-    top: 12px;
+    left: 230px;
+    top: 32px;
     margin: 0;
     padding: 0;
 }
@@ -607,8 +685,8 @@ video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
 
     width: 24px;
     height: 15px;
-    left: 156px;
-    top: 16px;
+    left: 176px;
+    top: 36px;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
@@ -627,16 +705,16 @@ video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
 
     width: 24px;
     height: 15px;
-    left: 255px;
-    top: 16px;
+    left: 275px;
+    top: 36px;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
     height: auto;
     width: 440px;
     position: absolute;
-    bottom: 8px;
-    left: 0px;
+    bottom: 28px;
+    left: 20px;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-current-time-display {
@@ -650,10 +728,10 @@ video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
 video:-webkit-full-screen::-webkit-media-controls-status-display {
     width: 440px;
     position: absolute;
-    bottom: 7px;
+    bottom: 27px;
     text-align: center;
     padding: 0;
-    left: 0;
+    left: 20;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
index 1f9f22b..a88ac53 100644 (file)
@@ -312,6 +312,17 @@ Controller.prototype = {
         this.listenFor(panel, 'click', this.handlePanelClick);
         this.listenFor(panel, 'dblclick', this.handlePanelClick);
         this.listenFor(panel, 'dragstart', this.handlePanelDragStart);
+        
+        var panelTint = this.controls.panelTint = document.createElement('div');
+        panelTint.setAttribute('pseudo', '-webkit-media-controls-panel-tint');
+        this.listenFor(panelTint, 'mousedown', this.handlePanelMouseDown);
+        this.listenFor(panelTint, 'transitionend', this.handlePanelTransitionEnd);
+        this.listenFor(panelTint, 'click', this.handlePanelClick);
+        this.listenFor(panelTint, 'dblclick', this.handlePanelClick);
+        this.listenFor(panelTint, 'dragstart', this.handlePanelDragStart);
+
+        var panelBackground = this.controls.panelBackground = document.createElement('div');
+        panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
 
         var rewindButton = this.controls.rewindButton = document.createElement('button');
         rewindButton.setAttribute('pseudo', '-webkit-media-controls-rewind-button');
@@ -399,6 +410,12 @@ Controller.prototype = {
         var volumeBox = this.controls.volumeBox = document.createElement('div');
         volumeBox.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container');
         volumeBox.classList.add(this.ClassNames.volumeBox);
+        
+        var volumeBoxBackground = this.controls.volumeBoxBackground = document.createElement('div');
+        volumeBoxBackground.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container-background');
+        
+        var volumeBoxTint = this.controls.volumeBoxTint = document.createElement('div');
+        volumeBoxTint.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container-tint');
 
         var volume = this.controls.volume = document.createElement('input');
         volume.setAttribute('pseudo', '-webkit-media-controls-volume-slider');
@@ -488,6 +505,8 @@ Controller.prototype = {
 
     configureInlineControls: function()
     {
+        this.controls.panel.appendChild(this.controls.panelBackground);
+        this.controls.panel.appendChild(this.controls.panelTint);
         this.controls.panel.appendChild(this.controls.playButton);
         if (!this.isLive)
             this.controls.panel.appendChild(this.controls.rewindButton);
@@ -503,6 +522,8 @@ Controller.prototype = {
         }
         this.controls.panel.appendChild(this.controls.muteBox);
         this.controls.muteBox.appendChild(this.controls.volumeBox);
+        this.controls.volumeBox.appendChild(this.controls.volumeBoxBackground);
+        this.controls.volumeBox.appendChild(this.controls.volumeBoxTint);
         this.controls.volumeBox.appendChild(this.controls.volume);
         this.controls.muteBox.appendChild(this.controls.muteButton);
         this.controls.panel.appendChild(this.controls.wirelessTargetPicker);
@@ -517,6 +538,8 @@ Controller.prototype = {
 
     configureFullScreenControls: function()
     {
+        this.controls.panel.appendChild(this.controls.panelBackground);
+        this.controls.panel.appendChild(this.controls.panelTint);
         this.controls.panel.appendChild(this.controls.volumeBox);
         this.controls.volumeBox.appendChild(this.controls.minButton);
         this.controls.volumeBox.appendChild(this.controls.volume);
@@ -734,7 +757,7 @@ Controller.prototype = {
 
     handlePanelMouseDown: function(event)
     {
-        if (event.target != this.controls.panel && event.target != this.controls.inlinePlaybackPlaceholder)
+        if (event.target != this.controls.panelTint && event.target != this.controls.inlinePlaybackPlaceholder)
             return;
 
         if (!this.isFullScreen())
@@ -1106,7 +1129,7 @@ Controller.prototype = {
         this.addRoundedRect(ctx, scrubberPosition + 1, 8, width - scrubberPosition - borderSize , trackHeight, trackHeight / 2.0);
         ctx.closePath();
         ctx.clip("evenodd");
-        ctx.fillStyle = "rgb(50, 50, 50)";
+        ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
         ctx.fillRect(0, 0, width, height);
         ctx.restore();
         
@@ -1167,7 +1190,7 @@ Controller.prototype = {
         this.addRoundedRect(ctx, 1, 4, width - borderSize, trackHeight, trackHeight / 2.0);
         ctx.closePath();
         ctx.clip("evenodd");
-        ctx.fillStyle = "rgb(50, 50, 50)";
+        ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
         ctx.fillRect(0, 0, width, height);
         ctx.restore();
         
@@ -1225,12 +1248,16 @@ Controller.prototype = {
             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();