Adjust button CSS and positioning in preparation.
authorroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 14 May 2015 23:40:29 +0000 (23:40 +0000)
committerroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 14 May 2015 23:40:29 +0000 (23:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=144973.
<rdar://problem/20306227>

Reviewed by Dean Jackson.

The only visual change here is the swapping of the rewind and play button positions.
Also, position buttons based off of both left and right margins instead of just one of the two.
This allows the controls drop off to work without having to use a spacer element to take the place
of the timeline if the controls are too small.
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-rewind-button):
(audio::-webkit-media-controls-play-button):
(audio::-webkit-media-controls-panel .mute-box):
(audio::-webkit-media-controls-wireless-playback-picker-button):
(audio::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-fullscreen-button):
(audio::-webkit-media-controls-fullscreen-button.exit):
(audio::-webkit-media-controls-time-remaining-display):
(audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button):
(audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.configureInlineControls):

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

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

index bbe3916..3ba95f7 100644 (file)
@@ -1,3 +1,29 @@
+2015-05-14  Roger Fong  <roger_fong@apple.com>
+
+        Adjust button CSS and positioning in preparation.
+        https://bugs.webkit.org/show_bug.cgi?id=144973.
+        <rdar://problem/20306227>
+
+        Reviewed by Dean Jackson.
+
+        The only visual change here is the swapping of the rewind and play button positions.
+        Also, position buttons based off of both left and right margins instead of just one of the two.
+        This allows the controls drop off to work without having to use a spacer element to take the place
+        of the timeline if the controls are too small.
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-controls-rewind-button):
+        (audio::-webkit-media-controls-play-button):
+        (audio::-webkit-media-controls-panel .mute-box):
+        (audio::-webkit-media-controls-wireless-playback-picker-button):
+        (audio::-webkit-media-controls-toggle-closed-captions-button):
+        (audio::-webkit-media-controls-fullscreen-button):
+        (audio::-webkit-media-controls-fullscreen-button.exit):
+        (audio::-webkit-media-controls-time-remaining-display):
+        (audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button):
+        (audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button):
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.configureInlineControls):
+
 2015-05-14  Dean Jackson  <dino@apple.com>
 
         MediaControls: controls are live even when invisible
index 7116d84..e402f5a 100644 (file)
@@ -170,13 +170,15 @@ audio::-webkit-media-controls-rewind-button {
     min-width: 16px;
     height: 18px;
     margin-bottom: 1px;
-    margin-left: 16px;
+    margin-left: 8px;
+    margin-right: 8px;
 }
 
 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="rgba(255,255,255,0.45)"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
-    margin-left: 16px;
+    margin-left: 8px;
+    margin-right: 8px;
     width: 12px;
     min-width: 12px;
 }
@@ -192,7 +194,8 @@ audio::-webkit-media-controls-panel .mute-box {
     width: 14px;
     min-width: 14px;
     height: 25px;
-    margin-right: 16px;
+    margin-right: 8px;
+    margin-left: 8px;
     position: relative;
     display: -webkit-flex;
     -webkit-flex-direction: column;
@@ -307,7 +310,8 @@ video::-webkit-media-controls-volume-min-button {
 
 video::-webkit-media-controls-wireless-playback-picker-button,
 audio::-webkit-media-controls-wireless-playback-picker-button {
-    margin-right: 16px;
+    margin-right: 8px;
+    margin-left: 8px;
     width: 16px;
     min-width: 16px;
 }
@@ -321,7 +325,8 @@ video::-webkit-media-controls-toggle-closed-captions-button,
 audio::-webkit-media-controls-toggle-closed-captions-button {
     width: 16px;
     min-width: 16px;
-    margin-right: 16px;
+    margin-right: 8px;
+    margin-left: 8px;
     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.45)"  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>');
     outline: 0;
 }
@@ -420,6 +425,7 @@ 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="rgba(255,255,255,0.45)" 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>');
     margin-right: 7px;
+    margin-left: 8px;
     width: 14px;
     min-width: 14px;
 }
@@ -428,6 +434,7 @@ 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="rgba(255,255,255,0.45)" fill="none"><path d="M 7.5,1 L 7.5,6.5 L 13,6.5"/><path d="M 0,8.5 L 5.5,8.5 L 5.5,14"/><path stroke-linecap="round" d="M 7.5,6.5 L 12.5,1.5"/><path stroke-linecap="round" d="M 5.5,8.5 L 0.5,13.5"/></svg>');
     margin-right: 11px;
+    margin-left: 0px;
     margin-top: 6px;
 }
 
@@ -513,7 +520,7 @@ audio::-webkit-media-controls-current-time-display {
 video::-webkit-media-controls-time-remaining-display,
 audio::-webkit-media-controls-time-remaining-display {
     margin-left: 8px;
-    margin-right: 16px;
+    margin-right: 8px;
     width: 37px;
     min-width: 37px;
     -webkit-justify-content: flex-start;
@@ -771,12 +778,14 @@ video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
 audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button {
     margin-top: 6px;
     margin-right:24px;
+    margin-left: 0px;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button,
 audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button {
     margin-top: 6px;
     margin-right:24px;
+    margin-left: 0px;
 }
 
 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
index bfe8e45..dc337c4 100644 (file)
@@ -535,9 +535,9 @@ Controller.prototype = {
         this.controls.panel.appendChild(this.controls.panelBackgroundContainer);
         this.controls.panelBackgroundContainer.appendChild(this.controls.panelBackground);
         this.controls.panelBackgroundContainer.appendChild(this.controls.panelTint);
-        this.controls.panel.appendChild(this.controls.playButton);
         if (!this.isLive)
             this.controls.panel.appendChild(this.controls.rewindButton);
+        this.controls.panel.appendChild(this.controls.playButton);
         this.controls.panel.appendChild(this.controls.statusDisplay);
         if (!this.isLive) {
             this.controls.panel.appendChild(this.controls.timelineBox);