Add ad blocking variants to v3 onboarding

- Add optional 'Enhanced Ad Blocking' row to the settings step.
- Add optional 'YouTube Ad Blocking' row to the settings step.
- Update Duck Player step copy when YouTube Ad Blocking is enabled.

Author: noisysocks

special-pages/pages/onboarding/app/components/ListItem.js

@@ -21,6 +21,8 @@ export const availableIcons = /** @type {const} */ ([
     'v3/home.svg',
     'v3/import.svg',
     'v3/session-restore.svg',
+    'v3/ads.svg',
+    'v3/video-player.svg',
 ]);
 
 const prefix = 'assets/img/steps/';

special-pages/pages/onboarding/app/components/v3/data.js

@@ -83,7 +83,10 @@ export const stepsConfig = {
             content: <SettingsStep data={settingsRowItems} />,
         };
     },
-    duckPlayerSingle: ({ t, advance, beforeAfter }) => {
+    duckPlayerSingle: ({ t, globalState, advance, beforeAfter }) => {
+        const isYouTubeAdBlockingEnabled = globalState.values['youtube-ad-blocking']?.enabled ?? false;
+        const title = isYouTubeAdBlockingEnabled ? t('duckPlayer_alt_title') : t('duckPlayer_title');
+        const subtitle = isYouTubeAdBlockingEnabled ? t('duckPlayer_alt_subtitle') : t('duckPlayer_subtitle');
         const beforeAfterState = beforeAfter.get();
         const longestText = [t('beforeAfter_duckPlayer_show'), t('beforeAfter_duckPlayer_hide')].reduce((acc, cur) => {
             return cur.length > acc.length ? cur : acc;
@@ -92,8 +95,8 @@ export const stepsConfig = {
         return {
             variant: 'box',
             heading: {
-                title: t('duckPlayer_title'),
-                subtitle: t('duckPlayer_subtitle'),
+                title: title,
+                subtitle: subtitle,
                 speechBubble: true,
             },
             dismissButton: {
@@ -204,6 +207,24 @@ export const settingsRowItems = {
         acceptText: t('row_home-shortcut_accept'),
         accepButtonVariant: 'secondary',
     }),
+    'ad-blocking': (t) => ({
+        id: 'ad-blocking',
+        icon: 'v3/ads.svg',
+        title: t('row_ad-blocking_title_v3'),
+        secondaryText: t('row_ad-blocking_desc_v3'),
+        kind: 'one-time',
+        acceptText: t('row_ad-blocking_accept_v3'),
+        accepButtonVariant: 'primary',
+    }),
+    'youtube-ad-blocking': (t) => ({
+        id: 'youtube-ad-blocking',
+        icon: 'v3/video-player.svg',
+        title: t('row_youtube-ad-blocking_title_v3'),
+        secondaryText: t('row_youtube-ad-blocking_desc_v3'),
+        kind: 'one-time',
+        acceptText: t('row_youtube-ad-blocking_accept_v3'),
+        accepButtonVariant: 'primary',
+    }),
 };
 
 export const stepDefinitions = {
@@ -218,3 +239,19 @@ export const stepDefinitions = {
         rows: ['bookmarks', 'session-restore', 'home-shortcut'],
     },
 };
+
+export const stepDefinitionsAdBlocking = {
+    systemSettings: {
+        id: 'systemSettings',
+        kind: 'settings',
+        rows: ['dock', 'ad-blocking', 'import'],
+    },
+};
+
+export const stepDefinitionsYouTubeAdBlocking = {
+    systemSettings: {
+        id: 'systemSettings',
+        kind: 'settings',
+        rows: ['dock', 'youtube-ad-blocking', 'import'],
+    },
+};

special-pages/pages/onboarding/app/data.js

@@ -217,6 +217,28 @@ export const settingsRowItems = {
         kind: 'toggle',
         acceptText: t('row_home-shortcut_accept'),
     }),
+    // Intended only for use with v3
+    'ad-blocking': (t) => ({
+        id: 'ad-blocking',
+        icon: 'v3/ads.svg',
+        title: t('row_ad-blocking_title_v3'),
+        secondaryText: t('row_ad-blocking_desc_v3'),
+        summary: t('row_ad-blocking_title_v3'),
+        kind: 'one-time',
+        acceptText: t('row_ad-blocking_accept_v3'),
+        accepButtonVariant: 'primary',
+    }),
+    // Intended only for use with v3
+    'youtube-ad-blocking': (t) => ({
+        id: 'youtube-ad-blocking',
+        icon: 'v3/video-player.svg',
+        title: t('row_youtube-ad-blocking_title_v3'),
+        secondaryText: t('row_youtube-ad-blocking_desc_v3'),
+        summary: t('row_youtube-ad-blocking_title_v3'),
+        kind: 'one-time',
+        acceptText: t('row_youtube-ad-blocking_accept_v3'),
+        accepButtonVariant: 'primary',
+    }),
 };
 
 /**

special-pages/pages/onboarding/app/global.js

@@ -143,6 +143,8 @@ export function GlobalProvider({ order, children, stepDefinitions, messaging, fi
             bookmarks: 'idle',
             'session-restore': 'idle',
             'home-shortcut': 'idle',
+            'ad-blocking': 'idle',
+            'youtube-ad-blocking': 'idle',
         },
     });
 
@@ -278,6 +280,17 @@ async function handleSystemSettingUpdate(action, messaging, platform) {
             }
             break;
         }
+        case 'ad-blocking':
+        case 'youtube-ad-blocking': {
+            if (!current) {
+                messaging.setAdBlocking(payload);
+            } else {
+                if (payload.enabled) {
+                    messaging.setAdBlocking(payload);
+                }
+            }
+            return payload;
+        }
     }
     if ('value' in payload) {
         return { enabled: payload.enabled, value: payload.value };

special-pages/pages/onboarding/app/index.js

@@ -13,7 +13,6 @@ import { callWithRetry } from '../../../shared/call-with-retry';
 import { TranslationProvider } from '../../../shared/components/TranslationsProvider';
 import { SettingsProvider } from './components/SettingsProvider';
 import enStrings from '../public/locales/en/onboarding.json';
-import { stepDefinitions as stepDefinitionsV3 } from './components/v3/data';
 import { mockTransport } from '../src/mock-transport.js';
 
 const baseEnvironment = new Environment().withInjectName(document.documentElement.dataset.platform).withEnv(import.meta.env);
@@ -65,8 +64,9 @@ async function init() {
         .withPlatformName(baseEnvironment.injectName)
         .withPlatformName(init.platform?.name)
         .withPlatformName(baseEnvironment.urlParams.get('platform'))
-        .withStepDefinitions(init.order === 'v3' ? stepDefinitionsV3 : null)
+        .withNamedStepDefinitions(init.order)
         .withStepDefinitions(init.stepDefinitions)
+        .withNamedStepDefinitions(environment.urlParams.get('steps'))
         .withNamedOrder(init.order)
         .withNamedOrder(environment.urlParams.get('order'))
         .withExcludedScreens(init.exclude)

special-pages/pages/onboarding/app/messages.js

@@ -158,4 +158,13 @@ export class OnboardingMessages {
     reportInitException(params) {
         this.messaging.notify('reportInitException', params);
     }
+
+    /**
+     * Sent when the user wants to enable or disable ad blocking.
+     *
+     * @param {import('./types').BooleanSystemValue} params
+     */
+    setAdBlocking(params) {
+        this.messaging.notify('setAdBlocking', params);
+    }
 }

special-pages/pages/onboarding/app/settings.js

@@ -1,5 +1,6 @@
 import { ALT_ORDER, DEFAULT_ORDER, EVERY_PAGE_ID, ORDER_V3 } from './types';
 import { stepDefinitions as defaultStepDefinitions } from './data';
+import { stepDefinitions as stepDefinitionsV3, stepDefinitionsAdBlocking, stepDefinitionsYouTubeAdBlocking } from './components/v3/data';
 
 /**
  * Settings that affect the Application, such as running order
@@ -148,4 +149,17 @@ export class Settings {
             stepDefinitions: nextSteps,
         });
     }
+
+    /**
+     * @param {string|null|undefined} named
+     * @returns {Settings}
+     */
+    withNamedStepDefinitions(named) {
+        if (!named) return this;
+        if (named === 'v3') return this.withStepDefinitions(stepDefinitionsV3);
+        if (named === 'adBlocking') return this.withStepDefinitions(stepDefinitionsAdBlocking);
+        if (named === 'youTubeAdBlocking') return this.withStepDefinitions(stepDefinitionsYouTubeAdBlocking);
+        console.warn('ignoring named step definitions:', named);
+        return this;
+    }
 }

special-pages/pages/onboarding/app/types.js

@@ -10,6 +10,8 @@ import { useContext } from 'preact/hooks';
  *   | 'bookmarks'
  *   | 'session-restore'
  *   | 'home-shortcut'
+ *   | 'ad-blocking'
+ *   | 'youtube-ad-blocking'
  * } SystemValueId - Each setting that can be updated should have a unique ID listed here.
  */
 

special-pages/pages/onboarding/integration-tests/onboarding.js

@@ -29,6 +29,7 @@ export class OnboardingPage {
             requestDockOptIn: {},
             requestImport: { enabled: true },
             stepCompleted: {},
+            setAdBlocking: {},
             reportPageException: {},
             init: {
                 stepDefinitions: {
@@ -382,6 +383,34 @@ export class OnboardingPage {
         ]);
     }
 
+    async enableEnhancedAdBlocking() {
+        const { page } = this;
+        await page.getByRole('button', { name: 'Turn on Enhanced Ad Blocking' }).click();
+        await expect(page.getByRole('img', { name: 'Completed Action' })).toBeVisible();
+        await this.didSetAdBlocking();
+    }
+
+    async enableYouTubeAdBlocking() {
+        const { page } = this;
+        await page.getByRole('button', { name: 'Block Ads' }).click();
+        await expect(page.getByRole('img', { name: 'Completed Action' })).toBeVisible();
+        await this.didSetAdBlocking();
+    }
+
+    async didSetAdBlocking() {
+        const calls = await this.mocks.outgoing({ names: ['setAdBlocking'] });
+        expect(calls).toMatchObject([
+            {
+                payload: {
+                    context: 'specialPages',
+                    featureName: 'onboarding',
+                    method: 'setAdBlocking',
+                    params: { enabled: true },
+                },
+            },
+        ]);
+    }
+
     async startBrowsing() {
         const { page } = this;
         await page.getByRole('button', { name: 'Start Browsing' }).click();
@@ -514,6 +543,7 @@ export class OnboardingPage {
 
     async completesOrderV3() {
         const { page } = this;
+
         /* Welcome */
         await page.getByText('Welcome to DuckDuckGo').nth(1).waitFor({ timeout: 1000 });
 
@@ -580,4 +610,86 @@ export class OnboardingPage {
         await page.getByRole('button', { name: 'Show Home Button' }).click();
         await this.startBrowsing();
     }
+
+    async completesOrderV3WithAdBlocking() {
+        const { page } = this;
+
+        /* Welcome */
+        await page.getByText('Welcome to DuckDuckGo').nth(1).waitFor({ timeout: 1000 });
+
+        /* Get started */
+        await page.getByText('Hi there').nth(1).waitFor({ timeout: 1500 });
+        await page.getByRole('button', { name: 'Let’s Do It' }).click();
+
+        /* Make default */
+        await page.getByText('Protections activated').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Make DuckDuckGo Your Default' }).click();
+        await page.getByText('Excellent!').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* System settings (with ad-blocking) */
+        await page.getByText('Let’s get you set up!').nth(1).waitFor({ timeout: 1000 });
+        const dockButton = this.build.switch({
+            windows: () => page.getByRole('button', { name: 'Pin to Taskbar' }),
+            apple: () => page.getByRole('button', { name: 'Keep in Dock' }),
+        });
+        await dockButton.click();
+        await page.getByRole('button', { name: 'Turn on Enhanced Ad Blocking', exact: true }).click();
+        await page.getByRole('button', { name: 'Import Now', exact: true }).click();
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* Duckplayer */
+        await page.getByText('Drowning in ads').nth(1).waitFor({ timeout: 1000 });
+        await page.getByLabel('See Without Duck Player').click();
+        await page.getByLabel('See With Duck Player').click();
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* Customize */
+        await page.getByText('Let’s customize a few things').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Show Bookmarks Bar' }).click();
+        await page.getByRole('button', { name: 'Enable Session Restore' }).click();
+        await page.getByRole('button', { name: 'Show Home Button' }).click();
+        await this.startBrowsing();
+    }
+
+    async completesOrderV3WithYouTubeAdBlocking() {
+        const { page } = this;
+        /* Welcome */
+        await page.getByText('Welcome to DuckDuckGo').nth(1).waitFor({ timeout: 1000 });
+
+        /* Get started */
+        await page.getByText('Hi there').nth(1).waitFor({ timeout: 1500 });
+        await page.getByRole('button', { name: 'Let’s Do It' }).click();
+
+        /* Make default */
+        await page.getByText('Protections activated').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Make DuckDuckGo Your Default' }).click();
+        await page.getByText('Excellent!').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* System settings (with youtube ad-blocking) */
+        await page.getByText('Let’s get you set up!').nth(1).waitFor({ timeout: 1000 });
+        const dockButton = this.build.switch({
+            windows: () => page.getByRole('button', { name: 'Pin to Taskbar' }),
+            apple: () => page.getByRole('button', { name: 'Keep in Dock' }),
+        });
+        await dockButton.click();
+        await page.getByRole('button', { name: 'Block Ads', exact: true }).click();
+        await page.getByRole('button', { name: 'Import Now', exact: true }).click();
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* Duckplayer - alternate title/subtitle */
+        await page.getByText('Watch YouTube privately with Duck Player').nth(1).waitFor({ timeout: 1000 });
+        await expect(page.locator('h2')).toContainText("Watching videos in Duck Player won't influence your YouTube recommendations.");
+        await page.getByLabel('See Without Duck Player').click();
+        await page.getByLabel('See With Duck Player').click();
+        await page.getByRole('button', { name: 'Next' }).click();
+
+        /* Customize */
+        await page.getByText('Let’s customize a few things').nth(1).waitFor({ timeout: 1000 });
+        await page.getByRole('button', { name: 'Show Bookmarks Bar' }).click();
+        await page.getByRole('button', { name: 'Enable Session Restore' }).click();
+        await page.getByRole('button', { name: 'Show Home Button' }).click();
+        await this.startBrowsing();
+    }
 }