1211201 - Accessing the URL bar can take more scrolling than expected

Status: RESOLVED FIXED

(Firefox for iOS :: Theme & Visual Design, defect, P1)

Description

[Eric Shepherd [:sheppy]]

I've noticed on both iPhone 6 and iPad Air 2 that getting the URL bar to show up sometimes seems to take a very small scrolling up action but other times it is much longer (like 3-4 times farther). This is sort of confusing and annoying when it happens.

I haven't had much luck isolating any specific scenarios in which it happens, but it's around half the time for me.

Comment 1

[Stephan Leroux [:sleroux]]

Hey Eric,

I tried to emulate the behavior that Safari has where if you're dragging the page downwards (scrolling back up), the URL Bar doesn't animate in. When you 'fling' or have any acceleration, the URL bar will animate. One of the reasons I tried this was to prevent the URL bar from always animating back in when you're slowing dragging the page up or down. I found that with the animation happening on every movement the URL bar seemed really 'jumpy'. Do you have any suggestions as to how we can more easily show the URL bar without having to show it every time the page is scrolled? I also find it a bit cumbersome to get the URL bar back.

Comment 2

[Nathanael Alcock]

Safari handles this by never fully obscuring the URL bar (it minimised to a maybe 20px or so navigation bar at the top, that can be tapped on to bring the full bar). Perhaps this would be a useful behaviour to implement?

Comment 3

[Eric Shepherd [:sheppy]]

(In reply to Nathanael Alcock from comment #2)
> Safari handles this by never fully obscuring the URL bar (it minimised to a
> maybe 20px or so navigation bar at the top, that can be tapped on to bring
> the full bar). Perhaps this would be a useful behaviour to implement?

That would be one option. Really, any way to more quickly access the URL bar. Some kind of gesture or special tap would even be okay. But having the URL bar shrink down to a strip across the top, maybe even one that shows the page title in a small font, would be a decent way to go.

Comment 4

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Related to this, and should probably be a separate bug: with a hardware keyboard attached, pressing Command-L to focus on the location bar currently does not show the URL bar.

Comment 5

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1286983

Comment 6

[Eric Shepherd [:sheppy]]

(In reply to Stefan Arentz [:st3fan] from comment #4)
> Related to this, and should probably be a separate bug: with a hardware
> keyboard attached, pressing Command-L to focus on the location bar currently
> does not show the URL bar.

I was about to ask if Cmd-K opened the search box, but then I remembered that we have a unified URL/search box on iOS. Maybe have Cmd-K focus the URL bar, too, then?

Along similar lines, what keyboard shortcut integrations do we already have? Cmd-F for in-page find? Etc.

Comment 7

[Nathanael Alcock]

I've just realised that you can actually tap the top of the page, when the search bar is hidden, to show it. But I imagine most users don't even realise this exists — having the region that was already tappable be visible in some way would be much better.


(In reply to Eric Shepherd [:sheppy] from comment #6)
> (In reply to Stefan Arentz [:st3fan] from comment #4)
> > Related to this, and should probably be a separate bug: with a hardware
> > keyboard attached, pressing Command-L to focus on the location bar currently
> > does not show the URL bar.
> 
> I was about to ask if Cmd-K opened the search box, but then I remembered
> that we have a unified URL/search box on iOS. Maybe have Cmd-K focus the URL
> bar, too, then?
> 
> Along similar lines, what keyboard shortcut integrations do we already have?
> Cmd-F for in-page find? Etc.

We already have a number of keyboard shortcuts. You can see all of the ones currently here: https://github.com/mozilla/firefox-ios/blob/9953d6578396a35dcaa3fb48cee119f17169f5e6/Client/Frontend/Browser/BrowserViewController.swift#L1256-L1285
(Though there's an open PR to add even more.)

Comment 8

[Nathanael Alcock]

Attachment: Pull request

I've made the touch target that shows the URL bar actually visible now, which I think helps a lot. The UI could perhaps be improved further, but I think it's probably worth having even a basic bar like this over the current solution.

Comment 9

[Nathanael Alcock]

Attachment: Simulator Screen Shot 15 июля 2016 г., 11.27.50.png

An example for a Wikipedia page. The text simply uses the document's title (with a URL fallback).

Comment 10

[Eric Shepherd [:sheppy]]

(In reply to Nathanael Alcock from comment #9)
> Created attachment 8771491 [details]
> Simulator Screen Shot 15 июля 2016 г., 11.27.50.png
> 
> An example for a Wikipedia page. The text simply uses the document's title
> (with a URL fallback).

That's a nice start indeed! Perhaps have the top-right corner let you open the tab panel like usual (on iPhone). 

About the only other thought that comes into my head, and it's a little possibly crazy thought, is it might be interesting to have a sort of minimized, dimmed version of the usual controls from the URL bar across that space. Maybe they don't even work (hence the "dimmed") but it would help people understand what that bar is there for.

Comment 11

[Stephan Leroux [:sleroux]]

Comment on attachment 8771490 [details] [review]
Pull request

Mostly minor nits and the subclass thing.

I'm not really a fan of the transition between URL Bar -> minified view though. It seems disjoint from the actual URL Bar and might be confused as a fixed header from the web page since that transition isn't there. I think Safari nailed the transition between the two states since it's clear to the user that the URL bar `becomes` minified but I don't really want to straight up copy from Safari.

Comment 12

[Nathanael Alcock]

Ah, yes, I can see what you mean. I'll give it a little more thought — something like the text from the URL bar sliding down, and becoming the minified view might work, though it could also look a bit strange. Maybe it'd most effectively to play around with a couple of different effects to see what works best.

Comment 13

[Robin Andersen [:tecgirl]]

Comment on attachment 8771490 [details] [review]
Pull request

LGTM! I dig it. Though sites with sticky headers seem to get cut off; see this example from Wired: http://c.tecgirl.com/gkRN

Comment 14

[Nathanael Alcock]

Attachment: Pull request

Due to the concerns both about floating headers, and the separation of the two URL bars, I've changed the approach slightly — there's now a transition between the two bars.

Comment 15

[Nathanael Alcock]

Attachment: Simulator Screen Shot 24 авг. 2016 г., 13.01.00.png

Comment 16

[Stephan Leroux [:sleroux]]

Comment on attachment 8784508 [details] [review]
Pull request

Looks great! Thanks for all the work on this feature.

Comment 17

[Robin Andersen [:tecgirl]]

Comment on attachment 8784508 [details] [review]
Pull request

Looks great!

Comment 18

[Stephan Leroux [:sleroux]]

master https://github.com/mozilla/firefox-ios/commit/e741a3f19c4ca3a774dea1510d21c7ee5f8db57a