<!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>[209227] 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/209227">209227</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-01 18:07:35 -0800 (Thu, 01 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Show and populate the tracks panel
https://bugs.webkit.org/show_bug.cgi?id=165284
Reviewed by Dean Jackson.
We added a TracksPanel in https://bugs.webkit.org/show_bug.cgi?id=165239 which allows to
show a list of media tracks and text tracks to choose from. We now show this panel when
clicking on the tracks button in the controls bar and populate its content with the
list of audio and text tracks for the media element. As an item is picked from the tracks
panel, we toggle the represented track's enabled state and dismiss the panel.
We also pick up the text track container display mostly unchanged from current media controls.
Tests: media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html
media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.showTracksPanel):
* Modules/modern-media-controls/controls/text-tracks.css: Added.
(video::-webkit-media-text-track-container):
(video::cue):
(video::-webkit-media-text-track-display):
(video::-webkit-media-text-track-display-backdrop):
(video::cue(:future)):
(video::-webkit-media-text-track-container b):
(video::-webkit-media-text-track-container u):
(video::-webkit-media-text-track-container i):
(video::-webkit-media-text-track-container .hidden):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
* Modules/modern-media-controls/media/tracks-support.js:
(TracksSupport):
(TracksSupport.prototype.destroy):
(TracksSupport.prototype.buttonWasClicked):
(TracksSupport.prototype.tracksPanelNumberOfSections):
(TracksSupport.prototype.tracksPanelTitleForSection):
(TracksSupport.prototype.tracksPanelNumberOfTracksInSection):
(TracksSupport.prototype.tracksPanelTitleForTrackInSection):
(TracksSupport.prototype.tracksPanelIsTrackInSectionSelected):
(TracksSupport.prototype.tracksPanelSelectionDidChange):
(TracksSupport.prototype.syncControl):
(TracksSupport.prototype._textTracks):
(TracksSupport.prototype._audioTracks):
(TracksSupport.prototype._canPickAudioTracks):
(TracksSupport.prototype._canPickTextTracks):
(TracksSupport.prototype._sortedTrackList):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsplatformmacTestExpectations">trunk/LayoutTests/platform/mac/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediatrackssupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/tracks-support.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportclicktrackinpanelexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportclicktrackinpanelhtml">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowandpopulatepanelexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowandpopulatepanelhtml">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstexttrackscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/LayoutTests/ChangeLog 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2016-12-01 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Show and populate the tracks panel
+ https://bugs.webkit.org/show_bug.cgi?id=165284
+
+ Reviewed by Dean Jackson.
+
+ Add two new tests to check that we correctly show, populate and interact with the tracks panel.
+
+ * media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html: Added.
+ * platform/ios-simulator/TestExpectations:
+ * platform/mac/TestExpectations:
+
</ins><span class="cx"> 2016-12-01 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Removing Release-only flag from flaky test http/tests/cache/disk-cache/disk-cache-request-max-stale.html
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportclicktrackinpanelexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt (0 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel-expected.txt 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -0,0 +1,16 @@
</span><ins>+Clicking on a track in the tracks panel.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS media.audioTracks[1].enabled is false
+
+Clicking on the tracks button
+Clicking on second audio track in tracks panel
+Obtained change event on media audio tracks
+PASS media.audioTracks[1].enabled is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportclicktrackinpanelhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html (0 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -0,0 +1,58 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/CC+Subtitles.mov" style="width: 640px; height: 360px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Clicking on a track in the tracks panel.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+ media.pause();
+
+ shouldBeFalse("media.audioTracks[1].enabled");
+ debug("");
+
+ media.audioTracks.addEventListener("change", audioTracksDidChange);
+ window.requestAnimationFrame(() => {
+ clickOnTracksButton();
+ window.requestAnimationFrame(clickOnSecondAudioTrack);
+ });
+});
+
+function clickOnTracksButton()
+{
+ debug("Clicking on the tracks button");
+ const bounds = shadowRoot.lastChild.querySelector("button.tracks").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+function clickOnSecondAudioTrack()
+{
+ debug("Clicking on second audio track in tracks panel");
+ const secondAudioTrack = shadowRoot.lastChild.querySelectorAll("li")[1];
+ const bounds = secondAudioTrack.getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+function audioTracksDidChange()
+{
+ debug("Obtained change event on media audio tracks");
+ shouldBeTrue("media.audioTracks[1].enabled");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowandpopulatepanelexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt (0 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel-expected.txt 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Showing and populating the tracks panel.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Audio
+ English Sound
+ French Sound
+ Spanish Sound
+
+Subtitles
+ Off
+ Auto (Recommended)
+ English Subtitles
+ French Subtitles
+ German Subtitles
+ Spanish Subtitles
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportshowandpopulatepanelhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html (0 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -0,0 +1,46 @@
</span><ins>+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<video src="../../content/CC+Subtitles.mov" style="width: 640px; height: 360px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Showing and populating the tracks panel.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+ media.pause();
+ window.requestAnimationFrame(() => {
+ clickOnTracksButton();
+ window.requestAnimationFrame(() => {
+ listContentsOfTracksPanel();
+ media.remove();
+ finishJSTest();
+ });
+ });
+});
+
+function clickOnTracksButton()
+{
+ const bounds = shadowRoot.lastChild.querySelector("button.tracks").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+function listContentsOfTracksPanel()
+{
+ for (let section of shadowRoot.lastChild.querySelectorAll(".tracks-panel-section")) {
+ debug(section.querySelector("h3").textContent);
+ for (let item of section.querySelectorAll("li"))
+ debug(" " + item.textContent);
+ debug("");
+ }
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -2741,10 +2741,11 @@
</span><span class="cx"> # Only Mac has implemented DictionaryLookup
</span><span class="cx"> fast/layers/prevent-hit-test-during-layout.html [ Skip ]
</span><span class="cx">
</span><del>-# Internal APIs to test PiP and AirPlay are not available on iOS.
</del><ins>+# Internal APIs to test PiP and AirPlay are not available on iOS, and we don't support showing the tracks button on iOS.
</ins><span class="cx"> media/modern-media-controls/airplay-support/airplay-support.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/pip-support [ Skip ]
</span><span class="cx"> media/modern-media-controls/placard-support [ Skip ]
</span><ins>+media/modern-media-controls/tracks-support [ Skip ]
</ins><span class="cx"> media/modern-media-controls/audio [ Skip ]
</span><span class="cx">
</span><span class="cx"> # Mac-specific tests for fullscreen.
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/TestExpectations (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/TestExpectations 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -1453,6 +1453,8 @@
</span><span class="cx"> [ Yosemite ] media/modern-media-controls/audio [ Skip ]
</span><span class="cx"> [ Yosemite ] media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html [ Skip ]
</span><span class="cx"> [ Yosemite ] media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-keyboard.html [ Skip ]
</span><ins>+[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html [ Skip ]
+[ Yosemite ] media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html [ Skip ]
</ins><span class="cx">
</span><span class="cx"> webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]
</span><span class="cx"> webkit.org/b/164323 media/modern-media-controls/airplay-support/airplay-support.html [ Pass Failure ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/Source/WebCore/ChangeLog 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -1,3 +1,52 @@
</span><ins>+2016-12-01 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Show and populate the tracks panel
+ https://bugs.webkit.org/show_bug.cgi?id=165284
+
+ Reviewed by Dean Jackson.
+
+ We added a TracksPanel in https://bugs.webkit.org/show_bug.cgi?id=165239 which allows to
+ show a list of media tracks and text tracks to choose from. We now show this panel when
+ clicking on the tracks button in the controls bar and populate its content with the
+ list of audio and text tracks for the media element. As an item is picked from the tracks
+ panel, we toggle the represented track's enabled state and dismiss the panel.
+
+ We also pick up the text track container display mostly unchanged from current media controls.
+
+ Tests: media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html
+ media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html
+
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.showTracksPanel):
+ * Modules/modern-media-controls/controls/text-tracks.css: Added.
+ (video::-webkit-media-text-track-container):
+ (video::cue):
+ (video::-webkit-media-text-track-display):
+ (video::-webkit-media-text-track-display-backdrop):
+ (video::cue(:future)):
+ (video::-webkit-media-text-track-container b):
+ (video::-webkit-media-text-track-container u):
+ (video::-webkit-media-text-track-container i):
+ (video::-webkit-media-text-track-container .hidden):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController):
+ * Modules/modern-media-controls/media/tracks-support.js:
+ (TracksSupport):
+ (TracksSupport.prototype.destroy):
+ (TracksSupport.prototype.buttonWasClicked):
+ (TracksSupport.prototype.tracksPanelNumberOfSections):
+ (TracksSupport.prototype.tracksPanelTitleForSection):
+ (TracksSupport.prototype.tracksPanelNumberOfTracksInSection):
+ (TracksSupport.prototype.tracksPanelTitleForTrackInSection):
+ (TracksSupport.prototype.tracksPanelIsTrackInSectionSelected):
+ (TracksSupport.prototype.tracksPanelSelectionDidChange):
+ (TracksSupport.prototype.syncControl):
+ (TracksSupport.prototype._textTracks):
+ (TracksSupport.prototype._audioTracks):
+ (TracksSupport.prototype._canPickAudioTracks):
+ (TracksSupport.prototype._canPickTextTracks):
+ (TracksSupport.prototype._sortedTrackList):
+
</ins><span class="cx"> 2016-12-01 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> Rare crash when preparing to print
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -118,6 +118,12 @@
</span><span class="cx"> this._volumeSliderContainer.x = this._rightContainer.x + this.muteButton.x;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ showTracksPanel()
+ {
+ super.showTracksPanel();
+ this.tracksPanel.rightX = this._rightContainer.width - this.tracksButton.x - this.tracksButton.width;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> handleEvent(event)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstexttrackscss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css (0 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -0,0 +1,84 @@
</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.
+ */
+
+video::-webkit-media-text-track-container {
+ position: relative;
+ width: 100%;
+ bottom: 50px;
+ overflow: hidden;
+ padding-bottom: 5px;
+ z-index: 0;
+
+ text-align: center;
+ color: rgba(255, 255, 255, 1);
+
+ letter-spacing: normal;
+ word-spacing: normal;
+ text-transform: none;
+ text-indent: 0;
+ text-decoration: none;
+ pointer-events: none;
+ -webkit-user-select: none;
+
+ -webkit-flex: 1 1 auto;
+
+ -webkit-line-box-contain: block inline-box replaced;
+}
+
+video::cue {
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+video::-webkit-media-text-track-display {
+ position: absolute;
+ overflow: hidden;
+ white-space: pre-wrap;
+ -webkit-box-sizing: border-box;
+ font: 22px sans-serif;
+}
+
+video::-webkit-media-text-track-display-backdrop {
+ display: inline-block;
+}
+
+video::cue(:future) {
+ color: gray;
+}
+
+video::-webkit-media-text-track-container b {
+ font-weight: bold;
+}
+
+video::-webkit-media-text-track-container u {
+ text-decoration: underline;
+}
+
+video::-webkit-media-text-track-container i {
+ font-style: italic;
+}
+
+video::-webkit-media-text-track-container .hidden {
+ display: none;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -32,8 +32,10 @@
</span><span class="cx"> this.media = media;
</span><span class="cx"> this.host = host;
</span><span class="cx">
</span><del>- if (host)
</del><ins>+ if (host) {
</ins><span class="cx"> media.addEventListener("webkitpresentationmodechanged", this);
</span><ins>+ shadowRoot.appendChild(host.textTrackContainer);
+ }
</ins><span class="cx">
</span><span class="cx"> this._updateControlsIfNeeded();
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediatrackssupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/tracks-support.js (209226 => 209227)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/tracks-support.js 2016-12-02 01:30:46 UTC (rev 209226)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/tracks-support.js 2016-12-02 02:07:35 UTC (rev 209227)
</span><span class="lines">@@ -33,9 +33,12 @@
</span><span class="cx"> if (!this.control)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ this.mediaController.controls.tracksPanel.dataSource = this;
+ this.mediaController.controls.tracksPanel.uiDelegate = this;
+
</ins><span class="cx"> const media = mediaController.media;
</span><span class="cx"> for (let tracks of [media.audioTracks, media.textTracks]) {
</span><del>- for (let eventType of ["addtrack", "removetrack"])
</del><ins>+ for (let eventType of ["addtrack", "change", "removetrack"])
</ins><span class="cx"> tracks.addEventListener(eventType, this);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -48,7 +51,7 @@
</span><span class="cx">
</span><span class="cx"> const media = this.mediaController.media;
</span><span class="cx"> for (let tracks of [media.audioTracks, media.textTracks]) {
</span><del>- for (let eventType of ["addtrack", "removetrack"])
</del><ins>+ for (let eventType of ["addtrack", "change", "removetrack"])
</ins><span class="cx"> tracks.removeEventListener(eventType, this);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -67,18 +70,100 @@
</span><span class="cx">
</span><span class="cx"> buttonWasClicked(control)
</span><span class="cx"> {
</span><del>- // FIXME: Show tracks menu.
</del><ins>+ this.mediaController.controls.showTracksPanel();
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ tracksPanelNumberOfSections()
+ {
+ let numberOfSections = 0;
+ if (this._canPickAudioTracks())
+ numberOfSections++;
+ if (this._canPickTextTracks())
+ numberOfSections++;
+ return numberOfSections;
+ }
+
+ tracksPanelTitleForSection(sectionIndex)
+ {
+ if (sectionIndex == 0 && this._canPickAudioTracks())
+ return UIString("Audio");
+ return UIString("Subtitles");
+ }
+
+ tracksPanelNumberOfTracksInSection(sectionIndex)
+ {
+ if (sectionIndex == 0 && this._canPickAudioTracks())
+ return this._audioTracks().length;
+ return this._textTracks().length;
+ }
+
+ tracksPanelTitleForTrackInSection(trackIndex, sectionIndex)
+ {
+ let track;
+ if (sectionIndex == 0 && this._canPickAudioTracks())
+ track = this._audioTracks()[trackIndex];
+ else
+ track = this._textTracks()[trackIndex];
+
+ if (this.mediaController.host)
+ return this.mediaController.host.displayNameForTrack(track);
+ return track.label;
+ }
+
+ tracksPanelIsTrackInSectionSelected(trackIndex, sectionIndex)
+ {
+ if (sectionIndex == 0 && this._canPickAudioTracks())
+ return this._audioTracks()[trackIndex].enabled;
+ return this._textTracks()[trackIndex].mode !== "disabled";
+ }
+
+ tracksPanelSelectionDidChange(trackIndex, sectionIndex)
+ {
+ if (sectionIndex == 0 && this._canPickAudioTracks()) {
+ let track = this._audioTracks()[trackIndex];
+ track.enabled = !track.enabled;
+ } else {
+ let track = this._textTracks()[trackIndex];
+ track.mode = track.mode === "disabled" ? "showing" : "disabled";
+ }
+
+ this.mediaController.controls.hideTracksPanel();
+ }
+
</ins><span class="cx"> syncControl()
</span><span class="cx"> {
</span><del>- const media = this.mediaController.media;
- const host = this.mediaController.host;
</del><ins>+ this.control.enabled = this._canPickAudioTracks() || this._canPickTextTracks();
+ }
</ins><span class="cx">
</span><del>- const textTracks = host ? host.sortedTrackListForMenu(media.textTracks) : media.textTracks;
- const audioTracks = host ? host.sortedTrackListForMenu(media.audioTracks) : media.audioTracks;
</del><ins>+ // Private
</ins><span class="cx">
</span><del>- this.control.enabled = (textTracks && textTracks.length > 0) || (audioTracks && audioTracks.length > 1);
</del><ins>+ _textTracks()
+ {
+ return this._sortedTrackList(this.mediaController.media.textTracks);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ _audioTracks()
+ {
+ return this._sortedTrackList(this.mediaController.media.audioTracks);
+ }
+
+ _canPickAudioTracks()
+ {
+ const audioTracks = this._audioTracks();
+ return audioTracks && audioTracks.length > 1;
+ }
+
+ _canPickTextTracks()
+ {
+ const textTracks = this._textTracks();
+ return textTracks && textTracks.length > 0;
+ }
+
+ _sortedTrackList(tracks)
+ {
+ if (this.mediaController.host)
+ return this.mediaController.host.sortedTrackListForMenu(tracks);
+ return tracks;
+ }
+
</ins><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>