dynamically use perfetto

[s7tya]

Run npm run install-perfetto before running website.
Then, access to the link inside of the compare page detail. ("query trace" button)

[Kobzol]

I tried using the embedded Perfetto, and it loaded fine, but it also reloads itself every few seconds. We can discuss it at our meeting.

[s7tya]

@LalitMaganti
Hello, sorry to bother you.

I’m currently working on embedding Perfetto's UI into perf.rust-lang.org, and it’s almost working perfectly. However, the page keeps reloading every few seconds. The only modification I made was patching the CSP URLs, so I’m unsure why this issue is happening.

Would you happen to have any idea what might be causing this?

[LalitMaganti]

Never heard someone run into something like that before, that seems very strange.

I'd suggest using the SHA c4577456a1be9d41853015cd194850f972383db7 corresponding to the previous-stable version of the UI. Unlikely that will fix the issue but it will reduce one variable.

Does Devtools give any hint (log messages which might indicate the originator of the reload)? I don't think there's any code in the UI which would try and reload (modulo version updates and plugin reloads) but there may be some adverse interaction with how you're embedding the UI.

[s7tya]

Thank you for the reply! It occurs only if this flag is true.

https://github.com/google/perfetto/blob/56b5e6fdd77f3d86ad60d402197d91bda911b1f4/ui/src/frontend/trace_url_handler.ts#L218

I'll also paste my dev tools console. Though I've added some debug info.

[s7tya]

Also I'll switch to the stable commit you gave. Thanks!

[LalitMaganti]

Can we just patch that line to return false? That's a bit of an edge case in the fact we use localhost to post files to the UI from the command line. Likely we could fix it upstream but would need some investigation and I don't want to block you on that.

We can open a Perfetto bug upstream to track the root cause.

[s7tya]

Alright. I'll file an issue on upstream and patch that line for now.

[s7tya]

It should work fine now. I'll migrate the details page to Vue.js later and update the "Open in Perfetto" link on that page so it functions the same way as the one on the compare details page.

[Kobzol]

We might as well just use a forked version of perfetto to avoid this monkey patching 😆 But let's keep it as it is, if we need to make more changes in the future, we can switch to a fork.

[Kobzol]

Thank you! :)

For onlookers: this PR adds the ability to inline the Perfetto trace visualizer on the website, but it is opt-in, Perfetto needs to be downloaded offline first. It takes too long to build to do it on CI, but I will try to build it manually (once) on the server.