<!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>[213454] 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/213454">213454</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-06 09:49:50 -0800 (Mon, 06 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Tracks panel should clip and scroll content when numerous tracks are available
https://bugs.webkit.org/show_bug.cgi?id=169201
<rdar://problem/30867979>
Patch by Antoine Quint <graouts@apple.com> on 2017-03-06
Reviewed by Eric Carlson.
Source/WebCore:
We now position and size the tracks panel dynamically and ensure a max-height is applied
to the panel so that it allows a margin of 10px above it within the media controls. We also
apply that same max-height to a new intermediary scrollable container for the track lists,
so that it scrolls independently of the container and the background tint.
Test: media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls.prototype.showTracksPanel): Deleted.
* Modules/modern-media-controls/controls/macos-inline-media-controls.css:
(.media-controls.mac.inline .volume.slider):
(.media-controls.mac.inline .tracks-panel): Deleted.
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.showTracksPanel): Deleted.
* Modules/modern-media-controls/controls/macos-media-controls.js:
(MacOSMediaControls.prototype.showTracksPanel):
* Modules/modern-media-controls/controls/tracks-panel.css:
(.tracks-panel > .background-tint > div,):
(.tracks-panel > .scrollable-container):
(.tracks-panel section):
(.tracks-panel section:first-of-type):
(.tracks-panel section > h3):
(.tracks-panel section > ul):
(.tracks-panel section > ul > li):
(.tracks-panel section > ul > li:focus):
(.tracks-panel section > ul > li.selected:before):
(.tracks-panel section > ul > li.animated):
(.tracks-panel > .background-tint > div): Deleted.
(.tracks-panel > section): Deleted.
(.tracks-panel > section:first-of-type): Deleted.
(.tracks-panel > section > h3): Deleted.
(.tracks-panel > section > ul): Deleted.
(.tracks-panel > section > ul > li): Deleted.
(.tracks-panel > section > ul > li:focus): Deleted.
(.tracks-panel > section > ul > li.selected:before): Deleted.
(.tracks-panel > section > ul > li.animated): Deleted.
* Modules/modern-media-controls/controls/tracks-panel.js:
(TracksPanel.prototype.presentInParent):
(TracksPanel.prototype.get maxHeight):
(TracksPanel.prototype.set maxHeight):
(TracksPanel.prototype.commitProperty):
(TracksPanel.prototype._childrenFromDataSource):
LayoutTests:
Rebaseline a couple of existing tests to account for the DOM structure change in
the tracks panel and the fact that positioning is now dependent on the bounds of
the tracks button.
We also add a new test that checks that the tracks panel is positioned and sized
correctly to ensure that it can be scrolled when it has too many tracks to fit.
* media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt:
* media/modern-media-controls/tracks-panel/tracks-panel-population.html:
* media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt: Added.
* media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html: Added.
* media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt:
* media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpopulationexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpopulationhtml">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelselecttrackwithmouseexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelselecttrackwithmousehtml">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstrackspanelcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css</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="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpositionandsizeexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpositionandsizehtml">trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/LayoutTests/ChangeLog 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2017-03-06 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Tracks panel should clip and scroll content when numerous tracks are available
+ https://bugs.webkit.org/show_bug.cgi?id=169201
+ <rdar://problem/30867979>
+
+ Reviewed by Eric Carlson.
+
+ Rebaseline a couple of existing tests to account for the DOM structure change in
+ the tracks panel and the fact that positioning is now dependent on the bounds of
+ the tracks button.
+
+ We also add a new test that checks that the tracks panel is positioned and sized
+ correctly to ensure that it can be scrolled when it has too many tracks to fit.
+
+ * media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt:
+ * media/modern-media-controls/tracks-panel/tracks-panel-population.html:
+ * media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt: Added.
+ * media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html: Added.
+ * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt:
+ * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html:
+
</ins><span class="cx"> 2017-03-06 Manuel Rego Casasnovas <rego@igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Stretch should grow and shrink items to fit its grid area
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpopulationexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -5,47 +5,47 @@
</span><span class="cx">
</span><span class="cx"> PASS tracksPanel.presented is true
</span><span class="cx"> PASS tracksPanel.parent is container
</span><del>-PASS tracksPanel.children.length is numberOfSections + 1
</del><ins>+PASS scrollContainer.children.length is numberOfSections
</ins><span class="cx">
</span><span class="cx"> Hierarchy for section #0
</span><del>-PASS tracksPanel.children[1].element.localName is "section"
-PASS tracksPanel.children[1].children.length is 2
-PASS tracksPanel.children[1].children[0].element.localName is "h3"
-PASS tracksPanel.children[1].children[0].element.textContent is "Title #0"
-PASS tracksPanel.children[1].children[1].element.localName is "ul"
-PASS tracksPanel.children[1].children[1].children.length is 3
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x0"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is "selected"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x1"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x2"
</del><ins>+PASS scrollContainer.children[0].element.localName is "section"
+PASS scrollContainer.children[0].children.length is 2
+PASS scrollContainer.children[0].children[0].element.localName is "h3"
+PASS scrollContainer.children[0].children[0].element.textContent is "Title #0"
+PASS scrollContainer.children[0].children[1].element.localName is "ul"
+PASS scrollContainer.children[0].children[1].children.length is 3
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x0"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is "selected"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x1"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x2"
</ins><span class="cx">
</span><span class="cx"> Hierarchy for section #1
</span><del>-PASS tracksPanel.children[2].element.localName is "section"
-PASS tracksPanel.children[2].children.length is 2
-PASS tracksPanel.children[2].children[0].element.localName is "h3"
-PASS tracksPanel.children[2].children[0].element.textContent is "Title #1"
-PASS tracksPanel.children[2].children[1].element.localName is "ul"
-PASS tracksPanel.children[2].children[1].children.length is 5
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x0"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x1"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x2"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is "selected"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x3"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x4"
</del><ins>+PASS scrollContainer.children[1].element.localName is "section"
+PASS scrollContainer.children[1].children.length is 2
+PASS scrollContainer.children[1].children[0].element.localName is "h3"
+PASS scrollContainer.children[1].children[0].element.textContent is "Title #1"
+PASS scrollContainer.children[1].children[1].element.localName is "ul"
+PASS scrollContainer.children[1].children[1].children.length is 5
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x0"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x1"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x2"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "selected"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x3"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
+PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x4"
</ins><span class="cx">
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpopulationhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -41,24 +41,26 @@
</span><span class="cx"> const container = new LayoutNode;
</span><span class="cx"> tracksPanel.presentInParent(container);
</span><span class="cx">
</span><ins>+const scrollContainer = tracksPanel.children[1];
+
</ins><span class="cx"> shouldBeTrue("tracksPanel.presented");
</span><span class="cx"> shouldBe("tracksPanel.parent", "container");
</span><del>-shouldBe("tracksPanel.children.length", "numberOfSections + 1");
</del><ins>+shouldBe("scrollContainer.children.length", "numberOfSections");
</ins><span class="cx">
</span><span class="cx"> let sectionIndex, trackIndex;
</span><span class="cx"> for (sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex) {
</span><span class="cx"> debug("");
</span><span class="cx"> debug(`Hierarchy for section #${sectionIndex}`);
</span><del>- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].element.localName`, "section");
- shouldBe(`tracksPanel.children[${sectionIndex + 1}].children.length`, "2");
- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[0].element.localName`, "h3");
- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));
- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].element.localName`, "ul");
- shouldBe(`tracksPanel.children[${sectionIndex + 1}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);
</del><ins>+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].element.localName`, "section");
+ shouldBe(`scrollContainer.children[${sectionIndex}].children.length`, "2");
+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.localName`, "h3");
+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));
+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].element.localName`, "ul");
+ shouldBe(`scrollContainer.children[${sectionIndex}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);
</ins><span class="cx"> for (trackIndex = 0; trackIndex < numberOfTracksInSection[sectionIndex]; ++trackIndex) {
</span><del>- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.localName`, "li");
- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");
- shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));
</del><ins>+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.localName`, "li");
+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");
+ shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpositionandsizeexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt (0 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing positioning and sizing of the tracks panel.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.tracksButton.element.getBoundingClientRect().right became different from 0
+mediaControls.showTracksPanel()
+PASS mediaControls.tracksPanel.element.style.right is "69px"
+PASS mediaControls.tracksPanel.element.style.bottom is "51px"
+PASS getComputedStyle(mediaControls.tracksPanel.element).height is "239px"
+PASS getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).height is "239px"
+PASS getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).overflowY is "scroll"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelpositionandsizehtmlfromrev213453trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelselecttrackwithmousehtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html (from rev 213453, trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html) (0 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -0,0 +1,67 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+ .media-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+</style>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing positioning and sizing of the tracks panel.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+mediaControls.tracksPanel.dataSource = {
+ tracksPanelNumberOfSections: function()
+ {
+ return 1;
+ },
+
+ tracksPanelTitleForSection: function(sectionIndex)
+ {
+ return `Title`;
+ },
+
+ tracksPanelNumberOfTracksInSection: function(sectionIndex)
+ {
+ return 20;
+ },
+
+ tracksPanelTitleForTrackInSection: function(trackIndex, sectionIndex)
+ {
+ return `Track`;
+ },
+
+ tracksPanelIsTrackInSectionSelected: function(trackIndex, sectionIndex)
+ {
+ return false;
+ }
+};
+
+document.body.appendChild(mediaControls.element);
+
+shouldBecomeDifferent("mediaControls.tracksButton.element.getBoundingClientRect().right", "0", () => {
+ debug("mediaControls.showTracksPanel()");
+ mediaControls.showTracksPanel();
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("mediaControls.tracksPanel.element.style.right", "69px");
+ shouldBeEqualToString("mediaControls.tracksPanel.element.style.bottom", "51px");
+ shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element).height", "239px");
+ shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).height", "239px");
+ shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).overflowY", "scroll");
+ debug("");
+ mediaControls.element.remove();
+ finishJSTest();
+ });
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelselecttrackwithmouseexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -3,6 +3,7 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><ins>+PASS mediaControls.tracksButton.element.getBoundingClientRect().right became different from 0
</ins><span class="cx"> mediaControls.showTracksPanel()
</span><span class="cx">
</span><span class="cx"> Mousing over the second track in the panel
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackspaneltrackspanelselecttrackwithmousehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -62,11 +62,10 @@
</span><span class="cx">
</span><span class="cx"> let trackElement;
</span><span class="cx">
</span><del>-debug("mediaControls.showTracksPanel()");
-mediaControls.showTracksPanel();
</del><ins>+shouldBecomeDifferent("mediaControls.tracksButton.element.getBoundingClientRect().right", "0", () => {
+ debug("mediaControls.showTracksPanel()");
+ mediaControls.showTracksPanel();
</ins><span class="cx">
</span><del>-scheduler.frameDidFire = function()
-{
</del><span class="cx"> window.requestAnimationFrame(() => {
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Mousing over the second track in the panel");
</span><span class="lines">@@ -84,8 +83,7 @@
</span><span class="cx"> const bounds = trackElement.getBoundingClientRect();
</span><span class="cx"> eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
</span><span class="cx"> });
</span><del>- scheduler.frameDidFire = null;
-}
</del><ins>+});
</ins><span class="cx">
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/ChangeLog 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -1,3 +1,54 @@
</span><ins>+2017-03-06 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Tracks panel should clip and scroll content when numerous tracks are available
+ https://bugs.webkit.org/show_bug.cgi?id=169201
+ <rdar://problem/30867979>
+
+ Reviewed by Eric Carlson.
+
+ We now position and size the tracks panel dynamically and ensure a max-height is applied
+ to the panel so that it allows a margin of 10px above it within the media controls. We also
+ apply that same max-height to a new intermediary scrollable container for the track lists,
+ so that it scrolls independently of the container and the background tint.
+
+ Test: media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls.prototype.showTracksPanel): Deleted.
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.css:
+ (.media-controls.mac.inline .volume.slider):
+ (.media-controls.mac.inline .tracks-panel): Deleted.
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.showTracksPanel): Deleted.
+ * Modules/modern-media-controls/controls/macos-media-controls.js:
+ (MacOSMediaControls.prototype.showTracksPanel):
+ * Modules/modern-media-controls/controls/tracks-panel.css:
+ (.tracks-panel > .background-tint > div,):
+ (.tracks-panel > .scrollable-container):
+ (.tracks-panel section):
+ (.tracks-panel section:first-of-type):
+ (.tracks-panel section > h3):
+ (.tracks-panel section > ul):
+ (.tracks-panel section > ul > li):
+ (.tracks-panel section > ul > li:focus):
+ (.tracks-panel section > ul > li.selected:before):
+ (.tracks-panel section > ul > li.animated):
+ (.tracks-panel > .background-tint > div): Deleted.
+ (.tracks-panel > section): Deleted.
+ (.tracks-panel > section:first-of-type): Deleted.
+ (.tracks-panel > section > h3): Deleted.
+ (.tracks-panel > section > ul): Deleted.
+ (.tracks-panel > section > ul > li): Deleted.
+ (.tracks-panel > section > ul > li:focus): Deleted.
+ (.tracks-panel > section > ul > li.selected:before): Deleted.
+ (.tracks-panel > section > ul > li.animated): Deleted.
+ * Modules/modern-media-controls/controls/tracks-panel.js:
+ (TracksPanel.prototype.presentInParent):
+ (TracksPanel.prototype.get maxHeight):
+ (TracksPanel.prototype.set maxHeight):
+ (TracksPanel.prototype.commitProperty):
+ (TracksPanel.prototype._childrenFromDataSource):
+
</ins><span class="cx"> 2017-03-06 Manuel Rego Casasnovas <rego@igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Stretch should grow and shrink items to fit its grid area
</span></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 (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -76,17 +76,6 @@
</span><span class="cx"> this.controlsBar.element.addEventListener("mousedown", this);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // 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;
- }
-
</del><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> handleEvent(event)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -110,9 +110,3 @@
</span><span class="cx"> left: 11px;
</span><span class="cx"> top: 10px;
</span><span class="cx"> }
</span><del>-
-/* Tracks Panel */
-
-.media-controls.mac.inline .tracks-panel {
- bottom: 51px;
-}
</del></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 (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -79,12 +79,6 @@
</span><span class="cx"> this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- showTracksPanel()
- {
- super.showTracksPanel();
- this.tracksPanel.rightX = this.rightContainer.width - this.tracksButton.x - this.tracksButton.width;
- }
-
</del><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> handleEvent(event)
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -49,6 +49,12 @@
</span><span class="cx"> this.tracksButton.element.blur();
</span><span class="cx"> this.controlsBar.userInteractionEnabled = false;
</span><span class="cx"> this.tracksPanel.presentInParent(this);
</span><ins>+
+ const controlsBounds = this.element.getBoundingClientRect();
+ const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect();
+ this.tracksPanel.rightX = this.width - (tracksButtonBounds.right - controlsBounds.left);
+ this.tracksPanel.bottomY = this.height - (tracksButtonBounds.top - controlsBounds.top) + 1;
+ this.tracksPanel.maxHeight = this.height - this.tracksPanel.bottomY - 10;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> hideTracksPanel()
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstrackspanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -28,10 +28,16 @@
</span><span class="cx"> display: inline-block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > .background-tint > div {
</del><ins>+.tracks-panel > .background-tint > div,
+.tracks-panel > .scrollable-container {
</ins><span class="cx"> border-radius: 7px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.tracks-panel > .scrollable-container {
+ position: relative;
+ overflow-y: scroll;
+}
+
</ins><span class="cx"> .tracks-panel * {
</span><span class="cx"> font-size: 14px;
</span><span class="cx"> font-weight: 500;
</span><span class="lines">@@ -43,40 +49,40 @@
</span><span class="cx"> opacity: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section {
</del><ins>+.tracks-panel section {
</ins><span class="cx"> border-top: 2px solid rgb(104, 104, 104);
</span><span class="cx"> will-change: transform;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section:first-of-type {
</del><ins>+.tracks-panel section:first-of-type {
</ins><span class="cx"> border-top: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > h3 {
</del><ins>+.tracks-panel section > h3 {
</ins><span class="cx"> color: rgb(150, 150, 150);
</span><span class="cx"> padding: 5px 20px 1px 21px;
</span><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > ul {
</del><ins>+.tracks-panel section > ul {
</ins><span class="cx"> list-style-type: none;
</span><span class="cx"> margin-top: 0;
</span><span class="cx"> padding: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > ul > li {
</del><ins>+.tracks-panel section > ul > li {
</ins><span class="cx"> position: relative;
</span><span class="cx"> padding: 1px 20px 1px 33px;
</span><span class="cx"> color: white;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > ul > li:focus {
</del><ins>+.tracks-panel section > ul > li:focus {
</ins><span class="cx"> background-color: rgba(26, 68, 243, 0.6);
</span><span class="cx"> -webkit-backdrop-filter: saturate(180%) blur(20px);
</span><span class="cx"> outline: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > ul > li.selected:before {
</del><ins>+.tracks-panel section > ul > li.selected:before {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 3px;
</span><span class="cx"> left: 12px;
</span><span class="lines">@@ -85,7 +91,7 @@
</span><span class="cx"> content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tracks-panel > section > ul > li.animated {
</del><ins>+.tracks-panel section > ul > li.animated {
</ins><span class="cx"> animation-name: tracks-panel-item-selection;
</span><span class="cx"> animation-duration: 150ms;
</span><span class="cx"> animation-timing-function: step-end;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstrackspaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js (213453 => 213454)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js 2017-03-06 17:26:35 UTC (rev 213453)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js 2017-03-06 17:49:50 UTC (rev 213454)
</span><span class="lines">@@ -6,8 +6,11 @@
</span><span class="cx"> {
</span><span class="cx"> super(`<div class="tracks-panel"></div>`);
</span><span class="cx"> this._backgroundTint = new BackgroundTint;
</span><ins>+ this._scrollableContainer = new LayoutNode(`<div class="scrollable-container"></div>`);
</ins><span class="cx"> this._rightX = 0;
</span><span class="cx"> this._bottomY = 0;
</span><ins>+
+ this.children = [this._backgroundTint, this._scrollableContainer];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -22,7 +25,7 @@
</span><span class="cx"> if (this.parent === node)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this.children = this._childrenFromDataSource();
</del><ins>+ this._scrollableContainer.children = this._childrenFromDataSource();
</ins><span class="cx">
</span><span class="cx"> node.addChild(this);
</span><span class="cx">
</span><span class="lines">@@ -49,6 +52,20 @@
</span><span class="cx"> window.requestAnimationFrame(() => { this.element.classList.add("fade-out"); });
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get maxHeight()
+ {
+ return this._maxHeight;
+ }
+
+ set maxHeight(height)
+ {
+ if (this._maxHeight === height)
+ return;
+
+ this._maxHeight = height;
+ this.markDirtyProperty("maxHeight")
+ }
+
</ins><span class="cx"> get bottomY()
</span><span class="cx"> {
</span><span class="cx"> return this._bottomY;
</span><span class="lines">@@ -102,7 +119,10 @@
</span><span class="cx"> this.element.style.right = `${this._rightX}px`;
</span><span class="cx"> else if (propertyName === "bottomY")
</span><span class="cx"> this.element.style.bottom = `${this._bottomY}px`;
</span><del>- else
</del><ins>+ else if (propertyName === "maxHeight") {
+ this.element.style.maxHeight = `${this._maxHeight}px`;
+ this._scrollableContainer.element.style.maxHeight = `${this._maxHeight}px`;
+ } else
</ins><span class="cx"> super.commitProperty(propertyName);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -133,7 +153,7 @@
</span><span class="cx">
</span><span class="cx"> _childrenFromDataSource()
</span><span class="cx"> {
</span><del>- const children = [this._backgroundTint];
</del><ins>+ const children = [];
</ins><span class="cx">
</span><span class="cx"> this._trackNodes = [];
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>