Bug 1854056 - using bullet in autofill previews instead of * r=mtigley,credential-management-reviewers

Depends on D191355

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

browser/extensions/formautofill/content/customElements.js

@@ -141,8 +141,8 @@
         this.getAttribute("ac-value")
       );
 
-      this._label.textContent = primary;
-      this._comment.textContent = secondary;
+      this._label.textContent = primary.toString().replaceAll("*", "•");
+      this._comment.textContent = secondary.toString().replaceAll("*", "•");
       if (ariaLabel) {
         this.setAttribute("aria-label", ariaLabel);
       }

browser/extensions/formautofill/test/mochitest/creditCard/test_preview_highlight_with_multiple_cc_number_fields.html

@@ -66,7 +66,7 @@ async function checkMultipleCCNumberFormStyle(profile, isPreviewing = true) {
   for (const element of elements) {
     let fillableValue;
     if (element.id.includes("cc-number") && isPreviewing) {
-      fillableValue = profile["cc-number"].slice(-8);
+      fillableValue = profile["cc-number"].slice(-8).replaceAll("*", "•");
     } else if (element.id.includes("cc-number")) {
       fillableValue = profile["cc-number"];
     } else {

browser/extensions/formautofill/test/mochitest/formautofill_common.js

@@ -139,7 +139,8 @@ async function checkFormFieldsStyle(profile, isPreviewing = true) {
       previewValue = "";
     } else {
       fillableValue = profile && profile[elem.id];
-      previewValue = (isPreviewing && fillableValue) || "";
+      previewValue =
+        (isPreviewing && fillableValue?.toString().replaceAll("*", "•")) || "";
     }
     await checkFieldHighlighted(elem, !!fillableValue);
     await checkFieldPreview(elem, previewValue);

toolkit/components/formautofill/ProfileAutoCompleteResult.sys.mjs

@@ -417,7 +417,11 @@ export class CreditCardResult extends ProfileAutoCompleteResult {
         const ccTypeName = ccTypeL10nId
           ? lazy.l10n.formatValueSync(ccTypeL10nId)
           : ccType ?? ""; // Unknown card type
-        const ariaLabel = [ccTypeName, primary.toString().replaceAll("*", ""), secondary]
+        const ariaLabel = [
+          ccTypeName,
+          primary.toString().replaceAll("*", ""),
+          secondary,
+        ]
           .filter(chunk => !!chunk) // Exclude empty chunks.
           .join(" ");
         return {

toolkit/components/formautofill/shared/FormAutofillSection.sys.mjs

@@ -433,7 +433,7 @@ export class FormAutofillSection {
         // Skip the field if the user has already entered text and that text is not the site prefilled value.
         continue;
       }
-      element.previewValue = value;
+      element.previewValue = value?.toString().replaceAll("*", "•");
       this.handler.changeFieldState(
         fieldDetail,
         value ? FIELD_STATES.PREVIEW : FIELD_STATES.NORMAL

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

@@ -138,11 +138,10 @@ async function openRelayAC(browser) {
   await openACPopup(popup, browser, "#form-basic-username");
   const popupItem = document
     .querySelector("richlistitem")
-    .getAttribute("ac-label");
-  const popupItemTitle = JSON.parse(popupItem).title;
+    .getAttribute("ac-value");
 
   Assert.ok(
-    gRelayACOptionsTitles.some(title => title.value === popupItemTitle),
+    gRelayACOptionsTitles.some(title => title.value === popupItem),
     "AC Popup has an item Relay option shown in popup"
   );