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)
commitc9c989f397454baab48f17231d2bb9ba1e3e7d60
tree73bc621ad767e4f36c189d78def44f3f331ab3d6
parent7196227aaad856ddad947678b98b1c6a42bd81bc
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.

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