[UI] Redesign ghost 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 ghost mode tab view is - as opposed to the normal mode - opened while tapping the tabs icon in the bottom bar while browsing in ghost mode.

What to change

Apply the new design to ABB's ghost mode tab view 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 ghost 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

Assets

• Tab View Assets

Mockups (as shown in description)

• Tab View

[lisabielik]

Swipe tabs left to close them.

[mario]

Updated the description. Thanks!

[tpregueiro]

UX Problem:
Once you start using the app often the confirmation dialog every time you try to close the Ghost mode becomes rather annoying. The risk of the user leaving the ghost mode and closing all the tabs is minimal, since by the nature of what the ghost mode is in itself, so we shouldn’t have to confirm every single time.

Proposed new behavior:
Only show that confirmation dialog the very first time the user leaves the ghost mode. After that never show that dialog again.