[UI] Redesign history screen

[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 history as shown in this mockup and this ​guide

Transitions

• When the history screen is opened, slide it in from the right using iOS' default transition.

Logic

• If the history screen is shown as shown in this mockup:
  • Mark the back icon in the bottom bar inactive
  • Mark the forward icon in the bottom bar inactive
  • Mark the tabs 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

Copy

• Headline: Recent History

Attachments

Style Guides

• ​General Style Guide
• ​History Style Guide

Assets

• Bookmark Assets

Mockups (as shown in description)

• History

[lisabielik]

lgtm

[jand]

During the implementation I encounter those problematic points:

1. Back button: There is a back button in history view which is named Recent History. That design is inconsistent with iOS guidelines and the rest of the application, since usually title of the back button refers to title of the previous screen. I am suggesting to set the screen title to Recent History and leave title of the back button as it is (Back).
2. No History Available text: There is a label, which is displayed, when there are no items in history list. This issue does not mention that label. Should I preserve that label or should I remove it?

[traynard]

1. When viewing the history window, if you attempt to open any page in the browser history, the history window closes and the user remains on the same page. Link from history does not open.

Steps to Reproduce:
-Click hamburger menu
-Click history
-Tap to open a past website

[traynard]

When clicking on a website in history, the page properly opens as expected. However, for a moment the colon (:), forward slash (/), hyphen (-), period (.) and .com buttons flash before the page is loaded.

Video Example (file too large to attach):
​https://drive.google.com/a/adblockplus.org/file/d/0B7fTL_3kBY9LM0ZDZXdfckhyczQ/view?usp=sharing

[jand]

I was unable to reproduce this issue. Does it happen on the TestObjects? Which device? Which iOS version have you been using?

[mario]

@jand, It not only happens on TestObject but on real devices as well. In my case, it's an iPhone 6, iOS 10.3.2.
As soon as you tap an entry in the history, there appears to be a glitch with the keyboard and the top row of the keyboard is visible for a second. In the video, it can be hard to catch. Look at the bottom third of the screen when a history item is tapped.

[traynard]

When attempting to delete the history, it does not clear until user backs out.

Steps to Replicate:
*Ensure a history exists in ABB. Navigate to a few sites if not*

• Click Hamburger Menu
• Tap "History"
• Tap "Delete"
• Tap "Clear" on confirmation popup

Current Results:
History remains visible to user. It looks like the history was not cleared

Expected Results:
History should clear immediately after action is completed.

Note: If you tap "Back" after deleting history and navigate back to the history, it will be cleared as expected. However, to users it will look like the history is never deleted.