<!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>[181413] trunk/Source/WebCore</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/181413">181413</a></dd>
<dt>Author</dt> <dd>roger_fong@apple.com</dd>
<dt>Date</dt> <dd>2015-03-11 16:28:36 -0700 (Wed, 11 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>A number of minor edits to the media controls on OSX.
https://bugs.webkit.org/show_bug.cgi?id=142551.
<rdar://problem/20114707>
Reviewed by Darin Adler.
This covers a slew of minor edits to the new media controls. They are as follows.
Small vertical placements adjustments to inline control elements.
Make sure buttons have no focus outlines.
Expand height of mute box that triggers the volume panel appearing.
Turn all button colors into an slightly transparent white.
Center status display text in fullscreen mode.
Lower position of captions container in fullscreen mode.
Show the controls on when done loading of the video an status display is hidden.
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-panel):
(audio::-webkit-media-controls-panel button:focus):
(audio::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-play-button.paused):
(audio::-webkit-media-controls-panel .mute-box):
(video::-webkit-media-controls-volume-max-button):
(audio::-webkit-media-controls-panel .volume-box):
(video::-webkit-media-controls-volume-min-button):
(audio::-webkit-media-controls-wireless-playback-picker-button):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-closed-captions-container li.selected:hover::before):
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-fullscreen-button.exit):
(audio::-webkit-media-controls-status-display):
(audio::-webkit-media-controls-time-remaining-display):
(video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
(video:-webkit-full-screen::-webkit-media-controls-volume-max-button):
(video:-webkit-full-screen::-webkit-media-controls-volume-min-button):
(video:-webkit-full-screen::-webkit-media-controls-play-button):
(video:-webkit-full-screen::-webkit-media-controls-play-button.paused):
(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-status-display):
(video:-webkit-full-screen::-webkit-media-controls-closed-captions-container):
(audio::-webkit-media-controls-panel button:active): Deleted.
* Modules/mediacontrols/mediaControlsApple.js:</pre>
<h3>Modified Paths</h3>
<ul>
<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="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (181412 => 181413)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-03-11 22:52:43 UTC (rev 181412)
+++ trunk/Source/WebCore/ChangeLog 2015-03-11 23:28:36 UTC (rev 181413)
</span><span class="lines">@@ -1,3 +1,50 @@
</span><ins>+2015-03-11 Roger Fong <roger_fong@apple.com>
+
+ A number of minor edits to the media controls on OSX.
+ https://bugs.webkit.org/show_bug.cgi?id=142551.
+ <rdar://problem/20114707>
+
+ Reviewed by Darin Adler.
+
+ This covers a slew of minor edits to the new media controls. They are as follows.
+ Small vertical placements adjustments to inline control elements.
+ Make sure buttons have no focus outlines.
+ Expand height of mute box that triggers the volume panel appearing.
+ Turn all button colors into an slightly transparent white.
+ Center status display text in fullscreen mode.
+ Lower position of captions container in fullscreen mode.
+ Show the controls on when done loading of the video an status display is hidden.
+
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (audio::-webkit-media-controls-panel):
+ (audio::-webkit-media-controls-panel button:focus):
+ (audio::-webkit-media-controls-rewind-button):
+ (audio::-webkit-media-controls-play-button):
+ (audio::-webkit-media-controls-play-button.paused):
+ (audio::-webkit-media-controls-panel .mute-box):
+ (video::-webkit-media-controls-volume-max-button):
+ (audio::-webkit-media-controls-panel .volume-box):
+ (video::-webkit-media-controls-volume-min-button):
+ (audio::-webkit-media-controls-wireless-playback-picker-button):
+ (audio::-webkit-media-controls-toggle-closed-captions-button):
+ (audio::-webkit-media-controls-closed-captions-container li.selected:hover::before):
+ (audio::-webkit-media-controls-fullscreen-button):
+ (audio::-webkit-media-controls-fullscreen-button.exit):
+ (audio::-webkit-media-controls-status-display):
+ (audio::-webkit-media-controls-time-remaining-display):
+ (video:-webkit-full-screen::-webkit-media-controls-panel .volume-box):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-max-button):
+ (video:-webkit-full-screen::-webkit-media-controls-volume-min-button):
+ (video:-webkit-full-screen::-webkit-media-controls-play-button):
+ (video:-webkit-full-screen::-webkit-media-controls-play-button.paused):
+ (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-status-display):
+ (video:-webkit-full-screen::-webkit-media-controls-closed-captions-container):
+ (audio::-webkit-media-controls-panel button:active): Deleted.
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.setStatusHidden):
+
</ins><span class="cx"> 2015-03-11 Commit Queue <commit-queue@webkit.org>
</span><span class="cx">
</span><span class="cx"> Unreviewed, rolling out r179340 and r179344.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (181412 => 181413)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-11 22:52:43 UTC (rev 181412)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-11 23:28:36 UTC (rev 181413)
</span><span class="lines">@@ -73,7 +73,6 @@
</span><span class="cx"> z-index: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> width: 100%;
</span><del>- padding-top: 1px;
</del><span class="cx"> min-height: 25px;
</span><span class="cx"> height: 25px;
</span><span class="cx"> line-height: 25px;
</span><span class="lines">@@ -118,14 +117,14 @@
</span><span class="cx"> -webkit-filter: drop-shadow(black 0 1px 1px);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-panel button:active,
-audio::-webkit-media-controls-panel button:active {
- -webkit-filter: drop-shadow(white 0 0 10px);
</del><ins>+video::-webkit-media-controls-panel button:focus,
+audio::-webkit-media-controls-panel button:focus {
+ outline: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-rewind-button,
</span><span class="cx"> audio::-webkit-media-controls-rewind-button {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.
833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493" fill="url(#gradient)"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.681 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.683,0.599&qu
ot; fill="url(#gradient)"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486" fill="url(#gradient)"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="rgba(255,255,255,0.68)"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.681 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.
296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.683,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
</ins><span class="cx"> width: 16px;
</span><span class="cx"> height: 18px;
</span><span class="cx"> margin-bottom: 1px;
</span><span class="lines">@@ -134,21 +133,21 @@
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-play-button,
</span><span class="cx"> audio::-webkit-media-controls-play-button {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><rect x="0" y="0.5" width="4" height="13"/><rect x="8" y="0.5" width="4" height="13"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.68)"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
</ins><span class="cx"> margin-left: 16px;
</span><span class="cx"> width: 12px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-play-button.paused,
</span><span class="cx"> audio::-webkit-media-controls-play-button.paused {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><path d="M 0,0 12,7 0,13 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.68)"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
</ins><span class="cx"> width: 12px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel .mute-box,
</span><span class="cx"> audio::-webkit-media-controls-panel .mute-box {
</span><span class="cx"> width: 14px;
</span><del>- height: 15px;
</del><ins>+ height: 25px;
</ins><span class="cx"> margin-right: 16px;
</span><span class="cx"> position: relative;
</span><span class="cx"> display: -webkit-flex;
</span><span class="lines">@@ -161,7 +160,7 @@
</span><span class="cx"> audio::-webkit-media-controls-mute-button,
</span><span class="cx"> video::-webkit-media-controls-volume-max-button {
</span><span class="cx"> width: 14px;
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/><path d="M 10,3 C 13,4 13,10 10,11" /><path d="M 11,1 C 15.67,3 15.67,11 11,13"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg&g
t;');
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-panel .volume-box,
</span><span class="lines">@@ -172,8 +171,7 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> left: 0;
</span><span class="cx">
</span><del>- -webkit-transform: rotate(-90deg) translateY(-4px) translateX(20px);
- -webkit-transform-origin: 11px 11px;
</del><ins>+ -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
</ins><span class="cx">
</span><span class="cx"> background-color: rgba(0,0,0,0.8);
</span><span class="cx"> border-bottom-right-radius: 4px;
</span><span class="lines">@@ -227,12 +225,12 @@
</span><span class="cx"> video::-webkit-media-controls-mute-button.muted,
</span><span class="cx"> audio::-webkit-media-controls-mute-button.muted,
</span><span class="cx"> video::-webkit-media-controls-volume-min-button {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" ><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-wireless-playback-picker-button,
</span><span class="cx"> audio::-webkit-media-controls-wireless-playback-picker-button {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0 L 16,0 L 16,15 L 0,15 z M 0,14 L 16,14 L 8,4.5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="1.5" width="15" height="8"/><path fill="white" d="M 4.25,12.75 L 11.75,12.75 L 8,8.25 z"/></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)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0 L 16,0 L 16,15 L 0,15 z M 0,14 L 16,14 L 8,4.5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="1.5" width="15" height="8"/><path fill="rgba(255,255,255,0.68)" d="M 4.25,12.75 L 11.75,12.75 L 8,8.25 z"/></svg>');
</ins><span class="cx"> margin-right: 16px;
</span><span class="cx"> width: 16px;
</span><span class="cx"> }
</span><span class="lines">@@ -246,7 +244,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="white"><defs> <clipPath id="cut-hole"><rect x="0" y="0" width="16" height="10"/><rect x="0" y="10" width="9" height="1"/><rect x="11" y="10" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="0.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,5.5 h 4"/><path d="M 7,5.5 h 7"/><path d="M 3,7.5 h 2"/><path d="M 6,7.5 h 3"/><path d="M 10,7.5 h 3"/><path d="M 8.5,10.5 L 8.5,12.75 L 11,10"/></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)"><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">@@ -337,19 +335,19 @@
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
</span><span class="cx"> audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.68)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
</ins><span class="cx"> }
</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="white" stroke-width="1.25"><path d="M 7,1 L 12.5,1 L 12.5,6.5"/><path d="M 0.5,7.5 L 0.5,13 L 6,13"/><path stroke-linecap="round" d="M 12.5,1 L 7.5,6"/><path stroke-linecap="round" d="M 0.5,13 L 5.5,8"/></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"><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="white" 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"><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">@@ -359,11 +357,13 @@
</span><span class="cx"> background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 7,8 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 8,7 m 0,-6 2,2 2,-2
c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>');
</span><span class="cx"> margin: 0 7px;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> video::-webkit-media-controls-status-display,
</span><span class="cx"> audio::-webkit-media-controls-status-display {
</span><span class="cx"> cursor: default;
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> color: white;
</span><ins>+ opacity: .68;
</ins><span class="cx"> text-shadow: black 0px 1px 1px;
</span><span class="cx">
</span><span class="cx"> letter-spacing: normal;
</span><span class="lines">@@ -407,6 +407,7 @@
</span><span class="cx"> overflow-y: hidden;
</span><span class="cx"> overflow-x: hidden;
</span><span class="cx"> color: white;
</span><ins>+ opacity: .68;
</ins><span class="cx"> text-shadow: black 0px 1px 1px;
</span><span class="cx"> letter-spacing: normal;
</span><span class="cx"> word-spacing: normal;
</span><span class="lines">@@ -414,6 +415,8 @@
</span><span class="cx"> text-transform: none;
</span><span class="cx"> text-indent: 0px;
</span><span class="cx"> text-decoration: none;
</span><ins>+ position: relative;
+ bottom: 0.5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="lines">@@ -546,9 +549,9 @@
</span><span class="cx"> -webkit-transform: none;
</span><span class="cx"> opacity: 1;
</span><span class="cx"> left: 12px;
</span><del>- top: 16px;
</del><ins>+ top: 15px;
</ins><span class="cx"> width: 96px;
</span><del>- height: 15px;
</del><ins>+ height: 17px;
</ins><span class="cx"> display: -webkit-flex;
</span><span class="cx"> -webkit-flex-direction: row;
</span><span class="cx"> -webkit-align-items: center;
</span><span class="lines">@@ -567,20 +570,22 @@
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
</span><span class="cx"> width: 14px !important;
</span><span class="cx"> margin-left: 6px !important;
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/><path d="M 10,3 C 13,4 13,10 10,11" /><path d="M 11,1 C 15.67,3 15.67,11 11,13"/></svg>');
</del><ins>+ margin-bottom: 2px !important;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
</ins><span class="cx"> }
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-mute-button,
</span><span class="cx"> audio:-webkit-full-screen::-webkit-media-controls-mute-button,
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
</span><del>- width: 10px !important;
- margin-right: 6px !important;
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><path fill="white" stroke="rgba(255,255,255,0.67)" d="M 0,9 0,5 3,5 6,2 6,12 3,9 0,9 z"/><path d="M 9,5 C 10.75,6.5 10.75,7.5 9,9"/></svg>');
</del><ins>+ width: 14px !important;
+ margin-right: 2px !important;
+ margin-bottom: 2px !important;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.68)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.68)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.68)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-play-button {
</span><span class="cx"> position: absolute;
</span><span class="cx">
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.68)"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
</ins><span class="cx">
</span><span class="cx"> width: 21px;
</span><span class="cx"> height: 23px;
</span><span class="lines">@@ -591,13 +596,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.68)"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
</span><span class="cx"> position: absolute;
</span><span class="cx">
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.68)"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
</ins><span class="cx">
</span><span class="cx"> width: 24px;
</span><span class="cx"> height: 15px;
</span><span class="lines">@@ -617,7 +622,7 @@
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
</span><span class="cx"> position: absolute;
</span><span class="cx">
</span><del>- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
</del><ins>+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.68)"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
</ins><span class="cx">
</span><span class="cx"> width: 24px;
</span><span class="cx"> height: 15px;
</span><span class="lines">@@ -642,11 +647,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-status-display {
</span><del>- width: 420px;
</del><ins>+ width: 440px;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> bottom: 7px;
</span><del>- left: 8px;
- right: 8px;
</del><ins>+ text-align: center;
+ padding: 0;
+ left: 0;
</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 class="lines">@@ -662,7 +668,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
</span><del>- bottom: 114px;
</del><ins>+ bottom: 100px;
</ins><span class="cx"> right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
</span><span class="cx"> max-width: calc(50% + 173px); /* right + 10px */
</span><span class="cx"> max-height: calc(100% - 124px); /* bottom + 10px */
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (181412 => 181413)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-11 22:52:43 UTC (rev 181412)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-11 23:28:36 UTC (rev 181413)
</span><span class="lines">@@ -1312,11 +1312,13 @@
</span><span class="cx"> this.controls.timeline.classList.remove(this.ClassNames.hidden);
</span><span class="cx"> this.controls.remainingTime.classList.remove(this.ClassNames.hidden);
</span><span class="cx"> this.setNeedsTimelineMetricsUpdate();
</span><ins>+ this.showControls();
</ins><span class="cx"> } else {
</span><span class="cx"> this.controls.statusDisplay.classList.remove(this.ClassNames.hidden);
</span><span class="cx"> this.controls.currentTime.classList.add(this.ClassNames.hidden);
</span><span class="cx"> this.controls.timeline.classList.add(this.ClassNames.hidden);
</span><span class="cx"> this.controls.remainingTime.classList.add(this.ClassNames.hidden);
</span><ins>+ this.hideControls();
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>