Skip to content
This repository was archived by the owner on Feb 24, 2025. It is now read-only.

Add Search Bar on the New Tab Page #3409

Merged
merged 68 commits into from
Oct 24, 2024
Merged

Add Search Bar on the New Tab Page #3409

merged 68 commits into from
Oct 24, 2024

Conversation

ayoy
Copy link
Collaborator

@ayoy ayoy commented Oct 16, 2024

Task/Issue URL: https://app.asana.com/0/72649045549333/1208262951113965/f

Description:
This change introduces alternative New Tab Page UI including a search bar.
The new UI exists alongside the original UI and will be enabled to some users as an experiment.
The NTP search bar reuses existing AddressBarTextField wrapped in an NSViewRepresentable.
There's AddressBarViewModel class created for interacting with SwiftUI views - it encapsulates
AddressBarViewController and forwards actions to it.
NTP content with search bar is now centered vertically in the view if all NTP sections are hidden
or in collapsed state.
This code is meant to be temporary and will be removed after the experiment finishes.

Steps to test this PR:

  1. Run the app
  2. Set internal user state
  3. Close the window and reopen, verify that the New Tab Page contains a search bar.
  4. Verify that the search bar works – typing queries, navigating to urls, opening search suggestions. Verify that cmd+return opens the query in a new tab.
  5. Type text in search bar so that the suggestions window is displayed. Scroll NTP and verify that suggestions window disappears.
  6. Shrink the window vertically and verify that it displays a more compact Dax logo.
  7. Focus the search bar and scroll NTP so that the search bar is not visible. Start typing and verify that NTP scrolls down to reveal the search bar.
  8. Click Customize button in the bottom-right corner of the NTP and hide all NTP sections. Verify that the search bar is (roughly) centered vertically inside the view.
  9. Show Recently Visited section and collapse it. Verify that NTP content is centered vertically. Expand Recently Visited and verify that NTP content is not centered anymore.
  10. Remove internal user state, close the window and reopen and verify that the search bar is not visible.

Definition of Done:


Internal references:

Pull Request Review Checklist
Software Engineering Expectations
Technical Design Template
Pull Request Documentation

ayoy added 30 commits September 24, 2024 19:24
Copy link
Contributor

github-actions bot commented Oct 16, 2024

Warnings
⚠️ PR has more than 500 lines of code changing. Consider splitting into smaller PRs if possible.
Messages
📖

You seem to be updating localized strings. Make sure that you request translations and include translated strings before you ship your change. See Localization Guidelines for more information.

Generated by 🚫 dangerJS against a687bb6

@ayoy ayoy marked this pull request as ready for review October 17, 2024 07:14
@ayoy ayoy requested a review from jotaemepereira October 17, 2024 07:14
Copy link
Collaborator

@jotaemepereira jotaemepereira left a comment

Choose a reason for hiding this comment

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

Looks great @ayoy. I tested different flows and re-sizing the window, and it looks great.

@@ -35109,6 +35109,18 @@
}
}
},
"newTab.menu.item.show.search.bar" : {
Copy link
Collaborator

Choose a reason for hiding this comment

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

❓ Were these translations uploaded to Smartling?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

No, they weren't. I'll have one more small-ish PR with another piece of copy and will request translation once the copy review is done. I will only merge it when we have translations anyway.

ayoy added 2 commits October 21, 2024 17:37
Task/Issue URL: https://app.asana.com/0/72649045549333/1208262570807667/f

Description:
This change adds pixels for tracking NTP Search Box experiment.
@ayoy ayoy self-assigned this Oct 21, 2024
ayoy added 8 commits October 21, 2024 22:06
Task/Issue URL: https://app.asana.com/0/0/1208583505730578/f

Description:
This change adds a popover that is displayed once for every user over the 'Customize' button on the NTP.
It's not a part of the experiment nor it's related to the search bar project. We're adding the onboarding to
increase engagement with NTP customization settings.
@ayoy ayoy merged commit a32e4b8 into main Oct 24, 2024
18 checks passed
@ayoy ayoy deleted the dominik/ntp-search-bar branch October 24, 2024 09:13
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants