978588 - [Notifications] Animating the utility-tray smoothness depends on the number of notifications

Status: RESOLVED DUPLICATE of bug 1178162

(Firefox OS Graveyard :: Gaia::System, defect, P2)

Description

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

With a few notifications, trying to drag the utility tray (the bar at the top of the screen) is smooth and easy.

As soon you have a few notifications it starts to become slower and slower. Looking at a profile (http://people.mozilla.org/~bgirard/cleopatra/#report=8dfa4fd85c2e9543dadbf3fdd522e955345fb9fb) it seems like we are spending our time into CSS::ProcessRestyle.

Since we are promoting notifications with a brand new shiny API I suggest that we block on that for 1.4.

The notifications are contained basically in a div with overflow-y: scroll.
Each time the finger is moved on the screen |div.style.transform = 'translateY(' + y + 'px)| is updated. The idea is to have the utility tray following the finger.

Asking dbaron is there any 'magic' way of avoiding the CSS::ProcessRestyle in this case.

In the worst case we will have to do some Gaia tricks to not really move the notifications <div> on the screen, but instead a -moz-element view of it.

Comment 1

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Forgot to CC'ed dbaron.

Comment 2

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: poc.bug978588.patch

I tried to use -moz-element in order to see if it helps. With 250 notifications it makes pan as smooth as the regular pan.

There is still a jank when the utility-tray is already opened and the user start to pan from the bottom to close the tray, but there is no jank when opening the tray.


The close-from-bottom jank probably comes from the change in the z-index order and toggling the visibility of the element that contains the background: -moz-element rule.

I think it's hard to get rid of all the jank but maybe it can be minimized a little bit.


Asking feedback to gerard-majax as I looking forward for someone to turn the POC into a real patch if there is no platform magic to do.

Needinfo gwagner just in case gerard-majax has something else to do (which is likely) but Gregor has someone handy.

Comment 3

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

The jank should likely be cheaper once I reland bug 971006 as well.

Comment 4

[:gerard-majax]

Vivien, what's the status of this patch regarding the notification tray rework being done ?

Comment 5

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Alexandre LISSY :gerard-majax from comment #4)
> Vivien, what's the status of this patch regarding the notification tray
> rework being done ?

That does not change anything. The expensive parts are mostly on the platform side and re-working / re-factoring the code on our side will not change this as long there is a big DOM.

Comment 6

[Gregor Wagner [:gwagner]]

Mike can take a look from the front-end side (after 1.4 blockers :)

Comment 7

[Michael Henretty [:mikehenrty][:mhenretty]]

Flagging myself to circle back once my 1.4 stuff is done.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Vivien Nicolas (:vingtetun) (:21) from comment #0)
> As soon you have a few notifications it starts to become slower and slower.
> Looking at a profile
> (http://people.mozilla.org/~bgirard/cleopatra/
> #report=8dfa4fd85c2e9543dadbf3fdd522e955345fb9fb) it seems like we are
> spending our time into CSS::ProcessRestyle.

I'm hoping that bug 931668 will help with this sort of profile.

> The notifications are contained basically in a div with overflow-y: scroll.
> Each time the finger is moved on the screen |div.style.transform =
> 'translateY(' + y + 'px)| is updated. The idea is to have the utility tray
> following the finger.
> 
> Asking dbaron is there any 'magic' way of avoiding the CSS::ProcessRestyle
> in this case.

I think roc had some ideas about eventually getting into a world where we could hook this sort of thing up in the layer system, but I think that was pretty long-term.  I'm not sure whether there's been any progress in that direction, though.

Comment 9

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Could the utility tray itself be in a scrolling container, so that when you drag the tray with your finger you're actually scrolling the tray's container? This would let APZC do the work. The container would of course be completely transparent and contain nothing but the utility tray plus a spacing DIV to ensure that the container can be scrolled as far as necessary?

Comment 10

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #9)
> Could the utility tray itself be in a scrolling container, so that when you
> drag the tray with your finger you're actually scrolling the tray's
> container? This would let APZC do the work. The container would of course be
> completely transparent and contain nothing but the utility tray plus a
> spacing DIV to ensure that the container can be scrolled as far as necessary?

That sounds a good idea. But I guess we need to wait for bug 950934 to be fixed first as the utility tray lived in the parent process.

Comment 11

[Peter Dolanjski [:pdol]]

I don't think we'd block the 1.4 release, but we can certainly consider this a priority quality improvement.

Comment 12

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

I would be good if the platform fix for bug 931668 will prevent us to have to do any changes here.

Comment 13

[:gerard-majax]

Comment on attachment 8384355 [details] [diff] [review]
poc.bug978588.patch

Not sure how I can help on this.

Comment 14

[Michael Henretty [:mikehenrty][:mhenretty]]

Now that bug 931668 has been fixed, it might be time to revisit this. We recently changed the utility tray completely, but I believe we encounter the same jank when scrolling a lot of notifications. Vivien, do you think it's worth revisiting this?

Comment 15

[Michael Henretty [:mikehenrty][:mhenretty]]

Bug 1178162 totally fixed this.