<!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>[207436] trunk</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/207436">207436</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-17 15:03:16 -0700 (Mon, 17 Oct 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>[Modern Media Controls] Basic MediaController
https://bugs.webkit.org/show_bug.cgi?id=163539
&lt;rdar://problem/28797542&gt;

Patch by Antoine Quint &lt;graouts@apple.com&gt; on 2016-10-17
Reviewed by Darin Adler.

Source/WebCore:

We add a new main.js file which acts as the entry point by implementing the createControls()
function that HTMLMediaElement::ensureMediaControlsInjectedScript() once the shadow root has
been created. That functions creates an instance of the new MediaController class, which is
the controller object that will handle communication between the media controls and the media
element. At first, this MediaController class is very limited and assumes macOS inline
layout traits and forces a start button to be shown over the media, which can be played
to start the media and show the full controls. More functionality will be added by future patches.

Tests: media/modern-media-controls/media-controller/media-controller-click-to-start.html
       media/modern-media-controls/media-controller/media-controller-constructor.html
       media/modern-media-controls/media-controller/media-controller-resize.html

* Modules/modern-media-controls/main.js: Added.
(createControls):
* Modules/modern-media-controls/media/media-controller.js: Added.
(MediaController):
(MediaController.prototype.set pageScaleFactor):
(MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
(MediaController.prototype.handleEvent):
(MediaController.prototype.buttonWasClicked):
(MediaController.prototype._updateControlsSize):
* WebCore.xcodeproj/project.pbxproj:
* rendering/RenderThemeMac.mm:
(WebCore::RenderThemeMac::mediaControlsStyleSheet):
(WebCore::RenderThemeMac::mediaControlsScript):

LayoutTests:

Testing the properties of the new MediaController class and the availability and behavior of the
createControls() global function.

* media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-click-to-start.html: Added.
* media/modern-media-controls/media-controller/media-controller-constructor-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-constructor.html: Added.
* media/modern-media-controls/media-controller/media-controller-resize-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-resize.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderThemeMacmm">trunk/Source/WebCore/rendering/RenderThemeMac.mm</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/media-controller/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerclicktostartexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerclicktostarthtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerconstructorhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerresizeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerresizehtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmainjs">trunk/Source/WebCore/Modules/modern-media-controls/main.js</a></li>
<li>trunk/Source/WebCore/Modules/modern-media-controls/media/</li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207435 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-10-17 21:51:35 UTC (rev 207435)
+++ trunk/LayoutTests/ChangeLog        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+2016-10-17  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        [Modern Media Controls] Basic MediaController
+        https://bugs.webkit.org/show_bug.cgi?id=163539
+        &lt;rdar://problem/28797542&gt;
+
+        Reviewed by Darin Adler.
+
+        Testing the properties of the new MediaController class and the availability and behavior of the
+        createControls() global function.
+
+        * media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-click-to-start.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-constructor-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-constructor.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-resize-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-resize.html: Added.
+
</ins><span class="cx"> 2016-10-17  Michael Catanzaro  &lt;mcatanzaro@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [GTK] Skip layout tests under crypto/workers/subtle
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerclicktostartexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start-expected.txt        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+Testing the MediaController click-to-start behavior.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS mediaController.controls.showsStartButton is true
+
+Dispatching click event to the start button
+Media is playing
+PASS mediaController.controls.showsStartButton is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerclicktostarthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-click-to-start.html        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/main.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;video src=&quot;../../content/test.mp4&quot; style=&quot;width: 320px; height: 240px;&quot;&gt;&lt;/video&gt;
+&lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+window.jsTestIsAsync = true;
+
+description(&quot;Testing the &lt;code&gt;MediaController&lt;/code&gt; click-to-start behavior.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+const shadowRoot = document.querySelector(&quot;div#shadow&quot;).attachShadow({ mode: &quot;open&quot; });
+const media = document.querySelector(&quot;video&quot;);
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBeTrue(&quot;mediaController.controls.showsStartButton&quot;);
+
+media.addEventListener(&quot;play&quot;, function() {
+    debug(&quot;Media is playing&quot;);
+    shouldBeFalse(&quot;mediaController.controls.showsStartButton&quot;);
+    debug(&quot;&quot;);
+    shadowRoot.host.remove();
+    media.remove();
+    finishJSTest();
+});
+
+debug(&quot;&quot;);
+debug(&quot;Dispatching click event to the start button&quot;);
+mediaController.controls.startButton.element.click();
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerconstructorexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor-expected.txt (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor-expected.txt        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,16 @@
</span><ins>+Testing the MediaController constructor.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS createControls is defined.
+PASS createControls is an instance of Function
+PASS mediaController is an instance of MediaController
+PASS mediaController.shadowRoot is shadowRoot
+PASS mediaController.media is media
+PASS mediaController.controls is an instance of MediaControls
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerconstructorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-constructor.html        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/main.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;video src=&quot;../../content/test.mp4&quot;&gt;&lt;/video&gt;
+&lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+description(&quot;Testing the &lt;code&gt;MediaController&lt;/code&gt; constructor.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+shouldBeDefined(&quot;createControls&quot;);
+shouldBeType(&quot;createControls&quot;, &quot;Function&quot;);
+
+const shadowRoot = document.querySelector(&quot;div#shadow&quot;).attachShadow({ mode: &quot;open&quot; });
+const media = document.querySelector(&quot;video&quot;);
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBeType(&quot;mediaController&quot;, &quot;MediaController&quot;);
+shouldBe(&quot;mediaController.shadowRoot&quot;, &quot;shadowRoot&quot;);
+shouldBe(&quot;mediaController.media&quot;, &quot;media&quot;);
+shouldBeType(&quot;mediaController.controls&quot;, &quot;MediaControls&quot;);
+
+shadowRoot.host.remove();
+media.remove();
+debug(&quot;&quot;);
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerresizeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize-expected.txt (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize-expected.txt        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the MediaController resizing behavior.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+Checking initial size
+PASS mediaController.controls.width is 320
+PASS mediaController.controls.height is 240
+
+Resizing to 400x300
+PASS mediaController.controls.width is 400
+PASS mediaController.controls.height is 300
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerresizehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,72 @@
</span><ins>+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/media/media-controller.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../../../../Source/WebCore/Modules/modern-media-controls/main.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;video src=&quot;../../content/test.mp4&quot; style=&quot;width: 320px; height: 240px;&quot;&gt;&lt;/video&gt;
+&lt;div id=&quot;shadow&quot;&gt;&lt;/div&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+window.jsTestIsAsync = true;
+
+description(&quot;Testing the &lt;code&gt;MediaController&lt;/code&gt; resizing behavior.&quot;);
+
+iconService.directoryPath = &quot;../../../../Source/WebCore/Modules/modern-media-controls/images&quot;;
+
+const shadowRoot = document.querySelector(&quot;div#shadow&quot;).attachShadow({ mode: &quot;open&quot; });
+const media = document.querySelector(&quot;video&quot;);
+const mediaController = createControls(shadowRoot, media, null);
+
+let numberOfFrames = 0;
+scheduler.frameDidFire = function()
+{
+    numberOfFrames++;
+
+    if (numberOfFrames == 1) {
+        debug(&quot;Checking initial size&quot;);
+        shouldBe(&quot;mediaController.controls.width&quot;, &quot;320&quot;);
+        shouldBe(&quot;mediaController.controls.height&quot;, &quot;240&quot;);
+        
+        debug(&quot;&quot;);
+        debug(&quot;Resizing to 400x300&quot;);
+        media.style.width = &quot;400px&quot;;
+        media.style.height = &quot;300px&quot;;
+    } else {
+        shouldBe(&quot;mediaController.controls.width&quot;, &quot;400&quot;);
+        shouldBe(&quot;mediaController.controls.height&quot;, &quot;300&quot;);
+
+        debug(&quot;&quot;);
+        shadowRoot.host.remove();
+        media.remove();
+        finishJSTest();
+    }
+};
+
+&lt;/script&gt;
+&lt;script src=&quot;../../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/body&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207435 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-10-17 21:51:35 UTC (rev 207435)
+++ trunk/Source/WebCore/ChangeLog        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2016-10-17  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        [Modern Media Controls] Basic MediaController
+        https://bugs.webkit.org/show_bug.cgi?id=163539
+        &lt;rdar://problem/28797542&gt;
+
+        Reviewed by Darin Adler.
+
+        We add a new main.js file which acts as the entry point by implementing the createControls()
+        function that HTMLMediaElement::ensureMediaControlsInjectedScript() once the shadow root has
+        been created. That functions creates an instance of the new MediaController class, which is
+        the controller object that will handle communication between the media controls and the media
+        element. At first, this MediaController class is very limited and assumes macOS inline
+        layout traits and forces a start button to be shown over the media, which can be played
+        to start the media and show the full controls. More functionality will be added by future patches.
+
+        Tests: media/modern-media-controls/media-controller/media-controller-click-to-start.html
+               media/modern-media-controls/media-controller/media-controller-constructor.html
+               media/modern-media-controls/media-controller/media-controller-resize.html
+
+        * Modules/modern-media-controls/main.js: Added.
+        (createControls):
+        * Modules/modern-media-controls/media/media-controller.js: Added.
+        (MediaController):
+        (MediaController.prototype.set pageScaleFactor):
+        (MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
+        (MediaController.prototype.handleEvent):
+        (MediaController.prototype.buttonWasClicked):
+        (MediaController.prototype._updateControlsSize):
+        * WebCore.xcodeproj/project.pbxproj:
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::mediaControlsStyleSheet):
+        (WebCore::RenderThemeMac::mediaControlsScript):
+
</ins><span class="cx"> 2016-10-17  Anders Carlsson  &lt;andersca@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Remove an unused HistoryItem function
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmainjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/main.js (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/main.js                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/main.js        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// This is called from HTMLMediaElement::ensureMediaControlsInjectedScript().
+function createControls(shadowRoot, media, host)
+{
+    if (host) {
+        iconService.mediaControlsHost = host;
+        shadowRoot.appendChild(document.createElement(&quot;style&quot;)).textContent = host.shadowRootCSSText;
+    }
+
+    return new MediaController(shadowRoot, media, host);
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (0 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js                                (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -0,0 +1,82 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class MediaController
+{
+
+    constructor(shadowRoot, media, host)
+    {
+        this.shadowRoot = shadowRoot;
+        this.media = media;
+
+        // FIXME: This should get set dynamically based on the current environment.
+        this.layoutTraits = LayoutTraits.macOS;
+
+        this.controls = new MacOSInlineMediaControls
+        shadowRoot.appendChild(this.controls.element);        
+
+        this.controls.startButton.uiDelegate = this;
+        this.controls.showsStartButton = true;
+
+        this._updateControlsSize();
+        media.addEventListener(&quot;resize&quot;, this);
+    }
+
+    // Protected
+
+    set pageScaleFactor(pageScaleFactor)
+    {
+        // FIXME: To be implemented.
+    }
+
+    set usesLTRUserInterfaceLayoutDirection(flag)
+    {
+        // FIXME: To be implemented.
+    }
+
+    handleEvent(event)
+    {
+        if (event.type === &quot;resize&quot; &amp;&amp; event.currentTarget === this.media)
+            this._updateControlsSize();
+    }
+
+    buttonWasClicked(button)
+    {
+        if (button !== this.controls.startButton)
+            return;
+
+        this.controls.showsStartButton = false;
+        this.media.play();
+    }
+
+    // Private
+
+    _updateControlsSize()
+    {
+        this.controls.width = this.media.offsetWidth;
+        this.controls.height = this.media.offsetHeight;
+    }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (207435 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj        2016-10-17 21:51:35 UTC (rev 207435)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -7315,12 +7315,12 @@
</span><span class="cx">                 0F49669C1DB408C100A274BB /* DOMPointReadOnly.idl */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = DOMPointReadOnly.idl; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 0F4966A11DB4090100A274BB /* DOMPointInit.idl */ = {isa = PBXFileReference; lastKnownFileType = text; path = DOMPointInit.idl; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 0F4966A21DB4091000A274BB /* DOMPointInit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DOMPointInit.h; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><del>-                0F4966A41DB40C4300A274BB /* JSDOMPoint.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = JSDOMPoint.cpp; path = JSDOMPoint.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
-                0F4966A51DB40C4300A274BB /* JSDOMPoint.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = JSDOMPoint.h; path = JSDOMPoint.h; sourceTree = &quot;&lt;group&gt;&quot;; };
-                0F4966A61DB40C4300A274BB /* JSDOMPointInit.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = JSDOMPointInit.cpp; path = JSDOMPointInit.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
-                0F4966A71DB40C4300A274BB /* JSDOMPointInit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = JSDOMPointInit.h; path = JSDOMPointInit.h; sourceTree = &quot;&lt;group&gt;&quot;; };
-                0F4966A81DB40C4300A274BB /* JSDOMPointReadOnly.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = JSDOMPointReadOnly.cpp; path = JSDOMPointReadOnly.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
-                0F4966A91DB40C4300A274BB /* JSDOMPointReadOnly.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = JSDOMPointReadOnly.h; path = JSDOMPointReadOnly.h; sourceTree = &quot;&lt;group&gt;&quot;; };
</del><ins>+                0F4966A41DB40C4300A274BB /* JSDOMPoint.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSDOMPoint.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
+                0F4966A51DB40C4300A274BB /* JSDOMPoint.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSDOMPoint.h; sourceTree = &quot;&lt;group&gt;&quot;; };
+                0F4966A61DB40C4300A274BB /* JSDOMPointInit.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSDOMPointInit.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
+                0F4966A71DB40C4300A274BB /* JSDOMPointInit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSDOMPointInit.h; sourceTree = &quot;&lt;group&gt;&quot;; };
+                0F4966A81DB40C4300A274BB /* JSDOMPointReadOnly.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSDOMPointReadOnly.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
+                0F4966A91DB40C4300A274BB /* JSDOMPointReadOnly.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSDOMPointReadOnly.h; sourceTree = &quot;&lt;group&gt;&quot;; };
</ins><span class="cx">                 0F4E57161313276200CF85AF /* RenderSVGAllInOne.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = RenderSVGAllInOne.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 0F54DCCC1880C6AB003EEDBB /* ios-encodings.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = &quot;ios-encodings.txt&quot;; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 0F54DCE31881051D003EEDBB /* TextAutoSizing.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = TextAutoSizing.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="lines">@@ -9788,6 +9788,8 @@
</span><span class="cx">                 71B1E124164048CC00B1880A /* InspectorLayerTreeAgent.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = InspectorLayerTreeAgent.h; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 71C916071D1483A300ACA47D /* UserInterfaceLayoutDirection.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = UserInterfaceLayoutDirection.h; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 71CC7A1F152A0BFE009EEAF9 /* SVGAnimatedEnumeration.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGAnimatedEnumeration.cpp; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><ins>+                71D02D901DB55C4E00DD5CF5 /* main.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = main.js; sourceTree = &quot;&lt;group&gt;&quot;; };
+                71D02D921DB55C4E00DD5CF5 /* media-controller.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = &quot;media-controller.js&quot;; sourceTree = &quot;&lt;group&gt;&quot;; };
</ins><span class="cx">                 71D6AA711DA4EAF700B23969 /* airplay-placard@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = &quot;airplay-placard@1x.png&quot;; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 71D6AA721DA4EAF700B23969 /* airplay-placard@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = &quot;airplay-placard@2x.png&quot;; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="cx">                 71D6AA731DA4EAF700B23969 /* airplay-placard@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = &quot;airplay-placard@3x.png&quot;; sourceTree = &quot;&lt;group&gt;&quot;; };
</span><span class="lines">@@ -17668,11 +17670,21 @@
</span><span class="cx">                         path = &quot;Modules/modern-media-controls/controls&quot;;
</span><span class="cx">                         sourceTree = SOURCE_ROOT;
</span><span class="cx">                 };
</span><ins>+                71D02D911DB55C4E00DD5CF5 /* media */ = {
+                        isa = PBXGroup;
+                        children = (
+                                71D02D921DB55C4E00DD5CF5 /* media-controller.js */,
+                        );
+                        path = media;
+                        sourceTree = &quot;&lt;group&gt;&quot;;
+                };
</ins><span class="cx">                 71D6AA391DA4EAF700B23969 /* modern-media-controls */ = {
</span><span class="cx">                         isa = PBXGroup;
</span><span class="cx">                         children = (
</span><ins>+                                71D02D901DB55C4E00DD5CF5 /* main.js */,
</ins><span class="cx">                                 716FA0D71DB26591007323CC /* controls */,
</span><span class="cx">                                 71D6AA6F1DA4EAF700B23969 /* images */,
</span><ins>+                                71D02D911DB55C4E00DD5CF5 /* media */,
</ins><span class="cx">                         );
</span><span class="cx">                         path = &quot;modern-media-controls&quot;;
</span><span class="cx">                         sourceTree = &quot;&lt;group&gt;&quot;;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderThemeMacmm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderThemeMac.mm (207435 => 207436)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderThemeMac.mm        2016-10-17 21:51:35 UTC (rev 207435)
+++ trunk/Source/WebCore/rendering/RenderThemeMac.mm        2016-10-17 22:03:16 UTC (rev 207436)
</span><span class="lines">@@ -237,8 +237,8 @@
</span><span class="cx">     if (m_mediaControlsStyleSheet.isEmpty()) {
</span><span class="cx">         StringBuilder styleSheetBuilder;
</span><span class="cx">         if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
</span><del>-            NSArray* paths = @[@&quot;airplay-button&quot;, @&quot;button&quot;, @&quot;buttons-container&quot;, @&quot;icon-button&quot;, @&quot;macos-inline-media-controls&quot;, @&quot;media-controls&quot;, @&quot;placard&quot;, @&quot;scrubber&quot;, @&quot;slider&quot;, @&quot;start-button&quot;, @&quot;time-label&quot;, @&quot;volume-slider&quot;];
-            for (NSString* path in paths)
</del><ins>+            NSArray *paths = @[@&quot;airplay-button&quot;, @&quot;button&quot;, @&quot;buttons-container&quot;, @&quot;icon-button&quot;, @&quot;macos-inline-media-controls&quot;, @&quot;media-controls&quot;, @&quot;placard&quot;, @&quot;scrubber&quot;, @&quot;slider&quot;, @&quot;start-button&quot;, @&quot;time-label&quot;, @&quot;volume-slider&quot;];
+            for (NSString *path in paths)
</ins><span class="cx">                 styleSheetBuilder.append([NSString stringWithContentsOfFile:[[NSBundle bundleForClass:[WebCoreRenderThemeBundle class]] pathForResource:path ofType:@&quot;css&quot; inDirectory:@&quot;modern-media-controls/controls&quot;] encoding:NSUTF8StringEncoding error:nil]);
</span><span class="cx">         } else
</span><span class="cx">             styleSheetBuilder.append([NSString stringWithContentsOfFile:[[NSBundle bundleForClass:[WebCoreRenderThemeBundle class]] pathForResource:@&quot;mediaControlsApple&quot; ofType:@&quot;css&quot;] encoding:NSUTF8StringEncoding error:nil]);
</span><span class="lines">@@ -255,11 +255,13 @@
</span><span class="cx"> #if ENABLE(MEDIA_CONTROLS_SCRIPT)
</span><span class="cx">     if (m_mediaControlsScript.isEmpty()) {
</span><span class="cx">         StringBuilder scriptBuilder;
</span><del>-        NSBundle* bundle = [NSBundle bundleForClass:[WebCoreRenderThemeBundle class]];
</del><ins>+        NSBundle *bundle = [NSBundle bundleForClass:[WebCoreRenderThemeBundle class]];
</ins><span class="cx">         if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
</span><del>-            NSArray* controlsPaths = @[@&quot;scheduler&quot;, @&quot;layout-node&quot;, @&quot;layout-item&quot;, @&quot;icon-service&quot;, @&quot;time-control&quot;, @&quot;time-label&quot;, @&quot;slider&quot;, @&quot;volume-slider&quot;, @&quot;scrubber&quot;, @&quot;button&quot;, @&quot;start-button&quot;, @&quot;icon-button&quot;, @&quot;play-pause-button&quot;, @&quot;skip-back-button&quot;, @&quot;mute-button&quot;, @&quot;airplay-button&quot;, @&quot;pip-button&quot;, @&quot;tracks-button&quot;, @&quot;fullscreen-button&quot;, @&quot;aspect-ratio-button&quot;, @&quot;rewind-button&quot;, @&quot;forward-button&quot;, @&quot;media-controls&quot;, @&quot;macos-media-controls&quot;, @&quot;macos-inline-media-controls&quot;, @&quot;buttons-container&quot;, @&quot;placard&quot;, @&quot;airplay-placard&quot;, @&quot;pip-placard&quot;];
-            for (NSString* path in controlsPaths)
</del><ins>+            NSArray *controlsPaths = @[@&quot;scheduler&quot;, @&quot;layout-node&quot;, @&quot;layout-item&quot;, @&quot;icon-service&quot;, @&quot;time-control&quot;, @&quot;time-label&quot;, @&quot;slider&quot;, @&quot;volume-slider&quot;, @&quot;scrubber&quot;, @&quot;button&quot;, @&quot;start-button&quot;, @&quot;icon-button&quot;, @&quot;play-pause-button&quot;, @&quot;skip-back-button&quot;, @&quot;mute-button&quot;, @&quot;airplay-button&quot;, @&quot;pip-button&quot;, @&quot;tracks-button&quot;, @&quot;fullscreen-button&quot;, @&quot;aspect-ratio-button&quot;, @&quot;rewind-button&quot;, @&quot;forward-button&quot;, @&quot;media-controls&quot;, @&quot;macos-media-controls&quot;, @&quot;macos-inline-media-controls&quot;, @&quot;buttons-container&quot;, @&quot;placard&quot;, @&quot;airplay-placard&quot;, @&quot;pip-placard&quot;];
+            for (NSString *path in controlsPaths)
</ins><span class="cx">                 scriptBuilder.append([NSString stringWithContentsOfFile:[bundle pathForResource:path ofType:@&quot;js&quot; inDirectory:@&quot;modern-media-controls/controls&quot;] encoding:NSUTF8StringEncoding error:nil]);
</span><ins>+            scriptBuilder.append([NSString stringWithContentsOfFile:[bundle pathForResource:@&quot;media-controller&quot; ofType:@&quot;js&quot; inDirectory:@&quot;modern-media-controls/media&quot;] encoding:NSUTF8StringEncoding error:nil]);
+            scriptBuilder.append([NSString stringWithContentsOfFile:[bundle pathForResource:@&quot;main&quot; ofType:@&quot;js&quot; inDirectory:@&quot;modern-media-controls&quot;] encoding:NSUTF8StringEncoding error:nil]);
</ins><span class="cx">         } else {
</span><span class="cx">             scriptBuilder.append([NSString stringWithContentsOfFile:[bundle pathForResource:@&quot;mediaControlsLocalizedStrings&quot; ofType:@&quot;js&quot;] encoding:NSUTF8StringEncoding error:nil]);
</span><span class="cx">             scriptBuilder.append([NSString stringWithContentsOfFile:[bundle pathForResource:@&quot;mediaControlsApple&quot; ofType:@&quot;js&quot;] encoding:NSUTF8StringEncoding error:nil]);
</span></span></pre>
</div>
</div>

</body>
</html>