diff --git a/browser/components/firefoxview/featureCallout.mjs b/browser/components/firefoxview/featureCallout.mjs index 938606ffdb5e..f2801e81f169 100644 --- a/browser/components/firefoxview/featureCallout.mjs +++ b/browser/components/firefoxview/featureCallout.mjs @@ -52,6 +52,7 @@ async function _handlePrefChange() { setTimeout(async () => { await _loadConfig(); container?.remove(); + _removePositionListeners(); await _renderCallout(); }, TRANSITION_MS); } @@ -329,6 +330,8 @@ function _positionCallout() { function _addPositionListeners() { if (!LISTENERS_REGISTERED) { window.addEventListener("resize", _positionCallout); + const parentEl = document.querySelector(CURRENT_SCREEN?.parent_selector); + parentEl?.addEventListener("toggle", _positionCallout); LISTENERS_REGISTERED = true; } } @@ -336,6 +339,8 @@ function _addPositionListeners() { function _removePositionListeners() { if (LISTENERS_REGISTERED) { window.removeEventListener("resize", _positionCallout); + const parentEl = document.querySelector(CURRENT_SCREEN?.parent_selector); + parentEl?.removeEventListener("toggle", _positionCallout); LISTENERS_REGISTERED = false; } } @@ -377,7 +382,6 @@ function _endTour() { container?.classList.add("hidden"); setTimeout(() => { container?.remove(); - _removePositionListeners(); RENDER_OBSERVER?.disconnect(); // Put the focus back to the last place the user focused outside of the @@ -452,6 +456,7 @@ async function _renderCallout() { // This results in rendering the Feature Callout await _addScriptsAndRender(container); _observeRender(container); + _addPositionListeners(); } } /** @@ -488,7 +493,6 @@ async function showFeatureCallout(messageId) { _addCalloutLinkElements(); // Add handlers for repositioning callout - _addPositionListeners(); _setupWindowFunctions(); READY = false; diff --git a/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js b/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js index 27bf3a34f623..1109ceab093c 100644 --- a/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js +++ b/browser/components/firefoxview/tests/browser/browser_feature_callout_position.js @@ -204,6 +204,43 @@ add_task(async function feature_callout_top_end_positioning() { sandbox.restore(); }); +add_task( + async function feature_callout_is_repositioned_if_parent_container_is_toggled() { + await SpecialPowers.pushPrefEnv({ + set: [[featureTourPref, defaultPrefValue]], + }); + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: "about:firefoxview", + }, + async browser => { + const { document } = browser.contentWindow; + await waitForCalloutScreen(document, 1); + const parentEl = document.querySelector("#tab-pickup-container"); + const calloutStartingTopPosition = document.querySelector( + calloutSelector + ).style.top; + + //container has been toggled/minimized + parentEl.removeAttribute("open", ""); + await BrowserTestUtils.waitForMutationCondition( + document.querySelector(calloutSelector), + { attributes: true }, + () => + document.querySelector(calloutSelector).style.top != + calloutStartingTopPosition + ); + ok( + document.querySelector(calloutSelector).style.top != + calloutStartingTopPosition, + "Feature Callout position is recalculated when parent element is toggled" + ); + } + ); + } +); + // This test should be moved into a surface agnostic test suite with bug 1793656. add_task( async function feature_callout_top_end_position_respects_RTL_layouts() {