1066251 - Show progress indication in tab strip

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect)

Description

[Lucas Rocha (:lucasr)]

Let's find a super-lightweight approach for progress indication here. Spinners tend to cause pageload performance issues.

Comment 1

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

A few directions came to my mind for progress indication:

a. Use a throbber which replaces site favicon on the tab strip. When a background tab is loading, show the throbber, also display the URL instead of the title of the page till the site is loaded. 

b. Not using the throbber, display the URL of the site when it's loading.(Probably too subtle to be noticed)

c. Display a progress line for each tab. For foreground tab still keep the progress bar underneath the toolbar. For background tabs, show a underlined progress bar below the title and favicon. It'd be even more awesome if each progress bar reflects its site/domain color. (Inspired by Breach browser)

Also, while we are focusing on tab strip loading progress, we should also think about whether to show/How to show progress with thumbnails on tab panel.

Discuss ;)

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Yuan Wang(:Yuan) – Mobile Firefox Design Lead from comment #1)
> A few directions came to my mind for progress indication:
> 
> a. Use a throbber which replaces site favicon on the tab strip. When a
> background tab is loading, show the throbber, also display the URL instead
> of the title of the page till the site is loaded. 

My views on throbbers is well know, especially with the performance issues they create. I'd steer away from an animated throbber.

> b. Not using the throbber, display the URL of the site when it's
> loading.(Probably too subtle to be noticed)

It would be subtle. Maybe too subtle.

> c. Display a progress line for each tab. For foreground tab still keep the
> progress bar underneath the toolbar. For background tabs, show a underlined
> progress bar below the title and favicon. It'd be even more awesome if each
> progress bar reflects its site/domain color. (Inspired by Breach browser)

Drawing a progress line (or a progress symbol) would be a good first step. Keep animation out. Focus on something that looks good, but updates infrequently (~1 time a second, for example).

We should make sure that no CPU/Rendering cycles are used if the tab is not visible.

Comment 3

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

Attachment: working_3dots_vertwave3b.mov

I've been experimenting with something like this for Firefox Search to show "when stuffs happening". I know their are concerns with a throbber but I wanted to clarify if this constitutes a "throbber" per se (I'm guessing that it does...).

Just wanted to point out that the premise of these animations are to really create a level of personality that works well with our visuals. For instance, I've been looking at more humanistic metaphors and movements that make us feel more "whimsical". Simple animations that are less boring to look at might help perceived performance if not actual performance :S

Comment 4

[Lucas Rocha (:lucasr)]

Not happening in v1, moving to v2.

Comment 5

[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.