Bug 1874952 - Correctly align confirmation hint panels to their anchor r=aminomancer,Gijs,joschmidt,credential-management-reviewers

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

browser/base/content/browser-siteProtections.js

@@ -2663,7 +2663,7 @@ var gProtectionsHandler = {
         } else {
           this._protectionsPopup.hidePopup();
           ConfirmationHint.show(
-            this.iconBox,
+            this._trackingProtectionIconContainer,
             "confirmation-hint-breakage-report-sent"
           );
         }

browser/base/content/browser.js

@@ -9946,7 +9946,7 @@ var ConfirmationHint = {
     );
 
     this._panel.openPopup(anchor, {
-      position: options.position ?? "bottomcenter topleft",
+      position: options.position ?? "bottomleft topleft",
       triggerEvent: options.event,
     });
   },

browser/extensions/formautofill/test/browser/head.js

@@ -1199,7 +1199,7 @@ function normalizeAddressFields(record) {
 async function verifyConfirmationHint(
   browser,
   forceClose,
-  anchorID = "identity-icon"
+  anchorID = "identity-icon-box"
 ) {
   let hintElem = browser.ownerGlobal.ConfirmationHint._panel;
   await BrowserTestUtils.waitForPopupEvent(hintElem, "shown");

toolkit/components/passwordmgr/LoginManagerPrompter.sys.mjs

@@ -604,15 +604,8 @@ export class LoginManagerPrompter {
           });
           Services.logins.removeLogin(matchingLogins[0]);
           browser.focus();
-          // The "password-notification-icon" and "notification-icon-box" are hidden
-          // at this point, so approximate the location with the next closest,
-          // visible icon as the anchor.
-          const anchor = browser.ownerDocument.getElementById("identity-icon");
           lazy.log.debug("Showing the ConfirmationHint");
-          anchor.ownerGlobal.ConfirmationHint.show(
-            anchor,
-            "confirmation-hint-password-removed"
-          );
+          showConfirmation(browser, "confirmation-hint-password-removed");
         },
       });
     }

toolkit/components/passwordmgr/test/browser/browser_doorhanger_remembering.js

@@ -686,7 +686,11 @@ add_task(async function test_changeUPLoginOnUPForm_remove() {
       const forceClosePopup = false;
       // Make sure confirmation hint was shown
       info("waiting for verifyConfirmationHint");
-      await verifyConfirmationHint(browser, forceClosePopup, "identity-icon");
+      await verifyConfirmationHint(
+        browser,
+        forceClosePopup,
+        "identity-icon-box"
+      );
     }
   );
 

toolkit/components/satchel/FillHelpers.sys.mjs

@@ -26,12 +26,15 @@ export class GenericAutocompleteItem {
  *
  * @param {object} browser - An object representing the browser.
  * @param {string} messageId - Message ID from browser/confirmationHints.ftl
- * @param {string} [anchorId="identity-icon"] - ID of the element to anchor the hint to.
+ * @param {string} [anchorId="identity-icon-box"] - ID of the element to anchor the hint to.
+                   The "password-notification-icon" and "notification-popup-box" are hidden
+                   at the point of showing the hint (for *most* cases), so approximate the
+                   location with the next closest, visible icon as the anchor.
  */
 export function showConfirmation(
   browser,
   messageId,
-  anchorId = "identity-icon"
+  anchorId = "identity-icon-box"
 ) {
   const anchor = browser.ownerDocument.getElementById(anchorId);
   anchor.ownerGlobal.ConfirmationHint.show(anchor, messageId, {});