<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[184611] trunk/Source/WebCore</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/184611">184611</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2015-05-19 20:34:35 -0700 (Tue, 19 May 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>[iOS] Optimized fullscreen placeholder is incorrectly sized
https://bugs.webkit.org/show_bug.cgi?id=145196
rdar://problem/21031188
Reviewed by Dean Jackson.
Add a new media part UI for the placeholder text when entering optimized fullscreen,
and use it as part of the title text in the placeholder. Now the wireless playback status
div serves as a multi-purpose placeholder.
* Modules/mediacontrols/MediaControlsHost.cpp:
(WebCore::MediaControlsHost::mediaUIImageData): Return the placeholder text.
* Modules/mediacontrols/MediaControlsHost.idl: Add a new UI part for placeholder text.
* Modules/mediacontrols/mediaControlsApple.js: Add a new "optimized" ClassName when
the presentation mode is set to optimized.
* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-wireless-playback-status): The text should be at
medium weight, not light weight.
(audio::-webkit-media-controls-wireless-playback-text-top): The title text should be
white for both wireless playback and optimized fullscreen. It matches the style
when taking a video fullscreen.
Add new CSS rules when the placard is used for optimized fullscreen.
(audio::-webkit-media-controls-wireless-playback-status.optimized): Accommodate the
size of the graphic, and position appropriately.
(audio::-webkit-media-controls-wireless-playback-text-top.optimized): One line is
needed, so use this one, and place it where the bottom one is since more room is
needed to accommodate the graphic.
(audio::-webkit-media-controls-wireless-playback-text-bottom.optimized): One line is
needed, so hide this one.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.createControls): Several of the container divs are already
created in Controller.prototype.createControls(). Fly-by fix to avoid creation of
those divs. Only the panelContainer is new for the iOS controls. Fly-by fix of a
missing semicolon.
(ControllerIOS.prototype.handlePresentationModeChange): When the presentation mode
changes do several things:
1- Update the background image. Clear the inline background image when going back
to inline or in wireless playback.
2- Add the "optimized" ClassName to the placeholder container, and the two text
divs when entering optimized fullscreen. Remove them in other cases.
3- Set -webkit-media-controls-wireless-playback-text-top to the placeholder text.
This is better than embedding it inside the graphic. Clear the -bottom text.
* platform/ios/WebCoreSystemInterfaceIOS.h: Add a new enum to obtain the placeholder
text.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsMediaControlsHostcpp">trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsMediaControlsHostidl">trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js</a></li>
<li><a href="#trunkSourceWebCoreplatformiosWebCoreSystemInterfaceIOSh">trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/ChangeLog 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -1,3 +1,52 @@
</span><ins>+2015-05-19 Jon Lee <jonlee@apple.com>
+
+ [iOS] Optimized fullscreen placeholder is incorrectly sized
+ https://bugs.webkit.org/show_bug.cgi?id=145196
+ rdar://problem/21031188
+
+ Reviewed by Dean Jackson.
+
+ Add a new media part UI for the placeholder text when entering optimized fullscreen,
+ and use it as part of the title text in the placeholder. Now the wireless playback status
+ div serves as a multi-purpose placeholder.
+
+ * Modules/mediacontrols/MediaControlsHost.cpp:
+ (WebCore::MediaControlsHost::mediaUIImageData): Return the placeholder text.
+ * Modules/mediacontrols/MediaControlsHost.idl: Add a new UI part for placeholder text.
+ * Modules/mediacontrols/mediaControlsApple.js: Add a new "optimized" ClassName when
+ the presentation mode is set to optimized.
+
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (audio::-webkit-media-controls-wireless-playback-status): The text should be at
+ medium weight, not light weight.
+ (audio::-webkit-media-controls-wireless-playback-text-top): The title text should be
+ white for both wireless playback and optimized fullscreen. It matches the style
+ when taking a video fullscreen.
+
+ Add new CSS rules when the placard is used for optimized fullscreen.
+ (audio::-webkit-media-controls-wireless-playback-status.optimized): Accommodate the
+ size of the graphic, and position appropriately.
+ (audio::-webkit-media-controls-wireless-playback-text-top.optimized): One line is
+ needed, so use this one, and place it where the bottom one is since more room is
+ needed to accommodate the graphic.
+ (audio::-webkit-media-controls-wireless-playback-text-bottom.optimized): One line is
+ needed, so hide this one.
+ * Modules/mediacontrols/mediaControlsiOS.js:
+ (ControllerIOS.prototype.createControls): Several of the container divs are already
+ created in Controller.prototype.createControls(). Fly-by fix to avoid creation of
+ those divs. Only the panelContainer is new for the iOS controls. Fly-by fix of a
+ missing semicolon.
+ (ControllerIOS.prototype.handlePresentationModeChange): When the presentation mode
+ changes do several things:
+ 1- Update the background image. Clear the inline background image when going back
+ to inline or in wireless playback.
+ 2- Add the "optimized" ClassName to the placeholder container, and the two text
+ divs when entering optimized fullscreen. Remove them in other cases.
+ 3- Set -webkit-media-controls-wireless-playback-text-top to the placeholder text.
+ This is better than embedding it inside the graphic. Clear the -bottom text.
+ * platform/ios/WebCoreSystemInterfaceIOS.h: Add a new enum to obtain the placeholder
+ text.
+
</ins><span class="cx"> 2015-05-19 Ryuan Choi <ryuan.choi@navercorp.com>
</span><span class="cx">
</span><span class="cx"> [EFL] Use GSimpleProxyResolver instead of custom SoupProxyResolver
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsMediaControlsHostcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -286,6 +286,9 @@
</span><span class="cx">
</span><span class="cx"> if (partID == "optimized-fullscreen-placeholder")
</span><span class="cx"> return wkGetMediaUIImageData(wkMediaUIPartOptimizedFullscreenPlaceholder);
</span><ins>+
+ if (partID == "optimized-fullscreen-placeholder-text")
+ return wkGetMediaUIImageData(wkMediaUIPartOptimizedFullscreenPlaceholderText);
</ins><span class="cx"> #else
</span><span class="cx"> UNUSED_PARAM(partID);
</span><span class="cx"> #endif
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsMediaControlsHostidl"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -31,7 +31,8 @@
</span><span class="cx">
</span><span class="cx"> enum MediaUIPartID {
</span><span class="cx"> "optimized-fullscreen-button",
</span><del>- "optimized-fullscreen-placeholder"
</del><ins>+ "optimized-fullscreen-placeholder",
+ "optimized-fullscreen-placeholder-text"
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> [
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -99,6 +99,7 @@
</span><span class="cx"> list: 'list',
</span><span class="cx"> muteBox: 'mute-box',
</span><span class="cx"> muted: 'muted',
</span><ins>+ optimized: 'optimized',
</ins><span class="cx"> paused: 'paused',
</span><span class="cx"> playing: 'playing',
</span><span class="cx"> selected: 'selected',
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -575,6 +575,7 @@
</span><span class="cx"> background-size: 131px auto;
</span><span class="cx"> color: rgb(145,145,145);
</span><span class="cx"> font: -apple-system;
</span><ins>+ font-weight: 400;
</ins><span class="cx"> vertical-align: text-bottom;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -599,6 +600,7 @@
</span><span class="cx"> font-size: 12pt;
</span><span class="cx"> text-align: center;
</span><span class="cx"> margin: 0px;
</span><ins>+ color: rgb(255,255,255);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-wireless-playback-text-bottom,
</span><span class="lines">@@ -634,7 +636,26 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-controls-wireless-playback-status.optimized,
+audio::-webkit-media-controls-wireless-playback-status.optimized
+{
+ background-size: 304px auto;
+ background-position: 50% calc(.5 * (100% - 25px));
+}
+
+video::-webkit-media-controls-wireless-playback-text-top.optimized,
+audio::-webkit-media-controls-wireless-playback-text-top.optimized {
+ top: initial;
+ bottom: 0;
+}
+
+video::-webkit-media-controls-wireless-playback-text-bottom.optimized,
+audio::-webkit-media-controls-wireless-playback-text-bottom.optimized {
+ display: none;
+}
+
</ins><span class="cx"> video::-webkit-media-controls-wireless-playback-status.hidden,
</span><span class="cx"> audio::-webkit-media-controls-wireless-playback-status.hidden {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><ins>+
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -108,19 +108,7 @@
</span><span class="cx"> var panelContainer = this.controls.panelContainer = document.createElement('div');
</span><span class="cx"> panelContainer.setAttribute('pseudo', '-webkit-media-controls-panel-container');
</span><span class="cx">
</span><del>- var panelBackground = this.controls.panelBackground = document.createElement('div');
- panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
-
- var inlinePlaybackPlaceholderText = this.controls.inlinePlaybackPlaceholderText = document.createElement('div');
- inlinePlaybackPlaceholderText.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text');
-
- var inlinePlaybackPlaceholderTextTop = this.controls.inlinePlaybackPlaceholderTextTop = document.createElement('p');
- inlinePlaybackPlaceholderTextTop.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text-top');
-
- var inlinePlaybackPlaceholderTextBottom = this.controls.inlinePlaybackPlaceholderTextBottom = document.createElement('p');
- inlinePlaybackPlaceholderTextBottom.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text-bottom');
-
- var wirelessTargetPicker = this.controls.wirelessTargetPicker
</del><ins>+ var wirelessTargetPicker = this.controls.wirelessTargetPicker;
</ins><span class="cx"> this.listenFor(wirelessTargetPicker, 'touchstart', this.handleWirelessPickerButtonTouchStart);
</span><span class="cx"> this.listenFor(wirelessTargetPicker, 'touchend', this.handleWirelessPickerButtonTouchEnd);
</span><span class="cx"> this.listenFor(wirelessTargetPicker, 'touchcancel', this.handleWirelessPickerButtonTouchCancel);
</span><span class="lines">@@ -549,14 +537,30 @@
</span><span class="cx">
</span><span class="cx"> switch (presentationMode) {
</span><span class="cx"> case 'inline':
</span><ins>+ this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
</ins><span class="cx"> this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
</span><ins>+ this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
+ this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
+ this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
</ins><span class="cx"> break;
</span><span class="cx"> case 'optimized':
</span><span class="cx"> var backgroundImage = "url('" + this.host.mediaUIImageData("optimized-fullscreen-placeholder") + "')";
</span><span class="cx"> this.controls.inlinePlaybackPlaceholder.style.backgroundImage = backgroundImage;
</span><span class="cx"> this.controls.inlinePlaybackPlaceholder.setAttribute('aria-label', "video playback placeholder");
</span><ins>+ this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.optimized);
</ins><span class="cx"> this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
</span><ins>+
+ this.controls.inlinePlaybackPlaceholderTextTop.innerText = this.host.mediaUIImageData("optimized-fullscreen-placeholder-text");
+ this.controls.inlinePlaybackPlaceholderTextTop.classList.add(this.ClassNames.optimized);
+ this.controls.inlinePlaybackPlaceholderTextBottom.innerText = "";
+ this.controls.inlinePlaybackPlaceholderTextBottom.classList.add(this.ClassNames.optimized);
</ins><span class="cx"> break;
</span><ins>+ default:
+ this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
+ this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
+ this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
+ this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
+ break;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this.updateControls();
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformiosWebCoreSystemInterfaceIOSh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h (184610 => 184611)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h 2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h 2015-05-20 03:34:35 UTC (rev 184611)
</span><span class="lines">@@ -80,7 +80,8 @@
</span><span class="cx">
</span><span class="cx"> typedef enum {
</span><span class="cx"> wkMediaUIPartOptimizedFullscreenButton = 0,
</span><del>- wkMediaUIPartOptimizedFullscreenPlaceholder
</del><ins>+ wkMediaUIPartOptimizedFullscreenPlaceholder,
+ wkMediaUIPartOptimizedFullscreenPlaceholderText
</ins><span class="cx"> } wkMediaUIPart;
</span><span class="cx"> extern CFStringRef (*wkGetMediaUIImageData)(int wkMediaUIPart);
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>