[UI] Redesign normal mode tab view

[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.

The normal mode tab view is - as opposed to the ghost mode - opened while tapping the tabs icon in the bottom bar while browsing in normal mode.

What to change

Apply the new design to ABB's normal mode tab view as shown in this mockup and this ​guide
Apply the new design to ABB's normal mode tab view edit mode as shown in this mockup and this ​guide

UI

• Add a "tip" icon + label at the bottom of the tab list as shown in this mockup

Transitions

• When the normal mode tab view is opened, slide it in from the bottom using iOS' default transition.

Logic

• If the history screen is shown:
  • Mark the back icon in the bottom bar inactive
  • Mark the forward icon in the bottom bar inactive
  • Mark the ghost mode icon in the bottom bar inactive
  • Mark the bookmark icon in the bottom bar inactive
  • Mark the tabs icon in the bottom bar active and highlight it as shown in this mockup
• New tabs are added to the top of the tab list

Copy

• Tip: Swipe tabs left to close them.

Attachments

Style Guides

• ​General Style Guide
• ​Tab View Style Guide
• ​Tab View Edit Style Guide

Assets

• Tab View Assets

Mockups (as shown in description)

• Tab View
• Tab View Edit
• Tab View Empty

[lisabielik]

Swipe tabs left to close them.

[mario]

Updated the description. Thanks!

[tpregueiro]

Problem 1

When clicking New Tab, a new tab is added to the tabs list but the user isn’t taken to the new tab itself. This creates another problem: after hitting the New Tab button, all other UI elements are disabled, for example, the bookmarks button, the ghost button, etc. Only once you either go to the new tab page or click the tabs icon, will the rest of the UI become available again.
Proposed solution: When the user taps on the new tab icon, take the user to the new tab page.

Problem 2

When the Tabs page is open, I can still use the search / address box, change the search query or URI and update the page underneath without leaving the Tabs listing page.
Proposed solution: the moment the user taps on the search/URI input box or anywhere else on the top bar, we should close the Tabs overlay/page.

Problem 3

There is no easy way to edit the New Tab icons. The only way to add something to the dashboard is by going to the bookmark section, tapping edit, and then tapping on a given bookmark.
Proposed solution (it's really two things, one design change and one copy change)
Add an extra icon icon to each bookmark row on the Bookmarks view when on edit mode, so that users know they can tap on a bookmark to edit it. ​https://eyeogmbh.invisionapp.com/d/main#/console/9140728/209920135/inspect
Adapt the existing tip on the New Tab page, to also inform users where they can go to add more icons to the New Tab page.

[jand]

Problem 1 ... Fixed

Problem 2 ... Fixed

[jand]

mario: Can you give access to the invisionapp link?

[traynard]

When switching between tabs (3+), previous tabs reload when navigated back to which snaps back to the top of the page, causing the user to lose their spot on the page they were viewing.

Steps to Replicate:

• Navigate to arstechnica.com
• Scroll down on the homepage (say, 3 articles down)
• In a new tab, navigate to another site - kotaku.com
• Scroll down on the homepage (say, 3 articles down)
• In a new tab, navigate to a third site - rockpapershotgun.com
• Scroll down on the homepage (say, 3 articles down)
• Open up the tabs view and tap on the arstechnica.com tab to re-visit the page and continue reading.

Current Results:
When re-openening the first tab (in this case, arstechnica.com) the page reloads and user is put back to the top of the page. This causes them to lose their place while reading and surfing.

Expected Results:
User should be brought back to arstechnica.com in the same place they left off so they can continue reading without having to find where they left off each time they navigate away.

NOTE: This occurs when opening links within articles in new tabs as well.

[mario]

Replying to traynard:

When switching between tabs (3+), previous tabs reload when navigated back to which snaps back to the top of the page, causing the user to lose their spot on the page they were viewing.

Steps to Replicate:

• Navigate to arstechnica.com
• Scroll down on the homepage (say, 3 articles down)
• In a new tab, navigate to another site - kotaku.com
• Scroll down on the homepage (say, 3 articles down)
• In a new tab, navigate to a third site - rockpapershotgun.com
• Scroll down on the homepage (say, 3 articles down)
• Open up the tabs view and tap on the arstechnica.com tab to re-visit the page and continue reading.

Current Results:
When re-openening the first tab (in this case, arstechnica.com) the page reloads and user is put back to the top of the page. This causes them to lose their place while reading and surfing.

Expected Results:
User should be brought back to arstechnica.com in the same place they left off so they can continue reading without having to find where they left off each time they navigate away.

NOTE: This occurs when opening links within articles in new tabs as well.

We'll potentially need to remove this fix from the scope of 2.0.0.
We're aiming to release 2.0.1 right after that.
For this, I'm closing this issue and separated the bug into a different issue: #5671