Diff
Modified: trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled-expected.html (295437 => 295438)
--- trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled-expected.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled-expected.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -20,9 +20,9 @@
height: 360px;
width: 680px;
border-top: 50px solid white;
- border-right: 300px solid white;
- border-bottom: 50px solid white;
- border-left: 300px solid white;
+ border-right: 100px solid white;
+ border-bottom: 250px solid white;
+ border-left: 100px solid white;
box-sizing: border-box;
}
</style>
Modified: trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled.html (295437 => 295438)
--- trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -15,9 +15,9 @@
height: 360px;
width: 680px;
border-top: 50px solid white;
- border-right: 300px solid white;
- border-bottom: 50px solid white;
- border-left: 300px solid white;
+ border-right: 100px solid white;
+ border-bottom: 250px solid white;
+ border-left: 100px solid white;
box-sizing: border-box;
}
</style>
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout-expected.txt (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout-expected.txt 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout-expected.txt 2022-06-09 21:45:40 UTC (rev 295438)
@@ -3,25 +3,26 @@
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-PASS mediaControls.children.length is 3
+PASS mediaControls.children.length is 4
PASS mediaControls.children[0] is mediaControls.topLeftControlsBar
-PASS mediaControls.children[1] is mediaControls.bottomControlsBar
-PASS mediaControls.children[2] is mediaControls.topRightControlsBar
-PASS mediaControls.topLeftControlsBar.children.length is 2
-PASS mediaControls.topLeftControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.topLeftControlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.topLeftControlsBar.children[1].children.length is 2
-PASS mediaControls.topLeftControlsBar.children[1].children[0] is mediaControls.pipButton
-PASS mediaControls.topLeftControlsBar.children[1].children[1] is mediaControls.fullscreenButton
-PASS mediaControls.bottomControlsBar.children.length is 4
-PASS mediaControls.bottomControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.bottomControlsBar.children[1] is mediaControls.leftContainer
-PASS mediaControls.bottomControlsBar.children[2] is mediaControls.timeControl
-PASS mediaControls.bottomControlsBar.children[3] is mediaControls.rightContainer
-PASS mediaControls.leftContainer.children.length is 3
-PASS mediaControls.leftContainer.children[0] is mediaControls.skipBackButton
-PASS mediaControls.leftContainer.children[1] is mediaControls.playPauseButton
-PASS mediaControls.leftContainer.children[2] is mediaControls.skipForwardButton
+PASS mediaControls.children[1] is mediaControls.centerControlsBar
+PASS mediaControls.children[2] is mediaControls.bottomControlsBar
+PASS mediaControls.children[3] is mediaControls.topRightControlsBar
+PASS mediaControls.topLeftControlsBar.children.length is 1
+PASS mediaControls.topLeftControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.topLeftControlsBar.children[0].children.length is 2
+PASS mediaControls.topLeftControlsBar.children[0].children[0] is mediaControls.pipButton
+PASS mediaControls.topLeftControlsBar.children[0].children[1] is mediaControls.fullscreenButton
+PASS mediaControls.centerControlsBar.children.length is 1
+PASS mediaControls.centerControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.centerControlsBar.children[0].children.length is 3
+PASS mediaControls.centerControlsBar.children[0].children[0] is mediaControls.skipBackButton
+PASS mediaControls.centerControlsBar.children[0].children[1] is mediaControls.playPauseButton
+PASS mediaControls.centerControlsBar.children[0].children[2] is mediaControls.skipForwardButton
+PASS mediaControls.bottomControlsBar.children.length is 2
+PASS mediaControls.bottomControlsBar.children[0] is mediaControls.timeControl
+PASS mediaControls.bottomControlsBar.children[1] is mediaControls.rightContainer
+PASS mediaControls.leftContainer.children.length is 0
PASS mediaControls.timeControl.children.length is 3
PASS mediaControls.timeControl.children[0] is mediaControls.timeControl.elapsedTimeLabel
PASS mediaControls.timeControl.children[1] is mediaControls.timeControl.scrubber
@@ -29,11 +30,10 @@
PASS mediaControls.rightContainer.children.length is 3
PASS mediaControls.rightContainer.children[0] is mediaControls.airplayButton
PASS mediaControls.rightContainer.children[1] is mediaControls.tracksButton
-PASS mediaControls.topRightControlsBar.children.length is 2
-PASS mediaControls.topRightControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.topRightControlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.topRightControlsBar.children[1].children.length is 1
-PASS mediaControls.topRightControlsBar.children[1].children[0] is mediaControls.muteButton
+PASS mediaControls.topRightControlsBar.children.length is 1
+PASS mediaControls.topRightControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.topRightControlsBar.children[0].children.length is 1
+PASS mediaControls.topRightControlsBar.children[0].children[0] is mediaControls.muteButton
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -23,29 +23,31 @@
if (iconButtons.some(button => button.width == 0))
return;
- shouldBe("mediaControls.children.length", "3");
+ shouldBe("mediaControls.children.length", "4");
shouldBe("mediaControls.children[0]", "mediaControls.topLeftControlsBar");
- shouldBe("mediaControls.children[1]", "mediaControls.bottomControlsBar");
- shouldBe("mediaControls.children[2]", "mediaControls.topRightControlsBar");
+ shouldBe("mediaControls.children[1]", "mediaControls.centerControlsBar");
+ shouldBe("mediaControls.children[2]", "mediaControls.bottomControlsBar");
+ shouldBe("mediaControls.children[3]", "mediaControls.topRightControlsBar");
- shouldBe("mediaControls.topLeftControlsBar.children.length", "2");
- shouldBeTrue("mediaControls.topLeftControlsBar.children[0] instanceof BackgroundTint");
- shouldBeTrue("mediaControls.topLeftControlsBar.children[1] instanceof ButtonsContainer");
- shouldBe("mediaControls.topLeftControlsBar.children[1].children.length", "2");
- shouldBe("mediaControls.topLeftControlsBar.children[1].children[0]", "mediaControls.pipButton");
- shouldBe("mediaControls.topLeftControlsBar.children[1].children[1]", "mediaControls.fullscreenButton");
+ shouldBe("mediaControls.topLeftControlsBar.children.length", "1");
+ shouldBeTrue("mediaControls.topLeftControlsBar.children[0] instanceof ButtonsContainer");
+ shouldBe("mediaControls.topLeftControlsBar.children[0].children.length", "2");
+ shouldBe("mediaControls.topLeftControlsBar.children[0].children[0]", "mediaControls.pipButton");
+ shouldBe("mediaControls.topLeftControlsBar.children[0].children[1]", "mediaControls.fullscreenButton");
- shouldBe("mediaControls.bottomControlsBar.children.length", "4");
- shouldBeTrue("mediaControls.bottomControlsBar.children[0] instanceof BackgroundTint");
- shouldBe("mediaControls.bottomControlsBar.children[1]", "mediaControls.leftContainer");
- shouldBe("mediaControls.bottomControlsBar.children[2]", "mediaControls.timeControl");
- shouldBe("mediaControls.bottomControlsBar.children[3]", "mediaControls.rightContainer");
+ shouldBe("mediaControls.centerControlsBar.children.length", "1");
+ shouldBeTrue("mediaControls.centerControlsBar.children[0] instanceof ButtonsContainer");
+ shouldBe("mediaControls.centerControlsBar.children[0].children.length", "3");
+ shouldBe("mediaControls.centerControlsBar.children[0].children[0]", "mediaControls.skipBackButton");
+ shouldBe("mediaControls.centerControlsBar.children[0].children[1]", "mediaControls.playPauseButton");
+ shouldBe("mediaControls.centerControlsBar.children[0].children[2]", "mediaControls.skipForwardButton");
- shouldBe("mediaControls.leftContainer.children.length", "3");
- shouldBe("mediaControls.leftContainer.children[0]", "mediaControls.skipBackButton");
- shouldBe("mediaControls.leftContainer.children[1]", "mediaControls.playPauseButton");
- shouldBe("mediaControls.leftContainer.children[2]", "mediaControls.skipForwardButton");
+ shouldBe("mediaControls.bottomControlsBar.children.length", "2");
+ shouldBe("mediaControls.bottomControlsBar.children[0]", "mediaControls.timeControl");
+ shouldBe("mediaControls.bottomControlsBar.children[1]", "mediaControls.rightContainer");
+ shouldBe("mediaControls.leftContainer.children.length", "0");
+
shouldBe("mediaControls.timeControl.children.length", "3");
shouldBe("mediaControls.timeControl.children[0]", "mediaControls.timeControl.elapsedTimeLabel");
shouldBe("mediaControls.timeControl.children[1]", "mediaControls.timeControl.scrubber");
@@ -55,11 +57,10 @@
shouldBe("mediaControls.rightContainer.children[0]", "mediaControls.airplayButton");
shouldBe("mediaControls.rightContainer.children[1]", "mediaControls.tracksButton");
- shouldBe("mediaControls.topRightControlsBar.children.length", "2");
- shouldBeTrue("mediaControls.topRightControlsBar.children[0] instanceof BackgroundTint");
- shouldBeTrue("mediaControls.topRightControlsBar.children[1] instanceof ButtonsContainer");
- shouldBe("mediaControls.topRightControlsBar.children[1].children.length", "1");
- shouldBe("mediaControls.topRightControlsBar.children[1].children[0]", "mediaControls.muteButton");
+ shouldBe("mediaControls.topRightControlsBar.children.length", "1");
+ shouldBeTrue("mediaControls.topRightControlsBar.children[0] instanceof ButtonsContainer");
+ shouldBe("mediaControls.topRightControlsBar.children[0].children.length", "1");
+ shouldBe("mediaControls.topRightControlsBar.children[0].children[0]", "mediaControls.muteButton");
finishMediaControlsTest();
};
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play-expected.txt (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play-expected.txt 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play-expected.txt 2022-06-09 21:45:40 UTC (rev 295438)
@@ -4,6 +4,7 @@
'play' event.
+PASS media.paused is false
PASS shadowRoot.querySelector('button.play-pause') became different from null
PASS shadowRoot.querySelector('button.play-pause').getBoundingClientRect().width became different from 0
Tapping start button...
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -1,7 +1,7 @@
-<script src=""
-<script src=""
+<script src=""
+<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" muted playsinline autoplay></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" muted playsinline autoplay></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -9,10 +9,10 @@
description("Check that tapping the start button pauses the video if controls are added after it has started playing.");
const media = document.querySelector("video");
-const shadowRoot = window.internals.shadowRoot(media);
+let shadowRoot = null;
media.addEventListener("play", async () => {
- debug("'play' event");
+ debug("'play' event.");
if (media.controls)
return;
@@ -21,6 +21,8 @@
shouldBeFalse("media.paused");
+ shadowRoot = window.internals.shadowRoot(media);
+
await shouldBecomeDifferent("shadowRoot.querySelector('button.play-pause')", "null");
await shouldBecomeDifferent("shadowRoot.querySelector('button.play-pause').getBoundingClientRect().width", "0");
@@ -41,5 +43,5 @@
});
</script>
-<script src=""
+<script src=""
</body>
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-shows-start-button.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-shows-start-button.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-shows-start-button.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -1,7 +1,7 @@
-<script src=""
-<script src=""
+<script src=""
+<script src=""
<body>
-<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" controls muted playsinline></video>
+<video src="" style="position: absolute; left: 0; top: 0; width: 400px;" controls muted playsinline></video>
<script type="text/_javascript_">
window.jsTestIsAsync = true;
@@ -36,5 +36,5 @@
});
</script>
-<script src=""
+<script src=""
</body>
Modified: trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button-expected.txt (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button-expected.txt 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button-expected.txt 2022-06-09 21:45:40 UTC (rev 295438)
@@ -7,7 +7,7 @@
PASS skipBackButton.element.classList.contains("skip-back") is true
PASS skipBackButton.iconName is Icons.SkipBack15
PASS skipBackButton.image.element.style.webkitMaskImage.includes("macOS/SkipBack15.svg") became true
-PASS iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack15.svg") became true
+PASS iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack10.svg") became true
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -17,7 +17,7 @@
const iOSSkipBackButton = new SkipBackButton({ layoutTraits: new IOSLayoutTraits(LayoutTraits.Mode.Inline) });
shouldBecomeEqual('skipBackButton.image.element.style.webkitMaskImage.includes("macOS/SkipBack15.svg")', "true", () => {
- shouldBecomeEqual('iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack15.svg")', "true", finishJSTest);
+ shouldBecomeEqual('iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack10.svg")', "true", finishJSTest);
});
</script>
Modified: trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button-expected.txt (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button-expected.txt 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button-expected.txt 2022-06-09 21:45:40 UTC (rev 295438)
@@ -7,7 +7,7 @@
PASS skipForwardButton.element.classList.contains("skip-forward") is true
PASS skipForwardButton.iconName is Icons.SkipForward15
PASS skipForwardButton.image.element.style.webkitMaskImage.includes("macOS/SkipForward15.svg") became true
-PASS iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward15.svg") became true
+PASS iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward10.svg") became true
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -17,7 +17,7 @@
const iOSSkipForwardButton = new SkipForwardButton({ layoutTraits: new IOSLayoutTraits(LayoutTraits.Mode.Inline) });
shouldBecomeEqual('skipForwardButton.image.element.style.webkitMaskImage.includes("macOS/SkipForward15.svg")', "true", () => {
- shouldBecomeEqual('iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward15.svg")', "true", finishJSTest);
+ shouldBecomeEqual('iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward10.svg")', "true", finishJSTest);
});
</script>
Modified: trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -6,8 +6,10 @@
description("Testing the <code>Slider</code> constructor.");
-const slider = new Slider;
+const layoutDelegate = null;
+const slider = new Slider(layoutDelegate);
+
shouldBeEqualToString("slider.element.localName", "div");
shouldBeEqualToString("slider.element.className.trim()", "slider");
shouldBe("slider.children.length", "2");
@@ -18,7 +20,7 @@
shouldBeEqualToString("slider.children[1].element.max", "1");
shouldBeEqualToString("slider.children[1].element.step", "0.001");
-const sliderWithCSSClassName = new Slider("foo");
+const sliderWithCSSClassName = new Slider(layoutDelegate, "foo");
shouldBeEqualToString("sliderWithCSSClassName.element.className", "slider foo");
</script>
Modified: trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -8,7 +8,9 @@
window.jsTestIsAsync = true;
-const slider = new Slider;
+const layoutDelegate = null;
+
+const slider = new Slider(layoutDelegate);
slider.width = 200;
slider.height = 25;
Modified: trunk/LayoutTests/media/modern-media-controls/slider/slider-value.html (295437 => 295438)
--- trunk/LayoutTests/media/modern-media-controls/slider/slider-value.html 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-value.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -12,7 +12,9 @@
const KNOB_WIDTH = 9;
-const slider = new Slider;
+const layoutDelegate = null;
+
+const slider = new Slider(layoutDelegate);
slider.x = 10;
slider.y = 32;
slider.width = 200 + KNOB_WIDTH;
Added: trunk/LayoutTests/platform/ios/media/track/track-css-visible-stroke-expected.html (0 => 295438)
--- trunk/LayoutTests/platform/ios/media/track/track-css-visible-stroke-expected.html (rev 0)
+++ trunk/LayoutTests/platform/ios/media/track/track-css-visible-stroke-expected.html 2022-06-09 21:45:40 UTC (rev 295438)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <style>
+
+ .redtile {
+ width: 50px;
+ height: 50px;
+ position: absolute;
+ background-color: red;
+ }
+
+ .redtile > .overlay {
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.55);
+ }
+
+ </style>
+
+ </head>
+ <body>
+ <div class="redtile" style="left: 0px; top: 0px;"><div class="overlay"></div></div>
+ </body>
+</html>
Modified: trunk/Source/WebCore/CMakeLists.txt (295437 => 295438)
--- trunk/Source/WebCore/CMakeLists.txt 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/CMakeLists.txt 2022-06-09 21:45:40 UTC (rev 295438)
@@ -2101,6 +2101,7 @@
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/buttons-container.css"
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/controls-bar.css"
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/inline-media-controls.css"
+ "${WEBCORE_DIR}/Modules/modern-media-controls/controls/ios-inline-media-controls.css"
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css"
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/macos-inline-media-controls.css"
"${WEBCORE_DIR}/Modules/modern-media-controls/controls/adwaita-inline-media-controls.css"
Modified: trunk/Source/WebCore/DerivedSources-input.xcfilelist (295437 => 295438)
--- trunk/Source/WebCore/DerivedSources-input.xcfilelist 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/DerivedSources-input.xcfilelist 2022-06-09 21:45:40 UTC (rev 295438)
@@ -470,6 +470,7 @@
$(PROJECT_DIR)/Modules/modern-media-controls/controls/inline-media-controls.css
$(PROJECT_DIR)/Modules/modern-media-controls/controls/inline-media-controls.js
$(PROJECT_DIR)/Modules/modern-media-controls/controls/invalid-placard.js
+$(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-inline-media-controls.css
$(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-inline-media-controls.js
$(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-layout-traits.js
$(PROJECT_DIR)/Modules/modern-media-controls/controls/layout-item.js
Modified: trunk/Source/WebCore/DerivedSources.make (295437 => 295438)
--- trunk/Source/WebCore/DerivedSources.make 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/DerivedSources.make 2022-06-09 21:45:40 UTC (rev 295438)
@@ -1759,6 +1759,7 @@
$(WebCore)/Modules/modern-media-controls/controls/buttons-container.css \
$(WebCore)/Modules/modern-media-controls/controls/controls-bar.css \
$(WebCore)/Modules/modern-media-controls/controls/inline-media-controls.css \
+ $(WebCore)/Modules/modern-media-controls/controls/ios-inline-media-controls.css \
$(WebCore)/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css \
$(WebCore)/Modules/modern-media-controls/controls/macos-inline-media-controls.css \
$(WebCore)/Modules/modern-media-controls/controls/media-controls.css \
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-fullscreen-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-fullscreen-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-fullscreen-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -46,7 +46,7 @@
this.forwardButton = new ForwardButton(this);
this.fullscreenButton.isFullscreen = true;
- this.volumeSlider = new Slider("volume");
+ this.volumeSlider = new Slider(this, "volume");
this.volumeSlider.width = 60;
this._leftContainer = new ButtonsContainer({
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-inline-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-inline-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/adwaita-inline-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -40,7 +40,7 @@
this._backgroundClickDelegateNotifier = new BackgroundClickDelegateNotifier(this);
- this.volumeSlider = new Slider("volume");
+ this.volumeSlider = new Slider(this, "volume");
this.volumeSlider.width = 60;
this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -35,7 +35,6 @@
InvalidCircle : { name: "InvalidCircle", type: "pdf", label: UIString("Invalid") },
InvalidPlacard : { name: "invalid-placard", type: "png", label: UIString("Invalid") },
Overflow : { name: "Overflow", type: "svg", label: UIString("More\u2026") },
- OverflowCircle : { name: "OverflowCircle", type: "svg", label: UIString("More\u2026") },
Pause : { name: "Pause", type: "svg", label: UIString("Pause") },
PiPPlacard : { name: "pip-placard", type: "png", label: UIString("Picture in Picture") },
Play : { name: "Play", type: "svg", label: UIString("Play") },
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -127,12 +127,12 @@
return;
// Update the top left controls bar.
- this._topLeftControlsBarContainer.children = this._topLeftContainerButtons();
+ this._topLeftControlsBarContainer.children = this.topLeftContainerButtons();
this._topLeftControlsBarContainer.layout();
this.topLeftControlsBar.width = this._topLeftControlsBarContainer.width;
this.topLeftControlsBar.visible = this._topLeftControlsBarContainer.children.some(button => button.visible);
- this._centerControlsBarContainer.children = this._centerContainerButtons();
+ this._centerControlsBarContainer.children = this.centerContainerButtons();
this._centerControlsBarContainer.layout();
this.centerControlsBar.width = this._centerControlsBarContainer.width;
this.centerControlsBar.visible = this._centerControlsBarContainer.children.some(button => button.visible);
@@ -165,13 +165,13 @@
// Iterate through controls to see if we need to drop any of them. Reset all default states before we proceed.
this.bottomControlsBar.visible = true;
this.playPauseButton.style = Button.Styles.Bar;
- this.leftContainer.children = this._leftContainerButtons();
- this.rightContainer.children = this._rightContainerButtons();
+ this.leftContainer.children = this.leftContainerButtons();
+ this.rightContainer.children = this.rightContainerButtons();
this.rightContainer.children.concat(this.leftContainer.children).forEach(button => delete button.dropped);
this.muteButton.style = this.preferredMuteButtonStyle;
this.overflowButton.clearExtraContextMenuOptions();
- for (let button of this._droppableButtons()) {
+ for (let button of this.droppableButtons()) {
// If the button is not enabled, we can skip it.
if (!button.enabled)
continue;
@@ -191,7 +191,7 @@
this.overflowButton.addExtraContextMenuOptions(button.contextMenuOptions);
}
- let collapsableButtons = this._collapsableButtons();
+ 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) {
@@ -254,15 +254,8 @@
return (this._shouldUseAudioLayout || this._shouldUseSingleBarLayout) ? Button.Styles.Bar : Button.Styles.Corner;
}
- // Private
-
- _updateBottomControlsBarLabel()
+ topLeftContainerButtons()
{
- this.bottomControlsBar.element.setAttribute("aria-label", this._shouldUseAudioLayout ? UIString("Audio Controls") : UIString("Video Controls"));
- }
-
- _topLeftContainerButtons()
- {
if (this._shouldUseSingleBarLayout)
return [];
if (this.usesLTRUserInterfaceLayoutDirection)
@@ -270,16 +263,16 @@
return [this.pipButton, this.fullscreenButton];
}
- _leftContainerButtons()
+ leftContainerButtons()
{
return [this.skipBackButton, this.playPauseButton, this.skipForwardButton];
}
- _centerContainerButtons() {
+ centerContainerButtons() {
return [];
}
- _rightContainerButtons()
+ rightContainerButtons()
{
const buttons = [];
if (this._shouldUseAudioLayout)
@@ -295,9 +288,9 @@
return buttons.filter(button => button !== null);
}
- _droppableButtons()
+ droppableButtons()
{
- let buttons = this._collapsableButtons();
+ let buttons = this.collapsableButtons();
buttons.add(this.skipForwardButton);
buttons.add(this.skipBackButton);
if (this._shouldUseSingleBarLayout || this.preferredMuteButtonStyle === Button.Styles.Bar)
@@ -306,10 +299,11 @@
if (this._shouldUseSingleBarLayout)
buttons.add(this.fullscreenButton);
buttons.add(this.overflowButton);
- return [...buttons].filter(button => button !== null);
+ buttons.delete(null);
+ return buttons;
}
- _collapsableButtons()
+ collapsableButtons()
{
let buttons = new Set([
this.tracksButton,
@@ -319,6 +313,13 @@
return buttons;
}
+ // Private
+
+ _updateBottomControlsBarLabel()
+ {
+ this.bottomControlsBar.element.setAttribute("aria-label", this._shouldUseAudioLayout ? UIString("Audio Controls") : UIString("Video Controls"));
+ }
+
_addTopRightBarWithMuteButtonToChildren(children)
{
if (!this.muteButton.enabled)
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css (0 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css 2022-06-09 21:45:40 UTC (rev 295438)
@@ -0,0 +1,26 @@
+
+/* Volume slider */
+
+.media-controls.inline.ios:not(.audio) {
+ background-color: rgba(0, 0, 0, 0.55);
+}
+
+.media-controls.inline.ios:not(.audio):is(:empty, .faded) {
+ background-color: transparent;
+}
+
+.media-controls.inline.ios:not(.audio) * {
+ --primary-glyph-color: white;
+ --secondary-glyph-color: rgba(255, 255, 255, 0.75);
+}
+
+.media-controls.inline.ios:not(.audio) > .controls-bar:is(.top-left, .top-right) {
+ height: 19px;
+}
+
+.media-controls.inline.ios:not(.audio) > .controls-bar.center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -63,6 +63,78 @@
// Protected
+ layout()
+ {
+ if (this.timeControl) {
+ this.timeControl.scrubber.allowsRelativeScrubbing = this._shouldUseMultilineLayout;
+ this.timeControl.scrubber.knobStyle = this._shouldUseMultilineLayout ? Slider.KnobStyle.None : Slider.KnobStyle.Circle;
+ }
+
+ if (this.playPauseButton)
+ this.playPauseButton.scaleFactor = this._shouldUseMultilineLayout ? 3 : 1;
+
+ if (this.skipForwardButton)
+ this.skipForwardButton.scaleFactor = this._shouldUseMultilineLayout ? 2 : 1;
+
+ if (this.skipBackButton)
+ this.skipBackButton.scaleFactor = this._shouldUseMultilineLayout ? 2 : 1;
+
+ if (this._topLeftControlsBarContainer) {
+ this._topLeftControlsBarContainer.leftMargin = this._shouldUseMultilineLayout ? 2 : ButtonsContainer.Defaults.LeftMargin;
+ this._topLeftControlsBarContainer.rightMargin = this._shouldUseMultilineLayout ? 2 : ButtonsContainer.Defaults.RightMargin;
+ }
+
+ if (this._topRightControlsBarContainer) {
+ this._topRightControlsBarContainer.leftMargin = this._shouldUseMultilineLayout ? 2 : ButtonsContainer.Defaults.LeftMargin;
+ this._topRightControlsBarContainer.rightMargin = this._shouldUseMultilineLayout ? 2 : ButtonsContainer.Defaults.RightMargin;
+ }
+
+ if (this.leftContainer)
+ this.leftContainer.leftMargin = this._shouldUseMultilineLayout ? 2 : ButtonsContainer.Defaults.LeftMargin;
+ if (this.rightContainer)
+ this.rightContainer.rightMargin = this._shouldUseMultilineLayout ? 8 : ButtonsContainer.Defaults.RightMargin;
+
+ if (this._centerControlsBarContainer)
+ this._centerControlsBarContainer.buttonMargin = this._shouldUseMultilineLayout ? 48 : ButtonsContainer.Defaults.ButtonMargin;
+
+ if (this.topLeftControlsBar)
+ this.topLeftControlsBar.hasBackgroundTint = !this._shouldUseMultilineLayout;
+ if (this.topRightControlsBar)
+ this.topRightControlsBar.hasBackgroundTint = !this._shouldUseMultilineLayout;
+ if (this.centerControlsBar)
+ this.centerControlsBar.hasBackgroundTint = !this._shouldUseMultilineLayout;
+ if (this.bottomControlsBar)
+ this.bottomControlsBar.hasBackgroundTint = !this._shouldUseMultilineLayout;
+
+ super.layout();
+
+ if (this.playPauseButton?.style === Button.Styles.Corner)
+ this.playPauseButton.scaleFactor = 1;
+ }
+
+ centerContainerButtons() {
+ if (this._shouldUseMultilineLayout)
+ return [this.skipBackButton, this.playPauseButton, this.skipForwardButton];
+ return [];
+ }
+
+ leftContainerButtons()
+ {
+ if (this._shouldUseMultilineLayout)
+ return [];
+ return [this.skipBackButton, this.playPauseButton, this.skipForwardButton];
+ }
+
+ droppableButtons()
+ {
+ let buttons = super.droppableButtons();
+ if (this._shouldUseMultilineLayout) {
+ buttons.delete(this.skipForwardButton);
+ buttons.delete(this.skipBackButton);
+ }
+ return buttons;
+ }
+
gestureRecognizerStateDidChange(recognizer)
{
if (recognizer.state === GestureRecognizer.States.Cancelled) {
@@ -80,6 +152,11 @@
// Private
+ get _shouldUseMultilineLayout()
+ {
+ return !this._shouldUseSingleBarLayout && !this._shouldUseAudioLayout;
+ }
+
_updateGestureRecognizers()
{
const shouldListenToPinches = this.visible;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-layout-traits.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-layout-traits.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-layout-traits.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -77,7 +77,7 @@
skipDuration()
{
- return 15;
+ return 10;
}
promoteSubMenusWhenShowingMediaControlsContextMenu()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-traits.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-traits.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-traits.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -86,11 +86,6 @@
throw "Derived class must implement this function.";
}
- overflowButtonHasCircle()
- {
- return false;
- }
-
supportsTouches()
{
// Can be overridden by subclasses.
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -46,7 +46,7 @@
this.forwardButton = new ForwardButton(this);
this.fullscreenButton.isFullscreen = true;
- this.volumeSlider = new Slider("volume");
+ this.volumeSlider = new Slider(this, "volume");
this.volumeSlider.width = 60;
this._leftContainer = new ButtonsContainer({
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -40,7 +40,7 @@
this._backgroundClickDelegateNotifier = new BackgroundClickDelegateNotifier(this);
- this.volumeSlider = new Slider("volume");
+ this.volumeSlider = new Slider(this, "volume");
this.volumeSlider.width = 60;
this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/overflow-button.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/overflow-button.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/overflow-button.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -30,7 +30,7 @@
{
super({
cssClassName: "overflow",
- iconName: layoutDelegate?.layoutTraits?.overflowButtonHasCircle() ? Icons.OverflowCircle : Icons.Overflow,
+ iconName: Icons.Overflow,
layoutDelegate,
});
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2022-06-09 21:45:40 UTC (rev 295438)
@@ -40,6 +40,16 @@
height: 5px;
}
+.slider.allows-relative-scrubbing > .custom-slider {
+ transition-property: top, height;
+ transition-duration: 0.5s;
+}
+
+.slider.allows-relative-scrubbing > .custom-slider.changing {
+ top: 0.5px;
+ height: 15px;
+}
+
.slider > .custom-slider > * {
position: absolute;
}
@@ -50,6 +60,11 @@
mix-blend-mode: plus-lighter;
}
+.slider.allows-relative-scrubbing > .custom-slider > .fill {
+ transition-property: border-radius;
+ transition-duration: 0.5s;
+}
+
.slider > .custom-slider > .fill.primary {
left: 0;
background-color: rgba(255, 255, 255, 0.45);
@@ -57,6 +72,11 @@
border-bottom-left-radius: 4.5px;
}
+.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.primary {
+ border-top-left-radius: 7.5px;
+ border-bottom-left-radius: 7.5px;
+}
+
.slider > .custom-slider > .fill.track {
right: 0;
background-color: rgba(255, 255, 255, 0.1);
@@ -64,6 +84,11 @@
border-bottom-right-radius: 4.5px;
}
+.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.track {
+ border-top-right-radius: 7.5px;
+ border-bottom-right-radius: 7.5px;
+}
+
.slider > .custom-slider > .fill.secondary {
background-color: rgba(255, 255, 255, 0.08);
border-top-right-radius: 4.5px;
@@ -70,6 +95,11 @@
border-bottom-right-radius: 4.5px;
}
+.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.secondary {
+ border-top-right-radius: 7.5px;
+ border-bottom-right-radius: 7.5px;
+}
+
.slider > .custom-slider > .knob {
background-color: white;
transform: translateX(-50%);
@@ -108,11 +138,12 @@
outline: none;
}
+.slider.allows-relative-scrubbing > input {
+ pointer-events: all;
+ touch-action: none;
+}
.ios .slider > input {
- /* On iOS only, we want to only capture events on the thumb and not the track. */
- pointer-events: none;
-
/* Make sure we don't show any UI as we drag the scrubber on iOS. */
user-select: none !important;
-webkit-touch-callout: none !important;
@@ -119,6 +150,11 @@
-webkit-tap-highlight-color: transparent;
}
+.ios .slider:not(.allows-relative-scrubbing) > input {
+ /* On iOS only, we want to only capture events on the thumb and not the track. */
+ pointer-events: none;
+}
+
.slider > input::-webkit-slider-thumb {
width: 9px;
height: 100%;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -26,10 +26,12 @@
class Slider extends LayoutNode
{
- constructor(cssClassName = "", knobStyle = Slider.KnobStyle.Circle)
+ constructor(layoutDelegate, cssClassName = "", knobStyle = Slider.KnobStyle.Circle)
{
super(`<div class="slider ${cssClassName}"></div>`);
+ this._layoutDelegate = layoutDelegate;
+
this._container = new LayoutNode(`<div class="custom-slider"></div>`);
this._primaryFill = new LayoutNode(`<div class="primary fill"></div>`);
this._trackFill = new LayoutNode(`<div class="track fill"></div>`);
@@ -50,6 +52,10 @@
this._disabled = false;
this._knobStyle = knobStyle;
+ this._allowsRelativeScrubbing = false;
+ this._startValue = NaN;
+ this._startPosition = NaN;
+
this.children = [this._container, this._input];
}
@@ -124,6 +130,18 @@
this.needsLayout = true;
}
+ get allowsRelativeScrubbing()
+ {
+ return this._allowsRelativeScrubbing;
+ }
+
+ set allowsRelativeScrubbing(allowsRelativeScrubbing)
+ {
+ this._allowsRelativeScrubbing = !!allowsRelativeScrubbing;
+
+ this.element.classList.toggle("allows-relative-scrubbing", this._allowsRelativeScrubbing);
+ }
+
// Protected
handleEvent(event)
@@ -130,15 +148,21 @@
{
switch (event.type) {
case "pointerdown":
- this._handlePointerdownEvent();
- break;
+ this._handlePointerdownEvent(event);
+ return;
+
+ case "pointermove":
+ this._handlePointermoveEvent(event);
+ return;
+
case "pointerup":
- this._handlePointerupEvent();
- break;
+ this._handlePointerupEvent(event);
+ return;
+
case "change":
case "input":
this._valueDidChange();
- break;
+ return;
}
}
@@ -198,12 +222,29 @@
// Private
- _handlePointerdownEvent()
+ _handlePointerdownEvent(event)
{
this._pointerupTarget = this._interactionEndTarget();
- this._pointerupTarget.addEventListener("pointerup", this, true);
+ this._pointerupTarget.addEventListener("pointerup", this, { capture: true });
+ if (this._allowsRelativeScrubbing)
+ this._pointerupTarget.addEventListener("pointermove", this, { capture: true });
- this._valueWillStartChanging();
+ // We should no longer cache the value since we'll be interacting with the <input>
+ // so the value should be read back from it dynamically.
+ delete this._value;
+
+ if (this._allowsRelativeScrubbing) {
+ this._startValue = parseFloat(this._input.element.value);
+ this._startPosition = this._playbackProgress(event.pageX);
+ }
+
+ if (this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
+ this.uiDelegate.controlValueWillStartChanging(this);
+
+ this.isActive = true;
+ this._container.element.classList.add("changing");
+
+ this.needsLayout = true;
}
_interactionEndTarget()
@@ -214,29 +255,36 @@
return (!mediaControls || !mediaControls.layoutTraits.isFullscreen) ? window : mediaControls.element;
}
- _valueWillStartChanging()
+ _valueDidChange()
{
- // We should no longer cache the value since we'll be interacting with the <input>
- // so the value should be read back from it dynamically.
- delete this._value;
+ if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
+ this.uiDelegate.controlValueDidChange(this);
- if (this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
- this.uiDelegate.controlValueWillStartChanging(this);
- this.isActive = true;
this.needsLayout = true;
}
- _valueDidChange()
+ _handlePointermoveEvent(event)
{
- if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
- this.uiDelegate.controlValueDidChange(this);
+ if (!this._allowsRelativeScrubbing || isNaN(this._startValue) || isNaN(this._startPosition))
+ return;
- this.needsLayout = true;
+ let value = this._startValue + this._playbackProgress(event.pageX) - this._startPosition;
+ this._input.element.value = Math.min(Math.max(0, value), 1);
+ this._valueDidChange();
}
- _valueDidStopChanging()
+ _handlePointerupEvent(event)
{
+ this._pointerupTarget.removeEventListener("pointerup", this, { capture: true });
+ this._pointerupTarget.removeEventListener("pointermove", this, { capture: true });
+ delete this._pointerupTarget;
+
+ this._startValue = NaN;
+ this._startPosition = NaN;
+
this.isActive = false;
+ this._container.element.classList.remove("changing");
+
if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
this.uiDelegate.controlValueDidStopChanging(this);
@@ -243,12 +291,13 @@
this.needsLayout = true;
}
- _handlePointerupEvent()
+ _playbackProgress(pageX)
{
- this._pointerupTarget.removeEventListener("pointerup", this, true);
- delete this._pointerupTarget;
+ let x = window.webkitConvertPointFromPageToNode(this.element, new WebKitPoint(pageX, 0)).x;
+ if (this._layoutDelegate?.scaleFactor)
+ x *= this._layoutDelegate.scaleFactor;
- this._valueDidStopChanging();
+ return x / this.element.clientWidth;
}
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2022-06-09 21:45:40 UTC (rev 295438)
@@ -42,7 +42,7 @@
this._shouldShowDurationTimeLabel = this.layoutTraits.supportsDurationTimeLabel();
this.elapsedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
- this.scrubber = new Slider("scrubber");
+ this.scrubber = new Slider(this.layoutDelegate, "scrubber");
if (this._shouldShowDurationTimeLabel)
this.durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
this.remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Overflow.svg (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Overflow.svg 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Overflow.svg 2022-06-09 21:45:40 UTC (rev 295438)
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
- <path d="M3.4654228,6.50010323 C3.4654228,5.56764731 2.70936258,4.82 1.76011527,4.82 C0.836055054,4.82 0.08,5.56764731 0.08,6.50010323 C0.08,7.43255914 0.836055054,8.18020645 1.76011527,8.18020645 C2.70936258,8.18020645 3.4654228,7.43255914 3.4654228,6.50010323 Z M9.68181849,6.50010323 C9.68181849,5.56764731 8.93417118,4.82 8.00171527,4.82 C7.07765505,4.82 6.33000774,5.56764731 6.33000774,6.50010323 C6.33000774,7.43255914 7.07765505,8.18020645 8.00171527,8.18020645 C8.93417118,8.18020645 9.68181849,7.43255914 9.68181849,6.50010323 Z M15.9234013,6.50010323 C15.9234013,5.56764731 15.1757712,4.82 14.2433153,4.82 C13.2940508,4.82 12.5464034,5.56764731 12.5464034,6.50010323 C12.5464034,7.43255914 13.2940508,8.18020645 14.2433153,8.18020645 C15.1757712,8.18020645 15.9234013,7.43255914 15.9234013,6.50010323 Z"/>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path d="M 7.964844 15.925781 C 9.054688 15.925781 10.082031 15.71875 11.042969 15.304688 C 12.003906 14.890625 12.851562 14.316406 13.585938 13.578125 C 14.316406 12.84375 14.894531 11.996094 15.308594 11.035156 C 15.726562 10.074219 15.9375 9.050781 15.9375 7.964844 C 15.9375 6.875 15.726562 5.851562 15.308594 4.890625 C 14.894531 3.929688 14.316406 3.082031 13.578125 2.347656 C 12.84375 1.609375 11.996094 1.035156 11.035156 0.621094 C 10.074219 0.207031 9.046875 0 7.953125 0 C 6.867188 0 5.84375 0.207031 4.882812 0.621094 C 3.921875 1.035156 3.078125 1.609375 2.347656 2.347656 C 1.617188 3.082031 1.042969 3.929688 0.625 4.890625 C 0.207031 5.851562 0 6.875 0 7.964844 C 0 9.050781 0.207031 10.074219 0.625 11.035156 C 1.042969 11.996094 1.617188 12.84375 2.351562 13.578125 C 3.085938 14.316406 3.929688 14.890625 4.890625 15.304688 C 5.851562 15.71875 6.875 15.925781 7.964844 15.925781 Z M 7.964844 14.601562 C 7.042969 14.601562 6.183594 14.433594 5.382812 14.089844 C 4.5820
31 13.75 3.878906 13.273438 3.273438 12.664062 C 2.667969 12.058594 2.191406 11.351562 1.851562 10.546875 C 1.507812 9.742188 1.335938 8.882812 1.335938 7.964844 C 1.335938 7.042969 1.507812 6.183594 1.847656 5.378906 C 2.1875 4.574219 2.660156 3.867188 3.265625 3.261719 C 3.871094 2.652344 4.574219 2.175781 5.375 1.835938 C 6.175781 1.492188 7.035156 1.324219 7.953125 1.324219 C 8.878906 1.324219 9.742188 1.492188 10.542969 1.835938 C 11.347656 2.175781 12.050781 2.652344 12.660156 3.261719 C 13.265625 3.867188 13.742188 4.574219 14.085938 5.378906 C 14.433594 6.183594 14.605469 7.042969 14.605469 7.964844 C 14.605469 8.882812 14.433594 9.742188 14.09375 10.546875 C 13.75 11.351562 13.277344 12.058594 12.671875 12.664062 C 12.066406 13.273438 11.359375 13.75 10.558594 14.089844 C 9.753906 14.433594 8.886719 14.601562 7.964844 14.601562 Z M 4.320312 9.101562 C 4.628906 9.101562 4.894531 8.988281 5.117188 8.765625 C 5.339844 8.542969 5.453125 8.273438 5.453125 7.960938 C 5.453125 7.6
44531 5.339844 7.378906 5.117188 7.15625 C 4.894531 6.933594 4.628906 6.820312 4.320312 6.820312 C 4.007812 6.820312 3.738281 6.933594 3.515625 7.15625 C 3.289062 7.378906 3.179688 7.644531 3.179688 7.960938 C 3.179688 8.273438 3.289062 8.542969 3.515625 8.765625 C 3.738281 8.988281 4.007812 9.101562 4.320312 9.101562 Z M 7.964844 9.101562 C 8.277344 9.101562 8.542969 8.988281 8.765625 8.765625 C 8.984375 8.542969 9.097656 8.273438 9.097656 7.960938 C 9.097656 7.644531 8.984375 7.378906 8.765625 7.15625 C 8.542969 6.933594 8.277344 6.820312 7.964844 6.820312 C 7.648438 6.820312 7.378906 6.933594 7.15625 7.15625 C 6.933594 7.378906 6.820312 7.644531 6.820312 7.960938 C 6.820312 8.273438 6.933594 8.542969 7.15625 8.765625 C 7.378906 8.988281 7.648438 9.101562 7.964844 9.101562 Z M 11.605469 9.101562 C 11.917969 9.101562 12.1875 8.988281 12.40625 8.765625 C 12.628906 8.542969 12.738281 8.273438 12.738281 7.960938 C 12.738281 7.644531 12.628906 7.378906 12.40625 7.15625 C 12.1875 6.9335
94 11.917969 6.820312 11.605469 6.820312 C 11.292969 6.820312 11.023438 6.933594 10.796875 7.15625 C 10.574219 7.378906 10.464844 7.644531 10.464844 7.960938 C 10.464844 8.273438 10.574219 8.542969 10.796875 8.765625 C 11.023438 8.988281 11.292969 9.101562 11.605469 9.101562 Z M 11.605469 9.101562 "/>
</svg>
Deleted: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/OverflowCircle.svg (295437 => 295438)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/OverflowCircle.svg 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/OverflowCircle.svg 2022-06-09 21:45:40 UTC (rev 295438)
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-<path d="M 7.964844 15.925781 C 9.054688 15.925781 10.082031 15.71875 11.042969 15.304688 C 12.003906 14.890625 12.851562 14.316406 13.585938 13.578125 C 14.316406 12.84375 14.894531 11.996094 15.308594 11.035156 C 15.726562 10.074219 15.9375 9.050781 15.9375 7.964844 C 15.9375 6.875 15.726562 5.851562 15.308594 4.890625 C 14.894531 3.929688 14.316406 3.082031 13.578125 2.347656 C 12.84375 1.609375 11.996094 1.035156 11.035156 0.621094 C 10.074219 0.207031 9.046875 0 7.953125 0 C 6.867188 0 5.84375 0.207031 4.882812 0.621094 C 3.921875 1.035156 3.078125 1.609375 2.347656 2.347656 C 1.617188 3.082031 1.042969 3.929688 0.625 4.890625 C 0.207031 5.851562 0 6.875 0 7.964844 C 0 9.050781 0.207031 10.074219 0.625 11.035156 C 1.042969 11.996094 1.617188 12.84375 2.351562 13.578125 C 3.085938 14.316406 3.929688 14.890625 4.890625 15.304688 C 5.851562 15.71875 6.875 15.925781 7.964844 15.925781 Z M 7.964844 14.601562 C 7.042969 14.601562 6.183594 14.433594 5.382812 14.089844 C 4.5820
31 13.75 3.878906 13.273438 3.273438 12.664062 C 2.667969 12.058594 2.191406 11.351562 1.851562 10.546875 C 1.507812 9.742188 1.335938 8.882812 1.335938 7.964844 C 1.335938 7.042969 1.507812 6.183594 1.847656 5.378906 C 2.1875 4.574219 2.660156 3.867188 3.265625 3.261719 C 3.871094 2.652344 4.574219 2.175781 5.375 1.835938 C 6.175781 1.492188 7.035156 1.324219 7.953125 1.324219 C 8.878906 1.324219 9.742188 1.492188 10.542969 1.835938 C 11.347656 2.175781 12.050781 2.652344 12.660156 3.261719 C 13.265625 3.867188 13.742188 4.574219 14.085938 5.378906 C 14.433594 6.183594 14.605469 7.042969 14.605469 7.964844 C 14.605469 8.882812 14.433594 9.742188 14.09375 10.546875 C 13.75 11.351562 13.277344 12.058594 12.671875 12.664062 C 12.066406 13.273438 11.359375 13.75 10.558594 14.089844 C 9.753906 14.433594 8.886719 14.601562 7.964844 14.601562 Z M 4.320312 9.101562 C 4.628906 9.101562 4.894531 8.988281 5.117188 8.765625 C 5.339844 8.542969 5.453125 8.273438 5.453125 7.960938 C 5.453125 7.6
44531 5.339844 7.378906 5.117188 7.15625 C 4.894531 6.933594 4.628906 6.820312 4.320312 6.820312 C 4.007812 6.820312 3.738281 6.933594 3.515625 7.15625 C 3.289062 7.378906 3.179688 7.644531 3.179688 7.960938 C 3.179688 8.273438 3.289062 8.542969 3.515625 8.765625 C 3.738281 8.988281 4.007812 9.101562 4.320312 9.101562 Z M 7.964844 9.101562 C 8.277344 9.101562 8.542969 8.988281 8.765625 8.765625 C 8.984375 8.542969 9.097656 8.273438 9.097656 7.960938 C 9.097656 7.644531 8.984375 7.378906 8.765625 7.15625 C 8.542969 6.933594 8.277344 6.820312 7.964844 6.820312 C 7.648438 6.820312 7.378906 6.933594 7.15625 7.15625 C 6.933594 7.378906 6.820312 7.644531 6.820312 7.960938 C 6.820312 8.273438 6.933594 8.542969 7.15625 8.765625 C 7.378906 8.988281 7.648438 9.101562 7.964844 9.101562 Z M 11.605469 9.101562 C 11.917969 9.101562 12.1875 8.988281 12.40625 8.765625 C 12.628906 8.542969 12.738281 8.273438 12.738281 7.960938 C 12.738281 7.644531 12.628906 7.378906 12.40625 7.15625 C 12.1875 6.9335
94 11.917969 6.820312 11.605469 6.820312 C 11.292969 6.820312 11.023438 6.933594 10.796875 7.15625 C 10.574219 7.378906 10.464844 7.644531 10.464844 7.960938 C 10.464844 8.273438 10.574219 8.542969 10.796875 8.765625 C 11.023438 8.988281 11.292969 9.101562 11.605469 9.101562 Z M 11.605469 9.101562 "/>
-</svg>
Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (295437 => 295438)
--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2022-06-09 21:41:45 UTC (rev 295437)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2022-06-09 21:45:40 UTC (rev 295438)
@@ -11264,6 +11264,7 @@
714F5B081DEE5F8A0075BD17 /* invalid-plac...@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "invalid-plac...@3x.png"; sourceTree = "<group>"; };
714F5B091DEE5F9E0075BD17 /* invalid-plac...@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "invalid-plac...@1x.png"; sourceTree = "<group>"; };
714F5B0A1DEE5F9E0075BD17 /* invalid-plac...@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "invalid-plac...@2x.png"; sourceTree = "<group>"; };
+ 7152CEC21DD2235300FD5961 /* ios-inline-media-controls.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "ios-inline-media-controls.css"; sourceTree = "<group>"; };
7152CEC21DD2235300FD5962 /* ios-inline-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "ios-inline-media-controls.js"; sourceTree = "<group>"; };
715379FE146BD9D6008BD615 /* SVGPathData.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGPathData.cpp; sourceTree = "<group>"; };
715379FF146BD9D6008BD615 /* SVGPathData.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGPathData.h; sourceTree = "<group>"; };
@@ -24927,6 +24928,7 @@
9551959A25FA9EC600F58CF0 /* inline-media-controls.css */,
9551959B25FA9ECC00F58CF0 /* inline-media-controls.js */,
714F5B051DEE5F740075BD17 /* invalid-placard.js */,
+ 7152CEC21DD2235300FD5961 /* ios-inline-media-controls.css */,
7152CEC21DD2235300FD5962 /* ios-inline-media-controls.js */,
BCD373702686423C003644E4 /* ios-layout-traits.js */,
716FA0E51DB26591007323CC /* layout-item.js */,
