From d309b2cf68d759b3270b503df78d9d751015c602 Mon Sep 17 00:00:00 2001
From: Shina <53410646+s7tya@users.noreply.github.com>
Date: Mon, 16 Sep 2024 09:13:19 -0700
Subject: [PATCH] dynamically use perfetto

---
 site/.gitignore                               |  1 +
 site/frontend/download_perfetto.sh            | 31 +++++++++++++++++++
 site/frontend/package.json                    |  1 +
 .../frontend/perfetto_trace_url_handler.patch | 15 +++++++++
 .../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 +++
 8 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100755 site/frontend/download_perfetto.sh
 create mode 100644 site/frontend/perfetto_trace_url_handler.patch

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..b38275287
--- /dev/null
+++ b/site/frontend/download_perfetto.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+
+commit_hash="c74251226a8caa0b43377902ee06d2570faa0c15"
+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'
+
+patch -u ui/src/frontend/trace_url_handler.ts < ../perfetto_trace_url_handler.patch
+
+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/
+
+if [ "$DEBUG_EMBEDDED_PERFETTO" != true ] ; then
+    echo "Removing temporal perfetto repository"
+    rm -rf perfetto_tmp
+fi
\ 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/perfetto_trace_url_handler.patch b/site/frontend/perfetto_trace_url_handler.patch
new file mode 100644
index 000000000..a2c68204e
--- /dev/null
+++ b/site/frontend/perfetto_trace_url_handler.patch
@@ -0,0 +1,15 @@
+--- ui/src/frontend/trace_url_handler.ts.bak	2024-09-15 21:20:31
++++ ui/src/frontend/trace_url_handler.ts	2024-09-15 21:34:02
+@@ -217,11 +217,7 @@
+ }
+ 
+ function loadTraceFromUrl(url: string) {
+-  const isLocalhostTraceUrl = ['127.0.0.1', 'localhost'].includes(
+-    new URL(url).hostname,
+-  );
+-
+-  if (isLocalhostTraceUrl) {
++  if (false) {
+     // This handles the special case of tools/record_android_trace serving the
+     // traces from a local webserver and killing it immediately after having
+     // seen the HTTP GET request. In those cases store the trace as a file, so
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..4c9babdd9 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(false);
+checkIsEmbeddedPerfettoEnabled().then((res) => {
+  isEmbeddedPerfettoEnabled.value = res;
+});
 
 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..83550c7d2 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> {
+  const result = await fetch(`/perfetto/index.html`);
+
+  return result.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`.