935664 - Syntax Highlighting large files hangs the browser

Status: NEW

(DevTools :: Source Editor, defect, P3)

Description

[Potch [:potch]]

Open up the Debugger and visit marketplace.firefox.com

Observe the beach ball.

Any way to do this off the main thread?

Comment 1

[Panos Astithas (he/him) [:past] (please ni?)]

I'm not sure it's the syntax highlighting, when I first opened that page I got a smallish file opened. It may well be the transfer of sources from the backend to the frontend. It certainly is a bug.

Comment 2

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

I'm not getting too much jank on marketplace.firefox.com. A better testcase is http://web.tweetdeck.com and selecting the defuault.329873298524965892.js. I get less jank if I pretty print the file, so I suspect this has to do with the really long columns that come with minified js.

Comment 4

[Anton Kovalyov (:anton)]

So I did some trivial profiling/exploration: TweetDeck is not beach-balling for me at all while Marketplace is beach-balling whether i have devtools opened or not. (I.e. if I switch to another tab and then back to marketplace, I have 3-4 seconds long beach-ball action) Profiler showed Marketplace's include.js taking 90% of the time.

Comment 5

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: screen shot of profile

Disabling devtools.debugger.auto-pretty-print highlights the problem. It seems that it is only an issue with large columns.

Seeing about 50% of time spent in code mirror, and hard jank for about 2 or 3 seconds.

Comment 6

[Axel Kratel]

Any updates on this bug?