1570770 - Incremental reflows on New-tab page are showing up in profiler

Status: NEW

(Core :: Layout, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:
tl;dr, capture a performance profile of yourself dismissing a new-tab recommended tile.

1. Hover the first "recommended by pocket" tile on the new-tab page.
2. When a three-dots menu appears for it, click that and hover the word "Dismiss"
3. Ctrl+Shift+1 to start profiling
4. Click "Dismiss" (the word you were hovering in step 2)
5. After the new tile has appeared, Ctrl+Shift+2 to capture your profile.

ACTUAL RESULTS:
Here's a profile: https://perfht.ml/2YBkYaW
The tile dismissing action takes around 170ms (click event at 0.95sec, new tile is painted at 1.12sec; the delta is 0.17s = 170ms). Most of that time is spent in JS, but for the purposes of this bug, I'm focusing on the 4 reflows that happen during that time.

They're each between 1ms and 3.3ms long -- not super long on the scheme of the full 170ms, but possibly something that could be optimized or avoided/coalesced to reduce the interaction time by a few percentage points.

EXPECTED RESULTS:
Fewer and/or faster reflows.

Note that this about:home page has the content nested inside of multiple layers of flex/grid containers, and both flex & grid layout are known to be a bit overzealous on incremental reflows currently.