1262154 - Create flexible URL Toolbar view that supports various button layouts

Status: RESOLVED WONTFIX

(Firefox for iOS :: Menu and Toolbar, defect)

Description

[Stephan Leroux [:sleroux]]

The current URL bar is pretty static and needs to expand to include different button layouts for home panels, landscape, and portrait:

https://mozilla.invisionapp.com/share/7Z647TWG4#/screens/134818298

This bug will follow updating the toolbar to be more flexible and support various button layouts.

Comment 1

[Stephan Leroux [:sleroux]]

Attachment: Link to Github pull-request: https://github.com/mozilla/firefox-ios/pull/1695

I've started to work on the updated URL bar and was looking to get some feedback on the best way of integrating the new one with the existing code (BVC, etc). Would love to have your thoughts on the WIP/approach so far!

Comment 2

[Emily Toop (:fluffyemily)]

Comment on attachment 8739447 [details] [review]
Link to Github pull-request: https://github.com/mozilla/firefox-ios/pull/1695

Feedback left in the PR

Comment 3

[Brian Nicholson (:bnicholson)]

Comment on attachment 8739447 [details] [review]
Link to Github pull-request: https://github.com/mozilla/firefox-ios/pull/1695

Looking good. Glad this is getting some love!

Comment 4

[Stephan Leroux [:sleroux]]

Hey Robin,

I have a couple of questions about the landscape version of the URL bar:

1. According to https://mozilla.invisionapp.com/share/7Z647TWG4#/screens/137668249, we have moved the panel buttons into the URL toolbar from the dedicated bar below. As I understand, this layout should appear when the user is on a new tab. What happens when a user starts to search? Before, the search screen would appear and cover the panel toolbar. Now that the panel buttons are in the toolbar the user can navigate to a panel mid-search. I'm not sure what this looks like w/r/t the navigation hierarchy.

2. Similarly, when tapping on the address field while browsing a page, we enter 'overlay' mode where the user sees the panels, the address field is ready for input, and a 'Cancel' button appears to the far right. Now that we are moving the panels into the URL bar, how does this work with the Cancel button? From this state we also encounter the issue above where a user can start searching and navigate to a panel mid search - with an added Cancel button.

3. For landscape on iPhone, do we want to use the panel URL bar layout instead of having the separate bar along the bottom?

Comment 5

[Robin Andersen [:tecgirl]]

(In reply to Stephan Leroux [:sleroux] from comment #4)
> Hey Robin,
> 
> I have a couple of questions about the landscape version of the URL bar:
> 
> 1. According to
> https://mozilla.invisionapp.com/share/7Z647TWG4#/screens/137668249, we have
> moved the panel buttons into the URL toolbar from the dedicated bar below.
> As I understand, this layout should appear when the user is on a new tab.
> What happens when a user starts to search? Before, the search screen would
> appear and cover the panel toolbar. Now that the panel buttons are in the
> toolbar the user can navigate to a panel mid-search. I'm not sure what this
> looks like w/r/t the navigation hierarchy.

This variation was an alternative, not the layout we're going with currently. We should be going with https://mozilla.invisionapp.com/share/7Z647TWG4#/screens/136660649

> 
> 2. Similarly, when tapping on the address field while browsing a page, we
> enter 'overlay' mode where the user sees the panels, the address field is
> ready for input, and a 'Cancel' button appears to the far right. Now that we
> are moving the panels into the URL bar, how does this work with the Cancel
> button? From this state we also encounter the issue above where a user can
> start searching and navigate to a panel mid search - with an added Cancel
> button.
> 
> 3. For landscape on iPhone, do we want to use the panel URL bar layout
> instead of having the separate bar along the bottom?

Yes, we're sticking with the original layout — the alt. layout doesn't bode well on the 4s.

Sorry for any confusion with this mock. What we have currently is good, just needs some polish!

Comment 6

[Stephan Leroux [:sleroux]]

:fluffyemily - By sticking with the original layout and just keeping the menu button, I think the work you did already to add the menu button negates the need for a flexible toolbar. Is there something else that's missing? Most of the work I've done on this has been a refactoring of the toolbar to fix animations and others issues but I can put that on the back burner for another time if we don't need it yet.

Comment 7

[Emily Toop (:fluffyemily)]

For now, yes. But ...

... one of the proposed changes for the home page is to replace the share button in the toolbar with the home button and move the share button to the menu for china only. I'm concerned that too many of these 'special cases' for the toolbars will result in a mess inside the toolbar code, especially as everything needs to be made in 2 places - once in the URLBar and once in the TabToolbar.

However, seeing as for now the home page will be in the Menu only, then we can return to the concept of a flexible toolbar at a later date if required.

Comment 8

[Stephan Leroux [:sleroux]]

Marking as WONTFIX for now as we have no plans to implement anything else in the toolbar.