Log Message
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):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (184360 => 184361)
--- trunk/Source/WebCore/ChangeLog 2015-05-14 23:35:42 UTC (rev 184360)
+++ trunk/Source/WebCore/ChangeLog 2015-05-14 23:40:29 UTC (rev 184361)
@@ -1,3 +1,29 @@
+2015-05-14 Roger Fong <roger_f...@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 <d...@apple.com>
MediaControls: controls are live even when invisible
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (184360 => 184361)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-05-14 23:35:42 UTC (rev 184360)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-05-14 23:40:29 UTC (rev 184361)
@@ -170,13 +170,15 @@
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 @@
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-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 @@
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 @@
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 @@
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 @@
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 @@
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 {
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (184360 => 184361)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-05-14 23:35:42 UTC (rev 184360)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-05-14 23:40:29 UTC (rev 184361)
@@ -535,9 +535,9 @@
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);
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes
