Option to choose a top nav bar

[vesta0]

User Story

• As a user who is used to a top nav bar, I want the option to move the nav bar to the top, so I can interact with my browser easily and comfortably.

This user story is the result of UX research, design discussions, and recommendations that took place in Q3.

Added benefit: top nav bar can auto-hide when scrolling

Dependency:

#4281 Need to remove QAB first

Acceptance Criteria

• I can do go into settings and choose to move the nav bar to the top (default is bottom nav)
• Once I have changed my setting, the nav bar moves to the top
• Navbar will auto-hide when scrolling (this used to be possible when we had this at the top)
• Make sure nav bar is still pinned (doesn't autohide) and works properly when using Custom Tabs

UX

Abstract: Screens 13 & 14 - https://share.goabstract.com/7cd59d53-ad3a-4b33-8131-74703c1859a2

┆Issue is synchronized with this Jira Task

[tom-james-watson]

It sounds like choosing a top nav bar would make the nav bar auto-hide. I personally want a top nav bar but without auto-hiding. Can we make the nav bar position and whether or not to auto-hide two different options? Thanks!

[Wazhai]

Is there a reason why the bottom nav bar can't auto-hide as well?

[uniquePWD]

@imchau they're working on it. It needs some GeckoView work.

[dylmye]

@tom-james-watson perhaps auto-hiding would be a separate option from the position of the nav bar.

Either way a definite +1 for this PR so I can use fenix :)

[monreal]

I wondered about the auto hiding of the bottom navbar as well initially. Then I realized the constantly shown bar is what I like about Fenix. That is because the bar is needed for tab management.

[lime124]

designs being wrapped up and should be finished by end of sprint tomorrow (Friday).

[abatishchev]

@lime124 how the final design looks like? Does it include two separate options: position and whether to auto-hide?

[lime124]

@abatishchev the scope of this ticket was limited to selecting the position of the nav bar. thanks!

[dylmye]

@abatishchev see #4383 which is tracking the auto-hide feature

[martinlanger90]

can I already use a dev .apk :-)???

[lobontiumira]

Verified as fixed on the latest Nightly builds from 11/27 (#13310607, #13310606) with Samsung Galaxy Note 8 (Android 9), and HTC Desire 820 (Android 6.0.1).
Verified that:

• the user can move the navigation bar to the top (default is bottom nav) from Settings - Toolbar,
• once the setting is done, the navigation bar moves to the top,
• the navigation bar will auto-hide when scrolling,
• the navigation bar is still pinned (doesn't autohide) and works properly when using custom tabs.

[tom-james-watson]

Nice to see great progress being made on this. There does, however, seem to be a pretty big flaw with the current implementation.

I have set the toolbar to show at the top, which works as expected:

However, the nav bar still appears at the bottom in the tab overview page:

This is obviously quite inconsistent and jarring. Seems like hopefully quite an easy fix?

[cadeyrn]

@tom-james-watson that's #6820.