Display tracer argument values via DevTool's Reps components

[ochameau]

This is based on top of #5363 and start using DevTools Reps React component to render nice previews for the recorded objects.

For now, this is a gross integration crash landing Reps into the profiler, but I should probably spawn an npm package for Reps in order to improve the integration into the profiler frontend.

A few takeaways:

• At first sight, it looks like the difference of React version between profiler and devtools doesn't introduce immediate failure

• DevTools is using .mjs file extension whereas the profiler is using .js.
  This difference is going to be invisible once Reps is packaged into an npm package.

• DevTools uses URIs for imports, whereas the profiler uses require path.
  This will still be something to handle while exporting Reps from mozilla-central/DevTools to npm.
  This may be addressed by moving to relative paths.

• Circular dependencies are forbidden by the profiler build toolchain.
  This is something we can fix in DevTools. There circular dependencies can be avoided.

• Reps depends on DevTools variables.css in order to render correctly, with the proper colors.
  I'm not sure we want to import so many rules. It also depends on the very devtools specific .theme-light versus .theme-dark class name.
  We may have to manually translate Reps's variable into colors already used in profiler?

• DevTools isn't using JSX and requires React DOM Factories module/package.
  Sounds fine importing this package as a profiler dependency?
  I imagine this will be transparent once Reps is bundled into an npm package?

• DevTools uses PropTypes
  Same resolution as React DOM Factories.

[mstange]

Could you add a deploy preview link with an example profile?

[ochameau]

Could you add a deploy preview link with an example profile?

Oh, I forgot to cross link the related bugzilla entry (with some more info):
https://bugzilla.mozilla.org/show_bug.cgi?id=1933787#c6

Here is a profile example:
https://deploy-preview-5394--perf-html.netlify.app/public/rxabzrr1e4fcb8f05aavnbm7vsgcp4cn2hg7mtr/stack-chart/?globalTrackOrder=a0w9&hiddenGlobalTracks=1w8&hiddenLocalTracksByPid=4612-0w4~4636-0~4617-0&implementation=js&search=activity-s&thread=f&timelineType=category&v=10

(Note that this is a WIP, I only spent 2hours integrating Reps)