1 files changed, 24 insertions, 30 deletions

diff --git a/browser/components/asrouter/modules/FeatureCallout.sys.mjs b/browser/components/asrouter/modules/FeatureCallout.sys.mjs
index 5f0e266a4e..e8732b213d 100644
--- a/browser/components/asrouter/modules/FeatureCallout.sys.mjs
+++ b/browser/components/asrouter/modules/FeatureCallout.sys.mjs
@@ -462,6 +462,10 @@ export class FeatureCallout {
    *   the callout should be aligned with which point on the anchor element.
    * @property {PopupAttachmentPoint} anchor_attachment
    * @property {PopupAttachmentPoint} callout_attachment
+   * @property {String} [panel_position_string] The attachments joined into a
+   *   string, e.g. "bottomleft topright". Passed to XULPopupElement::openPopup.
+   *   This is not provided by JSON, but generated from anchor_attachment and
+   *   callout_attachment.
    * @property {Number} [offset_x] Offset in pixels to apply to the callout
    *   position in the horizontal direction.
    * @property {Number} [offset_y] The same in the vertical direction.
@@ -514,8 +518,10 @@ export class FeatureCallout {
    */
 
   /**
-   * @typedef {Object} AnchorConfig
+   * @typedef {Object} Anchor
    * @property {String} selector CSS selector for the anchor node.
+   * @property {Element} [element] The anchor node resolved from the selector.
+   *   Not provided by JSON, but generated dynamically.
    * @property {PanelPosition} [panel_position] Used to show the callout in a
    *   XUL panel. Only works in chrome documents, like the main browser window.
    * @property {HTMLArrowPosition} [arrow_position] Used to show the callout in
@@ -533,27 +539,13 @@ export class FeatureCallout {
    */
 
   /**
-   * @typedef {Object} Anchor
-   * @property {String} selector
-   * @property {PanelPosition} [panel_position]
-   * @property {HTMLArrowPosition} [arrow_position]
-   * @property {PositionOverride} [absolute_position]
-   * @property {Boolean} [hide_arrow]
-   * @property {Boolean} [no_open_on_anchor]
-   * @property {Number} [arrow_width]
-   * @property {Element} element The anchor node resolved from the selector.
-   * @property {String} [panel_position_string] The panel_position joined into a
-   *   string, e.g. "bottomleft topright". Passed to XULPopupElement::openPopup.
-   */
-
-  /**
    * Return the first visible anchor element for the current screen. Screens can
    * specify multiple anchors in an array, and the first one that is visible
    * will be used. If none are visible, return null.
    * @returns {Anchor|null}
    */
   _getAnchor() {
-    /** @type {AnchorConfig[]} */
+    /** @type {Anchor[]} */
     const anchors = Array.isArray(this.currentScreen?.anchors)
       ? this.currentScreen.anchors
       : [];
@@ -565,9 +557,9 @@ export class FeatureCallout {
         continue;
       }
       const { selector, arrow_position, panel_position } = anchor;
-      let panel_position_string;
       if (panel_position) {
-        panel_position_string = this._getPanelPositionString(panel_position);
+        let panel_position_string =
+          this._getPanelPositionString(panel_position);
         // if the positionString doesn't match the format we expect, don't
         // render the callout.
         if (!panel_position_string && !arrow_position) {
@@ -580,6 +572,7 @@ export class FeatureCallout {
           );
           continue;
         }
+        panel_position.panel_position_string = panel_position_string;
       }
       if (
         arrow_position &&
@@ -637,7 +630,7 @@ export class FeatureCallout {
           continue;
         }
       }
-      return { ...anchor, panel_position_string, element };
+      return { ...anchor, element };
     }
     return null;
   }
@@ -752,13 +745,10 @@ export class FeatureCallout {
     }
 
     const { autohide, padding } = this.currentScreen.content;
-    const {
-      panel_position_string,
-      hide_arrow,
-      no_open_on_anchor,
-      arrow_width,
-    } = anchor;
-    const needsPanel = "MozXULElement" in this.win && !!panel_position_string;
+    const { panel_position, hide_arrow, no_open_on_anchor, arrow_width } =
+      anchor;
+    const needsPanel =
+      "MozXULElement" in this.win && !!panel_position?.panel_position_string;
 
     if (this._container) {
       if (needsPanel ^ (this._container?.localName === "panel")) {
@@ -775,7 +765,7 @@ export class FeatureCallout {
             noautofocus="true"
             flip="slide"
             type="arrow"
-            position="${panel_position_string}"
+            position="${panel_position.panel_position_string}"
             ${hide_arrow ? "" : 'show-arrow=""'}
             ${autohide ? "" : 'noautohide="true"'}
             ${no_open_on_anchor ? 'no-open-on-anchor=""' : ""}
@@ -1742,17 +1732,21 @@ export class FeatureCallout {
             });
           } else if (this._container.localName === "panel") {
             const anchor = this._getAnchor();
-            if (!anchor) {
+            if (!anchor?.panel_position) {
               this.endTour();
               return;
             }
-            const position = anchor.panel_position_string;
+            const {
+              panel_position_string: position,
+              offset_x: x,
+              offset_y: y,
+            } = anchor.panel_position;
             this._container.addEventListener("popupshown", onRender, {
               once: true,
             });
             this._container.addEventListener("popuphiding", this);
             this._addPanelConflictListeners();
-            this._container.openPopup(anchor.element, { position });
+            this._container.openPopup(anchor.element, { position, x, y });
           }
         }
       });