[Autofill password import] animate export password only once (#1400)

* fix: tap export password only once * test: remove only * fix: allow both highlight and tapping * Revert "fix: allow both highlight and tapping" This reverts commit c22b05d. * style: use weaksets
duckduckgo · Feb 12, 2025 · 2f9b8fd · 2f9b8fd
1 parent a418217
commit 2f9b8fd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/injected/integration-test/test-pages/autofill-password-import/config/config.json b/injected/integration-test/test-pages/autofill-password-import/config/config.json
@@ -17,6 +17,7 @@
                 "value": {
                   "settingsButton": {
                     "shouldAutotap": false,
+                    "tapOnce": false,
                     "path": "/",
                     "selectors": [
                       "a[href*='options']"
@@ -27,6 +28,7 @@
                   },
                   "exportButton": {
                     "shouldAutotap": false,
+                    "tapOnce": false,
                     "path": "/options",
                     "selectors": [
                       "c-wiz[data-node-index*='2;0'][data-p*='options']",
@@ -38,6 +40,7 @@
                   },
                   "signInButton": {
                     "shouldAutotap": false,
+                    "tapOnce": false,
                     "path": "/intro",
                     "selectors": [
                       "a[href*='ServiceLogin']:not([target='_top'])",

diff --git a/injected/src/features/autofill-password-import.js b/injected/src/features/autofill-password-import.js
@@ -23,6 +23,7 @@ export const DELAY_BEFORE_ANIMATION = 300;
  * @property {ButtonAnimationStyle} animationStyle
  * @property {boolean} shouldTap
  * @property {boolean} shouldWatchForRemoval
+ * @property {boolean} tapOnce
  */
 
 /**
@@ -50,6 +51,9 @@ export default class AutofillPasswordImport extends ContentFeature {
 
     #domLoaded;
 
+    /** @type {WeakSet<Element>} */
+    #tappedElements = new WeakSet();
+
     /**
      * @returns {ButtonAnimationStyle}
      */
@@ -140,6 +144,7 @@ export default class AutofillPasswordImport extends ContentFeature {
                       element,
                       shouldTap: this.#settingsButtonSettings?.shouldAutotap ?? false,
                       shouldWatchForRemoval: false,
+                      tapOnce: false,
                   }
                 : null;
         } else if (path === '/options') {
@@ -150,6 +155,7 @@ export default class AutofillPasswordImport extends ContentFeature {
                       element,
                       shouldTap: this.#exportButtonSettings?.shouldAutotap ?? false,
                       shouldWatchForRemoval: true,
+                      tapOnce: true,
                   }
                 : null;
         } else if (path === '/intro') {
@@ -160,6 +166,7 @@ export default class AutofillPasswordImport extends ContentFeature {
                       element,
                       shouldTap: this.#signInButtonSettings?.shouldAutotap ?? false,
                       shouldWatchForRemoval: false,
+                      tapOnce: false,
                   }
                 : null;
         } else {
@@ -176,6 +183,9 @@ export default class AutofillPasswordImport extends ContentFeature {
             this.currentOverlay.remove();
             this.currentOverlay = null;
             document.removeEventListener('scroll', this);
+            if (this.currentElementConfig?.element) {
+                this.#tappedElements.delete(this.currentElementConfig?.element);
+            }
         }
     }
 
@@ -398,7 +408,12 @@ export default class AutofillPasswordImport extends ContentFeature {
         if (this.isSupportedPath(path)) {
             try {
                 this.setCurrentElementConfig(await this.getElementAndStyleFromPath(path));
-                await this.animateOrTapElement();
+                if (this.currentElementConfig?.element && !this.#tappedElements.has(this.currentElementConfig?.element)) {
+                    await this.animateOrTapElement();
+                    if (this.currentElementConfig?.shouldTap && this.currentElementConfig?.tapOnce) {
+                        this.#tappedElements.add(this.currentElementConfig.element);
+                    }
+                }
             } catch {
                 console.error('password-import: failed for path:', path);
             }