1389051 - Improve length of URL bar and use of the space near it

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, enhancement, P3)

Description

[Ioana Chiorean]

Attachment: URL BAR.png

One of our users raised a good question on twitter - why we are using so many buttons and gray space near the URL Bar? it seems we cut from URL for it and that is not something desired. 

Opening this for discussion. Check the screenshots:
1. Old Fennec tablet 
2. Chrome tablet
3. Photon Fennec 
4. Photon Fennec tablet 
5. Focus tablet

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

This happens when users set the 'Display size' setting to small on modern Android phones.

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Thanks for filing this Ioana!

Looking into this with Carol

Comment 3

[Nevin Chen(Not active on Bugzilla)]

Hi Joe, Wesly
Please help me prioritize this. This looks like something we should fix asap.
Thanks!

Comment 4

[Joe Cheng [:jcheng] (please needinfo)]

we should fix it together with the PWA A2HS button. Can we target this for 58?

Comment 5

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I'm not sure what the "fix" here is yet Nevin. Have you chatted with Carol about it? I'd defer to her here and I've NI'd her.

I could be wrong but I think we need to first solve the UX part before we can prioritize this for Eng?

Joe, can you make sure this is on UX' radar? ;)

Comment 6

[Joe Cheng [:jcheng] (please needinfo)]

Mark is looking at PWA for Fenna now. NI Mark to think about this from UX perspective

Comment 7

[Mark Liang(:mark_liang)]

I have two proposals for multiple icons in the URL bar situation:
With more than two icons in the URL bar (not counting menu and tabs for mobile and not counting menu, tabs, bookmark and refresh for tablet), the icons collapse into a 'plus' icon.

For proposal 1, when users click the plus icon, the icons expand back to its position.
For proposal 2, when users click the plus icon, a panel expands with a list of icons inside.

Checkout the mockup here: (You can adjust the number of icons with the slider on the top)
https://codepen.io/youwenliang/full/gxybJv/

Any concerns with these types of implementation?

Comment 8

[Jan Henning [:JanH]]

I'm not sure about the "plus" icon - won't that possibly be mistaken for a button to open a new tab? Desktop uses a "three dot menu" button for it's page actions menu (https://dolske.files.wordpress.com/2017/07/pageactionprotoi.png) here. Other than that, it seems a nice idea, with a slight preference for the panel.

Comment 9

[Mark Liang(:mark_liang)]

(In reply to Jan Henning [:JanH] from comment #8)
> I'm not sure about the "plus" icon - won't that possibly be mistaken for a
> button to open a new tab? Desktop uses a "three dot menu" button for it's
> page actions menu
> (https://dolske.files.wordpress.com/2017/07/pageactionprotoi.png) here.
> Other than that, it seems a nice idea, with a slight preference for the
> panel.

Agreed, the plus icon is just a quick idea and definitely need more thoughts here.

Comment 10

[Mark Liang(:mark_liang)]

The three dots icon might be confusing since the menu icon on mobile is also three dots but align vertically.

Comment 11

[Wesly Huang (EPM)]

Like discussed this is something with PWA A2HS after 57.

(In reply to Nevin Chen [:nechen] from comment #3)
> Hi Joe, Wesly
> Please help me prioritize this. This looks like something we should fix asap.
> Thanks!

(In reply to Joe Cheng [:jcheng] (please needinfo) from comment #6)
> Mark is looking at PWA for Fenna now. NI Mark to think about this from UX
> perspective

Comment 12

[Andreas Bovens [:abovens]]

Now that the UI has changed, are these issues still valid? What is the latest here?

Comment 13

[Mark Liang(:mark_liang)]

Currently if there are over 2 icons in the address bar, a down arrow will display and users can click the arrow to see a panel with the page actions. 

See the links:
- https://www.dropbox.com/s/ze0xwrsha661fd6/Screenshot_20171127-183419.png?dl=0 (arrow)
(The highest priority icon won't be collapsed into the dropdown panel)
- https://www.dropbox.com/s/w3igie1pi5ruwyu/Screenshot_20171127-183423.png?dl=0 (expand)

I propose to keep the mechanism, but change the down arrow to this one from the photon design system website: https://www.dropbox.com/s/6fuwk5a2wwxq8d4/arrowhead-down-16.svg?dl=0.

Comment 14

[Andreas Bovens [:abovens]]

That looks good to me, Mark. The arrow's color should probably be #000, like the other icons.

Comment 15

[Mark Liang(:mark_liang)]

(In reply to Andreas Bovens [:abovens] from comment #14)
> That looks good to me, Mark. The arrow's color should probably be #000, like
> the other icons.

Yes, forgot to mention the color. It should be the same as other icons.

Comment 16

[Carol Huang [:Carol]]

Attachment: ic_dropdown_arrow.zip

Hi I'm providing the Arrow for the dropdown button.

Hello Nevin!
Could you help working on this? Thank you!

Comment 17

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

[triage] Bulk edit from title: this is a non-critical issue. Please remove priority if you wish this to be re-triaged.

Comment 18

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.