1391256 - Activity Stream settings sidebar repaints and animates on the main thread

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Mike Conley (:mconley) (:⚙️) (PTO Dec 22 - Jan 2)]

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:57.0) Gecko/20100101 Firefox/57.0

Build ID: 20170817100132

STR:

1) Enable paint flashing in content by setting nglayout.debug.paint_flashing to true
2) Open about:newtab
3) Click on the gear icon in the top right corner to open the settings panel

AR:

The settings panel repaints for each frame of its animation (you can tell this because the colour is changing for each frame).

Video: https://www.screencast.com/t/ojg4YH8a

ER:

The panel should only be painted once, and animate completely on the GPU.

This should be a pretty straight-forward fix / easy win. From the looks of the CSS, we're animating the sidebar element by transitioning on the left / right CSS properties. We should avoid those, and use transform: translateX instead. This should ensure a smooth, 60fps animation on the sidebar.

Comment 1

[Kate Hudson :k88hudson]

This is definitely something we should do, we'll just need to figure out a strategy for accounting for rtl (right now we're using offset-inline-end and offset-inline-start)

Comment 2

[Mike Conley (:mconley) (:⚙️) (PTO Dec 22 - Jan 2)]

(In reply to Kate Hudson :k88hudson from comment #1)
> This is definitely something we should do, we'll just need to figure out a
> strategy for accounting for rtl (right now we're using offset-inline-end and
> offset-inline-start)

We do something like this for subview panels:

http://searchfox.org/mozilla-central/rev/e8c36327cd8c9432c69e5e1383156a74330f11f2/browser/themes/shared/controlcenter/panel.inc.css#82-89

Comment 3

[Mike Conley (:mconley) (:⚙️) (PTO Dec 22 - Jan 2)]

(Specifically, note the :-moz-locale-dir(rtl) pseudoselector)

Comment 4

[Ursula Sarracini (:ursula)]

This is fixed with: https://github.com/mozilla/activity-stream/commit/c253b4c069499d341c2afcf8a7ec16dd135a5fb4 and will be in nightly in the next export

Comment 5

[Ed Lee :Mardak]

Fixed by https://github.com/mozilla/activity-stream/pull/3199 to be uplifted via bug 1392384.

Comment 6

[Mike Conley (:mconley) (:⚙️) (PTO Dec 22 - Jan 2)]

\o/ Thanks, all!

Comment 7

[Marius Coman [:mcoman], Ecosystem QA]

Activity Stream settings sidebar no longer repaints for each frame on its animation, now it only paints once.
Verified as fixed using latest Nightly 57.0a1 Build ID 20170917220255, on Windows 10 x64 and Mac 10.12.