Skip to site navigation (Press enter)

[webkit-changes] [181413] trunk/Source/WebCore

roger_fong Wed, 11 Mar 2015 16:28:58 -0700

Title: [181413] trunk/Source/WebCore

Revision: 181413
Author: [email protected]
Date: 2015-03-11 16:28:36 -0700 (Wed, 11 Mar 2015)

Log Message

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:


Modified Paths

trunk/Source/WebCore/ChangeLog
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

Diff

Modified: trunk/Source/WebCore/ChangeLog (181412 => 181413)


--- 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)
@@ -1,3 +1,50 @@
+2015-03-11  Roger Fong  <[email protected]>
+
+        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):
+
 2015-03-11  Commit Queue  <[email protected]>
 
         Unreviewed, rolling out r179340 and r179344.

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (181412 => 181413)


--- 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)
@@ -73,7 +73,6 @@
     z-index: 0;
     bottom: 0;
     width: 100%;
-    padding-top: 1px;
     min-height: 25px;
     height: 25px;
     line-height: 25px;
@@ -118,14 +117,14 @@
     -webkit-filter: drop-shadow(black 0 1px 1px);
 }
 
-video::-webkit-media-controls-panel button:active,
-audio::-webkit-media-controls-panel button:active {
-    -webkit-filter: drop-shadow(white 0 0 10px);
+video::-webkit-media-controls-panel button:focus,
+audio::-webkit-media-controls-panel button:focus {
+    outline: 0;
 }
 
 video::-webkit-media-controls-rewind-button,
 audio::-webkit-media-controls-rewind-button {
-    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>');
+    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>');
     width: 16px;
     height: 18px;
     margin-bottom: 1px;
@@ -134,21 +133,21 @@
 
 video::-webkit-media-controls-play-button,
 audio::-webkit-media-controls-play-button {
-    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>');
+    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>');
     margin-left: 16px;
     width: 12px;
 }
 
 video::-webkit-media-controls-play-button.paused,
 audio::-webkit-media-controls-play-button.paused {
-    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>');
+    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>');
     width: 12px;
 }
 
 video::-webkit-media-controls-panel .mute-box,
 audio::-webkit-media-controls-panel .mute-box {
     width: 14px;
-    height: 15px;
+    height: 25px;
     margin-right: 16px;
     position: relative;
     display: -webkit-flex;
@@ -161,7 +160,7 @@
 audio::-webkit-media-controls-mute-button,
 video::-webkit-media-controls-volume-max-button {
     width: 14px;
-    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>');
+    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;');
 }
 
 video::-webkit-media-controls-panel .volume-box,
@@ -172,8 +171,7 @@
     bottom: 0;
     left: 0;
 
-    -webkit-transform: rotate(-90deg) translateY(-4px) translateX(20px);
-    -webkit-transform-origin: 11px 11px;
+    -webkit-transform: rotate(-90deg) translateY(-31.5px) translateX(51.5px);
 
     background-color: rgba(0,0,0,0.8);
     border-bottom-right-radius: 4px;
@@ -227,12 +225,12 @@
 video::-webkit-media-controls-mute-button.muted,
 audio::-webkit-media-controls-mute-button.muted,
 video::-webkit-media-controls-volume-min-button {
-    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>');
+    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>');
 }
 
 video::-webkit-media-controls-wireless-playback-picker-button,
 audio::-webkit-media-controls-wireless-playback-picker-button {
-    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>');
+    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>');
     margin-right: 16px;
     width: 16px;
 }
@@ -246,7 +244,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="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>');
+    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>');
     outline: 0;
 }
 
@@ -337,19 +335,19 @@
 
 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
-    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>');
+    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>');
 }
 
 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="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>');
+    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>');
     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="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>');
+    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>');
     margin-right: 11px;
     margin-top: 6px;
 }
@@ -359,11 +357,13 @@
     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>');
     margin: 0 7px;
 }
+
 video::-webkit-media-controls-status-display,
 audio::-webkit-media-controls-status-display {
     cursor: default;
     overflow: hidden;
     color: white;
+    opacity: .68;
     text-shadow: black 0px 1px 1px;
 
     letter-spacing: normal;
@@ -407,6 +407,7 @@
     overflow-y: hidden;
     overflow-x: hidden;
     color: white;
+    opacity: .68;
     text-shadow: black 0px 1px 1px;
     letter-spacing: normal;
     word-spacing: normal;
@@ -414,6 +415,8 @@
     text-transform: none;
     text-indent: 0px;
     text-decoration: none;
+    position: relative;
+    bottom: 0.5px;
 }
 
 video::-webkit-media-controls-current-time-display,
@@ -546,9 +549,9 @@
     -webkit-transform: none;
     opacity: 1;
     left: 12px;
-    top: 16px;
+    top: 15px;
     width: 96px;
-    height: 15px;
+    height: 17px;
     display: -webkit-flex;
     -webkit-flex-direction: row;
     -webkit-align-items: center;
@@ -567,20 +570,22 @@
 video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
     width: 14px !important;
     margin-left: 6px !important;
-    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>');
+    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>');
 }
 video:-webkit-full-screen::-webkit-media-controls-mute-button,
 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
 video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
-    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>');
+    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>');
 }
 
 video:-webkit-full-screen::-webkit-media-controls-play-button {
     position: absolute;
     
-    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>');
+    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>');
 
     width: 21px;
     height: 23px;
@@ -591,13 +596,13 @@
 }
 
 video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
-    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>');
+    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>');
 }
 
 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
     position: absolute;
 
-    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>');
+    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>');
 
     width: 24px;
     height: 15px;
@@ -617,7 +622,7 @@
 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
     position: absolute;
 
-    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>');
+    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>');
 
     width: 24px;
     height: 15px;
@@ -642,11 +647,12 @@
 }
 
 video:-webkit-full-screen::-webkit-media-controls-status-display {
-    width: 420px;
+    width: 440px;
     position: absolute;
     bottom: 7px;
-    left: 8px;
-    right: 8px;
+    text-align: center;
+    padding: 0;
+    left: 0;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
@@ -662,7 +668,7 @@
 }
 
 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
-    bottom: 114px;
+    bottom: 100px;
     right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
     max-width: calc(50% + 173px); /* right + 10px */
     max-height: calc(100% - 124px); /* bottom + 10px */

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (181412 => 181413)


--- 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)
@@ -1312,11 +1312,13 @@
             this.controls.timeline.classList.remove(this.ClassNames.hidden);
             this.controls.remainingTime.classList.remove(this.ClassNames.hidden);
             this.setNeedsTimelineMetricsUpdate();
+            this.showControls();
         } else {
             this.controls.statusDisplay.classList.remove(this.ClassNames.hidden);
             this.controls.currentTime.classList.add(this.ClassNames.hidden);
             this.controls.timeline.classList.add(this.ClassNames.hidden);
             this.controls.remainingTime.classList.add(this.ClassNames.hidden);
+            this.hideControls();
         }
     },

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes