Enhance browser toolbar

[vesta0]

User Story

• As a user, I want to easily find and understand available toolbar options and use them effectively, so I can have a fast and intuitive browsing experience.

Acceptance Criteria

• I know when reader mode is available without being confused or distracted (possible solution: reader mode badge in the nav bar once we are able to just show the clean URL)

It looks like users find the current behaviour either confusing or irritating, and overall not useful. Highlights of some user feedback:

• Some users assume blue dot is highlighting reader mode being either a new feature or notifying that we made changes to reader node. They expect the blue dot to go away after they interact with reader mode once, and they find it confusing when it doesn't.

• Many sites can be viewed in reader mode which means the blue dot does appear very often. Many users find that irritating and annoying and it has caused some users to drop off (self-reports).

• The frequency of showing the blue dot, also means that the blue dot is not accomplishing its objective of notifying users of the availability of reader mode, PWA, or open in app option, since users will begin to ignore it.

• Page actions in a similar category are grouped together for easier interaction (add to collection, add to top sites, add to bookmarks, add to homescreen) so they are faster to locate and use.

• Remove "Help" from browser toolbar as it is very rarely used.

---

UX designs
Updated Mar 5, 2020 by @topotropic

• grouped page actions
• grouped site specific actions like “Reader mode” or “Open in app” and displayed them at the bottom (with app bar bottom) or at the top (with toolbar top)
• removed open “new site” and open “new private tab” to de-clutter the menu, assumption here is that opening a new tab is a quick endeavour anyway and de-cluttering the menu is valuable to more people because they don’t feel overwhelmed and disoriented by the menu
• increased menu width to 280dp
• removed "Help" from menu as it is very rarely used

Site menu with the minimal amount of menu entries:

• design for bottom app bar
• design for top app bar

Site menu with site specific menu entries (like "Reader mode", "Open in app"):

• design for bottom app bar
• design for top app bar

┆Issue is synchronized with this Jira Task

[topotropic]

this issue addresses some of the feedback around the blue dot notification #7408

[sv-ohorvath]

Items removed and reordered, verified as fixed on Beta 4.1. (the top nav bar itmes order in the mock-ups is to be updated by @topotropic)