dynamically use perfetto

site/.gitignore

@@ -3,3 +3,4 @@
 frontend/node_modules
 frontend/dist/**/
 frontend/.parcel-cache
+frontend/static/perfetto

site/frontend/download_perfetto.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+commit_hash="ee7c549fc204622a00b99f733a998fb8b74f5d6d"
+git clone https://github.com/google/perfetto.git perfetto_tmp
+
+cd perfetto_tmp
+git checkout $commit_hash || exit 1
+
+function allow_url_in_csp() {
+    url=$1
+    sed -i.bak "1,/^[[:space:]]*'blob:'/s/^\([[:space:]]*\)'blob:'/\1'$(echo "$url" | sed 's/\//\\\//g')',\n\1'blob:'/" ui/src/frontend/index.ts
+}
+
+allow_url_in_csp 'https://perf.rust-lang.org'
+allow_url_in_csp 'http://localhost:2346'
+
+tools/install-build-deps --ui
+ui/build
+
+cd ..
+
+rm -rf static/perfetto
+mkdir -p static/perfetto
+mv perfetto_tmp/out/ui/ui/dist/* static/perfetto/ && rm -rf perfetto_tmp

site/frontend/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
+    "install-perfetto": "./download_perfetto.sh",
     "watch": "parcel watch --no-hmr",
     "build": "parcel build",
     "fmt": "prettier --write src",

site/frontend/src/components/perfetto-link.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed} from "vue";
+import {computed, inject} from "vue";
 import {openTraceInPerfetto} from "../perfetto";
 import {chromeProfileUrl} from "../self-profile";
 import {CompileTestCase} from "../pages/compare/compile/common";
@@ -22,14 +22,23 @@ const link = computed(() => {
 const traceTitle = computed(() => {
   return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.artifact.commit})`;
 });
+
+const isEmbeddedPerfettoEnabled = inject("isEmbeddedPerfettoEnabled");
 </script>
 
 <template>
   <a
-    @click="openTraceInPerfetto(link, traceTitle)"
-    title="Open the self-profile query trace in Perfetto. You have to wait a bit for the profile to be downloaded after clicking on the link."
+    :href="`/perfetto/index.html?url=${encodeURIComponent(link)}`"
+    v-if="isEmbeddedPerfettoEnabled"
     ><slot></slot
   ></a>
+  <a
+    @click="openTraceInPerfetto(link, traceTitle)"
+    title="Open the self-profile query trace in Perfetto. You have to wait a bit for the profile to be downloaded after clicking on the link."
+    v-else
+  >
+    <slot></slot>
+  </a>
 </template>
 
 <style scoped lang="scss">

site/frontend/src/pages/compare.ts

@@ -1,8 +1,15 @@
 import Compare from "./compare/page.vue";
-import {createApp} from "vue";
+import {createApp, ref} from "vue";
 import WithSuspense from "../components/with-suspense.vue";
+import {checkIsEmbeddedPerfettoEnabled} from "../perfetto";
+
+const isEmbeddedPerfettoEnabled = ref(null);
+(async () => {
+  isEmbeddedPerfettoEnabled.value = await checkIsEmbeddedPerfettoEnabled();
+})();
 
 const app = createApp(WithSuspense, {
   component: Compare,
 });
+app.provide("isEmbeddedPerfettoEnabled", isEmbeddedPerfettoEnabled);
 app.mount("#app");

site/frontend/src/perfetto.ts

@@ -39,3 +39,9 @@ function openTrace(arrayBuffer: ArrayBuffer, title: string) {
 
   window.addEventListener("message", onMessageHandler);
 }
+
+export const checkIsEmbeddedPerfettoEnabled = async (): Promise<boolean> => {
+  return (
+    (await fetch(`/perfetto/index.html`).then((res) => res.status)) === 200
+  );
+};

site/src/resources.rs

@@ -11,6 +11,11 @@ use rust_embed::RustEmbed;
 #[include = "*.css"]
 #[include = "*.svg"]
 #[include = "*.png"]
+#[include = "*.html"]
+#[include = "*.woff2"]
+#[include = "*.map"]
+#[include = "*.json"]
+#[include = "*.wasm"]
 struct StaticAssets;
 
 /// Frontend source files compiled by `npm`.