address bar position

[brindy]

Task/Issue URL: https://app.asana.com/0/72649045549333/1205479187241071/f
Tech Design URL:
CC:

DRK PR: duckduckgo/DesignResourcesKit#5

Description:

Adds bottom bar support.

Known issues:

• The toast is positioned in a way that can obscure the navigation bar. We're planning to follow up with a toast redesign.
• The suggestions are not really positioned optimally. A follow up redesign project already has been completed.
• The navigation bar itself doesn't animate, but there should be a background view to make feel a bit smoother.
• If the user sets bottom bar we respect that in landscape too (unlike Safari). This is just for simplicity we can see how it feels and adjust later.
• Will need translations, but I will do them as a follow up when back from the Apple team meeting (will create a task in case someone else has time to shepherd that)

Steps to test this PR:

iPad:

1. Upgrade an existing install. Nothing should appear to change.
2. Check settings, there should be no option for bottom bar.
3. Enter some text into the search bar, suggestions should look unchanged.
4. Perform a clean install and ensure nothing appears to have changed or is broken (onboarding > search > browse > add favorites, etc)

iPhone - upgrade

1. Upgrade an existing install. The bar should be at the top.

iPhone - top bar

1. Clean install
2. Check onboarding looks as it did before, except when highlighting the URL bar the cutout shape should now match the URL bar exactly. Also note that the hand emoji should point up to the address bar
3. Enter some text into the address bar, suggestions should show as normal with arrow pointing up
4. Change orientation, bar should stay at the top
5. Check with and without favorites.
6. Favorites overlay (shown when on a web page and you tap the bar) should have appropriate scrolling insets

iPhone - bottom bar

1. Clean install
2. As soon as possible switch to bottom bar via settings
3. Continue onboarding, which should move dax dialogs out of the way of the bottom bar if they refer to it. Likewise the hand emoji should point down to the address bar when shown.
4. Ensure that suggestions arrow points down and otherwise works correctly.
5. Favorites overlay should have appropriate scrolling insets

Blank Snapshot iPhone & iPad

1. In settings turn on "automatically clear data"
2. Background the app
3. Use the app switcher to check the UI looks correct in top and bottom bar mode
4. Comment out the code in AppDelegate removeOverlay so that the overlay stays and check that the buttons fire a pixel if they are tapped

Toasts

1. When a toast is created on the screen with the bottom address bar it should be placed higher than the address bar.
2. In all other cases the toast should be placed relative to the bottom bar if it exists.

Copy Testing:

• Use of correct apostrophes in new copy, ie ’ rather than '

Orientation Testing:

• Portrait
• Landscape

Device Testing:

• iPhone SE (1st Gen)
• iPhone 8
• iPhone X
• iPhone 14 Pro
• iPad

OS Testing:

• iOS 14
• iOS 15
• iOS 16

Theme Testing:

• Light theme
• Dark theme

---

Internal references:

Software Engineering Expectations
Technical Design Template

[github-actions]

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

Generated by 🚫 dangerJS against e757bce

[miasma13]

I see DesignResourcesKit points to a commit. Please do not forget to make a release of DRK and update the reference.