<!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>[167057] 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/167057">167057</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2014-04-09 18:06:31 -0700 (Wed, 09 Apr 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>[iOS] Media controls should resize as the user zooms
https://bugs.webkit.org/show_bug.cgi?id=131322

Reviewed by Eric Carlson.

On iOS the media controls should remain the same size
independent of user zoom. Have the HTMLMediaElement optionally
register for updates in the page scale to apply an inverse
scale.

* Modules/mediacontrols/MediaControlsHost.cpp: New exposed property that calls
back into HTMLMediaElement::mediaControlsDependOnPageScaleFactor.
(WebCore::MediaControlsHost::controlsDependOnPageScaleFactor):
(WebCore::MediaControlsHost::setControlsDependOnPageScaleFactor):
* Modules/mediacontrols/MediaControlsHost.h: Keep a reference to the actual
controls from the JavaScript side so we can talk to it later.
(WebCore::MediaControlsHost::controllerJSValue):
(WebCore::MediaControlsHost::setControllerJSValue):
* Modules/mediacontrols/MediaControlsHost.idl: Expose controlsDependOnPageScaleFactor.

* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-panel): Specify the transform origin so that
scaling will keep the controls pinned to the bottom left corner.
(audio::-webkit-media-controls-start-playback-button): Update to the correct size
and provide new artwork.
(audio::-webkit-media-controls-start-playback-button.failed): New artwork.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS): Tell the host that these controls care about the page scale.
(ControllerIOS.prototype.get pageScaleFactor): New getter.
(ControllerIOS.prototype.set pageScaleFactor): When set, update the play button and the panel.

* html/HTMLMediaElement.cpp:
(WebCore::HTMLMediaElement::ensureMediaControlsInjectedScript): Small naming cleanup.
(setPageScaleFactorProperty): Static helper to set a JS property value.
(WebCore::HTMLMediaElement::didAddUserAgentShadowRoot): Keep a reference to the controls object,
and make sure to set the page scale factor on the controls.
(WebCore::HTMLMediaElement::pageScaleFactorChanged): Implement the callback, telling
the controls object that it needs to relayout.</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="#trunkSourceWebCoreModulesmediacontrolsMediaControlsHosth">trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsMediaControlsHostidl">trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl</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="#trunkSourceWebCorehtmlHTMLMediaElementcpp">trunk/Source/WebCore/html/HTMLMediaElement.cpp</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/ChangeLog        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -1,3 +1,44 @@
</span><ins>+2014-04-09  Dean Jackson  &lt;dino@apple.com&gt;
+
+        [iOS] Media controls should resize as the user zooms
+        https://bugs.webkit.org/show_bug.cgi?id=131322
+
+        Reviewed by Eric Carlson.
+
+        On iOS the media controls should remain the same size
+        independent of user zoom. Have the HTMLMediaElement optionally
+        register for updates in the page scale to apply an inverse
+        scale.
+
+        * Modules/mediacontrols/MediaControlsHost.cpp: New exposed property that calls
+        back into HTMLMediaElement::mediaControlsDependOnPageScaleFactor.
+        (WebCore::MediaControlsHost::controlsDependOnPageScaleFactor):
+        (WebCore::MediaControlsHost::setControlsDependOnPageScaleFactor):
+        * Modules/mediacontrols/MediaControlsHost.h: Keep a reference to the actual
+        controls from the JavaScript side so we can talk to it later.
+        (WebCore::MediaControlsHost::controllerJSValue):
+        (WebCore::MediaControlsHost::setControllerJSValue):
+        * Modules/mediacontrols/MediaControlsHost.idl: Expose controlsDependOnPageScaleFactor.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-panel): Specify the transform origin so that
+        scaling will keep the controls pinned to the bottom left corner.
+        (audio::-webkit-media-controls-start-playback-button): Update to the correct size
+        and provide new artwork.
+        (audio::-webkit-media-controls-start-playback-button.failed): New artwork.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS): Tell the host that these controls care about the page scale.
+        (ControllerIOS.prototype.get pageScaleFactor): New getter.
+        (ControllerIOS.prototype.set pageScaleFactor): When set, update the play button and the panel.
+
+        * html/HTMLMediaElement.cpp:
+        (WebCore::HTMLMediaElement::ensureMediaControlsInjectedScript): Small naming cleanup.
+        (setPageScaleFactorProperty): Static helper to set a JS property value.
+        (WebCore::HTMLMediaElement::didAddUserAgentShadowRoot): Keep a reference to the controls object,
+        and make sure to set the page scale factor on the controls.
+        (WebCore::HTMLMediaElement::pageScaleFactorChanged): Implement the callback, telling
+        the controls object that it needs to relayout.
+
</ins><span class="cx"> 2014-04-09  Antti Koivisto  &lt;antti@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Try to fix iOS build.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsMediaControlsHostcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -38,6 +38,7 @@
</span><span class="cx"> #include &quot;PageGroup.h&quot;
</span><span class="cx"> #include &quot;TextTrack.h&quot;
</span><span class="cx"> #include &quot;TextTrackList.h&quot;
</span><ins>+#include &lt;runtime/JSCJSValueInlines.h&gt;
</ins><span class="cx"> 
</span><span class="cx"> namespace WebCore {
</span><span class="cx"> 
</span><span class="lines">@@ -214,7 +215,17 @@
</span><span class="cx">     
</span><span class="cx">     return type;
</span><span class="cx"> }
</span><del>-    
</del><ins>+
+bool MediaControlsHost::controlsDependOnPageScaleFactor() const
+{
+    return m_mediaElement-&gt;mediaControlsDependOnPageScaleFactor();
</ins><span class="cx"> }
</span><span class="cx"> 
</span><ins>+void MediaControlsHost::setControlsDependOnPageScaleFactor(bool value)
+{
+    m_mediaElement-&gt;setMediaControlsDependOnPageScaleFactor(value);
+}
+
+}
+
</ins><span class="cx"> #endif
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsMediaControlsHosth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -29,6 +29,7 @@
</span><span class="cx"> #if ENABLE(MEDIA_CONTROLS_SCRIPT)
</span><span class="cx"> 
</span><span class="cx"> #include &quot;ScriptState.h&quot;
</span><ins>+#include &lt;bindings/ScriptObject.h&gt;
</ins><span class="cx"> #include &lt;wtf/RefCounted.h&gt;
</span><span class="cx"> #include &lt;wtf/Vector.h&gt;
</span><span class="cx"> #include &lt;wtf/text/WTFString.h&gt;
</span><span class="lines">@@ -65,11 +66,18 @@
</span><span class="cx">     String externalDeviceDisplayName() const;
</span><span class="cx">     String externalDeviceType() const;
</span><span class="cx"> 
</span><ins>+    bool controlsDependOnPageScaleFactor() const;
+    void setControlsDependOnPageScaleFactor(bool v);
+
+    JSC::JSValue controllerJSValue() const { return m_controller; }
+    void setControllerJSValue(JSC::JSValue controller) { m_controller = controller; }
+
</ins><span class="cx"> private:
</span><span class="cx">     MediaControlsHost(HTMLMediaElement*);
</span><span class="cx"> 
</span><span class="cx">     HTMLMediaElement* m_mediaElement;
</span><span class="cx">     RefPtr&lt;MediaControlTextTrackContainerElement&gt; m_textTrackContainer;
</span><ins>+    JSC::JSValue m_controller;
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsMediaControlsHostidl"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -48,4 +48,6 @@
</span><span class="cx"> 
</span><span class="cx">     readonly attribute DOMString externalDeviceDisplayName;
</span><span class="cx">     readonly attribute DeviceType externalDeviceType;
</span><ins>+
+    attribute boolean controlsDependOnPageScaleFactor;
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -121,6 +121,7 @@
</span><span class="cx">     -webkit-user-select: none;
</span><span class="cx"> 
</span><span class="cx">     transition: opacity 0.25s linear;
</span><ins>+    -webkit-transform-origin: bottom left;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> video::-webkit-media-controls-panel {
</span><span class="lines">@@ -154,19 +155,19 @@
</span><span class="cx">     padding: 0;
</span><span class="cx">     border: 0;
</span><span class="cx">     position: absolute;
</span><del>-    width: 150px;
-    height: 150px;
-    left: calc(50% - 75px);
-    top: calc(50% - 75px);
</del><ins>+    width: 72px;
+    height: 72px;
+    left: calc(50% - 36px);
+    top: calc(50% - 36px);
</ins><span class="cx">     background-origin: content-box;
</span><span class="cx">     background-repeat: no-repeat;
</span><span class="cx">     background-position: center;
</span><del>-    background-image: url('data:image/svg+xml,&lt;svg width=&quot;140&quot; height=&quot;140&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;circle r=&quot;70&quot; cy=&quot;70&quot; cx=&quot;70&quot; fill=&quot;rgba(247, 247, 247, .82)&quot;/&gt;&lt;path d=&quot;M 48,34 v 72 l 62,-35.5 z&quot; fill=&quot;rgba(129, 129, 129, .9)&quot;/&gt;&lt;/svg&gt;');
</del><ins>+    background-image: url('data:image/svg+xml,&lt;svg viewBox=&quot;0 0 144 144&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;circle cx=&quot;72&quot; cy=&quot;72&quot; r=&quot;70&quot; fill=&quot;rgba(247, 247, 247, .82)&quot;/&gt;&lt;path d=&quot;M48,36v74L109,74L48,36z&quot; fill=&quot;rgba(129, 129, 129, .9)&quot;/&gt;&lt;/svg&gt;');
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> video::-webkit-media-controls-start-playback-button.failed,
</span><span class="cx"> audio::-webkit-media-controls-start-playback-button.failed {
</span><del>-    background-image: url('data:image/svg+xml,&lt;svg width=&quot;140&quot; height=&quot;140&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;circle r=&quot;70&quot; cy=&quot;70&quot; cx=&quot;70&quot; fill=&quot;rgba(247, 247, 247, .82)&quot;/&gt;&lt;g fill=&quot;rgba(129, 129, 129, .9)&quot;&gt;&lt;path d=&quot;M 48,34 v 17 l 47,28 l 15,-8.5 z&quot;/&gt;&lt;path d=&quot;M 16,36 l 110,64 l -2,4 l -110,-64 z&quot;/&gt;&lt;path d=&quot;M 48,63 v 43 l 37,-21.5 z&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;');
</del><ins>+    background-image: url('data:image/svg+xml,&lt;svg viewBox=&quot;0 0 144 144&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;circle cx=&quot;72&quot; cy=&quot;72&quot; r=&quot;70&quot; fill=&quot;rgba(247, 247, 247, .82)&quot;/&gt;&lt;g fill=&quot;rgba(129, 129, 129, .9)&quot;&gt;&lt;rect x=&quot;14&quot; y=&quot;70.4&quot; transform=&quot;matrix(0.8493 0.5279 -0.5279 0.8493 48.8614 -27.1595)&quot; width=&quot;116&quot; height=&quot;3.2&quot;/&gt;&lt;polygon points=&quot;109,74 48,36 48,52.3 95.6,81.9 &quot;/&gt;&lt;polygon points=&quot;48,110 87.7,86.6 48,61.9 &quot;/&gt;&lt;/g&gt;&lt;/svg&gt;');
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> video::-webkit-media-controls-play-button,
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -6,10 +6,13 @@
</span><span class="cx"> function ControllerIOS(root, video, host)
</span><span class="cx"> {
</span><span class="cx">     this.hasWirelessPlaybackTargets = false;
</span><ins>+    this._pageScaleFactor = 1;
</ins><span class="cx">     Controller.call(this, root, video, host);
</span><span class="cx"> 
</span><span class="cx">     this.updateWirelessTargetAvailable();
</span><span class="cx">     this.updateWirelessPlaybackStatus();
</span><ins>+
+    host.controlsDependOnPageScaleFactor = true;
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> /* Enums */
</span><span class="lines">@@ -403,6 +406,25 @@
</span><span class="cx">         this.video.webkitShowPlaybackTargetPicker();
</span><span class="cx">         event.stopPropagation();
</span><span class="cx">     },
</span><ins>+
+    get pageScaleFactor() {
+        return this._pageScaleFactor;
+    },
+
+    set pageScaleFactor(newScaleFactor) {
+        this._pageScaleFactor = newScaleFactor;
+
+        if (newScaleFactor) {
+            var scaleTransform = &quot;scale(&quot; + (1 / newScaleFactor) + &quot;)&quot;;
+            if (this.controls.startPlaybackButton)
+                this.controls.startPlaybackButton.style.webkitTransform = scaleTransform;
+            if (this.controls.panel) {
+                this.controls.panel.style.width = (newScaleFactor * 100) + &quot;%&quot;;
+                this.controls.panel.style.webkitTransform = scaleTransform;
+                this.updateProgress();
+            }
+        }
+    }
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> Object.create(Controller.prototype).extend(ControllerIOS.prototype);
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLMediaElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLMediaElement.cpp (167056 => 167057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/HTMLMediaElement.cpp        2014-04-10 00:51:28 UTC (rev 167056)
+++ trunk/Source/WebCore/html/HTMLMediaElement.cpp        2014-04-10 01:06:31 UTC (rev 167057)
</span><span class="lines">@@ -5918,6 +5918,7 @@
</span><span class="cx"> 
</span><span class="cx"> bool HTMLMediaElement::ensureMediaControlsInjectedScript()
</span><span class="cx"> {
</span><ins>+    LOG(Media, &quot;HTMLMediaElement::ensureMediaControlsInjectedScript&quot;);
</ins><span class="cx">     Page* page = document().page();
</span><span class="cx">     if (!page)
</span><span class="cx">         return false;
</span><span class="lines">@@ -5931,8 +5932,8 @@
</span><span class="cx">     JSDOMGlobalObject* globalObject = JSC::jsCast&lt;JSDOMGlobalObject*&gt;(scriptController.globalObject(world));
</span><span class="cx">     JSC::ExecState* exec = globalObject-&gt;globalExec();
</span><span class="cx"> 
</span><del>-    JSC::JSValue overlayValue = globalObject-&gt;get(exec, JSC::Identifier(exec, &quot;createControls&quot;));
-    if (overlayValue.isFunction())
</del><ins>+    JSC::JSValue functionValue = globalObject-&gt;get(exec, JSC::Identifier(exec, &quot;createControls&quot;));
+    if (functionValue.isFunction())
</ins><span class="cx">         return true;
</span><span class="cx"> 
</span><span class="cx"> #ifndef NDEBUG
</span><span class="lines">@@ -5950,8 +5951,16 @@
</span><span class="cx">     return true;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+static void setPageScaleFactorProperty(JSC::ExecState* exec, JSC::JSValue controllerValue, float pageScaleFactor)
+{
+    JSC::PutPropertySlot propertySlot(controllerValue);
+    JSC::JSObject* controllerObject = controllerValue.toObject(exec);
+    controllerObject-&gt;methodTable()-&gt;put(controllerObject, exec, JSC::Identifier(exec, &quot;pageScaleFactor&quot;), JSC::jsNumber(pageScaleFactor), propertySlot);
+}
+
</ins><span class="cx"> void HTMLMediaElement::didAddUserAgentShadowRoot(ShadowRoot* root)
</span><span class="cx"> {
</span><ins>+    LOG(Media, &quot;HTMLMediaElement::didAddUserAgentShadowRoot&quot;);
</ins><span class="cx"> #if ENABLE(PLUGIN_PROXY_FOR_VIDEO)
</span><span class="cx">     // JavaScript controls are not enabled with the video plugin proxy.
</span><span class="cx">     if (shouldUseVideoPluginProxy())
</span><span class="lines">@@ -5971,9 +5980,17 @@
</span><span class="cx">     JSC::ExecState* exec = globalObject-&gt;globalExec();
</span><span class="cx">     JSC::JSLockHolder lock(exec);
</span><span class="cx"> 
</span><del>-    // It is expected the JS file provides a createControls(shadowRoot, video, mediaControlsHost) function.
-    JSC::JSValue overlayValue = globalObject-&gt;get(exec, JSC::Identifier(exec, &quot;createControls&quot;));
-    if (overlayValue.isUndefinedOrNull())
</del><ins>+    // The media controls script must provide a method with the following details.
+    // Name: createControls
+    // Parameters:
+    //     1. The ShadowRoot element that will hold the controls.
+    //     2. This object (and HTMLMediaElement).
+    //     3. The MediaControlsHost object.
+    // Return value:
+    //     A reference to the created media controller instance.
+
+    JSC::JSValue functionValue = globalObject-&gt;get(exec, JSC::Identifier(exec, &quot;createControls&quot;));
+    if (functionValue.isUndefinedOrNull())
</ins><span class="cx">         return;
</span><span class="cx"> 
</span><span class="cx">     if (!m_mediaControlsHost)
</span><span class="lines">@@ -5984,13 +6001,17 @@
</span><span class="cx">     argList.append(toJS(exec, globalObject, this));
</span><span class="cx">     argList.append(toJS(exec, globalObject, m_mediaControlsHost.get()));
</span><span class="cx"> 
</span><del>-    JSC::JSObject* overlay = overlayValue.toObject(exec);
</del><ins>+    JSC::JSObject* function = functionValue.toObject(exec);
</ins><span class="cx">     JSC::CallData callData;
</span><del>-    JSC::CallType callType = overlay-&gt;methodTable()-&gt;getCallData(overlay, callData);
</del><ins>+    JSC::CallType callType = function-&gt;methodTable()-&gt;getCallData(function, callData);
</ins><span class="cx">     if (callType == JSC::CallTypeNone)
</span><span class="cx">         return;
</span><span class="cx"> 
</span><del>-    JSC::call(exec, overlay, callType, callData, globalObject, argList);
</del><ins>+    JSC::JSValue controllerValue = JSC::call(exec, function, callType, callData, globalObject, argList);
+    m_mediaControlsHost-&gt;setControllerJSValue(controllerValue);
+
+    setPageScaleFactorProperty(exec, controllerValue, page-&gt;pageScaleFactor());
+
</ins><span class="cx">     if (exec-&gt;hadException())
</span><span class="cx">         exec-&gt;clearException();
</span><span class="cx"> }
</span><span class="lines">@@ -6011,6 +6032,20 @@
</span><span class="cx"> 
</span><span class="cx"> void HTMLMediaElement::pageScaleFactorChanged()
</span><span class="cx"> {
</span><ins>+    Page* page = document().page();
+    if (!page)
+        return;
+
+    LOG(Media, &quot;HTMLMediaElement::pageScaleFactorChanged = %f&quot;, page-&gt;pageScaleFactor());
+    DOMWrapperWorld&amp; world = ensureIsolatedWorld();
+    ScriptController&amp; scriptController = page-&gt;mainFrame().script();
+    JSDOMGlobalObject* globalObject = JSC::jsCast&lt;JSDOMGlobalObject*&gt;(scriptController.globalObject(world));
+    JSC::ExecState* exec = globalObject-&gt;globalExec();
+    JSC::JSLockHolder lock(exec);
+
+    JSC::JSValue controllerValue = m_mediaControlsHost-&gt;controllerJSValue();
+
+    setPageScaleFactorProperty(exec, controllerValue, page-&gt;pageScaleFactor());
</ins><span class="cx"> }
</span><span class="cx"> #endif // ENABLE(MEDIA_CONTROLS_SCRIPT)
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>