Diff
Modified: trunk/LayoutTests/ChangeLog (275357 => 275358)
--- trunk/LayoutTests/ChangeLog 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/ChangeLog 2021-04-01 15:05:24 UTC (rev 275358)
@@ -1,3 +1,34 @@
+2021-04-01 Devin Rousso <[email protected]>
+
+ Limit the number of buttons shown in media controls
+ https://bugs.webkit.org/show_bug.cgi?id=223909
+
+ Reviewed by Eric Carlson.
+
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html:
+ * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt:
+
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html: Removed.
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt: Removed.
+ macOS fullscreen controls don't adjust the `buttonMargin` anymore as buttons are moved into
+ the overflow menu instead.
+
+ * media/modern-media-controls/tracks-support/auto-text-track.html:
+ * media/modern-media-controls/tracks-support/click-track-in-contextmenu.html:
+ * media/modern-media-controls/tracks-support/hidden-tracks.html:
+ * media/modern-media-controls/tracks-support/off-text-track.html:
+ * media/modern-media-controls/tracks-support/show-contextmenu-then-double-click-on-tracks-button.html:
+ * media/modern-media-controls/tracks-support/text-track-selected-via-media-api.html:
+ Override the default maximum right container button count so that the tracks button is shown.
+
2021-04-01 Commit Queue <[email protected]>
Unreviewed, reverting r275295.
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -5,10 +5,14 @@
PASS ready() became true
-SkipForwardButton was dropped at 384.
-SkipBackButton was dropped at 355.
-AirplayButton was dropped at 326.
-TracksButton was dropped at 294.
+TracksButton was dropped at 681.
+PiPButton was dropped at 681.
+SkipForwardButton was dropped at 453.
+SkipBackButton was dropped at 424.
+MuteButton was dropped at 395.
+AirplayButton was dropped at 357.
+FullscreenButton was dropped at 325.
+OverflowButton was dropped at 294.
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -9,12 +9,17 @@
window.jsTestIsAsync = true;
const mediaControls = new IOSInlineMediaControls({ width: 680, height: 300 });
+mediaControls.shouldUseSingleBarLayout = true;
const droppableControls = [
+ mediaControls.overflowButton,
+ mediaControls.fullscreenButton,
+ mediaControls.airplayButton,
+ mediaControls.muteButton,
+ mediaControls.skipBackButton,
mediaControls.skipForwardButton,
- mediaControls.skipBackButton,
- mediaControls.airplayButton,
- mediaControls.tracksButton
+ mediaControls.pipButton,
+ mediaControls.tracksButton,
];
function ready()
@@ -24,11 +29,16 @@
shouldBecomeEqual("ready()", "true", () => {
debug("");
- droppableControls.forEach(control => {
- while (control.visible)
- mediaControls.width--;
- debug(`${control.constructor.name} was dropped at ${mediaControls.width + 1}.`);
- });
+ while (droppableControls.length) {
+ for (let i = droppableControls.length - 1; i >= 0; --i) {
+ if (!droppableControls[i].visible) {
+ debug(`${droppableControls[i].constructor.name} was dropped at ${mediaControls.width + 1}.`);
+ droppableControls.splice(i, 1);
+ }
+ }
+
+ mediaControls.width--;
+ }
debug("");
finishJSTest();
});
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -8,8 +8,8 @@
PASS centerContainer.element.getBoundingClientRect().top is 503
PASS centerContainer.element.getBoundingClientRect().height is 44
-PASS Math.floor(rightContainer.element.getBoundingClientRect().width) became 131
-PASS rightContainer.element.getBoundingClientRect().left is within 0.5 of 503
+PASS Math.floor(rightContainer.element.getBoundingClientRect().width) became 123
+PASS rightContainer.element.getBoundingClientRect().left is within 0.5 of 511
PASS rightContainer.element.getBoundingClientRect().top is 500
PASS rightContainer.element.getBoundingClientRect().height is 44
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -41,8 +41,8 @@
shouldBe("centerContainer.element.getBoundingClientRect().height", "44");
debug("");
- shouldBecomeEqual("Math.floor(rightContainer.element.getBoundingClientRect().width)", "131", () => {
- shouldBeCloseTo("rightContainer.element.getBoundingClientRect().left", 503, 0.5);
+ shouldBecomeEqual("Math.floor(rightContainer.element.getBoundingClientRect().width)", "123", () => {
+ shouldBeCloseTo("rightContainer.element.getBoundingClientRect().left", 511, 0.5);
shouldBe("rightContainer.element.getBoundingClientRect().top", "500");
shouldBe("rightContainer.element.getBoundingClientRect().height", "44");
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -26,17 +26,17 @@
PiPButton
PASS getComputedStyle(button.element).top became "18px"
-PASS getComputedStyle(button.element).left is "43px"
+PASS getComputedStyle(button.element).left is "36px"
PASS getComputedStyle(button.element).height is "16px"
TracksButton
PASS getComputedStyle(button.element).top became "18px"
-PASS getComputedStyle(button.element).left is "74px"
+PASS getComputedStyle(button.element).left is "60px"
PASS getComputedStyle(button.element).height is "16px"
FullscreenButton
PASS getComputedStyle(button.element).top became "18px"
-PASS getComputedStyle(button.element).left is "103px"
+PASS getComputedStyle(button.element).left is "55px"
PASS getComputedStyle(button.element).height is "16px"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -16,9 +16,9 @@
[mediaControls.playPauseButton, 78, 9, 26],
[mediaControls.forwardButton, 127, 14, 16],
[mediaControls.airplayButton, 12, 18, 16],
- [mediaControls.pipButton, 43, 18, 16],
- [mediaControls.tracksButton, 74, 18, 16],
- [mediaControls.fullscreenButton, 103, 18, 16],
+ [mediaControls.pipButton, 36, 18, 16],
+ [mediaControls.tracksButton, 60, 18, 16],
+ [mediaControls.fullscreenButton, 55, 18, 16],
];
let button, x, y;
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -32,7 +32,7 @@
PASS mediaControls.bottomControlsBar.children[3].element.className is "buttons-container right"
PASS mediaControls.bottomControlsBar.children[3].leftMargin is 12
PASS mediaControls.bottomControlsBar.children[3].rightMargin is 12
-PASS mediaControls.bottomControlsBar.children[3].buttonMargin is 16
+PASS mediaControls.bottomControlsBar.children[3].buttonMargin is 24
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -40,7 +40,7 @@
shouldBeEqualToString("mediaControls.bottomControlsBar.children[3].element.className", "buttons-container right");
shouldBe("mediaControls.bottomControlsBar.children[3].leftMargin", "12");
shouldBe("mediaControls.bottomControlsBar.children[3].rightMargin", "12");
-shouldBe("mediaControls.bottomControlsBar.children[3].buttonMargin", "16");
+shouldBe("mediaControls.bottomControlsBar.children[3].buttonMargin", "24");
debug("");
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -1,18 +0,0 @@
-Testing the MacOSFullscreenMediaControls right container buttonMargin.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-4 enabled buttons
-PASS rightContainer.buttonMargin is 12
-
-3 enabled buttons
-PASS rightContainer.buttonMargin is 16
-
-2 enabled buttons
-PASS rightContainer.buttonMargin is 24
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
Deleted: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -1,39 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-<body>
-<script type="text/_javascript_">
-
-description("Testing the <code>MacOSFullscreenMediaControls</code> right container buttonMargin.");
-
-window.jsTestIsAsync = true;
-
-const mediaControls = new MacOSFullscreenMediaControls;
-const rightContainer = mediaControls.bottomControlsBar.children[3];
-
-let numberOfFrames = 0;
-scheduler.frameDidFire = function()
-{
- numberOfFrames++;
-
- if (numberOfFrames == 1) {
- debug("4 enabled buttons")
- shouldBe("rightContainer.buttonMargin", "12");
- debug("");
- mediaControls.tracksButton.enabled = false;
- } else if (numberOfFrames == 2) {
- debug("3 enabled buttons")
- shouldBe("rightContainer.buttonMargin", "16");
- mediaControls.pipButton.enabled = false;
- debug("");
- } else if (numberOfFrames == 3) {
- debug("2 enabled buttons")
- shouldBe("rightContainer.buttonMargin", "24");
- debug("");
- finishMediaControlsTest();
- }
-};
-
-</script>
-<script src=""
-</body>
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2021-04-01 15:05:24 UTC (rev 275358)
@@ -5,13 +5,14 @@
PASS ready() became true
-SkipForwardButton was dropped at 482.
-SkipBackButton was dropped at 453.
-AirplayButton was dropped at 424.
-TracksButton was dropped at 392.
-PiPButton was dropped at 392.
+TracksButton was dropped at 681.
+PiPButton was dropped at 681.
+SkipForwardButton was dropped at 447.
+SkipBackButton was dropped at 418.
+MuteButton was dropped at 389.
+AirplayButton was dropped at 351.
FullscreenButton was dropped at 319.
-MuteButton was dropped at 319.
+OverflowButton was dropped at 288.
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -12,13 +12,14 @@
mediaControls.shouldUseSingleBarLayout = true;
const droppableControls = [
+ mediaControls.overflowButton,
+ mediaControls.fullscreenButton,
+ mediaControls.airplayButton,
+ mediaControls.muteButton,
+ mediaControls.skipBackButton,
mediaControls.skipForwardButton,
- mediaControls.skipBackButton,
- mediaControls.airplayButton,
+ mediaControls.pipButton,
mediaControls.tracksButton,
- mediaControls.pipButton,
- mediaControls.fullscreenButton,
- mediaControls.muteButton
];
function ready()
@@ -28,11 +29,16 @@
shouldBecomeEqual("ready()", "true", () => {
debug("");
- droppableControls.forEach(control => {
- while (control.visible)
- mediaControls.width--;
- debug(`${control.constructor.name} was dropped at ${mediaControls.width + 1}.`);
- });
+ while (droppableControls.length) {
+ for (let i = droppableControls.length - 1; i >= 0; --i) {
+ if (!droppableControls[i].visible) {
+ debug(`${droppableControls[i].constructor.name} was dropped at ${mediaControls.width + 1}.`);
+ droppableControls.splice(i, 1);
+ }
+ }
+
+ mediaControls.width--;
+ }
debug("");
finishJSTest();
});
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/auto-text-track.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/auto-text-track.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/auto-text-track.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" autoplay controls muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" autoplay controls muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
let checkedItems = null;
media.addEventListener("play", () => {
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/click-track-in-contextmenu.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/click-track-in-contextmenu.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/click-track-in-contextmenu.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" controls autoplay muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" controls autoplay muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
let selectedTrack = null;
media.addEventListener("play", () => {
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/hidden-tracks.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/hidden-tracks.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/hidden-tracks.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" controls autoplay muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" controls autoplay muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
let checkedItems = null;
media.addEventListener("play", () => {
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/off-text-track.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/off-text-track.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/off-text-track.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" autoplay controls muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" autoplay controls muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
let checkedItems = null;
media.addEventListener("play", () => {
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/show-contextmenu-then-double-click-on-tracks-button.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/show-contextmenu-then-double-click-on-tracks-button.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/show-contextmenu-then-double-click-on-tracks-button.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" autoplay controls muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" autoplay controls muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
media.addEventListener("play", () => {
media.pause();
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/text-track-selected-via-media-api.html (275357 => 275358)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/text-track-selected-via-media-api.html 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/text-track-selected-via-media-api.html 2021-04-01 15:05:24 UTC (rev 275358)
@@ -3,7 +3,7 @@
<script src=""
<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" autoplay controls muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 600px;" autoplay controls muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -14,6 +14,8 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+window.internals.setMediaControlsMaximumRightContainerButtonCountOverride(media, 100); // A finite value larger than anything likely.
+
let contextmenu = null;
function subtitleTrack(language) {
Modified: trunk/Source/WebCore/ChangeLog (275357 => 275358)
--- trunk/Source/WebCore/ChangeLog 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/ChangeLog 2021-04-01 15:05:24 UTC (rev 275358)
@@ -1,3 +1,61 @@
+2021-04-01 Devin Rousso <[email protected]>
+
+ Limit the number of buttons shown in media controls
+ https://bugs.webkit.org/show_bug.cgi?id=223909
+
+ Reviewed by Eric Carlson.
+
+ When in fullscreen, it's possible to have five different buttons to the right of "Play":
+ - AirPlay
+ - Enter Picture in Picture
+ - Audio/Languages
+ - Exit Full Screen
+ - More...
+ This turns the UI into something of an "icon soup" and should really be avoided, especially
+ now that `OverflowButton` allows for a single button to have multiple actions (via a native
+ contextmenu). This matches AVKit behavior.
+
+ Tests: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html:
+ media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
+ media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
+ media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html:
+
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ (InlineMediaControls.prototype.layout):
+ (InlineMediaControls.prototype._droppableButtons):
+ (InlineMediaControls.prototype._collapsableButtons): Added.
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls):
+ (MacOSFullscreenMediaControls.prototype.layout):
+ (MacOSFullscreenMediaControls.prototype._collapsableButtons): Added.
+ Limit the number of `visible` buttons in `rightContainer.children` by iteratively marking
+ `dropped = true` on buttons that are also in `_collapsableButtons` until either there are
+ no iterations left (`i < 0`) or the number of visible buttons is below the maximum (2 for
+ inline and 3 for fullscreen).
+
+ * Modules/modern-media-controls/controls/pip-button.js:
+ (PiPButton.prototype.get contextMenuOptions): Added.
+ * Modules/mediacontrols/MediaControlsHost.cpp:
+ (WebCore::MediaControlsHost::showMediaControlsContextMenu):
+ Add support for `includePictureInPicture` to the native contextmenu.
+
+ * en.lproj/Localizable.strings:
+
+ * testing/Internals.idl:
+ * testing/Internals.h:
+ * testing/Internals.cpp:
+ (WebCore::Internals::setMediaControlsMaximumRightContainerButtonCountOverride): Added.
+ * html/HTMLMediaElement.h:
+ * html/HTMLMediaElement.cpp:
+ (WebCore::HTMLMediaElement::setMediaControlsMaximumRightContainerButtonCountOverride): Added.
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype.set maximumRightContainerButtonCountOverride): Added.
+ Add a way to override the default maximum right container button count for testing. This is
+ useful for testing the functionality of a specific button when not in the collapsed state,
+ allowing for tests to not have to worry about other state that may affect collapsing (e.g.
+ the AirPlay button is shown when there are AirPlay targets).
+
2021-04-01 Zalan Bujtas <[email protected]>
Cleanup shouldComputeLogicalWidthFromAspectRatio and shouldComputeLogicalWidthFromAspectRatioAndInsets
Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp (275357 => 275358)
--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp 2021-04-01 15:05:24 UTC (rev 275358)
@@ -45,6 +45,7 @@
#include "FloatRect.h"
#include "HTMLElement.h"
#include "HTMLMediaElement.h"
+#include "HTMLVideoElement.h"
#include "LocalizedStrings.h"
#include "Logging.h"
#include "MediaControlTextTrackContainerElement.h"
@@ -55,6 +56,7 @@
#include "RenderTheme.h"
#include "TextTrack.h"
#include "TextTrackList.h"
+#include "UserGestureIndicator.h"
#include "VoidCallback.h"
#include <_javascript_Core/JSCJSValueInlines.h>
#include <wtf/CompletionHandler.h>
@@ -500,7 +502,18 @@
constexpr auto invalidMenuItemIdentifier = ContextMenuItemTagNoAction;
#endif
- using MenuData = Variant<RefPtr<AudioTrack>, RefPtr<TextTrack> MediaControlsHostAdditions_showMediaControlsContextMenu_MenuData>;
+#if ENABLE(VIDEO_PRESENTATION_MODE)
+ enum class PictureInPictureTag { IncludePictureInPicture };
+#endif // ENABLE(VIDEO_PRESENTATION_MODE)
+
+ using MenuData = Variant<
+#if ENABLE(VIDEO_PRESENTATION_MODE)
+ PictureInPictureTag,
+#endif // ENABLE(VIDEO_PRESENTATION_MODE)
+ RefPtr<AudioTrack>,
+ RefPtr<TextTrack>
+ MediaControlsHostAdditions_showMediaControlsContextMenu_MenuData
+ >;
HashMap<MenuItemIdentifier, MenuData> idMap;
auto createSubmenu = [] (const String& title, const String& icon, Vector<MenuItem>&& children) -> MenuItem {
@@ -512,13 +525,14 @@
#endif
};
- auto createMenuItem = [&] (MenuData data, const String& title, bool checked = false) -> MenuItem {
+ auto createMenuItem = [&] (MenuData data, const String& title, bool checked = false, const String& icon = nullString()) -> MenuItem {
auto id = idMap.size() + 1;
idMap.add(id, data);
#if USE(UICONTEXTMENU)
- return { id, title, /* icon */ nullString(), checked, /* children */ { } };
+ return { id, title, icon, checked, /* children */ { } };
#elif ENABLE(CONTEXT_MENUS) && USE(ACCESSIBILITY_CONTEXT_MENUS)
+ UNUSED_PARAM(icon);
return { CheckableActionType, static_cast<ContextMenuAction>(ContextMenuItemBaseCustomTag + id), title, /* enabled */ true, checked };
#endif
};
@@ -525,6 +539,14 @@
Vector<MenuItem> items;
+#if ENABLE(VIDEO_PRESENTATION_MODE)
+ if (optionsJSONObject->getBoolean("includePictureInPicture"_s).valueOr(false)) {
+ ASSERT(is<HTMLVideoElement>(mediaElement));
+ ASSERT(downcast<HTMLVideoElement>(mediaElement).webkitSupportsPresentationMode(HTMLVideoElement::VideoPresentationMode::PictureInPicture));
+ items.append(createMenuItem(PictureInPictureTag::IncludePictureInPicture, WEB_UI_STRING_KEY("Picture in Picture", "Picture in Picture (Media Controls Menu)", "Picture in Picture media controls context menu title"), false, "pip.enter"_s));
+ }
+#endif // ENABLE(VIDEO_PRESENTATION_MODE)
+
if (optionsJSONObject->getBoolean("includeLanguages"_s).valueOr(false)) {
if (auto* audioTracks = mediaElement.audioTracks(); audioTracks && audioTracks->length() > 1) {
Vector<MenuItem> languageMenuItems;
@@ -601,8 +623,16 @@
auto& mediaElement = *weakMediaElement;
+ UserGestureIndicator gestureIndicator(ProcessingUserGesture, &mediaElement.document());
+
auto selectedItem = idMap.get(selectedItemID);
WTF::switchOn(selectedItem,
+#if ENABLE(VIDEO_PRESENTATION_MODE)
+ [&] (PictureInPictureTag) {
+ // Media controls are not shown when in PiP so we can assume that we're not in PiP.
+ downcast<HTMLVideoElement>(mediaElement).webkitSetPresentationMode(HTMLVideoElement::VideoPresentationMode::PictureInPicture);
+ },
+#endif // ENABLE(VIDEO_PRESENTATION_MODE)
[&] (RefPtr<AudioTrack>& selectedAudioTrack) {
for (auto& track : idMap.values()) {
if (auto* audioTrack = WTF::get_if<RefPtr<AudioTrack>>(track))
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (275357 => 275358)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2021-04-01 15:05:24 UTC (rev 275358)
@@ -184,6 +184,18 @@
this.overflowButton.addContextMenuOptions(button.contextMenuOptions);
}
+ let collapsableButtons = this._collapsableButtons();
+ let shownRightContainerButtons = this.rightContainer.children.filter(button => button.enabled && !button.dropped);
+ let maximumRightContainerButtonCount = this.maximumRightContainerButtonCountOverride ?? 2; // Allow AirPlay and overflow if all buttons are shown.
+ for (let i = shownRightContainerButtons.length - 1; i >= 0 && shownRightContainerButtons.length > maximumRightContainerButtonCount; --i) {
+ let button = shownRightContainerButtons[i];
+ if (!collapsableButtons.has(button))
+ continue;
+
+ button.dropped = true;
+ this.overflowButton.addContextMenuOptions(button.contextMenuOptions);
+ }
+
// Update layouts once more.
this.leftContainer.layout();
this.rightContainer.layout();
@@ -269,13 +281,25 @@
_droppableButtons()
{
+ let buttons = this._collapsableButtons();
+ buttons.add(this.skipForwardButton);
+ buttons.add(this.skipBackButton);
+ if (this._shouldUseSingleBarLayout || this.preferredMuteButtonStyle === Button.Styles.Bar)
+ buttons.add(this.muteButton);
+ buttons.add(this.airplayButton);
if (this._shouldUseSingleBarLayout)
- return [this.skipForwardButton, this.skipBackButton, this.airplayButton, this.tracksButton, this.pipButton, this.muteButton, this.fullscreenButton, this.overflowButton];
+ buttons.add(this.fullscreenButton);
+ buttons.add(this.overflowButton);
+ return buttons;
+ }
- const buttons = [this.skipForwardButton, this.skipBackButton, this.airplayButton, this.tracksButton];
- if (this.preferredMuteButtonStyle === Button.Styles.Bar)
- buttons.push(this.muteButton);
- buttons.push(this.overflowButton);
+ _collapsableButtons()
+ {
+ let buttons = new Set([
+ this.tracksButton,
+ ]);
+ if (this._shouldUseSingleBarLayout)
+ buttons.add(this.pipButton);
return buttons;
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (275357 => 275358)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2021-04-01 15:05:24 UTC (rev 275358)
@@ -23,9 +23,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-const ButtonMarginForThreeButtonsOrLess = 24;
-const ButtonMarginForFourButtons = 16;
-const ButtonMarginForFiveButtons = 12;
const FullscreenTimeControlWidth = 448;
class MacOSFullscreenMediaControls extends MediaControls
@@ -68,7 +65,8 @@
children: [this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton, this.overflowButton],
cssClassName: "right",
leftMargin: 12,
- rightMargin: 12
+ rightMargin: 12,
+ buttonMargin: 24
});
this.bottomControlsBar.children = [this._leftContainer, this._centerContainer, this._rightContainer];
@@ -111,19 +109,24 @@
if (!this._rightContainer)
return;
- const numberOfEnabledButtons = this._rightContainer.children.filter(button => button.enabled).length;
+ this._rightContainer.children.forEach(button => delete button.dropped)
+ this.overflowButton.clearContextMenuOptions();
- let buttonMargin = ButtonMarginForFiveButtons;
- if (numberOfEnabledButtons === 4)
- buttonMargin = ButtonMarginForFourButtons;
- else if (numberOfEnabledButtons <= 3)
- buttonMargin = ButtonMarginForThreeButtonsOrLess;
-
- this._rightContainer.buttonMargin = buttonMargin;
-
this._leftContainer.visible = this.muteButton.enabled;
this._leftContainer.children = this._volumeControlsForCurrentDirection();
+ let collapsableButtons = this._collapsableButtons();
+ let shownRightContainerButtons = this._rightContainer.children.filter(button => button.enabled && !button.dropped);
+ let maximumRightContainerButtonCount = this.maximumRightContainerButtonCountOverride ?? 3; // Allow AirPlay, Exit Fullscreen, and overflow if all buttons are shown.
+ for (let i = shownRightContainerButtons.length - 1; i >= 0 && shownRightContainerButtons.length > maximumRightContainerButtonCount; --i) {
+ let button = shownRightContainerButtons[i];
+ if (!collapsableButtons.has(button))
+ continue;
+
+ button.dropped = true;
+ this.overflowButton.addContextMenuOptions(button.contextMenuOptions);
+ }
+
this._leftContainer.layout();
this._centerContainer.layout();
this._rightContainer.layout();
@@ -147,6 +150,14 @@
return this.usesLTRUserInterfaceLayoutDirection ? [this.muteButton, this.volumeSlider] : [this.volumeSlider, this.muteButton];
}
+ _collapsableButtons()
+ {
+ return new Set([
+ this.tracksButton,
+ this.pipButton,
+ ]);
+ }
+
_handleMousedown(event)
{
// We don't allow dragging when the interaction is initiated on an interactive element.
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js (275357 => 275358)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js 2021-04-01 15:05:24 UTC (rev 275358)
@@ -35,4 +35,13 @@
});
}
+ // Public
+
+ get contextMenuOptions()
+ {
+ return {
+ includePictureInPicture: true,
+ };
+ }
+
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (275357 => 275358)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2021-04-01 15:05:24 UTC (rev 275358)
@@ -373,4 +373,11 @@
this.controls.visible = shouldControlsBeAvailable;
}
+ // Testing
+
+ set maximumRightContainerButtonCountOverride(count)
+ {
+ this.controls.maximumRightContainerButtonCountOverride = count;
+ }
+
}
Modified: trunk/Source/WebCore/en.lproj/Localizable.strings (275357 => 275358)
--- trunk/Source/WebCore/en.lproj/Localizable.strings 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/en.lproj/Localizable.strings 2021-04-01 15:05:24 UTC (rev 275358)
@@ -661,6 +661,9 @@
/* File Upload alert sheet button string for choosing an existing media item from the Photo Library */
"Photo Library (file upload action sheet)" = "Photo Library";
+/* Picture in Picture media controls context menu title */
+"Picture in Picture (Media Controls Menu)" = "Picture in Picture";
+
/* Media Play context menu item */
"Play" = "Play";
Modified: trunk/Source/WebCore/html/HTMLMediaElement.cpp (275357 => 275358)
--- trunk/Source/WebCore/html/HTMLMediaElement.cpp 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/html/HTMLMediaElement.cpp 2021-04-01 15:05:24 UTC (rev 275358)
@@ -7388,6 +7388,11 @@
return status;
}
+void HTMLMediaElement::setMediaControlsMaximumRightContainerButtonCountOverride(size_t count)
+{
+ setControllerJSProperty("maximumRightContainerButtonCountOverride", JSC::jsNumber(count));
+}
+
unsigned long long HTMLMediaElement::fileSize() const
{
if (m_player)
Modified: trunk/Source/WebCore/html/HTMLMediaElement.h (275357 => 275358)
--- trunk/Source/WebCore/html/HTMLMediaElement.h 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/html/HTMLMediaElement.h 2021-04-01 15:05:24 UTC (rev 275358)
@@ -494,6 +494,7 @@
void pageScaleFactorChanged();
void userInterfaceLayoutDirectionChanged();
WEBCORE_EXPORT String getCurrentMediaControlsStatus();
+ WEBCORE_EXPORT void setMediaControlsMaximumRightContainerButtonCountOverride(size_t);
MediaControlsHost* mediaControlsHost() { return m_mediaControlsHost.get(); }
bool isDisablingSleep() const { return m_sleepDisabler.get(); }
Modified: trunk/Source/WebCore/testing/Internals.cpp (275357 => 275358)
--- trunk/Source/WebCore/testing/Internals.cpp 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/testing/Internals.cpp 2021-04-01 15:05:24 UTC (rev 275358)
@@ -4764,16 +4764,20 @@
SystemSoundManager::singleton().systemBeep();
}
+#if ENABLE(VIDEO)
+
String Internals::getCurrentMediaControlsStatusForElement(HTMLMediaElement& mediaElement)
{
-#if ENABLE(VIDEO)
return mediaElement.getCurrentMediaControlsStatus();
-#else
- UNUSED_PARAM(mediaElement);
- return { };
-#endif
}
+void Internals::setMediaControlsMaximumRightContainerButtonCountOverride(HTMLMediaElement& mediaElement, size_t count)
+{
+ mediaElement.setMediaControlsMaximumRightContainerButtonCountOverride(count);
+}
+
+#endif // ENABLE(VIDEO)
+
#if !PLATFORM(COCOA)
String Internals::userVisibleString(const DOMURL& url)
Modified: trunk/Source/WebCore/testing/Internals.h (275357 => 275358)
--- trunk/Source/WebCore/testing/Internals.h 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/testing/Internals.h 2021-04-01 15:05:24 UTC (rev 275358)
@@ -728,7 +728,10 @@
ExceptionOr<String> pathStringWithShrinkWrappedRects(const Vector<double>& rectComponents, double radius);
+#if ENABLE(VIDEO)
String getCurrentMediaControlsStatusForElement(HTMLMediaElement&);
+ void setMediaControlsMaximumRightContainerButtonCountOverride(HTMLMediaElement&, size_t);
+#endif // ENABLE(VIDEO)
String userVisibleString(const DOMURL&);
void setShowAllPlugins(bool);
Modified: trunk/Source/WebCore/testing/Internals.idl (275357 => 275358)
--- trunk/Source/WebCore/testing/Internals.idl 2021-04-01 14:47:52 UTC (rev 275357)
+++ trunk/Source/WebCore/testing/Internals.idl 2021-04-01 15:05:24 UTC (rev 275358)
@@ -763,6 +763,7 @@
DOMString pathStringWithShrinkWrappedRects(sequence<double> rectComponents, double radius);
[Conditional=VIDEO] DOMString getCurrentMediaControlsStatusForElement(HTMLMediaElement element);
+ [Conditional=VIDEO] undefined setMediaControlsMaximumRightContainerButtonCountOverride(HTMLMediaElement element, unsigned long count);
DOMString userVisibleString(DOMURL url);
