From c1ecbf6c8f1e85b8d6ed26276323b0b45e665596 Mon Sep 17 00:00:00 2001
From: Shina <53410646+s7tya@users.noreply.github.com>
Date: Sun, 15 Sep 2024 14:27:10 -0700
Subject: [PATCH] dynamically use perfetto

---
 site/.gitignore                               |  1 +
 site/frontend/download_perfetto.sh            | 24 +++++++++++++++++++
 site/frontend/package.json                    |  1 +
 .../frontend/src/components/perfetto-link.vue | 15 +++++++++---
 site/frontend/src/pages/compare.ts            |  9 ++++++-
 site/frontend/src/perfetto.ts                 |  6 +++++
 site/src/resources.rs                         |  5 ++++
 7 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100755 site/frontend/download_perfetto.sh

diff --git a/site/.gitignore b/site/.gitignore
index d93249969..348e80a49 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -3,3 +3,4 @@
 frontend/node_modules
 frontend/dist/**/
 frontend/.parcel-cache
+frontend/static/perfetto
\ No newline at end of file
diff --git a/site/frontend/download_perfetto.sh b/site/frontend/download_perfetto.sh
new file mode 100755
index 000000000..950e9a61a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/site/frontend/package.json b/site/frontend/package.json
index a6e54552e..2e47e95f0 100644
--- a/site/frontend/package.json
+++ b/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",
diff --git a/site/frontend/src/components/perfetto-link.vue b/site/frontend/src/components/perfetto-link.vue
index dddd115f9..824e9661d 100644
--- a/site/frontend/src/components/perfetto-link.vue
+++ b/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">
diff --git a/site/frontend/src/pages/compare.ts b/site/frontend/src/pages/compare.ts
index f0e921b14..7e4902495 100644
--- a/site/frontend/src/pages/compare.ts
+++ b/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");
diff --git a/site/frontend/src/perfetto.ts b/site/frontend/src/perfetto.ts
index 0d227704b..7ab435492 100644
--- a/site/frontend/src/perfetto.ts
+++ b/site/frontend/src/perfetto.ts
@@ -39,3 +39,9 @@ function openTrace(arrayBuffer: ArrayBuffer, title: string) {
 
   window.addEventListener("message", onMessageHandler);
 }
+
+export async function checkIsEmbeddedPerfettoEnabled(): Promise<boolean> {
+  return (
+    (await fetch(`/perfetto/index.html`).then((res) => res.status)) === 200
+  );
+}
diff --git a/site/src/resources.rs b/site/src/resources.rs
index 71a3ffbcf..9654b2f02 100644
--- a/site/src/resources.rs
+++ b/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`.