1508549 - SmartTrace render on each frame sourcemap result, sometimes causing re-layouts

Status: RESOLVED FIXED

(DevTools :: Shared Components, enhancement, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

In the SmartTrace, for each frame, we subscribe to the sourcemap service when the component is mounted. 
Then, for each result, we re-render the whole component with the original frame location.
If the callstack has some library, SmartTrace will then start to collapse library frames.

All those are great, but causes the layout to change a lot.
Basically with an actual callstack of: 

```
foo bundle.js
finalize bundle.js
clearPending bundle.js
doWork bundle.js
checkPendingWork bundle.js
onClick bundle.js
```

We can sometimes go through these different tests in a second: 


```
foo bundle.js
finalize bundle.js
clearPending bundle.js
doWork bundle.js
checkPendingWork React
onClick bundle.js
```

```
foo bundle.js
finalize bundle.js
clearPending bundle.js
doWork (2) React
onClick bundle.js
```

```
foo bundle.js
finalize bundle.js
clearPending (3) React
onClick bundle.js
```

```
foo bundle.js
finalize (4) React
onClick bundle.js
```

---

As you might guess, this is quite annoying, especially in the console where you might have other messages coming and jumping around as the collapsing occurs.

There are 2 solutions to that:
- do not render anything until we do have the sourcemap results. This is dangerous as the request to fetch the sourcemap might take a long time.
- do not render anything for the first X ms, and then, either render the sourcemapped callstack if *all* sourcemapservice results are available, or if not, render the actual stacktrace, and then, at a later point, render the original callstack, again, when *all* sourcemapservice results are available.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

s/We can sometimes go through these different tests/We can sometimes go through these different states

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

TRY push with tests fixes https://treeherder.mozilla.org/#/jobs?repo=try&revision=df105943b261b70a93844e5b8d65b82561af6174 , everything seems fine now.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1508549 - Better SmartTrace rendering strategy; r=Honza.

We used to re-render the component each time the sourcemapService
would give us a result for a single frame.
Combined with the frame grouping system, this could trigger
weird re-layout and might confuse user.
What's done in this patch is that when mounting, if a sourcemapService
is passed, we don't render anything, and start a race between
a delay of 300ms and the sourcemap results for *all* the frames.
If we don't have the original frames within 300ms, we render the
bundled frames. But, whenever we have the sourcemap results, we
trigger a re-render of the component.
This gives some room for the sourcemapService to fetch map files
without re-ordering things on the screen.
A test case is added to ensure we have the expected renders
when the sourcemap service takes more time than the inital delay.
We already have a case where the sourcemap service resuls are
received before the initial delay.

We also take this as an opportunity to fix minor CSS issues.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c65b841c5802
Better SmartTrace rendering strategy; r=Honza.

Comment 5

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/c65b841c5802