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

Wed, 21 May 2014 14:36:02 -0700

Title: [169177] trunk/Source/WebCore
Revision
169177
Author
[email protected]
Date
2014-05-21 14:35:53 -0700 (Wed, 21 May 2014)

Log Message

[iOS] Update some of the media controls buttons to be bigger
https://bugs.webkit.org/show_bug.cgi?id=133158
<rdar://problem/16475828>

Reviewed by Simon Fraser.

The buttons in the media controls on iOS are too small
to be comfortably pressed. Make them the size of the controls
panel and the expected iOS button size (44x44px).

The artwork for the buttons now includes the padding. I've
added a file from which you can edit the artwork, then
copy it into the CSS (because editing directly in CSS is
a huge pain).

So far just the play/pause and fullscreen button have been
updated. There will be a follow-up patch to fix the remaining
buttons and the scrubber.

* Modules/mediacontrols/assets-apple-iOS.svg: Added.
* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-panel):
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-play-button:active):
(audio::-webkit-media-controls-play-button.paused):
(audio::-webkit-media-controls-fullscreen-button:active):
(@media only screen and (-webkit-min-device-pixel-ratio: 2)): Deleted.

Modified Paths

Added Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (169176 => 169177)


--- trunk/Source/WebCore/ChangeLog	2014-05-21 20:52:21 UTC (rev 169176)
+++ trunk/Source/WebCore/ChangeLog	2014-05-21 21:35:53 UTC (rev 169177)
@@ -1,3 +1,34 @@
+2014-05-21  Dean Jackson  <[email protected]>
+
+        [iOS] Update some of the media controls buttons to be bigger
+        https://bugs.webkit.org/show_bug.cgi?id=133158
+        <rdar://problem/16475828>
+
+        Reviewed by Simon Fraser.
+
+        The buttons in the media controls on iOS are too small
+        to be comfortably pressed. Make them the size of the controls
+        panel and the expected iOS button size (44x44px).
+
+        The artwork for the buttons now includes the padding. I've
+        added a file from which you can edit the artwork, then
+        copy it into the CSS (because editing directly in CSS is
+        a huge pain).
+
+        So far just the play/pause and fullscreen button have been
+        updated. There will be a follow-up patch to fix the remaining
+        buttons and the scrubber.
+
+        * Modules/mediacontrols/assets-apple-iOS.svg: Added.
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-panel):
+        (audio::-webkit-media-controls-fullscreen-button):
+        (audio::-webkit-media-controls-play-button):
+        (audio::-webkit-media-controls-play-button:active):
+        (audio::-webkit-media-controls-play-button.paused):
+        (audio::-webkit-media-controls-fullscreen-button:active):
+        (@media only screen and (-webkit-min-device-pixel-ratio: 2)): Deleted.
+
 2014-05-21  Zalan Bujtas  <[email protected]>
 
         Garbage when rubber-banding at the right edge of a page zoomed to non-integral scale.

Added: trunk/Source/WebCore/Modules/mediacontrols/assets-apple-iOS.svg (0 => 169177)


--- trunk/Source/WebCore/Modules/mediacontrols/assets-apple-iOS.svg	                        (rev 0)
+++ trunk/Source/WebCore/Modules/mediacontrols/assets-apple-iOS.svg	2014-05-21 21:35:53 UTC (rev 169177)
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 44">
+
+  <!--
+    NOTE: THIS FILE IS NOT PART OF THE BUILD PROCESS. EDITS
+    HERE ARE NOT AUTOMATICALLY COPIED TO THE CSS FILES.
+
+    This file holds the raw assets used in mediaControlsApple.css.
+    This is not part of the build process at the moment, but manually
+    copied into the CSS. However, editing from CSS is a burden, so
+    the idea is that you develop here and then paste into CSS.
+  -->
+
+  <!-- PLAY -->
+
+  <g transform="translate(0 0)">
+    <rect width="44" height="44" fill="rgb(255, 255, 200)"/>
+    <svg width="44" height="44">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
+        <path fill="rgba(0, 0, 0, 0.8)" d="M10,11 32,22 10,33z"/>
+      </svg>
+    </svg>
+  </g>
+
+  <!-- PAUSE -->
+
+  <g transform="translate(46 0)">
+    <rect width="44" height="44" fill="rgb(255, 255, 200)"/>
+    <svg width="44" height="44">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
+        <g fill="rgba(0, 0, 0, 0.8)">
+        <rect x="13" y="11" width="6" height="22"/>
+        <rect x="24" y="11" width="6" height="22"/>
+        </g>
+      </svg>
+    </svg>
+  </g>
+
+  <!-- FULLSCREEN -->
+
+  <g transform="translate(92 0)">
+    <rect width="44" height="44" fill="rgb(255, 255, 200)"/>
+    <svg width="44" height="44">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
+        <g stroke="rgba(0, 0, 0, 0.8)" fill="none">
+          <path d="M 14,20 v -6 h 6 M 14,14 l 6,6"/>
+          <path d="M 30,24 v 6 h -6 M 30,30 l -6,-6"/>
+        </g>
+      </svg>
+    </svg>
+  </g>
+
+</svg>
\ No newline at end of file
Property changes on: trunk/Source/WebCore/Modules/mediacontrols/assets-apple-iOS.svg
___________________________________________________________________

Added: svn:mime-type

Added: svn:keywords

Added: svn:eol-style

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (169176 => 169177)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2014-05-21 20:52:21 UTC (rev 169176)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2014-05-21 21:35:53 UTC (rev 169177)
@@ -109,9 +109,8 @@
     position: absolute;
     bottom: 0;
     width: 100%;
-    padding-bottom: 1px;
+    padding: none;
     height: 44px;
-    line-height: 44px;
     -webkit-user-select: none;
     background-color: rgba(245, 245, 245, .75);
 
@@ -178,50 +177,39 @@
     display: block;
     padding: 0;
     border: 0;
-    background-color: rgba(0, 0, 0, .5);
-    -webkit-mask-origin: content-box;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
     -webkit-user-select: none;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: 44px;
+    height: 44px;
+    background-color: transparent;
+    background-size: 44px 44px;
+    background-repeat: no-repeat;
 }
 
-video::-webkit-media-controls-play-button:active,
-audio::-webkit-media-controls-play-button:active,
-video::-webkit-media-controls-fullscreen-button:active,
-audio::-webkit-media-controls-fullscreen-button:active {
-    background-color: white;
-}
-
 video::-webkit-media-controls-play-button,
 audio::-webkit-media-controls-play-button {
-    margin-left: 34px;
-    margin-right: 15px;
-    margin-top: 1px;
-    width: 21px;
-    height: 23px;
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22"><rect x="1" y="0" width="6" height="22" fill="white"/><rect x="13" y="0" width="6" height="22" fill="white"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g fill="rgba(0, 0, 0, 0.8)"><rect x="13" y="11" width="6" height="22"/><rect x="24" y="11" width="6" height="22"/></g></svg>');
 }
 
+video::-webkit-media-controls-play-button:active,
+audio::-webkit-media-controls-play-button:active {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g fill="white"><rect x="13" y="11" width="6" height="22"/><rect x="24" y="11" width="6" height="22"/></g></svg>');
+}
+
 video::-webkit-media-controls-play-button.paused,
 audio::-webkit-media-controls-play-button.paused {
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="23"><path d="M 0,0.25 21,10.5 0,21.75 z" fill="white"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path fill="rgba(0, 0, 0, 0.8)" d="M11,11 32,22 11,33z"/></svg>');
 }
 
 video::-webkit-media-controls-fullscreen-button,
 audio::-webkit-media-controls-fullscreen-button {
-    margin-right: 34px;
-    margin-left: 13px;
-    width: 15px;
-    height: 15px;
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"><g stroke="white" fill="transparent"><path d="M .5,5 v -4.5 h 4.5M .5,.5 l 5.5,5.5" /> <path d="M 14.5,10 v 4.5 h -4.5 M 14.5,14.5 l -5.5,-5.5" /></g></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g stroke="rgba(0, 0, 0, 0.8)" fill="none"><path d="M 14,20 v -6 h 6 M 14,14 l 6,6"/><path d="M 30,24 v 6 h -6 M 30,30 l -6,-6"/></g></svg>');
 }
 
-/* Retina images */
-@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-    video::-webkit-media-controls-fullscreen-button,
-    audio::-webkit-media-controls-fullscreen-button {
-        -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g stroke="white" stroke-width="2" fill="transparent"><path d="M 1,9 v -8 h 8 M 1,1 l 11,11" /> <path d="M 29,21 v 8 h -8 M 29,29 l -11,-11" /></g></svg>');
-    }
+video::-webkit-media-controls-fullscreen-button:active,
+audio::-webkit-media-controls-fullscreen-button:active {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><g stroke="white" fill="none"><path d="M 14,20 v -6 h 6 M 14,14 l 6,6"/><path d="M 30,24 v 6 h -6 M 30,30 l -6,-6"/></g></svg>');
 }
 
 video::-webkit-media-controls-timeline,

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

Reply via email to