Onboarding Brand Design Update: Update try-a-search dialog by mikescamell · Pull Request #8277 · duckduckgo/Android

mikescamell · 2026-04-14T17:38:16Z

Task/Issue URL: https://app.asana.com/1/137249556945/project/1207908166761516/task/1212699268790178?focus=true

Description

Add the brand design update version of the "try a search" onboarding dialog (DaxBubbleCta). This introduces:

A new DaxBubbleCta subclass with brand design update background support and typing animation
Brand design update dialog layout with custom card view, options content, and dismiss button
Background command dispatch for the rebrand browser background
Isolated NestedScrollView wrapper for the brand design dialog so it scrolls as a unit in landscape without restructuring the existing NTP layout hierarchy

Steps to test this PR

Apply patch

Index: app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(date 1776281246277)
@@ -250,6 +250,10 @@
     }
 
     private suspend fun getHomeCta(): Cta? {
+        // TODO: REMOVE — temp hack to always show brand design update search dialog for testing
+        return DaxTryASearchBrandDesignUpdateBubbleCta(onboardingStore, appInstallStore, appTheme.isLightModeEnabled())
+        // TODO: REMOVE — end temp hack
+
         return when {
             // Onboarding disabled
             canShowDaxIntroCta() && extendedOnboardingFeatureToggles.noBrowserCtas().isEnabled() -> {
Index: app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(date 1776281246278)
@@ -45,7 +45,7 @@
     val viewState = _viewState.asStateFlow()
 
     fun initializePages() {
-        pageLayoutManager.buildPageBlueprints()
+        pageLayoutManager.buildBrandDesignUpdatePageBlueprints()
     }
 
     fun pageCount(): Int {
@@ -70,7 +70,7 @@
     }
 
     fun initializeOnboardingSkipper() {
-        if (!appBuildConfig.canSkipOnboarding) return
+        return
 
         // delay showing skip button until privacy config downloaded
         viewModelScope.launch {
Index: app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
--- a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(date 1776281246279)
@@ -34,13 +34,13 @@
      * Main toggle for the onboarding brand design update feature.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun self(): Toggle
 
     /**
      * Toggle for the brand design update variant.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun brandDesignUpdate(): Toggle
 }

Note if you easily want to retrigger the dialog from closing the app for testing purposes you can apply this patch to hardcode showing the dialog

Index: app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(date 1776281246277)
@@ -250,6 +250,10 @@
     }
 
     private suspend fun getHomeCta(): Cta? {
+        // TODO: REMOVE — temp hack to always show brand design update search dialog for testing
+        return DaxTryASearchBrandDesignUpdateBubbleCta(onboardingStore, appInstallStore, appTheme.isLightModeEnabled())
+        // TODO: REMOVE — end temp hack
+
         return when {
             // Onboarding disabled
             canShowDaxIntroCta() && extendedOnboardingFeatureToggles.noBrowserCtas().isEnabled() -> {
Index: app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(date 1776281246278)
@@ -45,7 +45,7 @@
     val viewState = _viewState.asStateFlow()
 
     fun initializePages() {
-        pageLayoutManager.buildPageBlueprints()
+        pageLayoutManager.buildBrandDesignUpdatePageBlueprints()
     }
 
     fun pageCount(): Int {
@@ -70,7 +70,7 @@
     }
 
     fun initializeOnboardingSkipper() {
-        if (!appBuildConfig.canSkipOnboarding) return
+        return
 
         // delay showing skip button until privacy config downloaded
         viewModelScope.launch {
Index: app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
--- a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(revision a32fc8136f5160d006dd8c837ee4c88f76bd7697)
+++ b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(date 1776281246279)
@@ -34,13 +34,13 @@
      * Main toggle for the onboarding brand design update feature.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun self(): Toggle
 
     /**
      * Toggle for the brand design update variant.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun brandDesignUpdate(): Toggle
 }

Brand design dialog in portrait

Launch the app with a fresh install / clear data to trigger the onboarding flow
Go through onboarding and get to the try a search dialog
Verify the dialog displays correctly with typing animation, options, and dismiss button

Brand design dialog in landscape (phone)

Rotate to landscape orientation
Verify the dialog content is scrollable and not squashed
Open the keyboard and check the background moves up (it will be small, we're ok with that for now)

No regressions on NTP

Remove patch
Launch the app with a fresh install / clear data to trigger the onboarding flow
Go through onboarding and get to the try a search dialog
Old try a seach dialog should show
Open a new tab and verify favorites, shortcuts, and other NTP content display correctly
Navigate between tabs and verify show/hide behavior is unchanged

Brand design dialog in portrait (tablet)

Launch the app with a fresh install / clear data to trigger the onboarding flow
Go through onboarding and get to the try a search dialog
Verify the dialog displays correctly with typing animation, options, and dismiss button

Brand design dialog in landscape (tablet)

Rotate to landscape orientation
Verify the dialog content is scrollable and not squashed
Open the keyboard and check the background moves up

UI changes

See task

Note

Medium Risk
Medium risk because it adds a new onboarding CTA flow with new view animations, theming/context wrapping, and changes how NTP backgrounds are shown/cleared via updated SetBrowserBackground command handling.

Overview
Adds a brand design update variant of the onboarding “try a search” bubble CTA, including new UI layout (scrollable container for landscape), option button styling, and a new typing-animation title view.

Updates CTA plumbing to conditionally serve the new CTA behind OnboardingBrandDesignUpdateToggles, propagate the custom background resource, and adjust BrowserTabFragment to switch between legacy vs rebrand background images and apply onboarding-themed background colors.

Enhances DaxOnboardingBubbleBrandDesignUpdateCardView to support optional arrow rendering (showArrow), preserve/restore bottom margins when toggling the arrow, and resolve onboarding theme attributes via a fallback themed context.

^{Reviewed by Cursor Bugbot for commit 4aeee32. Bugbot is set up for automated code reviews on this repo. Configure here.}

mikescamell · 2026-04-14T17:38:32Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 838ca71. Configure here.}

mikescamell · 2026-04-14T17:55:20Z

@LukasPaczos Draft ready for a look over on the approach when you have time 👍

LukasPaczos

Architecture Review: `DaxBubbleCta` and Brand Design CTAs

I've been looking at how DaxIntroSearchOptionsBrandDesignUpdateCta fits into the DaxBubbleCta hierarchy and I think there's an opportunity to set up the architecture more cleanly before the remaining brand design CTAs land.

The core issue

DaxIntroSearchOptionsBrandDesignUpdateCta extends DaxBubbleCta but overrides all 7 behavioral methods (showCta, clearDialog, setOnPrimaryCtaClicked, setOnSecondaryCtaClicked, setOnDismissCtaClicked, setOnOptionClicked, hideDaxBubbleCta). All 6 non-interface methods were changed from non-open to open specifically for this subclass. It inherits from DaxBubbleCta for sealed class membership and the pixel/data fields, but reuses none of the base behavior.

The old-layout subclasses (DaxIntroSearchOptionsCta, DaxIntroVisitSiteOptionsCta, DaxEndCta, DaxSubscriptionCta) override zero methods — they're pure data classes. The brand design CTA overrides all of them. This is a clean split that suggests a missing intermediate layer.

When the remaining 3 brand design CTAs arrive, each one would need to:

Copy ~200 lines of animation/transition code from the existing brand design CTA
Override the same 7 methods with mostly-identical implementations
Keep the allContentIncludes list in sync across all brand design CTAs (needed for content-transition fade-outs)

Suggestion: extract `BrandDesignBubbleCta` as an intermediate abstract class

DaxBubbleCta (sealed)
├── DaxIntroSearchOptionsCta          (old layout, 0 overrides)
├── DaxIntroVisitSiteOptionsCta       (old layout, 0 overrides)
├── DaxEndCta                         (old layout, 0 overrides)
├── DaxSubscriptionCta                (old layout, 0 overrides)
└── BrandDesignBubbleCta (abstract)   (overrides 7 methods once)
    ├── DaxIntroSearchOptionsBrandDesignUpdateCta
    ├── DaxIntroVisitSiteOptionsBrandDesignUpdateCta  (future)
    ├── DaxEndBrandDesignUpdateCta                    (future)
    └── DaxSubscriptionBrandDesignUpdateCta           (future)

The intermediate class owns the shared brand design infrastructure:

Theme resolution (resolveOnboardingContext) and dismiss button styling
The content-transition animation framework (fade-out old include, type title, fade-in new content)
clearDialog(), setOnDismissCtaClicked(), hideDaxBubbleCta() targeting brand design view IDs
The allContentIncludes list (one place to update as new content include types are added)
Default no-ops for setOnPrimaryCtaClicked/setOnSecondaryCtaClicked

Concrete subclasses provide:

activeIncludeId: Int — which content include this CTA uses (e.g. R.id.optionsContent)
configureContentViews(view: View) — populate the active include's children
Override setOnOptionClicked / setOnPrimaryCtaClicked only when that CTA type uses those controls

Each brand design CTA goes from ~250 lines (full override of everything) to ~30-50 lines of data + content configuration.

Secondary win: eliminate the `isBrandDesignUpdate` boolean threading

Right now, isBrandDesignUpdate is separately queried from ctaViewModel.isBrandDesignUpdateEnabled() and threaded through CtaViewState, Command.SetBrowserBackground, and BrowserTabFragment.showCta()/showDaxOnboardingBubbleCta() — even though the CTA's concrete type already encodes this information.

With BrandDesignBubbleCta as a type, all of these become is BrandDesignBubbleCta checks. The boolean, the view state field, and the command parameter all go away.

Things that naturally die when old CTAs are removed (no action needed now)

isModifiedControlOnboardingExperimentEnabled on the sealed class base — brand design CTAs never read it
The experiment-gated logic in setOnOptionClicked(onboardingExperimentEnabled, configuration, ...) — brand design ignores both parameters
The when blocks in BrowserTabViewModel that enumerate both old and brand design variants for the same behavior (e.g. lines 1299-1301)
DaxBubbleCta's base showCta() implementation and the old-layout clearDialog()

Clean collapse path

When old CTAs are eventually removed, DaxBubbleCta becomes a redundant wrapper around BrandDesignBubbleCta. The cleanup at that point is a straightforward inline: rename BrandDesignBubbleCta to DaxBubbleCta, drop the "BrandDesign" prefix from subclasses, delete dead base-class code. Building the intermediate class now sets this up as a trivial rename rather than a structural refactor.

mikescamell · 2026-04-15T12:29:06Z

Architecture Review: DaxBubbleCta and Brand Design CTAs

I've been looking at how DaxIntroSearchOptionsBrandDesignUpdateCta fits into the DaxBubbleCta hierarchy and I think there's an opportunity to set up the architecture more cleanly before the remaining brand design CTAs land.

The core issue

DaxIntroSearchOptionsBrandDesignUpdateCta extends DaxBubbleCta but overrides all 7 behavioral methods (showCta, clearDialog, setOnPrimaryCtaClicked, setOnSecondaryCtaClicked, setOnDismissCtaClicked, setOnOptionClicked, hideDaxBubbleCta). All 6 non-interface methods were changed from non-open to open specifically for this subclass. It inherits from DaxBubbleCta for sealed class membership and the pixel/data fields, but reuses none of the base behavior.

The old-layout subclasses (DaxIntroSearchOptionsCta, DaxIntroVisitSiteOptionsCta, DaxEndCta, DaxSubscriptionCta) override zero methods — they're pure data classes. The brand design CTA overrides all of them. This is a clean split that suggests a missing intermediate layer.

When the remaining 3 brand design CTAs arrive, each one would need to:

Copy ~200 lines of animation/transition code from the existing brand design CTA

Override the same 7 methods with mostly-identical implementations

Keep the allContentIncludes list in sync across all brand design CTAs (needed for content-transition fade-outs)

Suggestion: extract BrandDesignBubbleCta as an intermediate abstract class
DaxBubbleCta (sealed)
├── DaxIntroSearchOptionsCta          (old layout, 0 overrides)
├── DaxIntroVisitSiteOptionsCta       (old layout, 0 overrides)
├── DaxEndCta                         (old layout, 0 overrides)
├── DaxSubscriptionCta                (old layout, 0 overrides)
└── BrandDesignBubbleCta (abstract)   (overrides 7 methods once)
    ├── DaxIntroSearchOptionsBrandDesignUpdateCta
    ├── DaxIntroVisitSiteOptionsBrandDesignUpdateCta  (future)
    ├── DaxEndBrandDesignUpdateCta                    (future)
    └── DaxSubscriptionBrandDesignUpdateCta           (future)
The intermediate class owns the shared brand design infrastructure:

Theme resolution (resolveOnboardingContext) and dismiss button styling

The content-transition animation framework (fade-out old include, type title, fade-in new content)

clearDialog(), setOnDismissCtaClicked(), hideDaxBubbleCta() targeting brand design view IDs

The allContentIncludes list (one place to update as new content include types are added)

Default no-ops for setOnPrimaryCtaClicked/setOnSecondaryCtaClicked

Concrete subclasses provide:

activeIncludeId: Int — which content include this CTA uses (e.g. R.id.optionsContent)

configureContentViews(view: View) — populate the active include's children

Override setOnOptionClicked / setOnPrimaryCtaClicked only when that CTA type uses those controls

Each brand design CTA goes from ~250 lines (full override of everything) to ~30-50 lines of data + content configuration.

Secondary win: eliminate the isBrandDesignUpdate boolean threading

Right now, isBrandDesignUpdate is separately queried from ctaViewModel.isBrandDesignUpdateEnabled() and threaded through CtaViewState, Command.SetBrowserBackground, and BrowserTabFragment.showCta()/showDaxOnboardingBubbleCta() — even though the CTA's concrete type already encodes this information.

With BrandDesignBubbleCta as a type, all of these become is BrandDesignBubbleCta checks. The boolean, the view state field, and the command parameter all go away.

Things that naturally die when old CTAs are removed (no action needed now)

isModifiedControlOnboardingExperimentEnabled on the sealed class base — brand design CTAs never read it

The experiment-gated logic in setOnOptionClicked(onboardingExperimentEnabled, configuration, ...) — brand design ignores both parameters

The when blocks in BrowserTabViewModel that enumerate both old and brand design variants for the same behavior (e.g. lines 1299-1301)

DaxBubbleCta's base showCta() implementation and the old-layout clearDialog()

Clean collapse path

When old CTAs are eventually removed, DaxBubbleCta becomes a redundant wrapper around BrandDesignBubbleCta. The cleanup at that point is a straightforward inline: rename BrandDesignBubbleCta to DaxBubbleCta, drop the "BrandDesign" prefix from subclasses, delete dead base-class code. Building the intermediate class now sets this up as a trivial rename rather than a structural refactor.

Thanks for the review @LukasPaczos 🙌 Changes made, I agree this approach is better. Ready for round 2 🥊

LukasPaczos · 2026-04-16T08:39:47Z

+                        android:layout_height="wrap_content"
+                        android:textAppearance="@style/Typography.DuckDuckGo.Onboarding.Title.InContext"
+                        android:visibility="invisible"
+                        app:typography="h2"


This should be title.

title would not match the new onboarding titles, it's the old design system title, which would be 32sp and not 20sp, h2 is the closest match we have. This all needs to be addressed when the rebrand project kicks off and we get a proper new design system.

LukasPaczos · 2026-04-16T08:40:11Z

+                        android:clickable="true"
+                        android:focusable="true"
+                        android:textAppearance="@style/Typography.DuckDuckGo.Onboarding.Title.InContext"
+                        app:typography="h2" />


This should be title.

same as https://github.com/duckduckgo/Android/pull/8277/changes#r3093014564