Here's a profile of the Browser Toolbox initialization: https://share.firefox.dev/3stC784 (recorded via MOZ_BROWSER_TOOLBOX_PROFILER_STARTUP=1 ./mach run --jsdebugger)

DevTools code starts to kick in at ~2s, but we have to wait ~7s to see anything rendered onto the window; finally at ~11s the (3 pane) inspector is fully rendered.

We looked into this as part of numerous similar bugs.

The problem is that most tool panels are not populated until page / DOM load so if the page takes 20 seconds to load then the DevTools panels will be blank for 20 seconds and will then render.

There is also the issue that the DevTools panels do not become populated if the load event is not fired (this happens when document.write() is used).

Waiting makes sense because then we only need to iterate through the DOM nodes once to get style information etc.

Maybe changing the UX to make it clearer what is happening would help? (skeleton pages, messages "Waiting for DOM load", progress bars etc). This is the most pragmatic solution... we planned on implementing this at some point but there were never enough developers spare to do it.

We could also render the tools as pages are loaded but that could slow down content page loading.

Just my 2 pence ;)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #6)

Here's a profile of the Browser Toolbox initialization: https://share.firefox.dev/3stC784 (recorded via MOZ_BROWSER_TOOLBOX_PROFILER_STARTUP=1 ./mach run --jsdebugger)

DevTools code starts to kick in at ~2s, but we have to wait ~7s to see anything rendered onto the window; finally at ~11s the (3 pane) inspector is fully rendered.

And at 7s it seems we haven't started executing any JS for the inspector yet (at least none which shows up in the profile). I will add markers to get a better idea of the flow here.

But if we can confirm that most of the time spent here is actually simply spent to start the toolbox, we can probably close this bug since we have other bugs to speed up the Browser Toolbox. From a tool perspective, the inspector is normally quite conservative about the requests it makes to display its UI. It will only request information for nodes which are displayed in the markup view. And since the markup view tree is never fully expanded at initialization time, it should actually have comparable performance between the regular web toolbox and the browser toolbox.

Doug, you can look Comment 6 for a profile of Browser Toolbox opening

To record your own:

1. MOZ_BROWSER_TOOLBOX_PROFILER_STARTUP=1 ./mach run --jsdebugger
2. In the Browser Toolbox that opened, hit the Browser Toolbox keyboard shortcut (Cmd+Alt+Shift+i)
3. It will open a new Browser Toolbox, targeting the first one. You can then select the Performance panel and hit the "Capture" button there to get the profile