Source/WebCore: Current media controls look different from previous media controls...
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Jun 2014 05:11:02 +0000 (05:11 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Jun 2014 05:11:02 +0000 (05:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=133521

Patch by Wenson Hsieh <wenson_hsieh@apple.com> on 2014-06-05
Reviewed by Eric Carlson.

The main issues:
- The widths between elements of both audio and video players are incorrect.
- The hues of audio player elements are incorrect.
- The hues of video player elements are content dependent (refer to full-screen mode), and this cannot be exactly replicated using just css. This patch only attempts to make them more similar.
- The height of the audio player is incorrect.

Test: platform/ios-sim/media/audio-width.html

* Modules/mediacontrols/mediaControlsiOS.css: Updated style elements for audio/video elements.
(::-webkit-media-controls): Enforce a minimum width on audio/video controls.
(audio): Enforce a minimum width on audio elements.
(audio::-webkit-media-controls): see below
(audio::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue and width/height.
(audio::-webkit-media-controls-panel): adjusted hue, added left/right padding.
(audio::-webkit-media-controls-fullscreen-button): removed. There's no fullscreen for audio anyways.
(audio::-webkit-media-controls-current-time-display): adjusted font size, added left padding.
(audio::-webkit-media-controls-time-remaining-display): adjusted font size, added right padding.

(video::-webkit-media-controls-panel): adjusted hue, added left/right padding.
(video::-webkit-media-controls-current-time-display): added left padding.
(video::-webkit-media-controls-time-remaining-display): added right padding.
(video::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue, opacity and width/height.
(video::-webkit-media-controls-fullscreen-button): modified SVG, hue, opacity, and width/height. In particular, made the svg seem sharper.
(video::-webkit-media-controls-play-button): modified SVG, hue, opacity, and width/height.

LayoutTests: REGRESSION (Pluginless): Media controls look different from iOS7 media controls.
https://bugs.webkit.org/show_bug.cgi?id=133521

Patch by Wenson Hsieh <wenson_hsieh@apple.com> on 2014-06-05
Reviewed by Eric Carlson.

Tests that audio elements are properly sized. Will add tests for video players in the (near) future.

* platform/ios-sim/media/audio-width-expected.txt: Checks that audio width tests were OK'd
* platform/ios-sim/media/audio-width.html: Checks that minimum audio width is properly enforced

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@169636 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/platform/ios-sim/media/audio-width-expected.txt [new file with mode: 0644]
LayoutTests/platform/ios-sim/media/audio-width.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

index 9b653fc..8cdbd97 100644 (file)
@@ -1,3 +1,15 @@
+2014-06-05  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        REGRESSION (Pluginless): Media controls look different from iOS7 media controls. 
+        https://bugs.webkit.org/show_bug.cgi?id=133521
+
+        Reviewed by Eric Carlson.
+
+        Tests that audio elements are properly sized. Will add tests for video players in the (near) future.
+
+        * platform/ios-sim/media/audio-width-expected.txt: Checks that audio width tests were OK'd
+        * platform/ios-sim/media/audio-width.html: Checks that minimum audio width is properly enforced
+
 2014-06-05  Michael Timbrook  <timbrook@apple.com>
 
         AX: Add support for ARIA 1.1 'none' role
diff --git a/LayoutTests/platform/ios-sim/media/audio-width-expected.txt b/LayoutTests/platform/ios-sim/media/audio-width-expected.txt
new file mode 100644 (file)
index 0000000..a559e5d
--- /dev/null
@@ -0,0 +1,7 @@
+Test that audio elements have a minimum width.
+
+  
+
+EXPECTED (width1 == '260') OK
+EXPECTED (width2 == '400') OK
+END OF TEST
\ No newline at end of file
diff --git a/LayoutTests/platform/ios-sim/media/audio-width.html b/LayoutTests/platform/ios-sim/media/audio-width.html
new file mode 100644 (file)
index 0000000..0b795dd
--- /dev/null
@@ -0,0 +1,42 @@
+<head>
+    <meta name="viewport" content="initial-scale=1">
+    <script src="../../../media/media-file.js" type="text/javascript"></script>
+    <script src="../../../media/video-test.js" type="text/javascript"></script>
+    <style>
+        #aud_1 {
+            width: 44px;
+        }
+
+        #aud_2 {
+            width: 400px;
+        }
+    </style>
+    <script type="text/javascript">
+        var width1 = NaN;
+        var width2 = NaN;
+        var player1 = null;
+        var player2 = null;
+
+        function init() {
+            player1 = document.getElementById("aud_1");
+            player2 = document.getElementById("aud_2");
+            var audioPath = findMediaFile("audio", "../../../media/content/test");
+            player1.src = audioPath;
+            player2.src = audioPath;
+            width1 = parseInt(window.getComputedStyle(player1).width);
+            width2 = parseInt(window.getComputedStyle(player2).width);
+            testExpected("width1", 260, "==");
+            testExpected("width2", 400, "==");
+            endTest();
+        }
+    </script>
+</head>
+
+<body>
+    <p>Test that audio elements have a minimum width.<p>
+    <audio id="aud_1" type="audio/mp4" controls></audio>
+    <audio id="aud_2" type="audio/mp4" controls></audio>
+    <script type="text/javascript">
+        document.body.onload = init;
+    </script>
+</body>
\ No newline at end of file
index c77387b..be93292 100644 (file)
@@ -1,3 +1,36 @@
+2014-06-05 Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Current media controls look different from previous media controls. Adjusted CSS to make media elements more similar by adding padding, adjusting hues/svg, resizing elements, etc.
+
+        https://bugs.webkit.org/show_bug.cgi?id=133521
+
+        Reviewed by Eric Carlson.
+
+        The main issues:
+        - The widths between elements of both audio and video players are incorrect.
+        - The hues of audio player elements are incorrect.
+        - The hues of video player elements are content dependent (refer to full-screen mode), and this cannot be exactly replicated using just css. This patch only attempts to make them more similar.
+        - The height of the audio player is incorrect.
+
+        Test: platform/ios-sim/media/audio-width.html
+
+        * Modules/mediacontrols/mediaControlsiOS.css: Updated style elements for audio/video elements.
+        (::-webkit-media-controls): Enforce a minimum width on audio/video controls.
+        (audio): Enforce a minimum width on audio elements.
+        (audio::-webkit-media-controls): see below
+        (audio::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue and width/height.
+        (audio::-webkit-media-controls-panel): adjusted hue, added left/right padding.
+        (audio::-webkit-media-controls-fullscreen-button): removed. There's no fullscreen for audio anyways.
+        (audio::-webkit-media-controls-current-time-display): adjusted font size, added left padding.
+        (audio::-webkit-media-controls-time-remaining-display): adjusted font size, added right padding.
+
+        (video::-webkit-media-controls-panel): adjusted hue, added left/right padding.
+        (video::-webkit-media-controls-current-time-display): added left padding.
+        (video::-webkit-media-controls-time-remaining-display): added right padding.
+        (video::-webkit-media-controls-wireless-playback-picker-button): modified SVG, hue, opacity and width/height.
+        (video::-webkit-media-controls-fullscreen-button): modified SVG, hue, opacity, and width/height. In particular, made the svg seem sharper.
+        (video::-webkit-media-controls-play-button): modified SVG, hue, opacity, and width/height.
+
 2014-06-05  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r169570.
index cfedd4e..bd610a9 100644 (file)
@@ -23,8 +23,8 @@
  */
 
 audio {
-    width: 200px;
-    height: 44px;
+    min-width: 260px;
+    height: 39px;
 }
 
 body:-webkit-full-page-media {
@@ -54,6 +54,7 @@ video:-webkit-full-page-media::-webkit-media-controls-panel {
     -webkit-flex-direction: column;
     font-family: -apple-system-font;
     overflow: hidden;
+    min-width: 260px;
 }
 
 video::-webkit-media-controls-panel input[type="button"],
@@ -81,15 +82,25 @@ audio::-webkit-media-controls-wireless-playback-status.hidden {
     display: none;
 }
 
-video::-webkit-media-controls-wireless-playback-picker-button,
-audio::-webkit-media-controls-wireless-playback-picker-button {
+audio::-webkit-media-controls-wireless-playback-picker-button,
+video::-webkit-media-controls-wireless-playback-picker-button {
     display: block;
-    width: 21px;
-    height: 21px;
-    background-color: rgb(92, 92, 92);
+    background-color: black;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: 0 1px;
-    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 305"><g fill="white"><polygon points="50.699,293 175,146 299.302,293"/><polygon points="9,9 9,213 97.392,213 110.921,197 25,197 25,25 325,25 325,197 239.079,197 252.608,213 341,213 341,9"/></g></svg>');
+}
+
+audio::-webkit-media-controls-wireless-playback-picker-button {
+    width: 44px;
+    height: 39px;
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 39"><g fill="none"><path stroke="white" stroke-width="1" d="M15.5,24.5  10.5,24.5  10.5,11.5  31.5,11.5  31.5,24.5  26.5,24.5  31.5,24.5  31.5,11.5  10.5,11.5  10.5,24.5  15.5,24.5 Z" /><path fill="white" d="M21,21  13.5,29  28.5,29" /></g></svg>');
+}
+
+video::-webkit-media-controls-wireless-playback-picker-button {
+    width: 42px;
+    height: 44px;
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 44"><g fill="none"><path stroke="white" stroke-width="1" d="M15,27.5  10.5,27.5  10.5,14.5  30.5,14.5  30.5,27.5  26,27.5  30.5,27.5  30.5,14.5  10.5,14.5  10.5,27.5  15,27.5 Z" /><path fill="white" d="M20.5,23.5  13,31.5  28,31.5" /></g></svg>');
+    opacity: 0.5;
 }
 
 video::-webkit-media-controls-wireless-playback-picker-button.active,
@@ -103,16 +114,13 @@ audio::-webkit-media-text-track-container {
     -webkit-flex: 1 1 auto;
 }
 
-video::-webkit-media-controls-panel,
-audio::-webkit-media-controls-panel {
+audio::-webkit-media-controls-panel,
+video::-webkit-media-controls-panel {
     box-sizing: border-box;
     position: absolute;
     bottom: 0;
-    width: 100%;
-    padding: none;
-    height: 44px;
+
     -webkit-user-select: none;
-    background-color: rgba(245, 245, 245, .75);
 
     display: -webkit-flex;
     -webkit-flex-direction: row;
@@ -124,7 +132,26 @@ audio::-webkit-media-controls-panel {
 }
 
 video::-webkit-media-controls-panel {
+    background-color: rgba(255, 255, 255, 0.6);
+}
+
+audio::-webkit-media-controls-panel {
+    background-color: rgba(228, 228, 228, 1);
+}
+
+
+audio::-webkit-media-controls-panel {
+    height: 39px;
+    padding-right: 8px;
+    padding-left: 7px;
+}
+
+video::-webkit-media-controls-panel {
+    height: 44px;
+    width: 100%;
     opacity: 0;
+    padding-right: 24px;
+    padding-left: 24px;
 }
 
 video::-webkit-media-controls-panel.show,
@@ -178,38 +205,50 @@ audio::-webkit-media-controls-fullscreen-button {
     padding: 0;
     border: 0;
     -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,
 audio::-webkit-media-controls-play-button {
-    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>');
+    width: 42px;
+    height: 39px;
+    background-size: 42px 39px;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="rgba(2, 2, 2, 1)"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></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>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="white"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
 }
 
-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 44 44"><path fill="rgba(0, 0, 0, 0.8)" d="M11,11 32,22 11,33z"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><path fill="rgba(2, 2, 2, 1)" d="M11,9.5 32,20.5 11,31.5z"/></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 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>');
+video::-webkit-media-controls-fullscreen-button {
+    width: 35px;
+    height: 44px;
+    background-size: 35px 44px;
+    opacity: 0.9;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="rgba(0, 0, 0, 0.4)" fill="none"><path d="M 10.5,20.5 v -5 h 5 M 10.5,15.5 l 5,5"/><path d="M 24.5,24.5 v 5 h -5 M 24.5,29.5 l -5,-5"/></g></svg>');
+}
+
+video::-webkit-media-controls-play-button {
+    width: 41px;
+    height: 44px;
+    background-size: 41px 44px;
+    opacity: 0.9;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="rgba(0, 0, 0, 0.4)"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></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-play-button:active {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="white"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
+}
+
+video::-webkit-media-controls-play-button.paused {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><path fill="rgba(0, 0, 0, 0.4)" d="M10,11  31,22  10,33 Z"/></svg>');
+}
+
+video::-webkit-media-controls-fullscreen-button:active {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="white" fill="none"><path d="M 10,20 v -5 h 5 M 10,15 l 5,5"/><path d="M 24,24 v 5 h -5 M 24,29 l -5,-5"/></g></svg>');
 }
 
 video::-webkit-media-controls-timeline,
@@ -222,6 +261,10 @@ audio::-webkit-media-controls-timeline {
     border-radius: 1.5px;
 }
 
+video::-webkit-media-controls-timeline {
+    opacity: 0.75;
+}
+
 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -249,12 +292,9 @@ audio::-webkit-media-controls-time-remaining-display {
     -webkit-justify-content: center;
     -webkit-align-items: center;
     cursor: default;
-    font-size: 13px;
     overflow-y: hidden;
     overflow-x: hidden;
-    width: 44px;
     min-width: 44px;
-    color: rgba(0, 0, 0, .5);
     letter-spacing: normal;
     word-spacing: normal;
     line-height: normal;
@@ -263,6 +303,26 @@ audio::-webkit-media-controls-time-remaining-display {
     text-decoration: none;
 }
 
+video::-webkit-media-controls-current-time-display,
+video::-webkit-media-controls-time-remaining-display {
+    font-size: 13px;
+    color: rgba(0, 0, 0, .5);
+}
+
+video::-webkit-media-controls-current-time-display {
+    padding-left: 6px;
+}
+
+video::-webkit-media-controls-time-remaining-display {
+    padding-right: 13px;
+}
+
+audio::-webkit-media-controls-current-time-display, 
+audio::-webkit-media-controls-time-remaining-display {
+    font-size: 12px;
+    color: rgba(5, 5, 5, 1);
+}
+
 video::-webkit-media-controls-timeline-container .hour-long-time,
 audio::-webkit-media-controls-timeline-container .hour-long-time {
     min-width: 67px;