feat: use from config

Author: dbajpeyi

CODEOWNERS

@@ -10,7 +10,7 @@ injected/src/element-hiding.js @duckduckgo/content-scope-scripts-owners @jonatha
 injected/src/features/click-to-load.js @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
 injected/src/features/click-to-load/ @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
 injected/src/locales/click-to-load/ @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
-injected/src/features/autofill-password-import.js @duckduckgo/content-scope-scripts-owners @dbajpeyi
+injected/src/features/autofill-import.js @duckduckgo/content-scope-scripts-owners @dbajpeyi
 
 # Broker protection
 injected/src/features/broker-protection.js @duckduckgo/content-scope-scripts-owners @duckduckgo/injected-broker-protection

…on-test/autofill-password-import.spec.js …integration-test/autofill-import.spec.jsinjected/integration-test/autofill-password-import.spec.js renamed to injected/integration-test/autofill-import.spec.js injected/integration-test/autofill-password-import.spec.js renamed to injected/integration-test/autofill-import.spec.js

@@ -1,15 +1,15 @@
 import { test, expect } from '@playwright/test';
-import { OVERLAY_ID } from '../src/features/autofill-password-import';
+import { OVERLAY_ID } from '../src/features/autofill-import';
 import { ResultsCollector } from './page-objects/results-collector.js';
 
-const HTML = '/autofill-password-import/index.html';
-const CONFIG = './integration-test/test-pages/autofill-password-import/config/config.json';
+const HTML = '/autofill-import/index.html';
+const CONFIG = './integration-test/test-pages/autofill-import/config/config.json';
 
 test('Password import feature', async ({ page }, testInfo) => {
     const collector = ResultsCollector.create(page, testInfo.project.use);
     await collector.load(HTML, CONFIG);
 
-    const passwordImportFeature = new AutofillPasswordImportSpec(page);
+    const passwordImportFeature = new AutofillImportSpec(page);
     await passwordImportFeature.clickOnElement('Home page');
     await passwordImportFeature.waitForAnimation();
 
@@ -25,7 +25,7 @@ test('Password import feature', async ({ page }, testInfo) => {
     await expect(overlay).not.toBeVisible();
 });
 
-class AutofillPasswordImportSpec {
+class AutofillImportSpec {
     /**
      * @param {import("@playwright/test").Page} page
      */

injected/integration-test/type-helpers.mjs

@@ -61,7 +61,7 @@ export class Build {
             android: () => '../build/android/contentScope.js',
             apple: () => '../build/apple/contentScope.js',
             'apple-isolated': () => '../build/apple/contentScopeIsolated.js',
-            'android-autofill-import': () => '../build/android/autofillPasswordImport.js',
+            'android-autofill-import': () => '../build/android/autofillImport.js',
             'android-broker-protection': () => '../build/android/brokerProtection.js',
         });
         return readFileSync(path, 'utf8');

injected/playwright.config.js

@@ -56,7 +56,7 @@ export default defineConfig({
         },
         {
             name: 'android-autofill-import',
-            testMatch: ['integration-test/autofill-password-import.spec.js'],
+            testMatch: ['integration-test/autofill-import.spec.js'],
             use: { injectName: 'android-autofill-import', platform: 'android', ...devices['Galaxy S5'] },
         },
         {

injected/scripts/entry-points.js

@@ -33,7 +33,7 @@ const builds = {
     },
     'android-autofill-import': {
         input: 'entry-points/android.js',
-        output: ['../build/android/autofillPasswordImport.js'],
+        output: ['../build/android/autofillImport.js'],
     },
     'android-adsjs': {
         input: 'entry-points/android-adsjs.js',

injected/src/features.js

@@ -28,7 +28,7 @@ const otherFeatures = /** @type {const} */ ([
     'brokerProtection',
     'performanceMetrics',
     'breakageReporting',
-    'autofillPasswordImport',
+    'autofillImport',
     'favicon',
     'webTelemetry',
     'pageContext',
@@ -50,7 +50,7 @@ export const platformSupport = {
     ],
     android: [...baseFeatures, 'webCompat', 'breakageReporting', 'duckPlayer', 'messageBridge'],
     'android-broker-protection': ['brokerProtection'],
-    'android-autofill-import': ['autofillPasswordImport'],
+    'android-autofill-import': ['autofillImport'],
     'android-adsjs': [
         'apiManipulation',
         'webCompat',

injected/src/features/autofill-bookmark-steps-selectors.json

@@ -1,7 +1,6 @@
 import ContentFeature from '../content-feature';
 import { isBeingFramed, withExponentialBackoff } from '../utils';
 import { execute } from './broker-protection/execute';
-import { Steps } from './autofill-bookmark-steps';
 import { DEFAULT_RETRY_CONFIG, retry } from '../timer-utils';
 
 export const ANIMATION_DURATION_MS = 1000;
@@ -10,7 +9,6 @@ export const BACKGROUND_COLOR_START = 'rgba(85, 127, 243, 0.10)';
 export const BACKGROUND_COLOR_END = 'rgba(85, 127, 243, 0.25)';
 export const OVERLAY_ID = 'ddg-password-import-overlay';
 export const DELAY_BEFORE_ANIMATION = 300;
-const BOOKMARK_IMPORT_DOMAIN = 'takeout.google.com';
 const TAKEOUT_DOWNLOAD_URL_BASE = '/takeout/download';
 
 /**
@@ -65,7 +63,8 @@ export default class AutofillImport extends ContentFeature {
     /** @type {WeakSet<Element>} */
     #tappedElements = new WeakSet();
 
-    // #bookmarkImportActions;
+    #bookmarkImportActions;
+    #bookmarkImportSelectors;
 
     /**
      * @returns {ButtonAnimationStyle}
@@ -425,7 +424,7 @@ export default class AutofillImport extends ContentFeature {
     }
 
     async handlePasswordManagerPath(pathname) {
-        console.log('DEEP DEBUG autofill-password-import: handlePasswordManagerPath', pathname);
+        console.log('DEEP DEBUG autofill-import: handlePasswordManagerPath', pathname);
         this.removeOverlayIfNeeded();
         if (this.isSupportedPath(pathname)) {
             try {
@@ -447,15 +446,18 @@ export default class AutofillImport extends ContentFeature {
      *
      */
     async handleLocation(location) {
-        const { pathname, hostname } = location;
-        if (hostname === BOOKMARK_IMPORT_DOMAIN) {
+        const { pathname } = location;
+        if (this.getFeatureSettingEnabled('canImportFromGoogleTakeout')) {
             if (this.#processingBookmark) {
                 return;
             }
             this.#processingBookmark = true;
             this.handleBookmarkImportPath(pathname);
-        } else {
+        } else if (this.getFeatureSettingEnabled('canImportFromGooglePasswordManager')) {
             await this.handlePasswordManagerPath(pathname);
+        } else {
+            // Unknown feature, we bail out
+            return;
         }
     }
 
@@ -524,15 +526,10 @@ export default class AutofillImport extends ContentFeature {
     }
 
     /** Bookmark import code */
-
-    get userIdSelector() {
-        return 'a[href*="&user="]';
-    }
-
     async downloadData() {
-        const userId = document.querySelector(this.userIdSelector)?.getAttribute('href')?.split('&user=')[1];
-        console.log('DEEP DEBUG autofill-password-import: userId', userId);
-        await this.runWithRetry(() => document.querySelector(`a[href="./manage/archive/${this.#exportId}"]`), 8);
+        const userId = document.querySelector(this.#bookmarkImportSelectors.userIdLink)?.getAttribute('href')?.split('&user=')[1];
+        console.log('DEEP DEBUG autofill-import: userId', userId);
+        await this.runWithRetry(() => document.querySelector(`${this.#bookmarkImportSelectors.downloadLink}/${this.#exportId}`), 8);
         const downloadURL = `${TAKEOUT_DOWNLOAD_URL_BASE}?j=${this.#exportId}&i=0&user=${userId}`;
         window.location.href = downloadURL;
     }
@@ -548,13 +545,12 @@ export default class AutofillImport extends ContentFeature {
     }
 
     async handleBookmarkImportPath(pathname) {
-        console.log('DEEP DEBUG autofill-password-import: handleBookmarkImportPath', pathname);
+        console.log('DEEP DEBUG autofill-import: handleBookmarkImportPath', pathname);
         if (pathname === '/' && !this.#isBookmarkModalVisible) {
-            const bookmarkSteps = new Steps();
-            for (const action of bookmarkSteps.actions) {
+            for (const action of this.#bookmarkImportActions) {
                 if (action.id === 'chrome-data-button-click') {
                     await this.runWithRetry(() => {
-                        const element = document.querySelector(this.chromeDataButtonSelector);
+                        const element = document.querySelector(this.#bookmarkImportSelectors.chromeDataButton);
                         return element?.checkVisibility();
                     });
                 }
@@ -571,50 +567,43 @@ export default class AutofillImport extends ContentFeature {
         }
     }
 
-    setButtonSettings() {
+    setPasswordImportSettings() {
         this.#exportButtonSettings = this.getFeatureSetting('exportButton');
         this.#signInButtonSettings = this.getFeatureSetting('signInButton');
         this.#settingsButtonSettings = this.getFeatureSetting('settingsButton');
     }
 
-    setDBPActions() {
-        // this.#bookmarkImportActions = actions;
-    }
-
-    get tabPanelSelector() {
-        return 'div[role="tabpanel"]';
-    }
-
-    get chromeDataButtonSelector() {
-        return `${this.tabPanelSelector} div:nth-child(10) > div:nth-child(2) > div:nth-child(2) button`;
+    setBookmarkImportSettings() {
+        this.#bookmarkImportActions = this.getFeatureSetting('actions');
+        this.#bookmarkImportSelectors = this.getFeatureSetting('selectors');
     }
 
     async findExportId() {
-        const panels = document.querySelectorAll(this.tabPanelSelector);
+        const panels = document.querySelectorAll(this.#bookmarkImportSelectors.tabPanel);
         const exportPanel = panels[panels.length - 1];
         return await this.runWithRetry(() => exportPanel.querySelector('div[data-archive-id]')?.getAttribute('data-archive-id'), 8, 100);
     }
 
     async storeExportId() {
         this.#exportId = await this.findExportId();
-        console.log('DEEP DEBUG autofill-password-import: stored export id', this.#exportId);
+        console.log('DEEP DEBUG autofill-import: stored export id', this.#exportId);
     }
 
     urlChanged(navigationType) {
-        console.log('DEEP DEBUG autofill-password-import: urlChanged', window.location.pathname, navigationType);
+        console.log('DEEP DEBUG autofill-import: urlChanged', window.location.pathname, navigationType);
         this.handleLocation(window.location);
     }
 
     init() {
-        console.log('DEEP DEBUG autofill-password-import: init');
+        console.log('DEEP DEBUG autofill-import: init');
         if (isBeingFramed()) {
             return;
         }
 
         if (this.getFeatureSettingEnabled('canImportFromGoogleTakeout')) {
-            // this.setDBPActions(this.getFeatureSetting('bookmarkImport'));
+            this.setBookmarkImportSettings();
         } else if (this.getFeatureSettingEnabled('canImportFromGooglePasswordManager')) {
-            this.setButtonSettings();
+            this.setPasswordImportSettings();
         } else {
             // bail out
             return;

…src/features/autofill-password-import.js injected/src/features/autofill-import.jsinjected/src/features/autofill-password-import.js renamed to injected/src/features/autofill-import.js injected/src/features/autofill-password-import.js renamed to injected/src/features/autofill-import.js

@@ -1,4 +1,8 @@
 {
+  "selectors": {
+    "tabPanalSelector": "div[role=\"tabpanel\"]",
+    "chromeDataButtonSelector": "div[role=\"tabpanel\"] div:nth-child(10) > div:nth-child(2) > div:nth-child(2) button"
+  },
   "actions": [
     {
       "id": "deselect-all-button-click",