Skip to content

Add new steps list#2170

Merged
alistairjcbrown merged 33 commits intomainfrom
abrown/add-new-steps-list
Feb 12, 2026
Merged

Add new steps list#2170
alistairjcbrown merged 33 commits intomainfrom
abrown/add-new-steps-list

Conversation

@alistairjcbrown
Copy link
Copy Markdown
Member

@alistairjcbrown alistairjcbrown commented Jan 12, 2026

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209272520346004/task/1212281179682493?focus=true

Description

Based heavily on Next Steps widget, adds a new Next Steps List widget with progress marker

To do:

  • Is confirmation a step needed, as in the existing Next Steps
  • Change in IDs -- confirm IDs in use for cards are expected (any that have been dropped or added)
  • Does this work as expected with the new themeing setup?
  • Review test setup

Testing Steps

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

Note

Medium Risk
Introduces a new widget UI path plus changes to shared Next Steps mock/message plumbing and locale strings, which could affect widget ordering and test/mocked behaviors. No auth/security or persistent data model changes beyond existing localStorage-backed mocks.

Overview
Adds a new New Tab Page widget, nextStepsList, that reuses the existing nextSteps_* messaging but presents steps as a single card with a stacked “next” preview (including animations, theme-aware images, and localized strings).

Updates integration/test infrastructure to support next-steps-list URL params, insert the nextStepsList widget into mocked initialSetup, and add Playwright coverage (behavior + screenshots). Also hardens Next Steps rendering by filtering unknown IDs, adjusts related copy (Email Protection + Duck Player button text), and expands lint ignores for generated Sources/ContentScopeScripts/dist.

Written by Cursor Bugbot for commit df1cd73. This will update automatically on new commits. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 12, 2026

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 12, 2026

[Beta] Generated file diff

Time updated: Thu, 12 Feb 2026 12:48:18 GMT

Integration
    - integration/pages/new-tab/dist/index.css
  • integration/pages/new-tab/dist/index.js
  • integration/pages/new-tab/locales/de/new-tab.json
  • integration/pages/new-tab/locales/en/new-tab.json
  • integration/pages/new-tab/locales/es/new-tab.json
  • integration/pages/new-tab/locales/fr/new-tab.json
  • integration/pages/new-tab/locales/it/new-tab.json
  • integration/pages/new-tab/locales/nl/new-tab.json
  • integration/pages/new-tab/locales/pl/new-tab.json
  • integration/pages/new-tab/locales/pt/new-tab.json
  • integration/pages/new-tab/locales/ru/new-tab.json

File has changed

Windows
    - windows/pages/new-tab/dist/index.css
  • windows/pages/new-tab/dist/index.js
  • windows/pages/new-tab/locales/de/new-tab.json
  • windows/pages/new-tab/locales/en/new-tab.json
  • windows/pages/new-tab/locales/es/new-tab.json
  • windows/pages/new-tab/locales/fr/new-tab.json
  • windows/pages/new-tab/locales/it/new-tab.json
  • windows/pages/new-tab/locales/nl/new-tab.json
  • windows/pages/new-tab/locales/pl/new-tab.json
  • windows/pages/new-tab/locales/pt/new-tab.json
  • windows/pages/new-tab/locales/ru/new-tab.json

File has changed

New Files
    - integration/pages/new-tab/next-steps-list/add-dock-dark.png
  • integration/pages/new-tab/next-steps-list/add-dock-light.png
  • integration/pages/new-tab/next-steps-list/customize-ntp-dark.png
  • integration/pages/new-tab/next-steps-list/customize-ntp-light.png
  • integration/pages/new-tab/next-steps-list/duck-player-dark.png
  • integration/pages/new-tab/next-steps-list/duck-player-light.png
  • integration/pages/new-tab/next-steps-list/email-protection-dark.png
  • integration/pages/new-tab/next-steps-list/email-protection-light.png
  • integration/pages/new-tab/next-steps-list/import-passwords-dark.png
  • integration/pages/new-tab/next-steps-list/import-passwords-light.png
  • integration/pages/new-tab/next-steps-list/pin-taskbar-dark.png
  • integration/pages/new-tab/next-steps-list/pin-taskbar-light.png
  • integration/pages/new-tab/next-steps-list/set-default-dark.png
  • integration/pages/new-tab/next-steps-list/set-default-light.png
  • integration/pages/new-tab/next-steps-list/subscription-dark.png
  • integration/pages/new-tab/next-steps-list/subscription-light.png
  • integration/pages/new-tab/next-steps-list/sync-dark.png
  • integration/pages/new-tab/next-steps-list/sync-light.png
  • windows/pages/new-tab/next-steps-list/add-dock-dark.png
  • windows/pages/new-tab/next-steps-list/add-dock-light.png
  • windows/pages/new-tab/next-steps-list/customize-ntp-dark.png
  • windows/pages/new-tab/next-steps-list/customize-ntp-light.png
  • windows/pages/new-tab/next-steps-list/duck-player-dark.png
  • windows/pages/new-tab/next-steps-list/duck-player-light.png
  • windows/pages/new-tab/next-steps-list/email-protection-dark.png
  • windows/pages/new-tab/next-steps-list/email-protection-light.png
  • windows/pages/new-tab/next-steps-list/import-passwords-dark.png
  • windows/pages/new-tab/next-steps-list/import-passwords-light.png
  • windows/pages/new-tab/next-steps-list/pin-taskbar-dark.png
  • windows/pages/new-tab/next-steps-list/pin-taskbar-light.png
  • windows/pages/new-tab/next-steps-list/set-default-dark.png
  • windows/pages/new-tab/next-steps-list/set-default-light.png
  • windows/pages/new-tab/next-steps-list/subscription-dark.png
  • windows/pages/new-tab/next-steps-list/subscription-light.png
  • windows/pages/new-tab/next-steps-list/sync-dark.png
  • windows/pages/new-tab/next-steps-list/sync-light.png

❌ File only exists in new changeset

cursor[bot]

This comment was marked as outdated.

@alistairjcbrown alistairjcbrown force-pushed the abrown/add-new-steps-list branch from 01b0753 to ddea04c Compare January 19, 2026 13:54
@rachelmcr
Copy link
Copy Markdown
Contributor

@alistairjcbrown This is working great for me with the macOS integration 🎉

If this isn't merged today, could we update the branch with the latest from main? The way we integrate C-S-S on macOS just changed so that will allow us to keep integrating the latest from this branch for native development/testing.

@alistairjcbrown alistairjcbrown force-pushed the abrown/add-new-steps-list branch from ddea04c to 2c5ae0c Compare January 22, 2026 14:07
@alistairjcbrown alistairjcbrown requested review from a team and noisysocks as code owners January 22, 2026 14:07
@alistairjcbrown alistairjcbrown requested review from SabrinaTardio and removed request for a team January 22, 2026 14:07
@alistairjcbrown alistairjcbrown changed the base branch from abrown/ignore-unknown-card-ids-in-next-steps to main January 22, 2026 14:07
cursor[bot]

This comment was marked as outdated.

@netlify
Copy link
Copy Markdown

netlify bot commented Jan 22, 2026

Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit df1cd73
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/698dcbd45f67b0000848d121
😎 Deploy Preview https://deploy-preview-2170--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

cursor[bot]

This comment was marked as outdated.

cursor[bot]

This comment was marked as outdated.

Copy link
Copy Markdown
Contributor

@vkraucunas vkraucunas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alistairjcbrown looks pretty good! Just a few things:

  1. Please add the new testing params to the guide in special-pages/pages/new-tab/readme.md, I find it’s helpful to have them all in one place
  2. The dismiss animation feels a little off. You can see the text of the current card and next one simultaneously. Maybe fade the text of the dismissing card faster and just leave the bg/or fade in the text of the next card on an ever so slight delay?
  3. I’ve challenged the seed/count indicator design in your project thread. It just doesn’t seem right.
  4. Perhaps feed the PNGs thru tinypng.com. These don’t need to be 30-60KB files.

@alistairjcbrown
Copy link
Copy Markdown
Member Author

Thanks @vkraucunas

  1. Updated 👍
  2. Do you dislike the overlapping text, and is it worth flagging this up in the task? (also, is this a blocker?)
  3. Thanks -- lets see what they come back with
  4. Done! 👍

rachelmcr added a commit to duckduckgo/apple-browsers that referenced this pull request Jan 27, 2026
…3216)

<!--
Note: This template is a reminder of our Engineering Expectations and
Definition of Done. Remove sections that don't apply to your changes.

⚠️ If you're an external contributor, please file an issue before
working on a PR. Discussing your changes beforehand will help ensure
they align with our roadmap and that your time is well spent.
-->

Task/Issue URL:
https://app.asana.com/1/137249556945/project/1209825025475019/task/1212879065365448?focus=true
Tech Design URL:
https://app.asana.com/1/137249556945/project/1209825025475019/task/1212359353583683?focus=true

### Description

This integrates the new Next Steps frontend widget, including a couple
improvements to the card behavior in the new widget:

1. Updates the feature flag name to `nextStepsListWidget` (to match the
new FE widget name and sync with Windows).
2. Enables the new "Next Steps" widget on the New Tab Page when the
feature flag is enabled.
3. Updates the "Personalize Your Browser" card behavior: The card
provider now observes the relevant setting, so when the call to action
is clicked the card is dismissed.
4. Updates the "Add to Dock" card behavior: When the app is successfully
added to the dock, it refreshes the card list so the card is dismissed.

⚠️ Testing these changes requires pointing the C-S-S dependency to a
build including the unreleased frontend changes from
duckduckgo/content-scope-scripts#2170.

### Testing Steps
<!-- Assume the reviewer is unfamiliar with this part of the app -->

1. Check out the branch `rachel/frontend-integration-updates-testing` or
update the BSK `Package.swift` file in this branch with this change
(this adds the required frontend changes):
```diff
-        .package(url: "https://github.com/duckduckgo/content-scope-scripts.git", exact: "12.30.0"),
+        .package(url: "https://github.com/duckduckgo/content-scope-scripts.git", branch: "rachelmcr/next-steps-list-testing"),
```
2. Build and run the app.
3. Go to Debug → Feature Flag Overrides → Other → enable
`nextStepsListWidget`.
4. Go to Debug → New Tab Page → Reset Next Steps.
5. Confirm the new tab page shows the new Next Steps widget (without the
production Next Steps widget).
6. On the "Personalize" card, click "Personalize Now." Confirm the card
is dismissed when the Customize panel opens.
7. Click "Maybe Later" on each card to proceed to the "Add to Dock"
card.
8. Click "Add to Dock" and confirm the card is dismissed when the app is
successfully added to the dock.
9. Go to Debug → Feature Flag Overrides → Other → disable
`nextStepsListWidget`. Confirm the production Next Steps widget is shown
and the new Next Steps widget is hidden.

<!-- 
### Testability Challenges
If you encountered issues writing tests due to any class in the
codebase, please report it in the [Testability Challenges
Document](https://app.asana.com/1/137249556945/project/1204186595873227/task/1211703869786699)

1. **Check the Document:** First, check the **Testability Challenges
Table** to see if the class you encountered is listed.
10. **If the Class Exists:**
   - Update the **Encounter Count** by increasing it by 1.
11. **If the Class Does Not Exist:**
   - Add a new entry
-->

### Impact and Risks
<!-- 
What's the impact on users if something goes wrong?

High: Could affect user privacy, lose user data, break core
functionality
Medium: Could disrupt specific features or user flows
Low: Minor visual changes, small bug fixes, improvement to existing
features
None: Internal tooling, documentation
-->
Low: Minor visual changes, small bug fixes, improvement to existing
features

#### What could go wrong?
<!-- Describe specific scenarios and how you've addressed them -->
Changes are feature-flagged (internal only) and tested.

### Quality Considerations
<!-- 
Focus on what matters for your changes:
- What edge cases exist?
- How does this affect performance?
- What monitoring have you added?
- What documentation needs updating?
- How does this impact privacy/security?
-->

### Notes to Reviewer
<!-- Anything specific you want reviewers to focus on -->

New Next Steps widget:
<img width="551" height="253" alt="NextStepsListWidget"
src="https://github.com/user-attachments/assets/76ef5928-8f07-423e-8b18-970922950268"
/>


---
###### Internal references:
[Definition of
Done](https://app.asana.com/0/1202500774821704/1207634633537039/f) |
[Engineering
Expectations](https://app.asana.com/0/59792373528535/199064865822552) |
[Tech Design
Template](https://app.asana.com/0/59792373528535/184709971311943)


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enables the new Next Steps list widget for internal/flagged users and
aligns app state with the new frontend widget.
> 
> - Introduces `FeatureFlag.nextStepsListWidget` (renaming from
`nextStepsSingleCardIteration`) and wires availability throughout
providers
> - Switches between legacy and single-card providers in
`NewTabPageNextStepsCardsProviderFacade` based on the flag
> - `NewTabPageConfigurationClient`: returns `nextStepsList` widget when
available; adds `isNextStepsListWidgetAvailable` to availability API;
adds new `WidgetId.nextStepsList`
> - `NewTabPageNextStepsCardsActionHandler`: now depends on
`FeatureFlagger`; after successful Dock add, refreshes cards when the
flag is on
> - `NewTabPageNextStepsSingleCardProvider`: observes
`appearancePreferences.didOpenCustomizationSettings` to refresh/dismiss
the Personalize card; generalizes visibility observer
> - `AppearancePreferences`: replaces method with `@Published
didOpenCustomizationSettings` persisted via persistor; navigator sets
this on opening customization
> - Debug reset updated to clear `didOpenCustomizationSettings`; tests
added/updated to cover new flag, widget selection, and Dock/Personalize
behaviors
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2f5e582. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Copy link
Copy Markdown
Contributor

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code is looking good! Nice work.

Did you test in macOS and Windows to check that these changes are feature flagged and the existing next steps widget works?

We have relatively new screenshot tests for the new tab page. Consider updating them to cover the new next steps widget when the design is fairly finalised.

@alistairjcbrown alistairjcbrown force-pushed the abrown/add-new-steps-list branch from 428ce65 to df1cd73 Compare February 12, 2026 12:47
@alistairjcbrown alistairjcbrown added this pull request to the merge queue Feb 12, 2026
Merged via the queue into main with commit e435f50 Feb 12, 2026
24 checks passed
@alistairjcbrown alistairjcbrown deleted the abrown/add-new-steps-list branch February 12, 2026 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants