1355588 - Prototype new tab opening/closing animations

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement, P4)

Description

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

Attachment: Tab - New.mp4

See attached video for what this should look like.

Comment 1

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

Attachment: Tab - New (between tabs).mp4

Comment 2

[Eric Pang [:epang] UX]

Note: the motions use the photon motion curve

Comment 3

[Eric Pang [:epang] UX]

Attachment: Tab - New (open link between tabs).mp4

Comment 4

[Eric Pang [:epang] UX]

Attachment: New Tab motions

I've attached new updated versions of the new tab animations.

Folder includes motions for...

1. Tab New (1+ position away from current tab) 
2. Tab New (Next to current tab)
3. Tab New in Between Tabs (Background)
4. Tab New in Between Tabs

I also included slow motion versions of each to make the subtle details easier to catch.

Once we have someone working on these I can give a detailed walk-through of what's happening in each.

Comment 5

[Eric Pang [:epang] UX]

Comment on attachment 8943370 [details]
New Tab motions

Marking as obsolete since these are outdated.  Please refer to individual bugs for updated motions.

Comment 6

[Eric Pang [:epang] UX]

Comment on attachment 8943370 [details]
New Tab motions

sorry this is the most up to date file. Meant to mark a different bug's video as obsolete :)

Comment 7

[:Felipe Gomes (needinfo for replies!)]

I'm working on the sliding sideways effects, but I wanted to post an earlier version of the animation I had that is a simpler version of the sliding up/down from one of the specs (the "new tab 1 position away").

This build also has the same animation in reverse for the closing effect, which afaict wasn't part of any spec. But I really like how it feels to use so I wanted to let people try it.

(it still has some problem when there's enough tabs to occupy the entire tab bar but not enough to overflow)

https://tools.taskcluster.net/index/gecko.v2.try.revision.b499eb07ef71157611856b3ab277172af8d5e6de.firefox

Comment 8

[:Felipe Gomes (needinfo for replies!)]

So here's a summary of where things are. I've been testing a number of approaches and going with the ones that look more promising.


For the tab opening animation, I removed the width transition such that the new tab is added immediately with its correct width in the tab strip.  Then, I translate it* and all the posterior tabs by -100%, and animate that with a transition to 0%.

* actually, for the tab being opened, I only translate the .tab-background. All other tabs are fully translated


A) This seems to work well, but the problem is that this is not a reversible animation that can be used for tab closing. The main reason is that on tab closing, the selected tab goes to the tab + 1, not the tab - 1 (except if it's at the end of the tab strip), so the animation needs to be different.

Some other problems:

B) when closing, the tab background that we'd need to animate is not the one of the tab being closed, but actually the one of the tab getting selected. This is easily doable, but paired with issue A, it seems this will lead in a path of a lot more attributes and selectors to get things right.

C) the new tab button is something that I haven't figured out yet. The problem with it is that it animates together with the tabs that are sliding, but it has a different width than the tabs, so we can't use the 100% translation on it, because that's relative to its own width.

(Although right now I'm just instantly moving the new tab button and the difference feels very hard to notice.. I'll post videos for all to see)

Another thing with the new tab button, is that in one case of the opening tab spec, we can clearly see one button fading in at the new position while another one is fading out, so it would need two buttons to implement it


I even thought about having making the tab background independent instead of being part of each tab. This would probably make the opening/close animations easier, but would cause other difficulties elsewhere (e.g, scrolling the tab strip, and multi-selected tabs), and would need some solution to keep its own width in sync with the tabs' width, so I didn't attempt to go in that direction

Comment 9

[:Felipe Gomes (needinfo for replies!)]

I'll post some videos to get a feel for the animations in their current state. I'm first focusing on getting the logistics of the animations themselves right (as detailed in comment 8) before diving into how to specify all animations cases at the same time.

Comment 10

[:Felipe Gomes (needinfo for replies!)]

Attachment: wip - sliding open/close at end of tab strip.mov

Comment 11

[:Felipe Gomes (needinfo for replies!)]

Attachment: wip - sliding open/close at the end of tab strip (slow motion).mov

Comment 12

[:Felipe Gomes (needinfo for replies!)]

Attachment: wip - popping up/down

I also wanted to post the popping up/down animation. This is in the spec as the "new tab 1 position away from the current tab", but I like how it looks in general, so I wanted to post it here for reference. This is what I had in the try build posted earlier, but with more glitches fixed.

Comment 13

[:Felipe Gomes (needinfo for replies!)]

Attachment: Bug 1355588 - Implement slide-up/down tab opening/closing animation. r=dao

This patch implements a new, preffed-off tab opening/closing animation where the tab slides up and down in place. In addition, it adjusts some tests and code that were relying on the max-width transitionend event happening. The intent of the patch is to land it preffed-off and iterate on the design in the tree

Comment 14

[:Felipe Gomes (needinfo for replies!)]

Updating the title to reflect that this is just the beginning of this work (and not the final animations), and to reflect the fact that the closing animations are also included here (so that I can dupe bug 135559 to this one)

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5c6cdeb8648d
Implement slide-up/down tab opening/closing animation. r=dao

Comment 17

[Cosmin Sabou [:CosminS]]

Backed out causing talos tart timeouts.

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&searchStr=talos&group_state=expanded&revision=5c6cdeb8648d342ef53db0e954189049cc640532&selectedJob=223562344

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=223562344&repo=autoland&lineNumber=1247

Backout link: https://hg.mozilla.org/integration/autoland/rev/f714be52592b9901a11d2b97a6cb17e5e2ad142e

Comment 18

[Cosmin Sabou [:CosminS]]

Please also take a look over these TV failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&revision=5c6cdeb8648d342ef53db0e954189049cc640532&searchStr=tv&selectedJob=223567295

https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=223567295&repo=autoland&lineNumber=19443

Comment 19

[:Felipe Gomes (needinfo for replies!)]

There was a problem on the TART test in which it's not receiving the new TabAnimationEnd event for some reason. Since this would only matter after we enable the new animations by default, and at that point we'll need to re-evaluate the test anyways (bug 1522198), I just reverted the TART code to continue listening for the transitionend event (i.e., no changes were made to that test after all).

I also re-ran all tests with the patch queue and triggered several test-verify runs, and it seems ok:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=da8946c0c43e1a4374657a890dca2ee41f8b6e9a

I added the pref (defaulting to false) to firefox.js to make it easier to toggle, and I'll reland it.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2827b5f1530b
Implement slide-up/down tab opening/closing animation. r=dao

Comment 21

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/2827b5f1530b

Comment 22

[Maria Berlinger [:mberlinger], Services QA]

Hello,

I've compared an affected Firefox 67.0a1 (2019-02-01) and a fixed one 68.0a1 (latest nightly) but I don't see any difference.
Could you please help me with some extra info?
What's the actual implementation or what's the difference between builds?
It's the same animation for all the scenarios?

Comment 23

[Dão Gottwald [:dao]]

This was 1) pref'd off by default and 2) backed out in bug 1539255.