1381957 - Speed up the stop/reload animation

Status: RESOLVED FIXED

(Firefox :: General, enhancement, P1)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Per bug 1379480 comment 7,

> Thanks for all the feedback everyone.  It's really helpful.  We're trying to find a balance that makes the browser feel more 
> refined without being distracting.
> 
> I've decreased the duration of the animation since it was feeling slow on implementation - the svg sprite is attached.
> 
> It would be great if we can skip the animation altogether if the page loads quickly.  But say we set a threshold to 150ms and the 
> page ends up loading at 200ms - we'll have a similar problem here.
> 
> Can we we try delaying the motion by 150ms and skip if the site has loaded? If the site takes longer to load but is under 2s we 
> should play the in animation but skip the out animation. While sites that take over 2s to load get both the in and out? This 
> should give a large enough of a pause in between motions since when they connect the motion feels broken and very distracting.
> 
> But as Harald mentioned we'll have to test this out and will most likely tweak until we have the right balance.
> 
> Also, once the page loads the out animation should only play once and not for subsequent loads of the site. The flickering of 
> subsequent loads feels really glitchy.

SVGs + JSON attachment: https://bugzilla.mozilla.org/attachment.cgi?id=8884986

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1381957 - Speed up the stop/reload animations based on user feedback.

Review commit: https://reviewboard.mozilla.org/r/158656/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/158656/

Comment 2

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 8887742 [details]
Bug 1381957 - Speed up the stop/reload animations based on user feedback.

https://reviewboard.mozilla.org/r/158656/#review164346

Looks good, works for me.

::: browser/themes/shared/icons/reload-to-stop.svg:8
(Diff revision 1)
> -      </clipPath>
> -      <mask id="e" mask-type="alpha">
> -        <path fill="#0005FF" d="M0-2.906A2.907 2.907 0 0 1 2.906 0 2.907 2.907 0 0 1 0 2.906 2.907 2.907 0 0 1-2.906 0 2.907 2.907 0 0 1 0-2.906z" transform="translate(1.27 18.622) scale(7.36622)"/>
> -      </mask>
>        <mask id="d" mask-type="alpha">
> -        <path fill="#0005FF" d="M0-2.906A2.907 2.907 0 0 1 2.906 0 2.907 2.907 0 0 1 0 2.906 2.907 2.907 0 0 1-2.906 0 2.907 2.907 0 0 1 0-2.906z" transform="translate(1.151 1.705) scale(7.47609)"/>
> +        <path fill-opacity="1" d="M0 -2.906A2.907 2.907 0 0 1 2.906 0 2.907 2.907 0 0 1 0 2.906 2.907 2.907 0 0 1 -2.906 0 2.907 2.907 0 0 1 0 -2.906z" opacity="1" transform="translate(1.27 18.622) scale(7.36624)"/>

Nit: I believe fill-opacity and opacity default to "1" so we could remove these attributes

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8887742 [details]
Bug 1381957 - Speed up the stop/reload animations based on user feedback.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/158656/diff/1-2/

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f2209f0b5722
Speed up the stop/reload animations based on user feedback. r=sfoster

Comment 5

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/f2209f0b5722

Comment 6

[Joel Maher ( :jmaher ) (UTC -8)]

there are some talos improvements from this bug!

== Change summary for alert #8129 (as of July 20 2017 12:06 UTC) ==

Improvements:

 16%  cart summary linux64 pgo e10s     9.17 -> 7.71
 13%  cart summary linux64 opt e10s     9.94 -> 8.63
  9%  cart summary windows10-64 opt e10s10.33 -> 9.38
  8%  cart summary windows10-64 pgo e10s8.54 -> 7.89
  5%  tart summary linux64 opt e10s     5.48 -> 5.23
  5%  tart summary linux64 pgo e10s     4.81 -> 4.59

For up to date results, see: https://treeherder.mozilla.org/perf.html#/alerts?id=8129