Bug 1415596 - Make click to play button transparent when status overlay is present on video controls. r=jaws
MozReview-Commit-ID: 6xweGJQoR6R
--- a/toolkit/content/tests/widgets/test_videocontrols_error.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_error.html
@@ -15,17 +15,16 @@
<video id="video" controls preload="auto"></video>
</div>
<pre id="test">
<script clas="testbody" type="application/javascript">
const video = document.getElementById("video");
const statusOverlay = getAnonElementWithinVideoByAttribute(video, "anonid", "statusOverlay");
const statusIcon = getAnonElementWithinVideoByAttribute(video, "anonid", "statusIcon");
- const clickToPlay = getAnonElementWithinVideoByAttribute(video, "anonid", "clickToPlay");
add_task(async function setup() {
await new Promise(resolve => window.addEventListener("load", resolve, {once: true}));
await SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]});
});
add_task(async function check_normal_status() {
await new Promise(resolve => {
@@ -41,17 +40,16 @@
add_task(async function invalid_source() {
const errorType = "errorNoSource";
await new Promise(resolve => {
video.src = "invalid_source.ogg";
video.addEventListener("error", () => SimpleTest.executeSoon(resolve));
});
- ok(clickToPlay.hasAttribute("hidden"), `click to play button should hide`);
ok(!statusOverlay.hidden, `statusOverlay should show when ${errorType}`);
is(statusOverlay.getAttribute("error"), errorType, `statusOverlay should have correct error state: ${errorType}`);
is(statusIcon.getAttribute("type"), "error", `should show error icon when ${errorType}`);
});
</script>
</pre>
</body>
</html>
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1735,18 +1735,17 @@
const clickToPlayViewRatio = 0.15;
const clickToPlayScaledSize = Math.max(
this.clickToPlay.minWidth, minVideoSideLength * clickToPlayViewRatio);
if (clickToPlayScaledSize >= videoWidth ||
(clickToPlayScaledSize + this.controlBarMinHeight / 2 >= videoHeight / 2 )) {
this.clickToPlay.hideByAdjustment = true;
} else {
- if (this.clickToPlay.hidden && !this.video.played.length &&
- this.video.paused && this.clickToPlay.hideByAdjustment) {
+ if (this.clickToPlay.hidden && !this.video.played.length && this.video.paused) {
this.clickToPlay.hideByAdjustment = false;
}
this.clickToPlay.style.width = `${clickToPlayScaledSize}px`;
this.clickToPlay.style.height = `${clickToPlayScaledSize}px`;
}
},
init(binding) {
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -433,17 +433,18 @@ audio > xul|videocontrols {
transition-property: opacity, margin-top;
transition-duration: 200ms, 200ms;
}
.statusOverlay:not([immediate]) {
transition-property: opacity;
transition-duration: 300ms;
transition-delay: 750ms;
}
-.statusOverlay[fadeout] {
+.statusOverlay[fadeout],
+.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack {
opacity: 0;
}
/* Error description formatting */
.errorLabel {
padding: 0 10px;
text-align: center;
font: message-box;