Steps to reproduce the problem

1. Record a long enough sequence of actions (~20 seconds), doesn't matter exactly what (JS/rendering/...), as long as it has a similar amount of actions throughout the timeline.
2. Start with the timeline slightly zoomed in (~50% of the time frame, or about 10 out of 20 seconds)
3. Use the mouse to drag this frame back and forth
4. Observe that, while it's definitely slower and less smooth than the previous devtools version, it still moves quite smoothly with few frame drops.
5. Now zoom in so that the time frame is relatively small (but still larger than what you'd typically need), about 100ms long.
6. Again, use the mouse to drag the position of the time frame
7. Observe that now this interaction is rendered extremely slowly, about 4fps. This is even the case if the selected window has no entries at all.

Problem Description

In the latest changes in dev tools, a serious performance issue was introduced when using the mouse to move the time frame around if it's smaller than about 200ms. Whereas in the previous versions this interaction was fully smooth, it now became extremely slow and seems to render the moving action at only about 4fps with massive input delay.

This is almost certainly a bug, because the scrolling seems to work fine if you use a larger window, and the larger windows don't seem to show any less information. So the same operations on a strictly smaller set of results somehow gets slower, this indicates there's probably an oversight somewhere.

I used developer tools on the developer tools instance to get a performance trace of this slow behavior, which revealed the following:

• It seems like the GPU takes over 200ms which causes the slowness
• When zoomed out, this GPU task time decreases to < 20ms (even though it's rendering a strictly larger version of what took 200ms before)
• The devtools on top of devtools instance I used for this recording did not at all have this problem and has perfectly smooth dragging

Additional Comments

See attached a performance recording of the slow behavior. There's also an image of the timeline of this recording for convenience. First the problematic behavior is triggered when zoomed in, then around 6s the timeline is zoomed out and dragging is performed again for comparison.

Summary

Moving performance recording time frame by dragging gets extremely slow when zoomed

Additional Data

Category: Developer Tools
Chrome Channel: Stable
Regression: Yes