<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[182036] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/182036">182036</a></dd>
<dt>Author</dt> <dd>roger_fong@apple.com</dd>
<dt>Date</dt> <dd>2015-03-26 16:23:57 -0700 (Thu, 26 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformmacTestExpectations">trunk/LayoutTests/platform/mac/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (182035 => 182036)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-03-26 23:22:29 UTC (rev 182035)
+++ trunk/LayoutTests/ChangeLog 2015-03-26 23:23:57 UTC (rev 182036)
</span><span class="lines">@@ -1,3 +1,13 @@
</span><ins>+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.
+
</ins><span class="cx"> 2015-03-26 Geoffrey Garen <ggaren@apple.com>
</span><span class="cx">
</span><span class="cx"> Assertion firing in JavaScriptCore/parser/parser.h for statesman.com site
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/TestExpectations (182035 => 182036)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1265,6 +1265,9 @@
</span><span class="cx"> webkit.org/b/142142 media/controls-after-reload.html [ Skip ]
</span><span class="cx"> webkit.org/b/142142 media/nodesFromRect-shadowContent.html [ Skip ]
</span><span class="cx"> webkit.org/b/142142 media/video-initially-hidden-volume-slider-up.html [ Skip ]
</span><ins>+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 ]
</ins><span class="cx">
</span><span class="cx"> # Test uses Yosemite blurs
</span><span class="cx"> [ Mavericks ] compositing/media-controls-bar-appearance.html [ Skip ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (182035 => 182036)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+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.
+
</ins><span class="cx"> 2015-03-26 Geoffrey Garen <ggaren@apple.com>
</span><span class="cx">
</span><span class="cx"> Assertion firing in JavaScriptCore/parser/parser.h for statesman.com site
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (182035 => 182036)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -78,7 +78,7 @@
</span><span class="cx"> line-height: 25px;
</span><span class="cx"> -webkit-user-select: none;
</span><span class="cx"> -webkit-user-drag: element;
</span><del>- background-color: rgba(0,0,0,0.8);
</del><ins>+ background-color: transparent;
</ins><span class="cx">
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> -webkit-flex-direction: row;
</span><span class="lines">@@ -91,6 +91,30 @@
</span><span class="cx"> transition: opacity 0.25s linear;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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);
+}
+
</ins><span class="cx"> video::-webkit-media-controls-panel {
</span><span class="cx"> cursor: none;
</span><span class="cx"> }
</span><span class="lines">@@ -173,7 +197,7 @@
</span><span class="cx">
</span><span class="cx"> -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
</span><span class="cx">
</span><del>- background-color: rgba(0,0,0,0.8);
</del><ins>+ background-color: transparent;
</ins><span class="cx"> border-bottom-right-radius: 4px;
</span><span class="cx"> border-top-right-radius: 4px;
</span><span class="cx">
</span><span class="lines">@@ -188,13 +212,41 @@
</span><span class="cx">
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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;
+}
+
</ins><span class="cx"> /* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
</span><span class="cx"> video::-webkit-media-controls-panel .mute-box:hover .volume-box,
</span><span class="cx"> video::-webkit-media-controls-panel .volume-box:hover,
</span><span class="cx"> video::-webkit-media-controls-panel .volume-box:active,
</span><ins>+video::-webkit-media-controls-volume-slider-container-background,
+video::-webkit-media-controls-volume-slider-container-tint,
</ins><span class="cx"> audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
</span><span class="cx"> audio::-webkit-media-controls-panel .volume-box:hover,
</span><del>-audio::-webkit-media-controls-panel .volume-box:active {
</del><ins>+audio::-webkit-media-controls-panel .volume-box:active
+audio::-webkit-media-controls-volume-slider-container-background,
+audio::-webkit-media-controls-volume-slider-container-tint {
</ins><span class="cx"> opacity: 1;
</span><span class="cx"> /* resize to usable amount (rather than display:none) for AX and FKA */
</span><span class="cx"> width: 76px;
</span><span class="lines">@@ -244,7 +296,7 @@
</span><span class="cx"> audio::-webkit-media-controls-toggle-closed-captions-button {
</span><span class="cx"> width: 16px;
</span><span class="cx"> margin-right: 16px;
</span><del>- 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>');
</del><ins>+ 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>');
</ins><span class="cx"> outline: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -312,7 +364,7 @@
</span><span class="cx"> video::-webkit-media-controls-closed-captions-container li:focus,
</span><span class="cx"> audio::-webkit-media-controls-closed-captions-container li:focus {
</span><span class="cx"> outline: 0;
</span><del>- background-color: rgba(140, 140, 140, .5);
</del><ins>+ background-color: rgba(140, 140, 140, 0.5);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-closed-captions-container li:hover,
</span><span class="lines">@@ -340,14 +392,14 @@
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-fullscreen-button,
</span><span class="cx"> audio::-webkit-media-controls-fullscreen-button {
</span><del>- 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>');
</del><ins>+ 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>');
</ins><span class="cx"> margin-right: 7px;
</span><span class="cx"> width: 14px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-fullscreen-button.exit,
</span><span class="cx"> audio::-webkit-media-controls-fullscreen-button.exit {
</span><del>- 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>');
</del><ins>+ 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>');
</ins><span class="cx"> margin-right: 11px;
</span><span class="cx"> margin-top: 6px;
</span><span class="cx"> }
</span><span class="lines">@@ -529,18 +581,44 @@
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-panel {
</span><span class="cx"> -webkit-align-items: flex-start !important;
</span><span class="cx"> -webkit-justify-content: flex-end !important;
</span><del>-
- width: 440px !important;
- height: 64px !important;
</del><ins>+ -webkit-clip-path: inset(20px round 6px);
+
+ width: 480px !important;
+ height: 104px !important;
</ins><span class="cx"> margin: 0 auto 32px auto !important;
</span><del>- padding-top: 10px !important;
</del><ins>+ padding: 20px;
+ padding-top: 30px !important;
</ins><span class="cx">
</span><del>- background-color: rgba(0,0,0,0.8);
</del><ins>+ background-color: transparent;
</ins><span class="cx"> border-radius: 6px !important;
</span><span class="cx">
</span><span class="cx"> transition: opacity 0.3s linear !important;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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);
+}
+
</ins><span class="cx"> video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
</span><span class="cx"> opacity: 0 ! important;
</span><span class="cx"> transition: opacity 0 ! important;
</span><span class="lines">@@ -549,8 +627,8 @@
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
</span><span class="cx"> -webkit-transform: none;
</span><span class="cx"> opacity: 1;
</span><del>- left: 12px;
- top: 15px;
</del><ins>+ left: 32px;
+ top: 35px;
</ins><span class="cx"> width: 96px;
</span><span class="cx"> height: 17px;
</span><span class="cx"> display: -webkit-flex;
</span><span class="lines">@@ -590,8 +668,8 @@
</span><span class="cx">
</span><span class="cx"> width: 21px;
</span><span class="cx"> height: 23px;
</span><del>- left: 210px;
- top: 12px;
</del><ins>+ left: 230px;
+ top: 32px;
</ins><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><span class="cx"> }
</span><span class="lines">@@ -607,8 +685,8 @@
</span><span class="cx">
</span><span class="cx"> width: 24px;
</span><span class="cx"> height: 15px;
</span><del>- left: 156px;
- top: 16px;
</del><ins>+ left: 176px;
+ top: 36px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
</span><span class="lines">@@ -627,16 +705,16 @@
</span><span class="cx">
</span><span class="cx"> width: 24px;
</span><span class="cx"> height: 15px;
</span><del>- left: 255px;
- top: 16px;
</del><ins>+ left: 275px;
+ top: 36px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-timeline-container {
</span><span class="cx"> height: auto;
</span><span class="cx"> width: 440px;
</span><span class="cx"> position: absolute;
</span><del>- bottom: 8px;
- left: 0px;
</del><ins>+ bottom: 28px;
+ left: 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-current-time-display {
</span><span class="lines">@@ -650,10 +728,10 @@
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-status-display {
</span><span class="cx"> width: 440px;
</span><span class="cx"> position: absolute;
</span><del>- bottom: 7px;
</del><ins>+ bottom: 27px;
</ins><span class="cx"> text-align: center;
</span><span class="cx"> padding: 0;
</span><del>- left: 0;
</del><ins>+ left: 20;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (182035 => 182036)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -312,7 +312,18 @@
</span><span class="cx"> this.listenFor(panel, 'click', this.handlePanelClick);
</span><span class="cx"> this.listenFor(panel, 'dblclick', this.handlePanelClick);
</span><span class="cx"> this.listenFor(panel, 'dragstart', this.handlePanelDragStart);
</span><ins>+
+ 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);
</ins><span class="cx">
</span><ins>+ var panelBackground = this.controls.panelBackground = document.createElement('div');
+ panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
+
</ins><span class="cx"> var rewindButton = this.controls.rewindButton = document.createElement('button');
</span><span class="cx"> rewindButton.setAttribute('pseudo', '-webkit-media-controls-rewind-button');
</span><span class="cx"> rewindButton.setAttribute('aria-label', this.UIString('Rewind ##sec## Seconds', '##sec##', this.RewindAmount));
</span><span class="lines">@@ -399,6 +410,12 @@
</span><span class="cx"> var volumeBox = this.controls.volumeBox = document.createElement('div');
</span><span class="cx"> volumeBox.setAttribute('pseudo', '-webkit-media-controls-volume-slider-container');
</span><span class="cx"> volumeBox.classList.add(this.ClassNames.volumeBox);
</span><ins>+
+ 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');
</ins><span class="cx">
</span><span class="cx"> var volume = this.controls.volume = document.createElement('input');
</span><span class="cx"> volume.setAttribute('pseudo', '-webkit-media-controls-volume-slider');
</span><span class="lines">@@ -488,6 +505,8 @@
</span><span class="cx">
</span><span class="cx"> configureInlineControls: function()
</span><span class="cx"> {
</span><ins>+ this.controls.panel.appendChild(this.controls.panelBackground);
+ this.controls.panel.appendChild(this.controls.panelTint);
</ins><span class="cx"> this.controls.panel.appendChild(this.controls.playButton);
</span><span class="cx"> if (!this.isLive)
</span><span class="cx"> this.controls.panel.appendChild(this.controls.rewindButton);
</span><span class="lines">@@ -503,6 +522,8 @@
</span><span class="cx"> }
</span><span class="cx"> this.controls.panel.appendChild(this.controls.muteBox);
</span><span class="cx"> this.controls.muteBox.appendChild(this.controls.volumeBox);
</span><ins>+ this.controls.volumeBox.appendChild(this.controls.volumeBoxBackground);
+ this.controls.volumeBox.appendChild(this.controls.volumeBoxTint);
</ins><span class="cx"> this.controls.volumeBox.appendChild(this.controls.volume);
</span><span class="cx"> this.controls.muteBox.appendChild(this.controls.muteButton);
</span><span class="cx"> this.controls.panel.appendChild(this.controls.wirelessTargetPicker);
</span><span class="lines">@@ -517,6 +538,8 @@
</span><span class="cx">
</span><span class="cx"> configureFullScreenControls: function()
</span><span class="cx"> {
</span><ins>+ this.controls.panel.appendChild(this.controls.panelBackground);
+ this.controls.panel.appendChild(this.controls.panelTint);
</ins><span class="cx"> this.controls.panel.appendChild(this.controls.volumeBox);
</span><span class="cx"> this.controls.volumeBox.appendChild(this.controls.minButton);
</span><span class="cx"> this.controls.volumeBox.appendChild(this.controls.volume);
</span><span class="lines">@@ -734,7 +757,7 @@
</span><span class="cx">
</span><span class="cx"> handlePanelMouseDown: function(event)
</span><span class="cx"> {
</span><del>- if (event.target != this.controls.panel && event.target != this.controls.inlinePlaybackPlaceholder)
</del><ins>+ if (event.target != this.controls.panelTint && event.target != this.controls.inlinePlaybackPlaceholder)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> if (!this.isFullScreen())
</span><span class="lines">@@ -1106,7 +1129,7 @@
</span><span class="cx"> this.addRoundedRect(ctx, scrubberPosition + 1, 8, width - scrubberPosition - borderSize , trackHeight, trackHeight / 2.0);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip("evenodd");
</span><del>- ctx.fillStyle = "rgb(50, 50, 50)";
</del><ins>+ ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
</ins><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><span class="cx">
</span><span class="lines">@@ -1167,7 +1190,7 @@
</span><span class="cx"> this.addRoundedRect(ctx, 1, 4, width - borderSize, trackHeight, trackHeight / 2.0);
</span><span class="cx"> ctx.closePath();
</span><span class="cx"> ctx.clip("evenodd");
</span><del>- ctx.fillStyle = "rgb(50, 50, 50)";
</del><ins>+ ctx.fillStyle = "rgba(140, 140, 140, 0.68)";
</ins><span class="cx"> ctx.fillRect(0, 0, width, height);
</span><span class="cx"> ctx.restore();
</span><span class="cx">
</span><span class="lines">@@ -1225,12 +1248,16 @@
</span><span class="cx"> this.controls.panel.classList.add(this.ClassNames.paused);
</span><span class="cx"> if (this.controls.panelBackground)
</span><span class="cx"> this.controls.panelBackground.classList.add(this.ClassNames.paused);
</span><ins>+ if (this.controls.panelTint)
+ this.controls.panelTint.classList.add(this.ClassNames.paused);
</ins><span class="cx"> this.controls.playButton.classList.add(this.ClassNames.paused);
</span><span class="cx"> this.controls.playButton.setAttribute('aria-label', this.UIString('Play'));
</span><span class="cx"> } else {
</span><span class="cx"> this.controls.panel.classList.remove(this.ClassNames.paused);
</span><span class="cx"> if (this.controls.panelBackground)
</span><span class="cx"> this.controls.panelBackground.classList.remove(this.ClassNames.paused);
</span><ins>+ if (this.controls.panelTint)
+ this.controls.panelTint.classList.add(this.ClassNames.paused);
</ins><span class="cx"> this.controls.playButton.classList.remove(this.ClassNames.paused);
</span><span class="cx"> this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
</span><span class="cx"> this.resetHideControlsTimer();
</span></span></pre>
</div>
</div>
</body>
</html>