[UI] Redesign top bar

[mario]

Background

This issue is part of ABB's redesign as described under #4706.
Logic/UI which is not covered within this issue stays in place as it is.

What to change

Apply the new design to ABB's top bar as shown in this mockup and this ​style guide

UI

• Add bookmark symbol to the left of the URL bar as shown in this mockup
  • If the visited website is bookmarked, display the bookmark symbol in an active state as shown in this mockup
  • If the visited website is not bookmarked, display the bookmark symbol in an inactive state as shown in this mockup
• Add a "burger menu icon" to the right of the URL bar as shown in this mockup
• Add a "burger menu" which is triggered by the "burger menu icon" as shown in this mockup
  • Add the icons as shown under Copy to the burger menu
  • Add a toggle to item 1 as shown in this mockup

Logic

• If a website is displayed, show all top bar elements as active as shown in this mockup
• If the dashboard is displayed, hide the following elements in the top bar as shown in this mockup
  • Bookmark icon
  • Refresh icon
• If the dashboard is displayed, mark the following elements in the burger menu as inactive as shown in this mockup
  • Block Ads on this Site
  • Add Bookmark
  • Remove Bookmark
  • Share
• If the burger menu icon is tapped, display the burger menu as shown in this mockup
  • Mark all bottom bar icons as inactive
  • If "Block Ads on this Site" is tapped while inactive
    • Display the trigger next to the element as active
    • Remove the visited website from the whitelist
  • If the "Block Ads on this Site" is tapped while active
    • Display the trigger next to the element as inactive
    • Whitelist the visited website
  • If "Open a new tab" is tapped, open a new, empty tab as shown in (follow up at #4739)
  • If "Add Bookmark" is tapped, ad the currently opened website to the bookmarks
  • If "Remove Bookmark" is tapped, remove the currently opened website from the bookmarks
  • If "Share" is tapped, open iOS' default share dialog
  • If "History" is tapped, open the history (follow up at #4742)
  • If "Settings" is tapped, open ABB's settings

Copy

Burger Menu

• Item 1: Block Ads on this Site
• Item 2: Open New Tab
• Item 3 inactive: Add Bookmark
• Item 3 active: Remove Bookmark
• Item 4: Share
• Item 5: History
• Item 6: Settings

Attachments

Style Guides

• ​General Style Guide
• ​Top Bar Style Guide

Assets

• Top Bar Assets

Mockups (as shown in description)

• Top Bar with Website
• Top Bar while Editing URL
• Top Bar with Bookmarked Website
• Top Bar without Bookmarked Website
• Top Bar with Dashboard
• Top Bar Menu
• Top Bar Menu without Blocking
• Top Bar Menu with Bookmark

[lisabielik]

Block Ads on this Site

[mario]

Updated the description with the new string. Thanks!

[traynard]

Few Top Nav issues:

1. When opening a new tab using the hamburger menu, if you attempt to navigate to any site, the page will load blank until you switch tabs and return.

Steps to Reproduce:
-Click hamburger menu
-Click Open new tab
-In newly opened tab, navigate to www.adblockplus.org
notice page is blank
-switch to another open tab
-switch back to adblockplus.org tab
notice page is now showing the site as expected

---

2. The bookmark star shown in the address bar does not bookmark the site when tapped. This could be confusing for the user as generally seeing a star icon on the browser while surfing websites should allow the user to tap it to quickly bookmark. In the old version of ABB, this star existed on the bottom bar. With ABB 2.0.0, there is a star in the address bar that is nothing but an idicator (when tapped, the address bar field activates) and a star at the bottom which opens the bookmarks window, so there is no longer a way to easily do this without expanding the menu each time. We should allow users to tap the star in the address bar to bookmark the page they are surfing.

[traynard]

Additional issue found:
When viewing landscape on an iPhone 5 or smaller, the hamburger menu is cut off. Since the menu does not allow for scrolling, users are blocked off from utilizing certain options.

See attached image for iPhone 5 example (Settings option is cut-off)

[traynard]

iPhone5-Landscape