ma1 pushed to branch base-browser-102.14.0esr-12.5-1 at The Tor Project / Applications / Tor Browser Commits: f24d6cd4 by Edgar Chen at 2023-07-31T21:15:57+02:00 Bug 1821884 - Ensure consistent state for fullscreen/pointerlock warnings; r=Gijs Fullscreen/PointerLock warnings are initialized with hidden="true", but change to hidden="" after being shown and hidden again. I think this started happening when we began using HTML elements instead of XUL as they handle hidden attribute differently. Differential Revision: https://phabricator.services.mozilla.com/D177790 - - - - - 53142727 by Edgar Chen at 2023-07-31T21:16:28+02:00 Bug 1821884 - Reshow initial fullscreen notification; r=Gijs Depends on D177790 Differential Revision: https://phabricator.services.mozilla.com/D178339 - - - - - 4 changed files: - browser/base/content/browser-fullScreenAndPointerLock.js - browser/base/content/fullscreen-and-pointerlock.inc.xhtml - browser/base/content/test/fullscreen/browser_fullscreen_warning.js - dom/tests/browser/browser_pointerlock_warning.js Changes: ===================================== browser/base/content/browser-fullScreenAndPointerLock.js ===================================== @@ -62,9 +62,14 @@ var PointerlockFsWarning = { this._element = document.getElementById(elementId); // Setup event listeners this._element.addEventListener("transitionend", this); + this._element.addEventListener("transitioncancel", this); window.addEventListener("mousemove", this, true); + window.addEventListener("activate", this); + window.addEventListener("deactivate", this); // The timeout to hide the warning box after a while. this._timeoutHide = new this.Timeout(() => { + window.removeEventListener("activate", this); + window.removeEventListener("deactivate", this); this._state = "hidden"; }, timeout); // The timeout to show the warning box when the pointer is at the top @@ -116,11 +121,10 @@ var PointerlockFsWarning = { return; } - // Explicitly set the last state to hidden to avoid the warning - // box being hidden immediately because of mousemove. - this._state = "onscreen"; - this._lastState = "hidden"; - this._timeoutHide.start(); + if (Services.focus.activeWindow == window) { + this._state = "onscreen"; + this._timeoutHide.start(); + } }, /** @@ -148,7 +152,10 @@ var PointerlockFsWarning = { this._element.hidden = true; // Remove all event listeners this._element.removeEventListener("transitionend", this); + this._element.removeEventListener("transitioncancel", this); window.removeEventListener("mousemove", this, true); + window.removeEventListener("activate", this); + window.removeEventListener("deactivate", this); // Clear fields this._element = null; this._timeoutHide = null; @@ -186,7 +193,7 @@ var PointerlockFsWarning = { } if (newState != "hidden") { if (currentState != "hidden") { - this._element.setAttribute(newState, true); + this._element.setAttribute(newState, ""); } else { // When the previous state is hidden, the display was none, // thus no box was constructed. We need to wait for the new @@ -197,7 +204,7 @@ var PointerlockFsWarning = { requestAnimationFrame(() => { requestAnimationFrame(() => { if (this._element) { - this._element.setAttribute(newState, true); + this._element.setAttribute(newState, ""); } }); }); @@ -217,7 +224,7 @@ var PointerlockFsWarning = { } else if (this._timeoutShow.delay >= 0) { this._timeoutShow.start(); } - } else { + } else if (state != "onscreen") { let elemRect = this._element.getBoundingClientRect(); if (state == "hiding" && this._lastState != "hidden") { // If we are on the hiding transition, and the pointer @@ -239,12 +246,23 @@ var PointerlockFsWarning = { } break; } - case "transitionend": { + case "transitionend": + case "transitioncancel": { if (this._state == "hiding") { this._element.hidden = true; } break; } + case "activate": { + this._state = "onscreen"; + this._timeoutHide.start(); + break; + } + case "deactivate": { + this._state = "hidden"; + this._timeoutHide.cancel(); + break; + } } }, }; ===================================== browser/base/content/fullscreen-and-pointerlock.inc.xhtml ===================================== @@ -3,7 +3,7 @@ # file, You can obtain one at http://mozilla.org/MPL/2.0/. <html:div id="fullscreen-and-pointerlock-wrapper"> - <html:div id="fullscreen-warning" class="pointerlockfswarning" hidden="true"> + <html:div id="fullscreen-warning" class="pointerlockfswarning" hidden=""> <html:div class="pointerlockfswarning-domain-text"> <html:span class="pointerlockfswarning-domain" data-l10n-name="domain"/> </html:div> @@ -20,7 +20,7 @@ </html:button> </html:div> - <html:div id="pointerlock-warning" class="pointerlockfswarning" hidden="true"> + <html:div id="pointerlock-warning" class="pointerlockfswarning" hidden=""> <html:div class="pointerlockfswarning-domain-text"> <html:span class="pointerlockfswarning-domain" data-l10n-name="domain"/> </html:div> ===================================== browser/base/content/test/fullscreen/browser_fullscreen_warning.js ===================================== @@ -3,14 +3,35 @@ "use strict"; -add_task(async function test_fullscreen_display_none() { +function checkWarningState(aWarningElement, aExpectedState, aMsg) { + ["hidden", "ontop", "onscreen"].forEach(state => { + is( + aWarningElement.hasAttribute(state), + state == aExpectedState, + `${aMsg} - check ${state} attribute.` + ); + }); +} + +async function waitForWarningState(aWarningElement, aExpectedState) { + await BrowserTestUtils.waitForAttribute(aExpectedState, aWarningElement, ""); + checkWarningState( + aWarningElement, + aExpectedState, + `Wait for ${aExpectedState} state` + ); +} + +add_setup(async function init() { await SpecialPowers.pushPrefEnv({ set: [ ["full-screen-api.enabled", true], ["full-screen-api.allow-trusted-requests-only", false], ], }); +}); +add_task(async function test_fullscreen_display_none() { await BrowserTestUtils.withNewTab( { gBrowser, @@ -30,11 +51,13 @@ add_task(async function test_fullscreen_display_none() { }, async function(browser) { let warning = document.getElementById("fullscreen-warning"); - let warningShownPromise = BrowserTestUtils.waitForAttribute( - "onscreen", + checkWarningState( warning, - "true" + "hidden", + "Should not show full screen warning initially" ); + + let warningShownPromise = waitForWarningState(warning, "onscreen"); // Enter fullscreen await SpecialPowers.spawn(browser, [], async () => { let frame = content.document.querySelector("iframe"); @@ -54,39 +77,33 @@ add_task(async function test_fullscreen_display_none() { ); document.getElementById("fullscreen-exit-button").click(); await exitFullscreenPromise; + + checkWarningState( + warning, + "hidden", + "Should hide fullscreen warning after exiting fullscreen" + ); } ); }); add_task(async function test_fullscreen_pointerlock_conflict() { - await SpecialPowers.pushPrefEnv({ - set: [ - ["full-screen-api.enabled", true], - ["full-screen-api.allow-trusted-requests-only", false], - ], - }); - await BrowserTestUtils.withNewTab("https://example.com", async browser => { let fsWarning = document.getElementById("fullscreen-warning"); let plWarning = document.getElementById("pointerlock-warning"); - is( - fsWarning.getAttribute("onscreen"), - null, - "Should not show full screen warning initially." - ); - is( - plWarning.getAttribute("onscreen"), - null, - "Should not show pointer lock warning initially." - ); - - let fsWarningShownPromise = BrowserTestUtils.waitForAttribute( - "onscreen", + checkWarningState( fsWarning, - "true" + "hidden", + "Should not show full screen warning initially" + ); + checkWarningState( + plWarning, + "hidden", + "Should not show pointer lock warning initially" ); + let fsWarningShownPromise = waitForWarningState(fsWarning, "onscreen"); info("Entering full screen and pointer lock."); await SpecialPowers.spawn(browser, [], async () => { await content.document.body.requestFullscreen(); @@ -94,15 +111,10 @@ add_task(async function test_fullscreen_pointerlock_conflict() { }); await fsWarningShownPromise; - is( - fsWarning.getAttribute("onscreen"), - "true", - "Should show full screen warning." - ); - is( - plWarning.getAttribute("onscreen"), - null, - "Should not show pointer lock warning." + checkWarningState( + plWarning, + "hidden", + "Should not show pointer lock warning" ); info("Exiting pointerlock"); @@ -110,18 +122,19 @@ add_task(async function test_fullscreen_pointerlock_conflict() { await content.document.exitPointerLock(); }); - is( - fsWarning.getAttribute("onscreen"), - "true", - "Should still show full screen warning." + checkWarningState( + fsWarning, + "onscreen", + "Should still show full screen warning" ); - is( - plWarning.getAttribute("onscreen"), - null, - "Should not show pointer lock warning." + checkWarningState( + plWarning, + "hidden", + "Should not show pointer lock warning" ); // Cleanup + info("Exiting fullscreen"); await document.exitFullscreen(); }); }); ===================================== dom/tests/browser/browser_pointerlock_warning.js ===================================== @@ -15,6 +15,25 @@ const FRAME_TEST_URL = encodeURI(BODY_URL) + '"></iframe></body>'; +function checkWarningState(aWarningElement, aExpectedState, aMsg) { + ["hidden", "ontop", "onscreen"].forEach(state => { + is( + aWarningElement.hasAttribute(state), + state == aExpectedState, + `${aMsg} - check ${state} attribute.` + ); + }); +} + +async function waitForWarningState(aWarningElement, aExpectedState) { + await BrowserTestUtils.waitForAttribute(aExpectedState, aWarningElement, ""); + checkWarningState( + aWarningElement, + aExpectedState, + `Wait for ${aExpectedState} state` + ); +} + // Make sure the pointerlock warning is shown and exited with the escape key add_task(async function show_pointerlock_warning_escape() { let urls = [TEST_URL, FRAME_TEST_URL]; @@ -24,11 +43,7 @@ add_task(async function show_pointerlock_warning_escape() { let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, url); let warning = document.getElementById("pointerlock-warning"); - let warningShownPromise = BrowserTestUtils.waitForAttribute( - "onscreen", - warning, - "true" - ); + let warningShownPromise = waitForWarningState(warning, "onscreen"); let expectedWarningText; @@ -49,11 +64,7 @@ add_task(async function show_pointerlock_warning_escape() { ok(true, "Pointerlock warning shown"); - let warningHiddenPromise = BrowserTestUtils.waitForAttribute( - "hidden", - warning, - "" - ); + let warningHiddenPromise = waitForWarningState(warning, "hidden"); await BrowserTestUtils.waitForCondition( () => warning.innerText == expectedWarningText, View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/fadc593... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/fadc593... You're receiving this email because of your account on gitlab.torproject.org.