Bug 1792667 - The “Tab Pickup” callout message points to another section when the “Tab Pickup” section is collapsed r=mviar,emcminn

try: https://hg.mozilla.org/try/rev/92340ece620dd2d64e2f2c9826a4f6d9a387acc6

Differential Revision: https://phabricator.services.mozilla.com/D158699

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;

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() {