Bug 1790133 Adjust Feature Callout Container vertical positioning depending on target's height r=jprickett

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

browser/components/firefoxview/featureCallout.mjs

@@ -288,7 +288,12 @@ function _positionCallout() {
         let containerLeft =
           getOffset(parentEl).left - container.clientWidth + overlap;
         container.style.left = `${Math.max(0, containerLeft)}px`;
-        container.style.top = `${getOffset(parentEl).top}px`;
+        if (container.offsetHeight <= parentEl.offsetHeight) {
+          container.style.top = `${getOffset(parentEl).top}px`;
+        } else {
+          centerVertically(container, parentEl);
+        }
+        container.classList.add("arrow-inline-end");
       },
     },
     left: {
@@ -301,7 +306,12 @@ function _positionCallout() {
         let containerLeft =
           getOffset(parentEl).left + parentEl.clientWidth - overlap;
         container.style.left = `${Math.max(0, containerLeft)}px`;
-        container.style.top = `${getOffset(parentEl).top}px`;
+        if (container.offsetHeight <= parentEl.offsetHeight) {
+          container.style.top = `${getOffset(parentEl).top}px`;
+        } else {
+          centerVertically(container, parentEl);
+        }
+        container.classList.add("arrow-inline-start");
       },
     },
     "top-end": {
@@ -388,6 +398,10 @@ function _positionCallout() {
     container.style.left = `${Math.max(containerSide, 0)}px`;
   }
 
+  function centerVertically() {
+    let topOffset = (container.offsetHeight - parentEl.offsetHeight) / 2;
+    container.style.top = `${getOffset(parentEl).top - topOffset}px`;
+  }
   clearPosition(container);
 
   if (customPosition) {

browser/components/firefoxview/tests/browser/browser_feature_callout_position.js

@@ -335,3 +335,100 @@ add_task(
     sandbox.restore();
   }
 );
+
+add_task(
+  async function feature_callout_smaller_parent_container_than_callout_container() {
+    await ASRouter.waitForInitialized;
+
+    let message = {
+      weight: 100,
+      id: "FIREFOX_VIEW_FEATURE_TOUR_1",
+      template: "feature_callout",
+      content: {
+        id: "FIREFOX_VIEW_FEATURE_TOUR",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FEATURE_CALLOUT_1",
+            parent_selector: "#colorways-button",
+            content: {
+              position: "callout",
+              arrow_position: "end",
+              title: "callout-firefox-view-colorways-reminder-title",
+              subtitle: {
+                string_id: "callout-firefox-view-colorways-reminder-subtitle",
+              },
+              logo: {
+                imageURL: "chrome://browser/content/callout-tab-pickup.svg",
+                darkModeImageURL:
+                  "chrome://browser/content/callout-tab-pickup-dark.svg",
+                height: "128px", //#colorways-button has a height of 35px
+              },
+              dismiss_button: {
+                action: {
+                  navigate: true,
+                },
+              },
+            },
+          },
+          { content: {} },
+          { content: {} },
+        ],
+      },
+      priority: 1,
+      targeting: 'source == "firefoxview"',
+      trigger: {
+        id: "featureCalloutCheck",
+      },
+      groups: [],
+      provider: "onboarding",
+    };
+    let previousMessages = ASRouter.state.messages;
+    ASRouter.setState({ messages: [message] });
+
+    await SpecialPowers.pushPrefEnv({
+      set: [[featureTourPref, getPrefValueByScreen(1)]],
+    });
+
+    await BrowserTestUtils.withNewTab(
+      {
+        gBrowser,
+        url: "about:firefoxview",
+      },
+      async browser => {
+        const { document } = browser.contentWindow;
+        await waitForCalloutScreen(document, 1);
+        let parentHeight = document.querySelector("#colorways-button")
+          .offsetHeight;
+        let containerHeight = document.querySelector(calloutSelector)
+          .offsetHeight;
+
+        let parentPositionTop =
+          document.querySelector("#colorways-button").getBoundingClientRect()
+            .top + window.scrollY;
+        let containerPositionTop =
+          document.querySelector(calloutSelector).getBoundingClientRect().top +
+          window.scrollY;
+        ok(
+          containerHeight > parentHeight,
+          "Feature Callout is height is larger than parent element when callout is configured at end of callout"
+        );
+        ok(
+          containerPositionTop < parentPositionTop,
+          "Feature Callout is positioned higher that parent element when callout is configured at end of callout"
+        );
+        ok(
+          // difference in centering may be off due to rounding, thus +/- 1px for
+          // eslint-disable-next-line prettier/prettier
+          Math.abs(((containerHeight / 2) + containerPositionTop) - ((parentHeight / 2) + parentPositionTop)) <= 1,
+          "Feature Callout is centered equally to parent element when callout is configured at end of callout"
+        );
+        await ASRouter.setState({ messages: [...previousMessages] });
+        await ASRouter.resetMessageState();
+      }
+    );
+  }
+);

browser/components/newtab/lib/FeatureCalloutMessages.jsm

@@ -506,7 +506,7 @@ const MESSAGES = () => {
         screens: [
           {
             id: "FIREFOX_VIEW_COLORWAYS_REMINDER",
-            parent_selector: "#colorways-collection-description",
+            parent_selector: "#colorways-button",
             content: {
               position: "callout",
               arrow_position: "end",