Changeset 213454 in webkit


Ignore:
Timestamp:
Mar 6, 2017 9:49:50 AM (7 years ago)
Author:
commit-queue@webkit.org
Message:

[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 <Antoine Quint> 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:
Location:
trunk
Files:
1 added
12 edited
1 copied

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r213449 r213454  
     12017-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
    1232017-03-06  Manuel Rego Casasnovas  <rego@igalia.com>
    224
  • trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt

    r212280 r213454  
    66PASS tracksPanel.presented is true
    77PASS tracksPanel.parent is container
    8 PASS tracksPanel.children.length is numberOfSections + 1
     8PASS scrollContainer.children.length is numberOfSections
    99
    1010Hierarchy for section #0
    11 PASS tracksPanel.children[1].element.localName is "section"
    12 PASS tracksPanel.children[1].children.length is 2
    13 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 3
    17 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"
     11PASS scrollContainer.children[0].element.localName is "section"
     12PASS scrollContainer.children[0].children.length is 2
     13PASS scrollContainer.children[0].children[0].element.localName is "h3"
     14PASS scrollContainer.children[0].children[0].element.textContent is "Title #0"
     15PASS scrollContainer.children[0].children[1].element.localName is "ul"
     16PASS scrollContainer.children[0].children[1].children.length is 3
     17PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
     18PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is ""
     19PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x0"
     20PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
     21PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is "selected"
     22PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x1"
     23PASS scrollContainer.children[0].children[1].children[trackIndex].element.localName is "li"
     24PASS scrollContainer.children[0].children[1].children[trackIndex].element.className is ""
     25PASS scrollContainer.children[0].children[1].children[trackIndex].element.textContent is "Track 0x2"
    2626
    2727Hierarchy for section #1
    28 PASS tracksPanel.children[2].element.localName is "section"
    29 PASS tracksPanel.children[2].children.length is 2
    30 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 5
    34 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"
     28PASS scrollContainer.children[1].element.localName is "section"
     29PASS scrollContainer.children[1].children.length is 2
     30PASS scrollContainer.children[1].children[0].element.localName is "h3"
     31PASS scrollContainer.children[1].children[0].element.textContent is "Title #1"
     32PASS scrollContainer.children[1].children[1].element.localName is "ul"
     33PASS scrollContainer.children[1].children[1].children.length is 5
     34PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
     35PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
     36PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x0"
     37PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
     38PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
     39PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x1"
     40PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
     41PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
     42PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x2"
     43PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
     44PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is "selected"
     45PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x3"
     46PASS scrollContainer.children[1].children[1].children[trackIndex].element.localName is "li"
     47PASS scrollContainer.children[1].children[1].children[trackIndex].element.className is ""
     48PASS scrollContainer.children[1].children[1].children[trackIndex].element.textContent is "Track 1x4"
    4949
    5050PASS successfullyParsed is true
  • trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html

    r212280 r213454  
    4242tracksPanel.presentInParent(container);
    4343
     44const scrollContainer = tracksPanel.children[1];
     45
    4446shouldBeTrue("tracksPanel.presented");
    4547shouldBe("tracksPanel.parent", "container");
    46 shouldBe("tracksPanel.children.length", "numberOfSections + 1");
     48shouldBe("scrollContainer.children.length", "numberOfSections");
    4749
    4850let sectionIndex, trackIndex;
     
    5052    debug("");
    5153    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]}`);
    5860    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));
    6264    }
    6365}
  • trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-position-and-size.html

    r213453 r213454  
    1515window.jsTestIsAsync = true;
    1616
    17 description("Selecting a track in a <code>TracksPanel</code> with the mouse.");
     17description("Testing positioning and sizing of the tracks panel.");
    1818
    1919const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
     
    3232    tracksPanelNumberOfTracksInSection: function(sectionIndex)
    3333    {
    34         return 3;
     34        return 20;
    3535    },
    3636
     
    4646};
    4747
    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}`);
     48document.body.appendChild(mediaControls.element);
    5449
     50shouldBecomeDifferent("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");
    5559        debug("");
    5660        mediaControls.element.remove();
    5761        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);
    8662    });
    87     scheduler.frameDidFire = null;
    88 }
     63});
    8964
    9065</script>
  • trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse-expected.txt

    r209182 r213454  
    44
    55
     6PASS mediaControls.tracksButton.element.getBoundingClientRect().right became different from 0
    67mediaControls.showTracksPanel()
    78
  • trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-select-track-with-mouse.html

    r209182 r213454  
    6363let trackElement;
    6464
    65 debug("mediaControls.showTracksPanel()");
    66 mediaControls.showTracksPanel();
     65shouldBecomeDifferent("mediaControls.tracksButton.element.getBoundingClientRect().right", "0", () => {
     66    debug("mediaControls.showTracksPanel()");
     67    mediaControls.showTracksPanel();
    6768
    68 scheduler.frameDidFire = function()
    69 {
    7069    window.requestAnimationFrame(() => {
    7170        debug("");
     
    8584        eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
    8685    });
    87     scheduler.frameDidFire = null;
    88 }
     86});
    8987
    9088</script>
  • trunk/Source/WebCore/ChangeLog

    r213449 r213454  
     12017-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
    1522017-03-06  Manuel Rego Casasnovas  <rego@igalia.com>
    253
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js

    r213055 r213454  
    7575
    7676        this.controlsBar.element.addEventListener("mousedown", this);
    77     }
    78 
    79     // Public
    80 
    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;
    8877    }
    8978
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css

    r212280 r213454  
    111111    top: 10px;
    112112}
    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  
    8080    }
    8181
    82     showTracksPanel()
    83     {
    84         super.showTracksPanel();
    85         this.tracksPanel.rightX = this.rightContainer.width - this.tracksButton.x - this.tracksButton.width;
    86     }
    87 
    8882    // Protected
    8983
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js

    r212872 r213454  
    5050        this.controlsBar.userInteractionEnabled = false;
    5151        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;
    5258    }
    5359
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css

    r212280 r213454  
    2929}
    3030
    31 .tracks-panel > .background-tint > div {
     31.tracks-panel > .background-tint > div,
     32.tracks-panel > .scrollable-container {
    3233    border-radius: 7px;
     34}
     35
     36.tracks-panel > .scrollable-container {
     37    position: relative;
     38    overflow-y: scroll;
    3339}
    3440
     
    4450}
    4551
    46 .tracks-panel > section {
     52.tracks-panel section {
    4753    border-top: 2px solid rgb(104, 104, 104);
    4854    will-change: transform;
    4955}
    5056
    51 .tracks-panel > section:first-of-type {
     57.tracks-panel section:first-of-type {
    5258    border-top: 0;
    5359}
    5460
    55 .tracks-panel > section > h3 {
     61.tracks-panel section > h3 {
    5662    color: rgb(150, 150, 150);
    5763    padding: 5px 20px 1px 21px;
     
    5965}
    6066
    61 .tracks-panel > section > ul {
     67.tracks-panel section > ul {
    6268    list-style-type: none;
    6369    margin-top: 0;
     
    6571}
    6672
    67 .tracks-panel > section > ul > li {
     73.tracks-panel section > ul > li {
    6874    position: relative;
    6975    padding: 1px 20px 1px 33px;
     
    7177}
    7278
    73 .tracks-panel > section > ul > li:focus {
     79.tracks-panel section > ul > li:focus {
    7480    background-color: rgba(26, 68, 243, 0.6);
    7581    -webkit-backdrop-filter: saturate(180%) blur(20px);
     
    7783}
    7884
    79 .tracks-panel > section > ul > li.selected:before {
     85.tracks-panel section > ul > li.selected:before {
    8086    position: absolute;
    8187    top: 3px;
     
    8692}
    8793
    88 .tracks-panel > section > ul > li.animated {
     94.tracks-panel section > ul > li.animated {
    8995    animation-name: tracks-panel-item-selection;
    9096    animation-duration: 150ms;
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js

    r212280 r213454  
    77        super(`<div class="tracks-panel"></div>`);
    88        this._backgroundTint = new BackgroundTint;
     9        this._scrollableContainer = new LayoutNode(`<div class="scrollable-container"></div>`);
    910        this._rightX = 0;
    1011        this._bottomY = 0;
     12       
     13        this.children = [this._backgroundTint, this._scrollableContainer];
    1114    }
    1215
     
    2326            return;
    2427
    25         this.children = this._childrenFromDataSource();
     28        this._scrollableContainer.children = this._childrenFromDataSource();
    2629
    2730        node.addChild(this);
     
    4851        // Ensure a transition will indeed happen by starting it only on the next frame.
    4952        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")
    5067    }
    5168
     
    103120        else if (propertyName === "bottomY")
    104121            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
    106126            super.commitProperty(propertyName);
    107127    }
     
    134154    _childrenFromDataSource()
    135155    {
    136         const children = [this._backgroundTint];
     156        const children = [];
    137157
    138158        this._trackNodes = [];
Note: See TracChangeset for help on using the changeset viewer.