1877574 - Scrolling large minified source files with column breakpoint markers is very janky

Status: ASSIGNED

(DevTools :: Debugger, task, P3)

Description

[Hubert Boma Manilla (:bomsy)]

Alot of jank while scrolling a large minified file with a few column breakpoints .

Steps to reproduce

• Go to https://todomvc.com/examples/react/dist/
• Open the debugger
• Make sure the "Wrap Lines" setting is turned on
• Select app.bundle.js from the source tree
• Set a breakpoint on line 2 which should cause markers for column breakpoint to appear
• Try to scroll the document until the bottom

Expected result

It should scroll smoothly

Actual result

There is a lot of jankyness while scrolling

Did a profile https://share.firefox.dev/48cclaF

Comment 1

[Hubert Boma Manilla (:bomsy)]

Attachment: Bug 1877574 - [devtools] Only re-render the column breakpoints when the breakpoint changes r=#devtools-reviewers

Profile BEFORE the fix https://share.firefox.dev/48cclaF
Profile AFTER the fix https://share.firefox.dev/3SFfY40

Comment 2

[Hubert Boma Manilla (:bomsy)]

Also small note to confirm after this fix, from review https://phabricator.services.mozilla.com/D207408#7185455

 #positionContentMarkersExtension is called twice. Here are the 2 different traces:

first trace:

#positionContentMarkersExtension (resource://devtools/client/shared/sourceeditor/editor.js#867)
setPositionContentMarker (resource://devtools/client/shared/sourceeditor/editor.js#934)
componentDidUpdate (resource://devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js#118)
[React/Redux]
addBreakpoint (resource://devtools/client/debugger/src/actions/breakpoints/modify.js#141)

second trace:

#positionContentMarkersExtension (resource://devtools/client/shared/sourceeditor/editor.js#867)
setPositionContentMarker (resource://devtools/client/shared/sourceeditor/editor.js#934)
componentDidUpdate (resource://devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js#118)
[React/Redux]
Editor (resource://devtools/client/debugger/src/components/Editor/index.js#127)
extensions (resource://devtools/client/shared/sourceeditor/editor.js#679)
measure (resource://devtools/client/shared/sourceeditor/codemirror6/codemirror6.bundle.mjs#1)
measureScheduled (resource://devtools/client/shared/sourceeditor/codemirror6/codemirror6.bundle.mjs#1)

In this second trace, the update seems to be triggered by this.#updateListener(v).