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

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

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:
https://searchfox.org/mozilla-central/source/devtools/client/inspector/markup/markup.xhtml

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: https://searchfox.org/mozilla-central/rev/0b8ed772d24605d7cb44c1af6d59e4ca023bd5f5/devtools/client/inspector/inspector.js#1970
And end measuring here: https://searchfox.org/mozilla-central/rev/0b8ed772d24605d7cb44c1af6d59e4ca023bd5f5/devtools/client/inspector/inspector.js#1998

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).