Opened 10 months ago

Closed 6 weeks ago

Last modified 5 weeks ago

#4743 closed change (fixed)

[UI] Redesign normal mode tab view

Reported by: mario Assignee:
Priority: P2 Milestone: Adblock-Browser-for-iOS-2.0.0
Module: Adblock-Browser-for-iOS Keywords:
Cc: Blocked By:
Blocking: #4706 Platform: Adblock Browser for iOS
Ready: yes Confidential: no
Tester: Unknown Verified working: yes
Review URL(s):

Description (last modified by 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

Assets

Mockups (as shown in description)

Attachments (5)

01a - Tabs (with tip)@2x (1).png (78.1 KB) - added by mario 10 months ago.
Adblock Browser Assets.zip (235.1 KB) - added by mario 10 months ago.
01a - Tabs (with tip)@2x (1).png​.png (77.9 KB) - added by mario 6 months ago.
01b - Tabs - Delete@2x.png (73.1 KB) - added by mario 6 months ago.
01c - Tabs - empty@2x.png (44.5 KB) - added by mario 6 months ago.

Download all attachments as: .zip

Change History (20)

Changed 10 months ago by mario

comment:1 Changed 10 months ago by mario

  • Description modified (diff)

comment:2 Changed 10 months ago by mario

  • Description modified (diff)

Changed 10 months ago by mario

comment:3 Changed 10 months ago by lisabielik

Swipe tabs left to close them.

comment:4 Changed 9 months ago by mario

  • Description modified (diff)
  • Ready set

Updated the description. Thanks!

comment:5 Changed 9 months ago by mario

  • Priority changed from Unknown to P2

Changed 6 months ago by mario

Changed 6 months ago by mario

Changed 6 months ago by mario

comment:6 Changed 6 months ago by mario

  • Description modified (diff)

comment:7 Changed 5 months ago by jand

  • Resolution set to fixed
  • Status changed from new to closed

comment:8 Changed 3 months ago by mario

  • Milestone set to Adblock-Browser-for-iOS-next

comment:9 Changed 2 months ago by tpregueiro

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

Last edited 2 months ago by tpregueiro (previous) (diff)

comment:10 Changed 2 months ago by jand

Problem 1 ... Fixed

Problem 2 ... Fixed

comment:11 Changed 2 months ago by jand

mario: Can you give access to the invisionapp link?

comment:12 Changed 8 weeks ago by jand

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:13 follow-up: Changed 7 weeks ago by traynard

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:14 in reply to: ↑ 13 Changed 6 weeks ago by mario

  • Resolution set to fixed
  • Status changed from reopened to closed

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

comment:15 Changed 5 weeks ago by traynard

  • Verified working set
Note: See TracTickets for help on using tickets.