- Revision
- 214545
- Author
- commit-qu...@webkit.org
- Date
- 2017-03-29 10:28:48 -0700 (Wed, 29 Mar 2017)
Log Message
[Modern Media Controls] Controls bar may disappear while captions menu is visible (redux)
https://bugs.webkit.org/show_bug.cgi?id=170239
<rdar://problem/31320685>
Patch by Antoine Quint <grao...@apple.com> on 2017-03-29
Reviewed by Dean Jackson.
Source/WebCore:
We did some work in webkit.org/b/168751 to prevent the controls bar from disappearing while the
captions menu is visible. But there were two cases where the behavior was not as intended:
1. the controls bar would hide upon exiting the video.
2. clicking on the controls bar while the caption panel is up would hide the controls bar
as well as the captions panel.
Instead of determining that the "userInteractionEnabled" property being set to "false" is indicative
of secondary UI, such as the tracks panel, being attached to the controls bar, we now have an
explicit property to specify this. Now, when "hasSecondaryUIAttached" is "true", we prevent the
controls bar from fading when exiting the media.
Additionally, when dismissing the tracks panel, we check whether a mouse event lead to this and check
if the mouse was positioned over the controls bar. If that is the case, we no longer hide the controls
bar and only dismiss the tracks panel.
Test: media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html
* Modules/modern-media-controls/controls/controls-bar.js:
(ControlsBar.prototype.set userInteractionEnabled):
(ControlsBar.prototype.handleEvent):
(ControlsBar.prototype._autoHideTimerFired):
* Modules/modern-media-controls/controls/macos-media-controls.js:
(MacOSMediaControls.prototype.showTracksPanel):
(MacOSMediaControls.prototype.hideTracksPanel):
LayoutTests:
We extend an existing test to cover the case where we would hide the controls bar while the tracks panel
is up by mousing out of the media. We also add a new test where we check that clicking over the controls
bar to dismiss the tracks panel does not hide the controls bar. Finally, we make a small change to an
existing test to listen to "transitionend" event on the tracks panel specifically since with this patch
the controls bar would disappear and trigger a similar event when disappearing as the tracks panel is dismissed.
* media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it-expected.txt: Added.
* media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html: Added.
* media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt:
* media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html:
* media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (214544 => 214545)
--- trunk/LayoutTests/ChangeLog 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/LayoutTests/ChangeLog 2017-03-29 17:28:48 UTC (rev 214545)
@@ -1,3 +1,23 @@
+2017-03-29 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Controls bar may disappear while captions menu is visible (redux)
+ https://bugs.webkit.org/show_bug.cgi?id=170239
+ <rdar://problem/31320685>
+
+ Reviewed by Dean Jackson.
+
+ We extend an existing test to cover the case where we would hide the controls bar while the tracks panel
+ is up by mousing out of the media. We also add a new test where we check that clicking over the controls
+ bar to dismiss the tracks panel does not hide the controls bar. Finally, we make a small change to an
+ existing test to listen to "transitionend" event on the tracks panel specifically since with this patch
+ the controls bar would disappear and trigger a similar event when disappearing as the tracks panel is dismissed.
+
+ * media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it-expected.txt: Added.
+ * media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html: Added.
+ * media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt:
+ * media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html:
+ * media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html:
+
2017-03-28 Ryan Haddad <ryanhad...@apple.com>
Mark fast/workers/worker-close-more.html as a flaky timeout.
Copied: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it-expected.txt (from rev 214544, trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt) (0 => 214545)
--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it-expected.txt 2017-03-29 17:28:48 UTC (rev 214545)
@@ -0,0 +1,19 @@
+Clicking on the controls bar to dismiss the tracks panel should not hide the controls bar, only the track panel.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+mediaControls.showTracksPanel()
+PASS mediaControls.tracksPanel.element.parentNode became mediaControls.element
+
+We've waited long enough so that the controls bar should be faded should the tracks panel not be visible
+PASS mediaControls.controlsBar.faded is false
+
+Click on the controls bar to dismiss the panel, the controls bar should remain visible
+PASS mediaControls.controlsBar.faded is false
+PASS mediaControls.tracksPanel.presented is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Copied: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html (from rev 214544, trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html) (0 => 214545)
--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html 2017-03-29 17:28:48 UTC (rev 214545)
@@ -0,0 +1,55 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<style type="text/css" media="screen">
+
+ .media-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+</style>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Clicking on the controls bar to dismiss the tracks panel should not hide the controls bar, only the track panel.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+document.body.appendChild(mediaControls.element);
+
+let trackElement;
+
+mediaControls.controlsBar.autoHideDelay = 250;
+mediaControls.controlsBar.fadesWhileIdle = true;
+
+debug("mediaControls.showTracksPanel()");
+mediaControls.showTracksPanel();
+
+shouldBecomeEqual("mediaControls.tracksPanel.element.parentNode", "mediaControls.element", () => {
+ // Let's wait a while to see that the controls bar is still visible.
+ setTimeout(() => {
+ debug("");
+ debug("We've waited long enough so that the controls bar should be faded should the tracks panel not be visible");
+ shouldBeFalse("mediaControls.controlsBar.faded");
+
+ debug("");
+ debug("Click on the controls bar to dismiss the panel, the controls bar should remain visible");
+ eventSender.mouseMoveTo(670, 290);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+
+ shouldBeFalse("mediaControls.controlsBar.faded");
+ shouldBeFalse("mediaControls.tracksPanel.presented");
+
+ debug("");
+ mediaControls.element.remove();
+ finishJSTest();
+ }, mediaControls.controlsBar.autoHideDelay);
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt (214544 => 214545)
--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading-expected.txt 2017-03-29 17:28:48 UTC (rev 214545)
@@ -9,6 +9,9 @@
We've waited long enough so that the controls bar should be faded should the tracks panel not be visible
PASS mediaControls.controlsBar.faded is false
+Now enter and exit the media controls, the controls bar should remain visible
+PASS mediaControls.controlsBar.faded is false
+
mediaControls.hideTracksPanel()
PASS mediaControls.controlsBar.faded is true
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html (214544 => 214545)
--- trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-prevent-controls-bar-from-fading.html 2017-03-29 17:28:48 UTC (rev 214545)
@@ -35,6 +35,13 @@
debug("We've waited long enough so that the controls bar should be faded should the tracks panel not be visible");
shouldBeFalse("mediaControls.controlsBar.faded");
+ debug("");
+ debug("Now enter and exit the media controls, the controls bar should remain visible");
+ eventSender.mouseMoveTo(700, 10);
+ eventSender.mouseMoveTo(650, 10);
+ eventSender.mouseMoveTo(700, 10);
+ shouldBeFalse("mediaControls.controlsBar.faded");
+
// And now dismiss the tracks panel and check that the controls bar
// fades out as well.
debug("");
Modified: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html (214544 => 214545)
--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-click-track-in-panel.html 2017-03-29 17:28:48 UTC (rev 214545)
@@ -77,7 +77,7 @@
dumpAudioTracksEnabledState();
if (media.audioTracks[1].enabled)
- shadowRoot.lastChild.addEventListener("transitionend", event => clickOnTracksButton(clickOnThirdAudioTrack));
+ shadowRoot.querySelector(".tracks-panel").addEventListener("transitionend", event => clickOnTracksButton(clickOnThirdAudioTrack));
else if (media.audioTracks[2].enabled) {
debug("");
media.remove();
Modified: trunk/Source/WebCore/ChangeLog (214544 => 214545)
--- trunk/Source/WebCore/ChangeLog 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/Source/WebCore/ChangeLog 2017-03-29 17:28:48 UTC (rev 214545)
@@ -1,5 +1,39 @@
2017-03-29 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Controls bar may disappear while captions menu is visible (redux)
+ https://bugs.webkit.org/show_bug.cgi?id=170239
+ <rdar://problem/31320685>
+
+ Reviewed by Dean Jackson.
+
+ We did some work in webkit.org/b/168751 to prevent the controls bar from disappearing while the
+ captions menu is visible. But there were two cases where the behavior was not as intended:
+
+ 1. the controls bar would hide upon exiting the video.
+ 2. clicking on the controls bar while the caption panel is up would hide the controls bar
+ as well as the captions panel.
+
+ Instead of determining that the "userInteractionEnabled" property being set to "false" is indicative
+ of secondary UI, such as the tracks panel, being attached to the controls bar, we now have an
+ explicit property to specify this. Now, when "hasSecondaryUIAttached" is "true", we prevent the
+ controls bar from fading when exiting the media.
+
+ Additionally, when dismissing the tracks panel, we check whether a mouse event lead to this and check
+ if the mouse was positioned over the controls bar. If that is the case, we no longer hide the controls
+ bar and only dismiss the tracks panel.
+
+ Test: media/modern-media-controls/tracks-panel/tracks-panel-controls-bar-remains-visible-after-clicking-over-it.html
+
+ * Modules/modern-media-controls/controls/controls-bar.js:
+ (ControlsBar.prototype.set userInteractionEnabled):
+ (ControlsBar.prototype.handleEvent):
+ (ControlsBar.prototype._autoHideTimerFired):
+ * Modules/modern-media-controls/controls/macos-media-controls.js:
+ (MacOSMediaControls.prototype.showTracksPanel):
+ (MacOSMediaControls.prototype.hideTracksPanel):
+
+2017-03-29 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] Volume slider is initially empty
https://bugs.webkit.org/show_bug.cgi?id=170237
<rdar://problem/31319077>
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (214544 => 214545)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2017-03-29 17:28:48 UTC (rev 214545)
@@ -40,6 +40,7 @@
this.fadesWhileIdle = false;
this.userInteractionEnabled = true;
+ this.hasSecondaryUIAttached = false;
this.element.addEventListener("focusin", this);
}
@@ -72,10 +73,6 @@
this._userInteractionEnabled = flag;
this.markDirtyProperty("userInteractionEnabled");
-
- if (this._userInteractionEnabled && this._controlsShouldFadeWhenUserInteractionBecomesEnabled)
- this.faded = true;
- delete this._controlsShouldFadeWhenUserInteractionBecomesEnabled;
}
get fadesWhileIdle()
@@ -162,7 +159,7 @@
if (event.type === "mousemove") {
this.faded = false;
this._resetAutoHideTimer(true);
- } else if (event.type === "mouseleave" && this._fadesWhileIdle && !this._enforceAutoHideTimer)
+ } else if (event.type === "mouseleave" && this._fadesWhileIdle && !this.hasSecondaryUIAttached && !this._enforceAutoHideTimer)
this.faded = true;
} else if (event.currentTarget === this.element) {
if (event.type === "mouseenter") {
@@ -248,16 +245,7 @@
return;
this._cancelAutoHideTimer();
- if (!this._fadesWhileIdle)
- return;
-
- // We don't want to fade the controls when user interaction becomes disabled
- // because secondary UI attached to the controls is being shown and we want
- // to wait until it no longer is to fade the controls out.
- if (!this._userInteractionEnabled)
- this._controlsShouldFadeWhenUserInteractionBecomesEnabled = true;
- else
- this.faded = true;
+ this.faded = this._fadesWhileIdle && !this.hasSecondaryUIAttached;
}
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (214544 => 214545)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2017-03-29 17:27:23 UTC (rev 214544)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2017-03-29 17:28:48 UTC (rev 214545)
@@ -48,6 +48,7 @@
this.tracksButton.on = true;
this.tracksButton.element.blur();
this.controlsBar.userInteractionEnabled = false;
+ this.controlsBar.hasSecondaryUIAttached = true;
this.tracksPanel.presentInParent(this);
const controlsBounds = this.element.getBoundingClientRect();
@@ -60,9 +61,19 @@
hideTracksPanel()
{
+ let shouldFadeControlsBar = true;
+ if (window.event instanceof MouseEvent) {
+ const x = window.event.clientX;
+ const y = window.event.clientY;
+ const bounds = this.controlsBar.element.getBoundingClientRect();
+ shouldFadeControlsBar = x < bounds.left || x > bounds.right || y < bounds.top || y > bounds.bottom;
+ }
+
this.tracksButton.on = false;
this.tracksButton.element.focus();
this.controlsBar.userInteractionEnabled = true;
+ this.controlsBar.hasSecondaryUIAttached = false;
+ this.controlsBar.faded = shouldFadeControlsBar;
this.tracksPanel.hide();
}
