Changeset 213454 in webkit
- Timestamp:
- Mar 6, 2017 9:49:50 AM (7 years ago)
- Location:
- trunk
- Files:
-
- 1 added
- 12 edited
- 1 copied
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r213449 r213454 1 2017-03-06 Antoine Quint <graouts@apple.com> 2 3 [Modern Media Controls] Tracks panel should clip and scroll content when numerous tracks are available 4 https://bugs.webkit.org/show_bug.cgi?id=169201 5 <rdar://problem/30867979> 6 7 Reviewed by Eric Carlson. 8 9 Rebaseline a couple of existing tests to account for the DOM structure change in 10 the tracks panel and the fact that positioning is now dependent on the bounds of 11 the tracks button. 12 13 We also add a new test that checks that the tracks panel is positioned and sized 14 correctly to ensure that it can be scrolled when it has too many tracks to fit. 15 16 * media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt: 17 * media/modern-media-controls/tracks-panel/tracks-panel-population.html: 18 * media/modern-media-controls/tracks-panel/tracks-panel-position-and-size-expected.txt: Added. 19 * media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html: Added. 20 * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt: 21 * media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html: 22 1 23 2017-03-06 Manuel Rego Casasnovas <rego@igalia.com> 2 24 -
trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt
r212280 r213454 6 6 PASS tracksPanel.presented is true 7 7 PASS tracksPanel.parent is container 8 PASS tracksPanel.children.length is numberOfSections + 18 PASS scrollContainer.children.length is numberOfSections 9 9 10 10 Hierarchy for section #0 11 PASS tracksPanel.children[1].element.localName is "section"12 PASS tracksPanel.children[1].children.length is 213 PASS tracksPanel.children[1].children[0].element.localName is "h3"14 PASS tracksPanel.children[1].children[0].element.textContent is "Title #0"15 PASS tracksPanel.children[1].children[1].element.localName is "ul"16 PASS tracksPanel.children[1].children[1].children.length is 317 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"18 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""19 PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x0"20 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"21 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is "selected"22 PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x1"23 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"24 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""25 PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x2"11 PASS scrollContainer.children[0].element.localName is "section" 12 PASS scrollContainer.children[0].children.length is 2 13 PASS scrollContainer.children[0].children[0].element.localName is "h3" 14 PASS scrollContainer.children[0].children[0].element.textContent is "Title #0" 15 PASS scrollContainer.children[0].children[1].element.localName is "ul" 16 PASS scrollContainer.children[0].children[1].children.length is 3 17 PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li" 18 PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is "" 19 PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x0" 20 PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li" 21 PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is "selected" 22 PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x1" 23 PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li" 24 PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is "" 25 PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x2" 26 26 27 27 Hierarchy for section #1 28 PASS tracksPanel.children[2].element.localName is "section"29 PASS tracksPanel.children[2].children.length is 230 PASS tracksPanel.children[2].children[0].element.localName is "h3"31 PASS tracksPanel.children[2].children[0].element.textContent is "Title #1"32 PASS tracksPanel.children[2].children[1].element.localName is "ul"33 PASS tracksPanel.children[2].children[1].children.length is 534 PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"35 PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""36 PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x0"37 PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"38 PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""39 PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x1"40 PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"41 PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""42 PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x2"43 PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"44 PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is "selected"45 PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x3"46 PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"47 PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""48 PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x4"28 PASS scrollContainer.children[1].element.localName is "section" 29 PASS scrollContainer.children[1].children.length is 2 30 PASS scrollContainer.children[1].children[0].element.localName is "h3" 31 PASS scrollContainer.children[1].children[0].element.textContent is "Title #1" 32 PASS scrollContainer.children[1].children[1].element.localName is "ul" 33 PASS scrollContainer.children[1].children[1].children.length is 5 34 PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li" 35 PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "" 36 PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x0" 37 PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li" 38 PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "" 39 PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x1" 40 PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li" 41 PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "" 42 PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x2" 43 PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li" 44 PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "selected" 45 PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x3" 46 PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li" 47 PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "" 48 PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x4" 49 49 50 50 PASS successfullyParsed is true -
trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html
r212280 r213454 42 42 tracksPanel.presentInParent(container); 43 43 44 const scrollContainer = tracksPanel.children[1]; 45 44 46 shouldBeTrue("tracksPanel.presented"); 45 47 shouldBe("tracksPanel.parent", "container"); 46 shouldBe(" tracksPanel.children.length", "numberOfSections + 1");48 shouldBe("scrollContainer.children.length", "numberOfSections"); 47 49 48 50 let sectionIndex, trackIndex; … … 50 52 debug(""); 51 53 debug(`Hierarchy for section #${sectionIndex}`); 52 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].element.localName`, "section");53 shouldBe(` tracksPanel.children[${sectionIndex + 1}].children.length`, "2");54 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[0].element.localName`, "h3");55 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));56 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[1].element.localName`, "ul");57 shouldBe(` tracksPanel.children[${sectionIndex + 1}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);54 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].element.localName`, "section"); 55 shouldBe(`scrollContainer.children[${sectionIndex}].children.length`, "2"); 56 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.localName`, "h3"); 57 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex)); 58 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].element.localName`, "ul"); 59 shouldBe(`scrollContainer.children[${sectionIndex}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`); 58 60 for (trackIndex = 0; trackIndex < numberOfTracksInSection[sectionIndex]; ++trackIndex) { 59 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.localName`, "li");60 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");61 shouldBeEqualToString(` tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));61 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.localName`, "li"); 62 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : ""); 63 shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex)); 62 64 } 63 65 } -
trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html
r213453 r213454 15 15 window.jsTestIsAsync = true; 16 16 17 description(" Selecting a track in a <code>TracksPanel</code> with the mouse.");17 description("Testing positioning and sizing of the tracks panel."); 18 18 19 19 const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 }); … … 32 32 tracksPanelNumberOfTracksInSection: function(sectionIndex) 33 33 { 34 return 3;34 return 20; 35 35 }, 36 36 … … 46 46 }; 47 47 48 mediaControls.tracksPanel.uiDelegate = { 49 tracksPanelSelectionDidChange: function(trackIndex, sectionIndex) 50 { 51 debug("mediaControls.tracksPanel.uiDelegate.tracksPanelSelectionDidChange() called"); 52 debug(`sectionIndex = ${sectionIndex}`); 53 debug(`trackIndex = ${trackIndex}`); 48 document.body.appendChild(mediaControls.element); 54 49 50 shouldBecomeDifferent("mediaControls.tracksButton.element.getBoundingClientRect().right", "0", () => { 51 debug("mediaControls.showTracksPanel()"); 52 mediaControls.showTracksPanel(); 53 window.requestAnimationFrame(() => { 54 shouldBeEqualToString("mediaControls.tracksPanel.element.style.right", "69px"); 55 shouldBeEqualToString("mediaControls.tracksPanel.element.style.bottom", "51px"); 56 shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element).height", "239px"); 57 shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).height", "239px"); 58 shouldBeEqualToString("getComputedStyle(mediaControls.tracksPanel.element.lastElementChild).overflowY", "scroll"); 55 59 debug(""); 56 60 mediaControls.element.remove(); 57 61 finishJSTest(); 58 }59 };60 61 document.body.appendChild(mediaControls.element);62 63 let trackElement;64 65 debug("mediaControls.showTracksPanel()");66 mediaControls.showTracksPanel();67 68 scheduler.frameDidFire = function()69 {70 window.requestAnimationFrame(() => {71 debug("");72 debug("Mousing over the second track in the panel");73 74 trackElement = mediaControls.tracksPanel.element.querySelectorAll("li")[1];75 trackElement.addEventListener("focus", () => {76 debug("Obtained focus event");77 78 debug("");79 debug("Clicking on focused track");80 eventSender.mouseDown();81 eventSender.mouseUp();82 });83 84 const bounds = trackElement.getBoundingClientRect();85 eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);86 62 }); 87 scheduler.frameDidFire = null; 88 } 63 }); 89 64 90 65 </script> -
trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt
r209182 r213454 4 4 5 5 6 PASS mediaControls.tracksButton.element.getBoundingClientRect().right became different from 0 6 7 mediaControls.showTracksPanel() 7 8 -
trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html
r209182 r213454 63 63 let trackElement; 64 64 65 debug("mediaControls.showTracksPanel()"); 66 mediaControls.showTracksPanel(); 65 shouldBecomeDifferent("mediaControls.tracksButton.element.getBoundingClientRect().right", "0", () => { 66 debug("mediaControls.showTracksPanel()"); 67 mediaControls.showTracksPanel(); 67 68 68 scheduler.frameDidFire = function()69 {70 69 window.requestAnimationFrame(() => { 71 70 debug(""); … … 85 84 eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1); 86 85 }); 87 scheduler.frameDidFire = null; 88 } 86 }); 89 87 90 88 </script> -
trunk/Source/WebCore/ChangeLog
r213449 r213454 1 2017-03-06 Antoine Quint <graouts@apple.com> 2 3 [Modern Media Controls] Tracks panel should clip and scroll content when numerous tracks are available 4 https://bugs.webkit.org/show_bug.cgi?id=169201 5 <rdar://problem/30867979> 6 7 Reviewed by Eric Carlson. 8 9 We now position and size the tracks panel dynamically and ensure a max-height is applied 10 to the panel so that it allows a margin of 10px above it within the media controls. We also 11 apply that same max-height to a new intermediary scrollable container for the track lists, 12 so that it scrolls independently of the container and the background tint. 13 14 Test: media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html 15 16 * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js: 17 (MacOSFullscreenMediaControls.prototype.showTracksPanel): Deleted. 18 * Modules/modern-media-controls/controls/macos-inline-media-controls.css: 19 (.media-controls.mac.inline .volume.slider): 20 (.media-controls.mac.inline .tracks-panel): Deleted. 21 * Modules/modern-media-controls/controls/macos-inline-media-controls.js: 22 (MacOSInlineMediaControls.prototype.showTracksPanel): Deleted. 23 * Modules/modern-media-controls/controls/macos-media-controls.js: 24 (MacOSMediaControls.prototype.showTracksPanel): 25 * Modules/modern-media-controls/controls/tracks-panel.css: 26 (.tracks-panel > .background-tint > div,): 27 (.tracks-panel > .scrollable-container): 28 (.tracks-panel section): 29 (.tracks-panel section:first-of-type): 30 (.tracks-panel section > h3): 31 (.tracks-panel section > ul): 32 (.tracks-panel section > ul > li): 33 (.tracks-panel section > ul > li:focus): 34 (.tracks-panel section > ul > li.selected:before): 35 (.tracks-panel section > ul > li.animated): 36 (.tracks-panel > .background-tint > div): Deleted. 37 (.tracks-panel > section): Deleted. 38 (.tracks-panel > section:first-of-type): Deleted. 39 (.tracks-panel > section > h3): Deleted. 40 (.tracks-panel > section > ul): Deleted. 41 (.tracks-panel > section > ul > li): Deleted. 42 (.tracks-panel > section > ul > li:focus): Deleted. 43 (.tracks-panel > section > ul > li.selected:before): Deleted. 44 (.tracks-panel > section > ul > li.animated): Deleted. 45 * Modules/modern-media-controls/controls/tracks-panel.js: 46 (TracksPanel.prototype.presentInParent): 47 (TracksPanel.prototype.get maxHeight): 48 (TracksPanel.prototype.set maxHeight): 49 (TracksPanel.prototype.commitProperty): 50 (TracksPanel.prototype._childrenFromDataSource): 51 1 52 2017-03-06 Manuel Rego Casasnovas <rego@igalia.com> 2 53 -
trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
r213055 r213454 75 75 76 76 this.controlsBar.element.addEventListener("mousedown", this); 77 }78 79 // Public80 81 showTracksPanel()82 {83 super.showTracksPanel();84 85 const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect();86 this.tracksPanel.rightX = window.innerWidth - tracksButtonBounds.right;87 this.tracksPanel.bottomY = window.innerHeight - tracksButtonBounds.top + 1;88 77 } 89 78 -
trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
r212280 r213454 111 111 top: 10px; 112 112 } 113 114 /* Tracks Panel */115 116 .media-controls.mac.inline .tracks-panel {117 bottom: 51px;118 } -
trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
r213115 r213454 80 80 } 81 81 82 showTracksPanel()83 {84 super.showTracksPanel();85 this.tracksPanel.rightX = this.rightContainer.width - this.tracksButton.x - this.tracksButton.width;86 }87 88 82 // Protected 89 83 -
trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js
r212872 r213454 50 50 this.controlsBar.userInteractionEnabled = false; 51 51 this.tracksPanel.presentInParent(this); 52 53 const controlsBounds = this.element.getBoundingClientRect(); 54 const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect(); 55 this.tracksPanel.rightX = this.width - (tracksButtonBounds.right - controlsBounds.left); 56 this.tracksPanel.bottomY = this.height - (tracksButtonBounds.top - controlsBounds.top) + 1; 57 this.tracksPanel.maxHeight = this.height - this.tracksPanel.bottomY - 10; 52 58 } 53 59 -
trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
r212280 r213454 29 29 } 30 30 31 .tracks-panel > .background-tint > div { 31 .tracks-panel > .background-tint > div, 32 .tracks-panel > .scrollable-container { 32 33 border-radius: 7px; 34 } 35 36 .tracks-panel > .scrollable-container { 37 position: relative; 38 overflow-y: scroll; 33 39 } 34 40 … … 44 50 } 45 51 46 .tracks-panel >section {52 .tracks-panel section { 47 53 border-top: 2px solid rgb(104, 104, 104); 48 54 will-change: transform; 49 55 } 50 56 51 .tracks-panel >section:first-of-type {57 .tracks-panel section:first-of-type { 52 58 border-top: 0; 53 59 } 54 60 55 .tracks-panel >section > h3 {61 .tracks-panel section > h3 { 56 62 color: rgb(150, 150, 150); 57 63 padding: 5px 20px 1px 21px; … … 59 65 } 60 66 61 .tracks-panel >section > ul {67 .tracks-panel section > ul { 62 68 list-style-type: none; 63 69 margin-top: 0; … … 65 71 } 66 72 67 .tracks-panel >section > ul > li {73 .tracks-panel section > ul > li { 68 74 position: relative; 69 75 padding: 1px 20px 1px 33px; … … 71 77 } 72 78 73 .tracks-panel >section > ul > li:focus {79 .tracks-panel section > ul > li:focus { 74 80 background-color: rgba(26, 68, 243, 0.6); 75 81 -webkit-backdrop-filter: saturate(180%) blur(20px); … … 77 83 } 78 84 79 .tracks-panel >section > ul > li.selected:before {85 .tracks-panel section > ul > li.selected:before { 80 86 position: absolute; 81 87 top: 3px; … … 86 92 } 87 93 88 .tracks-panel >section > ul > li.animated {94 .tracks-panel section > ul > li.animated { 89 95 animation-name: tracks-panel-item-selection; 90 96 animation-duration: 150ms; -
trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
r212280 r213454 7 7 super(`<div class="tracks-panel"></div>`); 8 8 this._backgroundTint = new BackgroundTint; 9 this._scrollableContainer = new LayoutNode(`<div class="scrollable-container"></div>`); 9 10 this._rightX = 0; 10 11 this._bottomY = 0; 12 13 this.children = [this._backgroundTint, this._scrollableContainer]; 11 14 } 12 15 … … 23 26 return; 24 27 25 this. children = this._childrenFromDataSource();28 this._scrollableContainer.children = this._childrenFromDataSource(); 26 29 27 30 node.addChild(this); … … 48 51 // Ensure a transition will indeed happen by starting it only on the next frame. 49 52 window.requestAnimationFrame(() => { this.element.classList.add("fade-out"); }); 53 } 54 55 get maxHeight() 56 { 57 return this._maxHeight; 58 } 59 60 set maxHeight(height) 61 { 62 if (this._maxHeight === height) 63 return; 64 65 this._maxHeight = height; 66 this.markDirtyProperty("maxHeight") 50 67 } 51 68 … … 103 120 else if (propertyName === "bottomY") 104 121 this.element.style.bottom = `${this._bottomY}px`; 105 else 122 else if (propertyName === "maxHeight") { 123 this.element.style.maxHeight = `${this._maxHeight}px`; 124 this._scrollableContainer.element.style.maxHeight = `${this._maxHeight}px`; 125 } else 106 126 super.commitProperty(propertyName); 107 127 } … … 134 154 _childrenFromDataSource() 135 155 { 136 const children = [ this._backgroundTint];156 const children = []; 137 157 138 158 this._trackNodes = [];
Note: See TracChangeset
for help on using the changeset viewer.