1474757 - Meatball menu should fade in like the hamburger menu

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Brian Birtles (:birtles)]

I'm not entirely sure if we want this since I think we are careful not to add too much animation to DevTools. However, I notice that the hamburger menu fades in and the meatball menu does feel a little clunky at the moment so this might help.

Comment 1

[Mantaroh Yoshinaga[:mantaroh]]

As far as I can see, the Linux(GTK) will not animate the hamburger menu(For detail, see the bug 1352075 comment 35). And the macOS uses the -moz-window-*. So we need to add the same style into meatball and chevron menu.

I tried animating the popup menu on windows environment. (Simply, opacity and transform transition):
https://hg.mozilla.org/try/rev/ab2ddb67f5d4eee8b89956d783b1cfebaeda4267

It seems to works well on Windows, however, We will need to fix to some test.

Comment 2

[Mantaroh Yoshinaga[:mantaroh]]

Attachment: fade-animation-toolbox

I made the prototype for this bug[1][2]:
https://hg.mozilla.org/try/rev/639fae6cc6f1

This transition value is same to hamburger menu. (I.e., opacity and translateY)[3] I think that we can reduce the translateY transition. An attachment video is macOS behavior. 

Victoria, Birtles,
How do you feel about this transition?

[1] (macOS) https://queue.taskcluster.net/v1/task/cEkLkOLGRYmgSigXaHHMcw/runs/0/artifacts/public/build/target.dmg
[2] (Windows) https://queue.taskcluster.net/v1/task/O1ldBXzzQzCrjJ-J25UUEA/runs/0/artifacts/public/build/target.zip
[3] https://searchfox.org/mozilla-central/rev/a7f4d3ba4fbfe3efbde832869f1d672fce7122f6/toolkit/content/xul.css#383

Comment 3

[Brian Birtles (:birtles)]

Comment on attachment 9019590 [details]
fade-animation-toolbox

I'm going to leave this one to Victoria.

I tried it on Windows and it feels to me like the menu takes longer to appear with this change. I suspect that's because of the lazy-loading Gabriel has been adding. So if we decide we like the effect then I guess we should also work out how to pre-render the menu so the lag for it to show is reduced.

Comment 4

[Victoria Wang [:victoria]]

Comment on attachment 9019590 [details]
fade-animation-toolbox

Sorry for the delayed response to this! 

I gave this a try and it looks nice, but I realized it seems a split-second slower than the main Firefox menu animations - it would be awesome if we could match those.

Comment 5

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 3 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.