Merge pull request #1967 from s7tya/integrate-perfetto

dynamically use perfetto

Author: Kobzol

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,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

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/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

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(false);
+checkIsEmbeddedPerfettoEnabled().then((res) => {
+  isEmbeddedPerfettoEnabled.value = res;
+});
 
 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 async function checkIsEmbeddedPerfettoEnabled(): Promise<boolean> {
+  const result = await fetch(`/perfetto/index.html`);
+
+  return result.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`.