1369397 - Investigate adding an animation to the sidebar

Status: NEW

(Firefox :: Menus, enhancement, P3)

Description

[Aaron Benson]

Attachment: Sidebar Motion Curve Example.mov

Currently the sidebar *snaps* open and closed but we'd like to investigate making the sidebar open more smoothly by using the animation curve for Photon. You can see an actual example of this by installing Activity Stream and opening/closing the preferences panel (example recording attached). 

The CSS used for that transition is:

Opening Sidebar:
transition-duration: .2s;
transition-timing-function: cubic-bezier(.07, .95, 0, 1);

Closing Sidebar:
transition-duration: .1s;
transition-timing-function: cubic-bezier(0, 0, 0, 1)

Some more detail about the animation curve can be found here http://design.firefox.com/photon/motion/motion.html

Comment 1

[Aaron Benson]

Another prototype can be seen here: https://people-mozilla.org/~shorlander/projects/photon/Mockups/windows-10.html

Comment 2

[:Gijs (out until Jan 5th; he/him)]

This got triaged into our reserve backlog - Jared, do you have availability to look into this? I think fixing it "properly" is likely to be a bit tricky given that continuously reflowing the contents of the sidebar in the middle of the transition is likely to cause jank...

Comment 3

[Aaron Benson]

Added note: we also talked about it being ideal that content is pre-rendered before sliding in the sidebar. This would be especially good for when there's web content in the sidebar so we don't see any content resizing behavior within the sidebar frame itself.

Comment 4

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

The animation team doesn't have the bandwidth right now to pick this up. It would fall in to our P4 reserve backlog as well. I imagine the easiest way to do this would be to set the contents to display:none while transitioning, but show a ghost image as the contents during the transition so that it doesn't look like a blank slate while the transition is happening. Something like this http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html but without the animation on the background.

Comment 5

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

Attachment: Bug 1369397 - Animate the opening and closing of the sidebar.

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

Comment 6

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

Comment on attachment 8917141 [details]
Bug 1369397 - Animate the opening and closing of the sidebar.

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

Comment 7

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

All green on tryserver, https://treeherder.mozilla.org/#/jobs?repo=try&revision=1741b661f65f

Comment 8

[gwarser]

Why toolkit.cosmeticAnimations.enabled;false is not respected?

Comment 9

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

It is respected. What steps are you performing that you don't see it respected?

Comment 10

[gwarser]

Sorry, I was misled by example animation of preferences panel.

Comment 11

[Dão Gottwald [:dao]]

Comment on attachment 8917141 [details]
Bug 1369397 - Animate the opening and closing of the sidebar.

https://reviewboard.mozilla.org/r/188146/#review196416

With this patch applied, I don't see any animation whatsoever when opening the history or bookmarks sidebar. Am I missing something?

Comment 12

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

Comment on attachment 8917141 [details]
Bug 1369397 - Animate the opening and closing of the sidebar.

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

Comment 13

[Dão Gottwald [:dao]]

Comment on attachment 8917141 [details]
Bug 1369397 - Animate the opening and closing of the sidebar.

https://reviewboard.mozilla.org/r/188146/#review196740

I've tested this on Linux. I see the animation now but I don't think the UX is where we need it to be. The content area jitters before the animation starts and the animating area is just plain white throughout the animation which looks pretty weird.

Comment 14

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

Eric or Amy, would one of you be able to try out the build here and provide feedback and/or assets in how we can make the animating area more useful/interesting? Here's a link to the try build: https://queue.taskcluster.net/v1/task/LwHUMCKcT-yDzatWQ6YrEw/runs/0/artifacts/public/build/target.dmg

My idea is to put some placeholder graphic in while it is animating, something like a ghost image of blurred sidebar contents, like how some social networking sites will show grey boxes in the loading areas and the grey boxes will later get replaced with the actual content. Here's a link to a site that shows an example: http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

Comment 15

[Amy Lee [:amylee] UX]

Hi Jared,

Would the placeholder graphic load per section (i.e Bookmarks, History, Sync Tabs). Or does it only run when you first open the side panel?

Also I'm wondering if it's possible to have some sort of animation where the gear icon/new tab content moves over rather than jump into a new position when you open the side panel? It feels a bit abrupt.

Comment 16

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

The placeholder graphic would only run when the panel is first opening (sliding in). Switching between sections once it is opened wouldn't show the placeholder graphic. We have the opportunity to show a different placeholder depending on which section will open, but we should balance that opportunity with the added complexity it would bring with it.

Animating the tab content will be very janky since most pages have complex layouts that do not resize and layout fast. This is also why we have to hide the content while the sidebar is opening.

The result of the patch I have created here is that we still only have the same number of reflows/layouts that we had prior to the animation, but in turn we have to introduce a delay to showing the sidebar content.

Comment 17

[Amy Lee [:amylee] UX]

Is it possible to do a cross fade on webpages when you open the sidebar so it softens the jump?

https://cl.ly/0q2h3g1c130C

Comment 18

[Amy Lee [:amylee] UX]

Also you can see a white space (the width of the side bar) on the right side of the website when you open the side bar. It's more obvious on websites with a colour background but overall it looks janky

Comment 19

[Amy Lee [:amylee] UX]

I've attached a spec for the skeleton screen for the side bar. Also can you investigate comment 17/18 and let me know if this is an option? Thanks!

Let me know if you nee anything else. 

Spec:
https://mozilla.invisionapp.com/share/CKE7LG63D

Comment 20

[Amy Lee [:amylee] UX]

Also just wanted to add that we should be using a skeleton screen as a last resort only if we can can't improve on the load speed. Can we investigate on improving the load time if it hasn't been done already?

Comment 21

[Aaron Benson]

Attachment: safari-sidebar-crossfade2.m4v

Hey all, I wanted to jump in here and provide some input, too. I spoke with Amy and the feeling I think we're aiming for here is that the web surface narrows to reveal the sidebar as though it were sitting beneath the web surface all along. Safari pulls this off rather well and, as Amy mentioned, even does a crossfade of the two sizes of the web page in order to smooth out the transition. 

I think we should limit the use of a skeleton page unless absolutely necessary and I wonder if there's something that can be done to load the sidebar content in a different order so that it just appears. Like magic.

Comment 22

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

I'm not sure it will be possible to do this animation without the white flash at the right side of the browser (when sidebar is on the left and the browser is in LTR).

The white flash comes from using position:fixed on the sidebar and thus #appcontent shifts over. The white flash is the background behind #appcontent. With the dark theme the area is painted black.

We could not rely on position:fixed and thus not animate the sidebar on top of the content. To continue this route we would apply the same `translate` on #appcontent, and combine it with a `margin-inline-end` of equal amount so as to stretch #appcontent to the full width of the window. We would then either need to run concurrent transitions on the `transform` and `margin-right`/`margin-left` or we would end up with a snap at the end if we decide to skip transitioning the margin property.

In addition, transitioning the margin cannot be run on the compositor and can introduce expensive reflows to content.

I cannot find another solution to fix this bug other than the one that I had started with, but it seems the "fix" is worse than the "bug". Just to make sure, I have also tested this patch with webrender enabled and didn't see any performance difference.

Comment 23

[Florian Quèze [:florian]]

I think the way to implement the transition in the video from comment 21 would be something like:
- before we start animating, capture a screenshot of the current content with a canvas
- set the opacity of the content <browser> tag to 0, and display the screenshot instead. We can then move that screenshot around while animating the resize of the sidebar.
- set the width of the content <browser> to the final one immediately.
- once we have received a MozAfterPaint event from the content browser, transition the opacity of the screenshot to 0, and of the browser to 1.

Comment 24

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

(In reply to Florian Quèze [:florian] [:flo] from comment #23)

Yes, you are right. I think a screenshot is the only way forward without hurting performance, assuming the potentially fullscreen screenshot will not be too slow.

Comment 26

[MarjaE]

I don't use the sidebar, but animation can trigger my migraines, and the smoother, and more painful, the more likely it is to trigger my migraines.