Title: [182036] trunk
Revision
182036
Author
[email protected]
Date
2015-03-26 16:23:57 -0700 (Thu, 26 Mar 2015)

Log Message

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.

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (182035 => 182036)


--- trunk/LayoutTests/ChangeLog	2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/LayoutTests/ChangeLog	2015-03-26 23:23:57 UTC (rev 182036)
@@ -1,3 +1,13 @@
+2015-03-26  Roger Fong  <[email protected]>
+
+        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  <[email protected]>
 
         Assertion firing in _javascript_Core/parser/parser.h for statesman.com site

Modified: trunk/LayoutTests/platform/mac/TestExpectations (182035 => 182036)


--- trunk/LayoutTests/platform/mac/TestExpectations	2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/LayoutTests/platform/mac/TestExpectations	2015-03-26 23:23:57 UTC (rev 182036)
@@ -1265,6 +1265,9 @@
 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 ]

Modified: trunk/Source/WebCore/ChangeLog (182035 => 182036)


--- trunk/Source/WebCore/ChangeLog	2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/Source/WebCore/ChangeLog	2015-03-26 23:23:57 UTC (rev 182036)
@@ -1,3 +1,43 @@
+2015-03-26  Roger Fong  <[email protected]>
+
+        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  <[email protected]>
 
         Assertion firing in _javascript_Core/parser/parser.h for statesman.com site

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (182035 => 182036)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css	2015-03-26 23:23:57 UTC (rev 182036)
@@ -78,7 +78,7 @@
     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 @@
     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 @@
 
     -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 @@
 
 }
 
+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 @@
 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 @@
 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 @@
 
 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 @@
 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-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 @@
 
     width: 21px;
     height: 23px;
-    left: 210px;
-    top: 12px;
+    left: 230px;
+    top: 32px;
     margin: 0;
     padding: 0;
 }
@@ -607,8 +685,8 @@
 
     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 @@
 
     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-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,

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (182035 => 182036)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-03-26 23:23:57 UTC (rev 182036)
@@ -312,7 +312,18 @@
         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');
         rewindButton.setAttribute('aria-label', this.UIString('Rewind ##sec## Seconds', '##sec##', this.RewindAmount));
@@ -399,6 +410,12 @@
         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 @@
 
     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 @@
         }
         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 @@
 
     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 @@
 
     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 @@
         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 @@
         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 @@
             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();
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to