[MOB-3904] Product Tour SERP Spotlight#1061
[MOB-3904] Product Tour SERP Spotlight#1061lucaschifino merged 26 commits intols-mob-3544-onboarding-product-tourfrom
Conversation
There was a problem hiding this comment.
I checked with Product and we'll be leaving the unlocalised static text on the image for now.
|
|
||
| // MARK: - SpotlightToast | ||
|
|
||
| class SpotlightToast: Toast, UIGestureRecognizerDelegate { |
There was a problem hiding this comment.
Using UIKit instead of SwiftUI so Toast class can be inherited and logic reused
There was a problem hiding this comment.
I feel this class could be tested, but plan to do it with the next protection tour ticket since it will still need some tweaks.
There was a problem hiding this comment.
Pull request overview
This PR implements the SERP (Search Engine Results Page) spotlight feature as part of the onboarding product tour. It creates an interactive toast component that highlights key Ecosia features to new users after they complete their first search. The implementation is feature-flagged behind OnboardingProductTourExperiment and integrated into the BrowserViewController in a modular way using extensions.
Changes:
- Created
SpotlightToastcomponent with custom animations, gesture handling, and theme support for displaying multi-step spotlight tours - Implemented
ProductTourSpotlightCoordinatorto manage spotlight display lifecycle and step navigation based on product tour state changes - Integrated spotlight functionality into
BrowserViewControllerthrough extensions for clean separation of concerns - Added analytics tracking for spotlight display and user interactions (next, back, skip, complete)
- Updated theme colors (dark mode
backgroundFeaturedcolor) and consolidated localization strings - Added welcome screen transition animations for toolbar slide-in effects
Reviewed changes
Copilot reviewed 12 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
firefox-ios/Client/Ecosia/UI/ProductTour/SpotlightToast.swift |
New custom toast component with animations, gesture handling, and multi-step transition support |
firefox-ios/Client/Ecosia/UI/ProductTour/ProductTourSpotlightCoordinator.swift |
Coordinator managing spotlight display lifecycle, step navigation, and ProductTourManager integration |
firefox-ios/Client/Ecosia/UI/ProductTour/BrowserViewController+ProductTourSpotlight.swift |
Extension integrating spotlight coordinator setup and theme updates into BrowserViewController |
firefox-ios/Client/Ecosia/UI/ProductTour/BrowserViewController+WelcomeTransition.swift |
Extension providing toolbar slide-in animations for welcome screen dismissal |
firefox-ios/Client/Frontend/Browser/BrowserViewController/Views/BrowserViewController.swift |
Added spotlight coordinator property and setup calls in viewDidLoad and theme updates |
firefox-ios/Ecosia/Analytics/Analytics.swift |
Added analytics methods for spotlight tour display and click events |
firefox-ios/Ecosia/Analytics/Analytics.Values.swift |
Added analytics labels and properties for SERP tour tracking |
firefox-ios/Ecosia/L10N/String.swift |
Added spotlight step strings and consolidated duplicate localization keys (gotIt, goBack, next) |
firefox-ios/Client/Ecosia/UI/WhatsNew/WhatsNewViewController.swift |
Updated to use consolidated localization string (.gotIt instead of .whatsNewFooterButtonTitle) |
firefox-ios/Client/Ecosia/UI/Theme/EcosiaDarkTheme.swift |
Changed backgroundFeatured color from Grellow100 to Grellow700 for better dark mode contrast |
firefox-ios/Client/Ecosia/UI/Ecosia.xcassets/spotlightCleanEnergy.imageset/Contents.json |
Added image asset for first spotlight step |
firefox-ios/Client/Ecosia/UI/Ecosia.xcassets/spotlightPlanetProfits.imageset/Contents.json |
Added image asset for second spotlight step |
firefox-ios/Client.xcodeproj/project.pbxproj |
Added new files to Xcode project and renamed Onboarding directory to ProductTour |
d4r1091
left a comment
There was a problem hiding this comment.
Neat!
All good and no blockers!
Just a small suggestion, you can potentially apply straight from Github
ec0b350
into
ls-mob-3544-onboarding-product-tour
* [MOB-3904] Spotlight toast initial implementation * [MOB-3904] Fix UnsafeRawPointer warning * [MOB-3904] Update buttons config * [MOB-3904] Clean up ProductTourSpotlightCoordinator * [MOB-3904] Fix toast positioning above toolbar * [MOB-3904] Animate toast transition between steps * [MOB-3904] Handle toast gesture for dismissing * [MOB-3904] Fix toast bottom positioning * [MOB-3904] Fix Spotlight dismissal on URL bar interaction * [MOB-3904] Add analytics to spotlight * [MOB-3904] Reintroduce swiftpm Package.resolved * [MOB-3904] Adjust before and after image * [MOB-3904] Fix backgroundFeatured on dark theme * [MOB-3904] Allow web view interaction clicks without dismissing spotlight * [MOB-3904] Revert: dismiss spotlight on web view clicks * [MOB-3904] Cleanup leftover * [MOB-3904] Adjust animation to push out previous step * [MOB-3904] Adjust enter and exit animations * [MOB-3904] Fix coordinator retention * [MOB-3904] Don't recreate spotlight on theme change * [MOB-3904] Remove unused import * [MOB-3904] Prevent retain cycle for bottomContentView * [MOB-3904] [TO REVERT] Temporarily deploy to Firebase * [MOB-3904] Add suffix to spotlight methods to indicate condition * [MOB-3904] Revert "[MOB-3904] [TO REVERT] Temporarily deploy to Firebase" This reverts commit 3f184cc.
* [MOB-3897] Welcome screen for product tour (#979) * [MOB-3897] Create WelcomeView using SwiftUI and replace old Welcome * [MOB-3897] Cleanup WelcomeTour classes and assets * [MOB-3897] Fix video player * [MOB-3897] Animated transition from Launch Screen * [MOB-3897] Add some todos * [MOB-3897] Implement exit animation * [MOB-3897] Animate browser toolbars after welcome screen * [MOB-3897] Adjust logo color and animation * [MOB-3897] Adjust video frame * [MOB-3897] Simplify unnecessary extension * [MOB-3897] Add experiment unleash flag * [MOB-3897] Add fade transition to welcome screen * [MOB-3897] Adjust toolbars animation * [MOB-3897] Add analytics events * [MOB-3897] Make sure onboarding gets presented on iPad * [MOB-3897] Adjust spacings and offsets * [MOB-3897] Use dynamic welcome text height * [MOB-3897] Adjust top offset on iPad * [MOB-3897] Add line break and adjust margin * [MOB-3897] Match NTP background on fade transition dismissal * [MOB-3897] Make sure initial logo matches launch screen * [MOB-3897] Add gradients behind content for visibility * [MOB-3897] Fix fade transition * [MOB-3897] Move video player to separate file * [MOB-3897] Wait for video to be ready and support reduced motion * [MOB-3897] Use Task instead of Dispatch * [MOB-3897] Fix AnalyticsSpyTests * [MOB-3897] Add text strings * [MOB-3897] Handle retriggering onAppear * [MOB-3897] Fix tests mock * [MOB-3897] Remove spy tests for now * [MOB-3897] Add Ecosia comments * [MOB-3897] Wait for feature flags before presenting welcome screen * [MOB-3897] [MOB-3903] Do not show APN consent during experiment * [MOB-3897] Move onboarding into Ecosia framework * [MOB-3897] Fix MockWelcomeDelegate * [MOB-3544] Fix rebase issues * [MOB-3544] Adjust logo image asset * [MOB-3544] Fix swiftlint * [MOB-3544] Update Welcome background video and remove loop * [MOB-3544] Fix swiftlint * [MOB-3544] Temporarily deploy feature branch to Firebase * [MOB-3544] Adjust welcome animation and remove unnecessary gradient * [MOB-3544] Temporarily run merge tests on PRs to this feature branch * [MOB-3900] Product tour first search NTP (#998) * [MOB-3900] Implement ProductTourManager that controls NTP state * [MOB-3900] Update product tour based on search * [MOB-3900] Adjust queries cell UI * [MOB-3900] Add localised search suggestions * [MOB-3900] Fix and refactor flow layout using swift ui * [MOB-3900] Extend localised search suggestions * [MOB-3900] Adjust UI * [MOB-3900] Handle actions * [MOB-3900] Track analytics events * [MOB-3900] Temporarily deploy on this branch * [MOB-3900] Add localised strings * [MOB-3900] Dynamically get width to compute rows * [MOB-3900] Remove unnecessary height calculation * [MOB-3900] Adjust TODO * [MOB-3900] Improve search vertical event handling * [MOB-3900] Move tour completion to webview did finish * [MOB-3900] Revert CI deployment on feature branch * [MOB-3900] Clean up code * [MOB-3900] Implement ProductTourManagerTests * [MOB-3900] Copilot review adjustments * [MOB-3900] Use locale mapping for search suggestions * [MOB-3900] Fix locale identifier * [MOB-3900] Move whole cell to SwiftUI * [MOB-3544] Send language region to first search suggestion analytics event * [MOB-3544] Fix close button color * [MOB-3544] [MOB-3900] Add highlight button state * [MOB-3544] Create reusable EcosiaButtonStyle with highlight state * [MOB-3544] Fix outlined pill button background * [MOB-3904] Product Tour SERP Spotlight (#1061) * [MOB-3904] Spotlight toast initial implementation * [MOB-3904] Fix UnsafeRawPointer warning * [MOB-3904] Update buttons config * [MOB-3904] Clean up ProductTourSpotlightCoordinator * [MOB-3904] Fix toast positioning above toolbar * [MOB-3904] Animate toast transition between steps * [MOB-3904] Handle toast gesture for dismissing * [MOB-3904] Fix toast bottom positioning * [MOB-3904] Fix Spotlight dismissal on URL bar interaction * [MOB-3904] Add analytics to spotlight * [MOB-3904] Reintroduce swiftpm Package.resolved * [MOB-3904] Adjust before and after image * [MOB-3904] Fix backgroundFeatured on dark theme * [MOB-3904] Allow web view interaction clicks without dismissing spotlight * [MOB-3904] Revert: dismiss spotlight on web view clicks * [MOB-3904] Cleanup leftover * [MOB-3904] Adjust animation to push out previous step * [MOB-3904] Adjust enter and exit animations * [MOB-3904] Fix coordinator retention * [MOB-3904] Don't recreate spotlight on theme change * [MOB-3904] Remove unused import * [MOB-3904] Prevent retain cycle for bottomContentView * [MOB-3904] [TO REVERT] Temporarily deploy to Firebase * [MOB-3904] Add suffix to spotlight methods to indicate condition * [MOB-3904] Revert "[MOB-3904] [TO REVERT] Temporarily deploy to Firebase" This reverts commit 3f184cc. * [MOB-3905] Product Tour tracking protection Spotlight (#1068) * [MOB-3905] Refactor tour manager to use milestone and add new protection spotlight * [MOB-3905] Open helpscout links on read more * [MOB-3905] Refactor coordinator with configurations for reusability * [MOB-3905] Add read more button icon * [MOB-3905] Right align buttons * [MOB-3905] [TO REVERT] Temporarily deploy to Firebase * [MOB-3905] Rename navigation handling methods * [MOB-3905] Add product tour state condition to spotlight setup * [MOB-3905] Rename Onboarding folder to ProductTour * [MOB-3905] Test ProductTourSpotlightCoordinator * [MOB-3905] Revert "[MOB-3905] [TO REVERT] Temporarily deploy to Firebase" This reverts commit 1c070af. * [MOB-3544] Set max spotlight width and adjust image view ratio * [MOB-3544] Fix pixel rounding shift during step transition * [MOB-3544] Open spotlight url on safari web view instead of new tab * [MOB-3544] Fix debug settings compilation errors and duplications * [MOB-3544] Adjust spolight spacings and fonts * [MOB-3544] Adjust spotlight width behaviour to be consistent * [MOB-3544] Include gradient overlay behind spotlight * [MOB-3544] Add onboarding product tour ab test context * [MOB-3544] Use subhedline for buttons * [MOB-4081] Product tour login flow (#1074) * [MOB-4081] Add sign in button and trigger login flow * [MOB-4081] Handle Account origin on login and use for product tour state * [MOB-4081] Update tests * [MOB-4081] Treat new account if created on the same day * [MOB-4081] Center experiment condition on ProductTourManager * [MOB-4081] React NTP based on tour login state * [MOB-4081] Add state info to debug setting * [MOB-4081] Adjust button icon and add bottom gradient * [MOB-4081] Remove done TODO * [MOB-4081] Hold NTP state while sign in flow is unresolved * [MOB-4081] Differentiate welcome click actions * [MOB-4081] Fix sign in flow active on early exits * [MOB-4081] Make onSignIn non-optional * [MOB-4081] Introduce sign in flow events * [MOB-4081] Adjust comment * [MOB-4081] Reuse welcome sign in logic * [MOB-4081] Make custom claim namespace clearer * [MOB-3544] Include experiment check on debug setting * [MOB-3902] Remove refresh seed on initialize state provider (#1077) * [MOB-3544] Address onboarding product tour PR review feedback (#1078) * Initial plan * Address PR review comments: fix NTPFirstSearchCell, remove dead code, fix CI configs, fix ProductTourManager, fix SearchSuggestionFlowLayout, update failing test Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com>
* [MOB-3897] Welcome screen for product tour (#979) * [MOB-3897] Create WelcomeView using SwiftUI and replace old Welcome * [MOB-3897] Cleanup WelcomeTour classes and assets * [MOB-3897] Fix video player * [MOB-3897] Animated transition from Launch Screen * [MOB-3897] Add some todos * [MOB-3897] Implement exit animation * [MOB-3897] Animate browser toolbars after welcome screen * [MOB-3897] Adjust logo color and animation * [MOB-3897] Adjust video frame * [MOB-3897] Simplify unnecessary extension * [MOB-3897] Add experiment unleash flag * [MOB-3897] Add fade transition to welcome screen * [MOB-3897] Adjust toolbars animation * [MOB-3897] Add analytics events * [MOB-3897] Make sure onboarding gets presented on iPad * [MOB-3897] Adjust spacings and offsets * [MOB-3897] Use dynamic welcome text height * [MOB-3897] Adjust top offset on iPad * [MOB-3897] Add line break and adjust margin * [MOB-3897] Match NTP background on fade transition dismissal * [MOB-3897] Make sure initial logo matches launch screen * [MOB-3897] Add gradients behind content for visibility * [MOB-3897] Fix fade transition * [MOB-3897] Move video player to separate file * [MOB-3897] Wait for video to be ready and support reduced motion * [MOB-3897] Use Task instead of Dispatch * [MOB-3897] Fix AnalyticsSpyTests * [MOB-3897] Add text strings * [MOB-3897] Handle retriggering onAppear * [MOB-3897] Fix tests mock * [MOB-3897] Remove spy tests for now * [MOB-3897] Add Ecosia comments * [MOB-3897] Wait for feature flags before presenting welcome screen * [MOB-3897] [MOB-3903] Do not show APN consent during experiment * [MOB-3897] Move onboarding into Ecosia framework * [MOB-3897] Fix MockWelcomeDelegate * [MOB-3544] Fix rebase issues * [MOB-3544] Adjust logo image asset * [MOB-3544] Fix swiftlint * [MOB-3544] Update Welcome background video and remove loop * [MOB-3544] Fix swiftlint * [MOB-3544] Temporarily deploy feature branch to Firebase * [MOB-3544] Adjust welcome animation and remove unnecessary gradient * [MOB-3544] Temporarily run merge tests on PRs to this feature branch * [MOB-3900] Product tour first search NTP (#998) * [MOB-3900] Implement ProductTourManager that controls NTP state * [MOB-3900] Update product tour based on search * [MOB-3900] Adjust queries cell UI * [MOB-3900] Add localised search suggestions * [MOB-3900] Fix and refactor flow layout using swift ui * [MOB-3900] Extend localised search suggestions * [MOB-3900] Adjust UI * [MOB-3900] Handle actions * [MOB-3900] Track analytics events * [MOB-3900] Temporarily deploy on this branch * [MOB-3900] Add localised strings * [MOB-3900] Dynamically get width to compute rows * [MOB-3900] Remove unnecessary height calculation * [MOB-3900] Adjust TODO * [MOB-3900] Improve search vertical event handling * [MOB-3900] Move tour completion to webview did finish * [MOB-3900] Revert CI deployment on feature branch * [MOB-3900] Clean up code * [MOB-3900] Implement ProductTourManagerTests * [MOB-3900] Copilot review adjustments * [MOB-3900] Use locale mapping for search suggestions * [MOB-3900] Fix locale identifier * [MOB-3900] Move whole cell to SwiftUI * [MOB-3544] Send language region to first search suggestion analytics event * [MOB-3544] Fix close button color * [MOB-3544] [MOB-3900] Add highlight button state * [MOB-3544] Create reusable EcosiaButtonStyle with highlight state * [MOB-3544] Fix outlined pill button background * [MOB-3904] Product Tour SERP Spotlight (#1061) * [MOB-3904] Spotlight toast initial implementation * [MOB-3904] Fix UnsafeRawPointer warning * [MOB-3904] Update buttons config * [MOB-3904] Clean up ProductTourSpotlightCoordinator * [MOB-3904] Fix toast positioning above toolbar * [MOB-3904] Animate toast transition between steps * [MOB-3904] Handle toast gesture for dismissing * [MOB-3904] Fix toast bottom positioning * [MOB-3904] Fix Spotlight dismissal on URL bar interaction * [MOB-3904] Add analytics to spotlight * [MOB-3904] Reintroduce swiftpm Package.resolved * [MOB-3904] Adjust before and after image * [MOB-3904] Fix backgroundFeatured on dark theme * [MOB-3904] Allow web view interaction clicks without dismissing spotlight * [MOB-3904] Revert: dismiss spotlight on web view clicks * [MOB-3904] Cleanup leftover * [MOB-3904] Adjust animation to push out previous step * [MOB-3904] Adjust enter and exit animations * [MOB-3904] Fix coordinator retention * [MOB-3904] Don't recreate spotlight on theme change * [MOB-3904] Remove unused import * [MOB-3904] Prevent retain cycle for bottomContentView * [MOB-3904] [TO REVERT] Temporarily deploy to Firebase * [MOB-3904] Add suffix to spotlight methods to indicate condition * [MOB-3904] Revert "[MOB-3904] [TO REVERT] Temporarily deploy to Firebase" This reverts commit 3f184cc. * [MOB-3905] Product Tour tracking protection Spotlight (#1068) * [MOB-3905] Refactor tour manager to use milestone and add new protection spotlight * [MOB-3905] Open helpscout links on read more * [MOB-3905] Refactor coordinator with configurations for reusability * [MOB-3905] Add read more button icon * [MOB-3905] Right align buttons * [MOB-3905] [TO REVERT] Temporarily deploy to Firebase * [MOB-3905] Rename navigation handling methods * [MOB-3905] Add product tour state condition to spotlight setup * [MOB-3905] Rename Onboarding folder to ProductTour * [MOB-3905] Test ProductTourSpotlightCoordinator * [MOB-3905] Revert "[MOB-3905] [TO REVERT] Temporarily deploy to Firebase" This reverts commit 1c070af. * [MOB-3544] Set max spotlight width and adjust image view ratio * [MOB-3544] Fix pixel rounding shift during step transition * [MOB-3544] Open spotlight url on safari web view instead of new tab * [MOB-3544] Fix debug settings compilation errors and duplications * [MOB-3544] Adjust spolight spacings and fonts * [MOB-3544] Adjust spotlight width behaviour to be consistent * [MOB-3544] Include gradient overlay behind spotlight * [MOB-3544] Add onboarding product tour ab test context * [MOB-3544] Use subhedline for buttons * [MOB-4081] Product tour login flow (#1074) * [MOB-4081] Add sign in button and trigger login flow * [MOB-4081] Handle Account origin on login and use for product tour state * [MOB-4081] Update tests * [MOB-4081] Treat new account if created on the same day * [MOB-4081] Center experiment condition on ProductTourManager * [MOB-4081] React NTP based on tour login state * [MOB-4081] Add state info to debug setting * [MOB-4081] Adjust button icon and add bottom gradient * [MOB-4081] Remove done TODO * [MOB-4081] Hold NTP state while sign in flow is unresolved * [MOB-4081] Differentiate welcome click actions * [MOB-4081] Fix sign in flow active on early exits * [MOB-4081] Make onSignIn non-optional * [MOB-4081] Introduce sign in flow events * [MOB-4081] Adjust comment * [MOB-4081] Reuse welcome sign in logic * [MOB-4081] Make custom claim namespace clearer * [MOB-3544] Include experiment check on debug setting * [MOB-3902] Remove refresh seed on initialize state provider (#1077) * [MOB-3544] Address onboarding product tour PR review feedback (#1078) * Initial plan * Address PR review comments: fix NTPFirstSearchCell, remove dead code, fix CI configs, fix ProductTourManager, fix SearchSuggestionFlowLayout, update failing test Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: lucaschifino <19517744+lucaschifino@users.noreply.github.com> # Conflicts: # firefox-ios/Client.xcodeproj/project.pbxproj # firefox-ios/Client/Application/AccessibilityIdentifiers.swift # firefox-ios/Client/Application/AppDelegate.swift # firefox-ios/Client/Coordinators/Browser/BrowserCoordinator.swift # firefox-ios/Client/Coordinators/Launch/LaunchCoordinator.swift # firefox-ios/Client/Ecosia/Extensions/AppSettingsTableViewController+Ecosia.swift # firefox-ios/Client/Ecosia/Frontend/Home/EcosiaHomepageSectionType.swift # firefox-ios/Client/Ecosia/Settings/EcosiaDebugSettings.swift # firefox-ios/Client/Ecosia/UI/LaunchScreen/EcosiaLaunchScreenView.swift # firefox-ios/Client/Ecosia/UI/Onboarding/Welcome.swift # firefox-ios/Client/Ecosia/UI/Onboarding/WelcomeTour.swift # firefox-ios/Client/Ecosia/UI/Onboarding/WelcomeTourAction.swift # firefox-ios/Client/Frontend/Browser/BrowserViewController/Extensions/BrowserViewController+WebViewDelegates.swift # firefox-ios/Client/Frontend/Browser/BrowserViewController/Views/BrowserViewController.swift # firefox-ios/Client/Frontend/Home/HomepageViewModel.swift # firefox-ios/Client/Frontend/Home/LegacyHomepageViewController.swift # firefox-ios/Client/Frontend/Toolbar+URLBar/TabToolbar.swift # firefox-ios/Client/Frontend/Toolbar+URLBar/TabToolbarHelper.swift # firefox-ios/Ecosia/Account/Auth/EcosiaAuthenticationService.swift # firefox-ios/Ecosia/Braze/APNConsent.swift # firefox-ios/Ecosia/Core/MMP/MMP.swift # firefox-ios/EcosiaTests/EcosiaHomeViewModelTests.swift
MOB-3904
Context
Part of #996
Approach
Obs.: Translations strings not yet added, to be done all together afterwards