From 3cb576902d98d2e1cb04423beec128d6bdc1f432 Mon Sep 17 00:00:00 2001
From: negin <nsauermann@mozilla.com>
Date: Mon, 17 Oct 2022 15:18:39 +0000
Subject: [PATCH] =?UTF-8?q?Bug=201792667=20-=20The=20=E2=80=9CTab=20Pickup?=
 =?UTF-8?q?=E2=80=9D=20callout=20message=20points=20to=20another=20section?=
 =?UTF-8?q?=20when=20the=20=E2=80=9CTab=20Pickup=E2=80=9D=20section=20is?=
 =?UTF-8?q?=20collapsed=20r=3Dmviar,emcminn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Differential Revision: https://phabricator.services.mozilla.com/D158699
---
 .../components/firefoxview/featureCallout.mjs |  8 +++-
 .../browser_feature_callout_position.js       | 37 +++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

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