Closed Bug 1493179 Opened 6 years ago Closed 3 months ago

Load the CodeMirror sourceeditor component asynchronously only when needed in the markup-view


(DevTools :: Inspector, enhancement, P3)



(Not tracked)



(Reporter: pbro, Unassigned)


(Blocks 1 open bug)


The markup-view needs the sourceeditor component for when HTML is being edited.
However, this only happens when the user right-clicks on a node and select "edit HTML".

Looking at the code though, we always load the sourceeditor:

We load 3 CSS files and the sourceeditor bundle JS file.

I did a quick perf comparison test to see if it would be faster to not load these 4 files.
Turns out we actually re-load the entire markupview iframe often, so removing those dependencies is important.

What I measured: the time it takes to load the markupview iframe.
Specifically, I start measuring here:
And end measuring here:

I measured this time in 3 different scenarios: when the inspector is opened for the first time in Firefox (cold open), when the inspector is re-open after having been closed (re-open), and when switching iframes with the iframe switcher button (iframe).
I measured the time 5 times and averaged out the results:

           with CodeMirror    without CodeMirror   %
cold open  300ms              250ms                -16%
re-open    290ms              180ms                -38%
iframe     210ms              50ms                 -76%

So it looks like this is a good perf win across the board worth doing.
I haven't looked at how to load the sourceeditor async later when needed, but I'm assuming we can do it (we have all sorts of loaders in devtools).
Priority: -- → P3
Severity: normal → S3

Since Bug 1494162 , we don't load the codemirror bundle anymore

Closed: 3 months ago
Duplicate of bug: 1494162
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.