<!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>[209523] 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/209523">209523</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-07 21:51:05 -0800 (Wed, 07 Dec 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>[Modern Media Controls] Tracks panel does not display in the right location in fullscreen and cannot be dismissed
https://bugs.webkit.org/show_bug.cgi?id=165575

Patch by Antoine Quint &lt;graouts@apple.com&gt; on 2016-12-07
Reviewed by Dean Jackson.

Source/WebCore:

We position the tracks panel programmatically based on the current bounds of the fullscreen button in fullscreen.
This allows for the tracks panel to be shown in the right spot even after dragging the controls bar. We also use
the fullscreen media controls as the target for tracking &quot;mousedown&quot; events when the tracks panel is shown in a
fullscreen presentation.

Tests: media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html
       media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html

* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen .scrubber):
(.media-controls.mac.fullscreen .tracks-panel): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype.showTracksPanel):
* Modules/modern-media-controls/controls/tracks-panel.js:
(TracksPanel.prototype.presentInParent):
(TracksPanel.prototype.hide):
(TracksPanel.prototype.get bottomY):
(TracksPanel.prototype.set bottomY):
(TracksPanel.prototype.commitProperty):
(TracksPanel.prototype._mousedownTarget):

LayoutTests:

Add new tests to check we correctly position the tracks panel in fullscreen, including when we drag the controls bar.

* media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt: Added.
* media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html: Added.
* media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt: Added.
* media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.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="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstrackspaneljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelafterdraggingcontrolsexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelafterdraggingcontrolshtml">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelfullscreenexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelfullscreenhtml">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209522 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/LayoutTests/ChangeLog        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2016-12-07  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        [Modern Media Controls] Tracks panel does not display in the right location in fullscreen and cannot be dismissed
+        https://bugs.webkit.org/show_bug.cgi?id=165575
+
+        Reviewed by Dean Jackson.
+
+        Add new tests to check we correctly position the tracks panel in fullscreen, including when we drag the controls bar.
+
+        * media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt: Added.
+        * media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html: Added.
+        * media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt: Added.
+        * media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html: Added.
+
</ins><span class="cx"> 2016-12-07  Jeremy Jones  &lt;jeremyj@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         pointer-lock/lock-lost-on-esc-in-fullscreen.html timeout on mac-wk1
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelafterdraggingcontrolsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt (0 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the display of a tracks panel after dragging the controls bar in fullscreen.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS shadowRoot.querySelector('.tracks-panel').style.right is &quot;267px&quot;
+PASS shadowRoot.querySelector('.tracks-panel').style.bottom is &quot;151px&quot;
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelafterdraggingcontrolshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html (0 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -0,0 +1,59 @@
</span><ins>+&lt;!DOCTYPE html&gt;&lt;!-- webkit-test-runner [ enableModernMediaControls=true ] --&gt;
+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;video src=&quot;../../content/CC+Subtitles.mov&quot; style=&quot;width: 320px; height: 240px;&quot; controls autoplay&gt;&lt;/video&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+window.jsTestIsAsync = true;
+
+description(&quot;Testing the display of a tracks panel after dragging the controls bar in fullscreen.&quot;);
+
+const media = document.querySelector(&quot;video&quot;);
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener(&quot;webkitbeginfullscreen&quot;, () =&gt; {
+    debug(&quot;webkitbeginfullscreen&quot;);
+});
+
+media.addEventListener(&quot;webkitfullscreenchange&quot;, () =&gt; {
+    if (media.webkitDisplayingFullscreen) {
+        window.requestAnimationFrame(() =&gt; {
+            const bounds = shadowRoot.querySelector(&quot;.controls-bar&quot;).getBoundingClientRect();
+            eventSender.mouseMoveTo(bounds.left + 10, bounds.top + 10);
+            eventSender.mouseDown();
+            eventSender.mouseMoveTo(bounds.left - 40, bounds.top - 40);
+            eventSender.mouseUp();
+
+            window.requestAnimationFrame(() =&gt; {
+                window.requestAnimationFrame(() =&gt; {
+                    clickOnButton(&quot;tracks&quot;);
+                    window.requestAnimationFrame(() =&gt; {
+                        shouldBeEqualToString(&quot;shadowRoot.querySelector('.tracks-panel').style.right&quot;, &quot;267px&quot;);
+                        shouldBeEqualToString(&quot;shadowRoot.querySelector('.tracks-panel').style.bottom&quot;, &quot;151px&quot;);
+
+                        debug(&quot;&quot;);
+                        media.remove();
+                        finishJSTest();
+                    });
+                });
+            });
+        });
+    }
+});
+
+media.addEventListener(&quot;play&quot;, () =&gt; {
+    media.pause();
+    window.requestAnimationFrame(() =&gt; clickOnButton(&quot;fullscreen&quot;));
+});
+
+function clickOnButton(name)
+{
+    const bounds = shadowRoot.querySelector(`button.${name}`).getBoundingClientRect();
+    eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+&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="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelfullscreenexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt (0 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Showing the tracks panel in fullscreen.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS shadowRoot.querySelector('.tracks-panel').style.right is &quot;217px&quot;
+PASS shadowRoot.querySelector('.tracks-panel').style.bottom is &quot;101px&quot;
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowpanelfullscreenhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html (0 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html                                (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+&lt;!DOCTYPE html&gt;&lt;!-- webkit-test-runner [ enableModernMediaControls=true ] --&gt;
+&lt;script src=&quot;../../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+&lt;body&gt;
+&lt;video src=&quot;../../content/CC+Subtitles.mov&quot; style=&quot;width: 320px; height: 240px;&quot; controls autoplay&gt;&lt;/video&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+
+window.jsTestIsAsync = true;
+
+description(&quot;Showing the tracks panel in fullscreen.&quot;);
+
+const media = document.querySelector(&quot;video&quot;);
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener(&quot;webkitbeginfullscreen&quot;, () =&gt; {
+    debug(&quot;webkitbeginfullscreen&quot;);
+});
+
+media.addEventListener(&quot;webkitfullscreenchange&quot;, () =&gt; {
+    if (media.webkitDisplayingFullscreen) {
+        window.requestAnimationFrame(() =&gt; {
+            clickOnButton(&quot;tracks&quot;);
+            window.requestAnimationFrame(() =&gt; {
+                window.requestAnimationFrame(() =&gt; {
+                    shouldBeEqualToString(&quot;shadowRoot.querySelector('.tracks-panel').style.right&quot;, &quot;217px&quot;);
+                    shouldBeEqualToString(&quot;shadowRoot.querySelector('.tracks-panel').style.bottom&quot;, &quot;101px&quot;);
+
+                    debug(&quot;&quot;);
+                    media.remove();
+                    finishJSTest();
+                });
+            });
+        });
+    }
+});
+
+media.addEventListener(&quot;play&quot;, () =&gt; {
+    media.pause();
+    window.requestAnimationFrame(() =&gt; clickOnButton(&quot;fullscreen&quot;));
+});
+
+function clickOnButton(name)
+{
+    const bounds = shadowRoot.querySelector(`button.${name}`).getBoundingClientRect();
+    eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+&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 (209522 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/ChangeLog        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -1,5 +1,33 @@
</span><span class="cx"> 2016-12-07  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        [Modern Media Controls] Tracks panel does not display in the right location in fullscreen and cannot be dismissed
+        https://bugs.webkit.org/show_bug.cgi?id=165575
+
+        Reviewed by Dean Jackson.
+
+        We position the tracks panel programmatically based on the current bounds of the fullscreen button in fullscreen.
+        This allows for the tracks panel to be shown in the right spot even after dragging the controls bar. We also use
+        the fullscreen media controls as the target for tracking &quot;mousedown&quot; events when the tracks panel is shown in a
+        fullscreen presentation.
+
+        Tests: media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html
+               media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html
+
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+        (.media-controls.mac.fullscreen .scrubber):
+        (.media-controls.mac.fullscreen .tracks-panel): Deleted.
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+        (MacOSFullscreenMediaControls.prototype.showTracksPanel):
+        * Modules/modern-media-controls/controls/tracks-panel.js:
+        (TracksPanel.prototype.presentInParent):
+        (TracksPanel.prototype.hide):
+        (TracksPanel.prototype.get bottomY):
+        (TracksPanel.prototype.set bottomY):
+        (TracksPanel.prototype.commitProperty):
+        (TracksPanel.prototype._mousedownTarget):
+
+2016-12-07  Antoine Quint  &lt;graouts@apple.com&gt;
+
</ins><span class="cx">         [Modern Media Controls] Use a small picture-in-picture button in fullscreen
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=165587
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (209522 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css        2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -132,11 +132,3 @@
</span><span class="cx"> .media-controls.mac.fullscreen .scrubber {
</span><span class="cx">     top: 7px;
</span><span class="cx"> }
</span><del>-
-/* Tracks Panel */
-
-.media-controls.mac.fullscreen .tracks-panel {
-    /* Half of the screen width minus half of the controls bar width minus the distance to the right edge of the tracks button */
-    right: calc(50% - var(--controls-bar-width) / 2 + var(--tracks-panel-right-margin));
-    bottom: 234px;
-}
</del></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (209522 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js        2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -64,6 +64,17 @@
</span><span class="cx">         this.element.addEventListener(&quot;mousedown&quot;, this);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    // Public
+
+    showTracksPanel()
+    {
+        super.showTracksPanel();
+
+        const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect();
+        this.tracksPanel.rightX = window.innerWidth - tracksButtonBounds.right;
+        this.tracksPanel.bottomY = window.innerHeight - tracksButtonBounds.top + 1;
+    }
+
</ins><span class="cx">     // Protected
</span><span class="cx"> 
</span><span class="cx">     handleEvent(event)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstrackspaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js (209522 => 209523)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js        2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js        2016-12-08 05:51:05 UTC (rev 209523)
</span><span class="lines">@@ -6,6 +6,7 @@
</span><span class="cx">     {
</span><span class="cx">         super(`&lt;div class=&quot;tracks-panel&quot;&gt;`);
</span><span class="cx">         this._rightX = 0;
</span><ins>+        this._bottomY = 0;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -27,7 +28,7 @@
</span><span class="cx">         this.element.removeEventListener(&quot;transitionend&quot;, this);
</span><span class="cx">         this.element.classList.remove(&quot;fade-out&quot;);
</span><span class="cx"> 
</span><del>-        window.addEventListener(&quot;mousedown&quot;, this, true);
</del><ins>+        this._mousedownTarget().addEventListener(&quot;mousedown&quot;, this, true);
</ins><span class="cx">         window.addEventListener(&quot;keydown&quot;, this, true);
</span><span class="cx"> 
</span><span class="cx">         this._focusedTrackNode = null;
</span><span class="lines">@@ -38,7 +39,7 @@
</span><span class="cx">         if (!this.presented)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        window.removeEventListener(&quot;mousedown&quot;, this, true);
</del><ins>+        this._mousedownTarget().removeEventListener(&quot;mousedown&quot;, this, true);
</ins><span class="cx">         window.removeEventListener(&quot;keydown&quot;, this, true);
</span><span class="cx"> 
</span><span class="cx">         this.element.addEventListener(&quot;transitionend&quot;, this);
</span><span class="lines">@@ -45,6 +46,20 @@
</span><span class="cx">         this.element.classList.add(&quot;fade-out&quot;);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get bottomY()
+    {
+        return this._bottomY;
+    }
+
+    set bottomY(bottomY)
+    {
+        if (this._bottomY === bottomY)
+            return;
+
+        this._bottomY = bottomY;
+        this.markDirtyProperty(&quot;bottomY&quot;);
+    }
+
</ins><span class="cx">     get rightX()
</span><span class="cx">     {
</span><span class="cx">         return this._rightX;
</span><span class="lines">@@ -82,6 +97,8 @@
</span><span class="cx">     {
</span><span class="cx">         if (propertyName === &quot;rightX&quot;)
</span><span class="cx">             this.element.style.right = `${this._rightX}px`;
</span><ins>+        else if (propertyName === &quot;bottomY&quot;)
+            this.element.style.bottom = `${this._bottomY}px`;
</ins><span class="cx">         else
</span><span class="cx">             super.commitProperty(propertyName);
</span><span class="cx">     }
</span><span class="lines">@@ -103,6 +120,14 @@
</span><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><ins>+    _mousedownTarget()
+    {
+        const mediaControls = this.parentOfType(MacOSFullscreenMediaControls);
+        if (mediaControls)
+            return mediaControls.element;
+        return window;
+    }
+
</ins><span class="cx">     _childrenFromDataSource()
</span><span class="cx">     {
</span><span class="cx">         const children = [];
</span></span></pre>
</div>
</div>

</body>
</html>