<!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>[185397] 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/185397">185397</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2015-06-09 17:53:13 -0700 (Tue, 09 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>MediaControls: Reenable resize of controls on pinch zoom
https://bugs.webkit.org/show_bug.cgi?id=145824
<rdar://problem/21212778>
Reviewed by Darin Adler.
Reinstate the code that updated the scaling of the
controls in response to changes in page scale.
This time around we have to change both the controls
panel, and its blurry background.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.set pageScaleFactor): Deleted a comment.
* Modules/mediacontrols/mediaControlsiOS.css:
(video::-webkit-media-controls-panel-background): Set the background to pin
to the bottom of its view.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.get pageScaleFactor): Basic getter, copied from mediaControlsApple.
(ControllerIOS.prototype.set pageScaleFactor): The setter that reacts to the page scale
and applies an inverse scaling on the control panel using a transform, and adjusts the
height on the background similarly.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</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>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (185396 => 185397)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-06-10 00:46:51 UTC (rev 185396)
+++ trunk/Source/WebCore/ChangeLog 2015-06-10 00:53:13 UTC (rev 185397)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2015-06-09 Dean Jackson <dino@apple.com>
+
+ MediaControls: Reenable resize of controls on pinch zoom
+ https://bugs.webkit.org/show_bug.cgi?id=145824
+ <rdar://problem/21212778>
+
+ Reviewed by Darin Adler.
+
+ Reinstate the code that updated the scaling of the
+ controls in response to changes in page scale.
+ This time around we have to change both the controls
+ panel, and its blurry background.
+
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.set pageScaleFactor): Deleted a comment.
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (video::-webkit-media-controls-panel-background): Set the background to pin
+ to the bottom of its view.
+ * Modules/mediacontrols/mediaControlsiOS.js:
+ (ControllerIOS.prototype.get pageScaleFactor): Basic getter, copied from mediaControlsApple.
+ (ControllerIOS.prototype.set pageScaleFactor): The setter that reacts to the page scale
+ and applies an inverse scaling on the control panel using a transform, and adjusts the
+ height on the background similarly.
+
</ins><span class="cx"> 2015-06-09 Andreas Kling <akling@apple.com>
</span><span class="cx">
</span><span class="cx"> GraphicsContext state stack wasting lots of memory when empty.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (185396 => 185397)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-06-10 00:46:51 UTC (rev 185396)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-06-10 00:53:13 UTC (rev 185397)
</span><span class="lines">@@ -2034,12 +2034,6 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this._pageScaleFactor = newScaleFactor;
</span><del>-
- // FIXME: this should react to the scale change by
- // unscaling the controls panel. However, this
- // hits a bug with the backdrop blur layer getting
- // too big and moving to a tiled layer.
- // https://bugs.webkit.org/show_bug.cgi?id=142317
</del><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> handleRootResize: function(event)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (185396 => 185397)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-06-10 00:46:51 UTC (rev 185396)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2015-06-10 00:53:13 UTC (rev 185397)
</span><span class="lines">@@ -120,6 +120,8 @@
</span><span class="cx"> transition: opacity 0.25s linear;
</span><span class="cx"> opacity: 0;
</span><span class="cx"> pointer-events: none;
</span><ins>+ bottom: 0;
+ position: absolute;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> audio::-webkit-media-controls-panel-background {
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (185396 => 185397)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-06-10 00:46:51 UTC (rev 185396)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-06-10 00:53:13 UTC (rev 185397)
</span><span class="lines">@@ -25,7 +25,6 @@
</span><span class="cx"> /* Enums */
</span><span class="cx"> ControllerIOS.StartPlaybackControls = 2;
</span><span class="cx">
</span><del>-
</del><span class="cx"> ControllerIOS.prototype = {
</span><span class="cx"> /* Constants */
</span><span class="cx"> MinimumTimelineWidth: 200,
</span><span class="lines">@@ -617,7 +616,37 @@
</span><span class="cx"> return Controller.prototype.controlsAlwaysVisible.call(this);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ get pageScaleFactor()
+ {
+ return this._pageScaleFactor;
+ },
</ins><span class="cx">
</span><ins>+ set pageScaleFactor(newScaleFactor)
+ {
+ if (!newScaleFactor || this._pageScaleFactor === newScaleFactor)
+ return;
+
+ this._pageScaleFactor = newScaleFactor;
+
+ var scaleValue = 1 / newScaleFactor;
+ var scaleTransform = "scale(" + scaleValue + ")";
+ if (this.controls.startPlaybackButton)
+ this.controls.startPlaybackButton.style.webkitTransform = scaleTransform;
+ if (this.controls.panel) {
+ var bottomAligment = -2 * scaleValue;
+ this.controls.panel.style.bottom = bottomAligment + "px";
+ this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
+ this.controls.panel.style.width = Math.round(newScaleFactor * 100) + "%";
+ this.controls.panel.style.webkitTransform = scaleTransform;
+
+ this.controls.panelBackground.style.height = (50 * scaleValue) + "px";
+
+ this.setNeedsTimelineMetricsUpdate();
+ this.updateProgress();
+ this.scheduleUpdateLayoutForDisplayedWidth();
+ }
+ },
+
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> Object.create(Controller.prototype).extend(ControllerIOS.prototype);
</span></span></pre>
</div>
</div>
</body>
</html>