Diff
Modified: trunk/LayoutTests/ChangeLog (209522 => 209523)
--- trunk/LayoutTests/ChangeLog 2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/LayoutTests/ChangeLog 2016-12-08 05:51:05 UTC (rev 209523)
@@ -1,3 +1,17 @@
+2016-12-07 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Tracks panel does not display in the right location in fullscreen and cannot be dismissed
+ https://bugs.webkit.org/show_bug.cgi?id=165575
+
+ Reviewed by Dean Jackson.
+
+ Add new tests to check we correctly position the tracks panel in fullscreen, including when we drag the controls bar.
+
+ * media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html: Added.
+
2016-12-07 Jeremy Jones <[email protected]>
pointer-lock/lock-lost-on-esc-in-fullscreen.html timeout on mac-wk1
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt (0 => 209523)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls-expected.txt 2016-12-08 05:51:05 UTC (rev 209523)
@@ -0,0 +1,12 @@
+Testing the display of a tracks panel after dragging the controls bar in fullscreen.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS shadowRoot.querySelector('.tracks-panel').style.right is "267px"
+PASS shadowRoot.querySelector('.tracks-panel').style.bottom is "151px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html (0 => 209523)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html 2016-12-08 05:51:05 UTC (rev 209523)
@@ -0,0 +1,59 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="width: 320px; height: 240px;" controls autoplay></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the display of a tracks panel after dragging the controls bar in fullscreen.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("webkitbeginfullscreen", () => {
+ debug("webkitbeginfullscreen");
+});
+
+media.addEventListener("webkitfullscreenchange", () => {
+ if (media.webkitDisplayingFullscreen) {
+ window.requestAnimationFrame(() => {
+ const bounds = shadowRoot.querySelector(".controls-bar").getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 10, bounds.top + 10);
+ eventSender.mouseDown();
+ eventSender.mouseMoveTo(bounds.left - 40, bounds.top - 40);
+ eventSender.mouseUp();
+
+ window.requestAnimationFrame(() => {
+ window.requestAnimationFrame(() => {
+ clickOnButton("tracks");
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("shadowRoot.querySelector('.tracks-panel').style.right", "267px");
+ shouldBeEqualToString("shadowRoot.querySelector('.tracks-panel').style.bottom", "151px");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ });
+ });
+ });
+ });
+ }
+});
+
+media.addEventListener("play", () => {
+ media.pause();
+ window.requestAnimationFrame(() => clickOnButton("fullscreen"));
+});
+
+function clickOnButton(name)
+{
+ const bounds = shadowRoot.querySelector(`button.${name}`).getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt (0 => 209523)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen-expected.txt 2016-12-08 05:51:05 UTC (rev 209523)
@@ -0,0 +1,12 @@
+Showing the tracks panel in fullscreen.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS shadowRoot.querySelector('.tracks-panel').style.right is "217px"
+PASS shadowRoot.querySelector('.tracks-panel').style.bottom is "101px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html (0 => 209523)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html 2016-12-08 05:51:05 UTC (rev 209523)
@@ -0,0 +1,51 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="width: 320px; height: 240px;" controls autoplay></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Showing the tracks panel in fullscreen.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("webkitbeginfullscreen", () => {
+ debug("webkitbeginfullscreen");
+});
+
+media.addEventListener("webkitfullscreenchange", () => {
+ if (media.webkitDisplayingFullscreen) {
+ window.requestAnimationFrame(() => {
+ clickOnButton("tracks");
+ window.requestAnimationFrame(() => {
+ window.requestAnimationFrame(() => {
+ shouldBeEqualToString("shadowRoot.querySelector('.tracks-panel').style.right", "217px");
+ shouldBeEqualToString("shadowRoot.querySelector('.tracks-panel').style.bottom", "101px");
+
+ debug("");
+ media.remove();
+ finishJSTest();
+ });
+ });
+ });
+ }
+});
+
+media.addEventListener("play", () => {
+ media.pause();
+ window.requestAnimationFrame(() => clickOnButton("fullscreen"));
+});
+
+function clickOnButton(name)
+{
+ const bounds = shadowRoot.querySelector(`button.${name}`).getBoundingClientRect();
+ eventSender.mouseMoveTo(bounds.left + 1, bounds.top + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+}
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (209522 => 209523)
--- trunk/Source/WebCore/ChangeLog 2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/ChangeLog 2016-12-08 05:51:05 UTC (rev 209523)
@@ -1,5 +1,33 @@
2016-12-07 Antoine Quint <[email protected]>
+ [Modern Media Controls] Tracks panel does not display in the right location in fullscreen and cannot be dismissed
+ https://bugs.webkit.org/show_bug.cgi?id=165575
+
+ Reviewed by Dean Jackson.
+
+ We position the tracks panel programmatically based on the current bounds of the fullscreen button in fullscreen.
+ This allows for the tracks panel to be shown in the right spot even after dragging the controls bar. We also use
+ the fullscreen media controls as the target for tracking "mousedown" events when the tracks panel is shown in a
+ fullscreen presentation.
+
+ Tests: media/modern-media-controls/tracks-support/tracks-support-show-panel-after-dragging-controls.html
+ media/modern-media-controls/tracks-support/tracks-support-show-panel-fullscreen.html
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+ (.media-controls.mac.fullscreen .scrubber):
+ (.media-controls.mac.fullscreen .tracks-panel): Deleted.
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+ (MacOSFullscreenMediaControls.prototype.showTracksPanel):
+ * Modules/modern-media-controls/controls/tracks-panel.js:
+ (TracksPanel.prototype.presentInParent):
+ (TracksPanel.prototype.hide):
+ (TracksPanel.prototype.get bottomY):
+ (TracksPanel.prototype.set bottomY):
+ (TracksPanel.prototype.commitProperty):
+ (TracksPanel.prototype._mousedownTarget):
+
+2016-12-07 Antoine Quint <[email protected]>
+
[Modern Media Controls] Use a small picture-in-picture button in fullscreen
https://bugs.webkit.org/show_bug.cgi?id=165587
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (209522 => 209523)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-08 05:51:05 UTC (rev 209523)
@@ -132,11 +132,3 @@
.media-controls.mac.fullscreen .scrubber {
top: 7px;
}
-
-/* Tracks Panel */
-
-.media-controls.mac.fullscreen .tracks-panel {
- /* Half of the screen width minus half of the controls bar width minus the distance to the right edge of the tracks button */
- right: calc(50% - var(--controls-bar-width) / 2 + var(--tracks-panel-right-margin));
- bottom: 234px;
-}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js (209522 => 209523)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js 2016-12-08 05:51:05 UTC (rev 209523)
@@ -64,6 +64,17 @@
this.element.addEventListener("mousedown", this);
}
+ // Public
+
+ showTracksPanel()
+ {
+ super.showTracksPanel();
+
+ const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect();
+ this.tracksPanel.rightX = window.innerWidth - tracksButtonBounds.right;
+ this.tracksPanel.bottomY = window.innerHeight - tracksButtonBounds.top + 1;
+ }
+
// Protected
handleEvent(event)
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js (209522 => 209523)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js 2016-12-08 05:18:06 UTC (rev 209522)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js 2016-12-08 05:51:05 UTC (rev 209523)
@@ -6,6 +6,7 @@
{
super(`<div class="tracks-panel">`);
this._rightX = 0;
+ this._bottomY = 0;
}
// Public
@@ -27,7 +28,7 @@
this.element.removeEventListener("transitionend", this);
this.element.classList.remove("fade-out");
- window.addEventListener("mousedown", this, true);
+ this._mousedownTarget().addEventListener("mousedown", this, true);
window.addEventListener("keydown", this, true);
this._focusedTrackNode = null;
@@ -38,7 +39,7 @@
if (!this.presented)
return;
- window.removeEventListener("mousedown", this, true);
+ this._mousedownTarget().removeEventListener("mousedown", this, true);
window.removeEventListener("keydown", this, true);
this.element.addEventListener("transitionend", this);
@@ -45,6 +46,20 @@
this.element.classList.add("fade-out");
}
+ get bottomY()
+ {
+ return this._bottomY;
+ }
+
+ set bottomY(bottomY)
+ {
+ if (this._bottomY === bottomY)
+ return;
+
+ this._bottomY = bottomY;
+ this.markDirtyProperty("bottomY");
+ }
+
get rightX()
{
return this._rightX;
@@ -82,6 +97,8 @@
{
if (propertyName === "rightX")
this.element.style.right = `${this._rightX}px`;
+ else if (propertyName === "bottomY")
+ this.element.style.bottom = `${this._bottomY}px`;
else
super.commitProperty(propertyName);
}
@@ -103,6 +120,14 @@
// Private
+ _mousedownTarget()
+ {
+ const mediaControls = this.parentOfType(MacOSFullscreenMediaControls);
+ if (mediaControls)
+ return mediaControls.element;
+ return window;
+ }
+
_childrenFromDataSource()
{
const children = [];
