STR: - Open a google doc - Open Console, log window and expand it - Wait, maybe click Continue in Slow Script Dialog (shows react.js) ER: - Smooth scrolling AR: - Janky scrolling with 1s hangs Profile: https://perfht.ml/2xNV9IV All time is spend in RestyleTracker::DoProcessRestyles chrome://devtools/content/webconsole/webconsole.xhtml, blocking APZ event handling

Are you seeing this in 57? If so, I'm curious if you have the same problem in Nightly - I believe there was a related fix that has been uplifted to beta but hasn't been sent out as per: https://bugzilla.mozilla.org/show_bug.cgi?id=1402484#c15.

This is using Nightly 58.0a1 (2017-10-01) (64-bit) on OSX. The issue you linked seems more related to bug 1405060 that I just filed, also on Nightly but only triggered by expanding a logged object.

Different view on the profile: https://perfht.ml/2xazMiS The profile seems to say that there is a large number of elements, and that these elements have a background style which uses CSS variables. When computing the style change, the values of these variables are re-parsed so that they can be resolved. Almost half the restyle time is spent inside nsRuleNode::ResolveVariableReferences. It's also running in the parent process so it's not using stylo (bug 1294570).

(In reply to Markus Stange [:mstange] from comment #3) > Different view on the profile: https://perfht.ml/2xazMiS > > The profile seems to say that there is a large number of elements, and that > these elements have a background style which uses CSS variables. When > computing the style change, the values of these variables are re-parsed so > that they can be resolved. Almost half the restyle time is spent inside > nsRuleNode::ResolveVariableReferences. > It's also running in the parent process so it's not using stylo (bug > 1294570). Thanks, that's really helpful! There are a couple styles I see on the .tree-node elements that are probably the cause of that (there is one for each property on the object): padding-inline-start: calc( (var(--tree-indent-width) * 1) + var(--arrow-total-width) ); background-image: linear-gradient(90deg, transparent calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)), transparent calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)));

The background image with all the variables is used to draw the left border effect that lines up directly below the expanded arrow of the parent - maybe there's a way to do this with less calculation using a box-shadow or similar

It looks like because of the way the DOM is flattened for the tree, nested objects end up with very complex styles to draw N lines (in this screenshot the most nested properties draw a background with 3 lines), which end up with inline styles like this: background-image: linear-gradient(90deg, transparent calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)), transparent calc((0 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)),transparent calc((1 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((1 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((1 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)), transparent calc((1 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)),transparent calc((2 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((2 * var(--tree-indent-width)) + (var(--arrow-width) / 2)), var(--tree-indent-border-color, black) calc((2 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px)), transparent calc((2 * var(--tree-indent-width)) + (var(--arrow-width) / 2) + var(--tree-indent-border-width, 1px))); This is generated from https://github.com/devtools-html/devtools-core/blob/739e193ec48df0ca5d876deb14cd894775ae2f4d/packages/devtools-components/src/tree.js#L100

Filed https://github.com/devtools-html/devtools-core/issues/739

Marking 57 fix-optional since at least part of the fix will be in reps and we may not want to uplift the whole bundle

WIP PR https://github.com/devtools-html/devtools-core/pull/762

Issue was fixed in Bug 1419479