Hooked up the trace link to perfetto.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3730 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -98,6 +98,58 @@ function edit() {
 	});
 }
 
+function trace() {
+	var request = new XMLHttpRequest();
+	request.addEventListener("loadend", function() {
+		if (request.status == 200) {
+			/* The trace is loaded. */
+			console.log(typeof(request.response));
+			var perfetto = window.open('/perfetto/');
+			var done = false;
+			if (perfetto) {
+				function message_handler(message) {
+					if (message.data == 'PONG') {
+						perfetto.postMessage({
+							perfetto: {
+								buffer: request.response,
+								title: 'Tilde Friends Trace',
+								url: window.location.href,
+							}
+						}, '*');
+						done = true;
+					}
+				}
+				window.addEventListener('message', message_handler);
+				function ping_perfetto() {
+					perfetto.postMessage('PING', window.location.origin);
+					if (!done && !perfetto.closed) {
+						setTimeout(ping_perfetto, 50);
+					} else {
+						window.removeEventListener('message', message_handler);
+					}
+				}
+				setTimeout(ping_perfetto, 50);
+			} else {
+				alert("Unable to open perfetto.");
+			}
+		} else {
+			alert("Failed to load trace: " + request.status + ".");
+		}
+	});
+	request.addEventListener("error", function() {
+		alert("Error loading trace.");
+	});
+	request.addEventListener("timeout", function() {
+		alert("Timed out loading trace.");
+	});
+	request.addEventListener("abort", function() {
+		alert("Loading trace aborted.");
+	});
+	request.responseType = 'arraybuffer';
+	request.open("GET", "/trace");
+	request.send();
+}
+
 function guessMode(name) {
 	return name.endsWith(".js") ? "javascript" :
 		name.endsWith(".html") ? "htmlmixed" :

core/core.js

@@ -333,6 +333,14 @@ async function staticFileHandler(request, response, blobId, uri) {
 	response.end("File not found");
 }
 
+const k_mime_types = {
+	'json': 'text/json',
+	'js': 'text/javascript',
+	'html': 'text/html',
+	'css': 'text/css',
+	'map': 'application/json',
+};
+
 async function speedScopeHandler(request, response, uri) {
 	var filename = uri || 'index.html';
 	if (filename.indexOf('..') != -1) {
@@ -340,17 +348,27 @@ async function speedScopeHandler(request, response, uri) {
 		response.end("File not found");
 		return;
 	}
-
-	const types = {
-		'json': 'text/json',
-		'js': 'text/javascript',
-		'html': 'text/html',
-		'css': 'text/css',
-		'map': 'application/json',
-	};
 	try {
 		var data = await File.readFile("deps/speedscope/" + filename);
-		response.writeHead(200, {"Content-Type": types[filename.split('.').pop()] || 'text/plain', "Content-Length": data.byteLength});
+		response.writeHead(200, {"Content-Type": k_mime_types[filename.split('.').pop()] || 'text/plain', "Content-Length": data.byteLength});
+		response.end(data);
+	} catch {
+		response.writeHead(404, {"Content-Type": "text/plain; charset=utf-8", "Content-Length": "File not found".length});
+		response.end("File not found");
+	}
+}
+
+async function perfettoHandler(request, response, uri) {
+	var filename = uri || 'index.html';
+	if (filename.indexOf('..') != -1) {
+		response.writeHead(404, {"Content-Type": "text/plain; charset=utf-8", "Content-Length": "File not found".length});
+		response.end("File not found");
+		return;
+	}
+
+	try {
+		var data = await File.readFile("deps/perfetto/" + filename);
+		response.writeHead(200, {"Content-Type": k_mime_types[filename.split('.').pop()] || 'text/plain', "Content-Length": data.byteLength});
 		response.end(data);
 	} catch {
 		response.writeHead(404, {"Content-Type": "text/plain; charset=utf-8", "Content-Length": "File not found".length});
@@ -522,11 +540,13 @@ loadSettings().then(function() {
 			return response.end(data);
 		} else if (match = /^\/speedscope\/([\.\w-]*)$/.exec(request.uri)) {
 			return speedScopeHandler(request, response, match[1]);
+		} else if (match = /^\/perfetto\/([\.\w-/]*)$/.exec(request.uri)) {
+			return perfettoHandler(request, response, match[1]);
 		} else if (match = /^(.*)(\/save)$/.exec(request.uri)) {
 			return blobHandler(request, response, match[1], match[2]);
 		} else if (match = /^\/trace$/.exec(request.uri)) {
 			var data = trace();
-			response.writeHead(404, {"Content-Type": "application/json; charset=utf-8", "Content-Length": data.length.toString()});
+			response.writeHead(200, {"Content-Type": "application/json; charset=utf-8", "Content-Length": data.length.toString()});
 			return response.end(data);
 		} else if (request.uri == "/robots.txt") {
 			return blobHandler(request, response, null, request.uri);

core/index.html

@@ -13,7 +13,7 @@
 			<span id="title">Tilde Friends</span>
 			<a href="/">home</a>
 			<a href="#" onclick="event.preventDefault(); edit()">edit</a>
-			<a href="/trace">trace</a>
+			<a href="#" onclick="event.preventDefault(); trace()">trace</a>
 			<span id="status"></span>
 			<span id="login"></span>
 		</div>

deps/perfetto/index.html

@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en-us">
+<head>
+  <meta charset="utf-8">
+  <title>Perfetto UI</title>
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+  <link rel="shortcut icon" id="favicon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body data-perfetto_version='{"filled_by_build_js":"."}'>
+  <!--
+    Don't add any content here. The whole <body> is replaced by
+    frontend/index.ts when bootstrapping. This is only used for very early
+    error reporting.
+  -->
+  <style>
+  #app_load_failure {opacity:0;transition:opacity 1s ease;position:absolute;background:#080082;top:0;left:0;width:100%;height:100%;bottom:0;right:0;margin:0;opacity:0;user-select:text}
+  #app_load_failure > pre {color:#fff;position:absolute;margin:auto;white-space:pre-wrap;top:50%;transform:translate(0,-50%);max-width:90vw;width:880px;left:0;right:0;font-size:16px;line-height:30px;font-weight:700}
+  #app_load_failure > pre span {background:#fff;color:#080082;padding:2px}
+  #app_load_failure a {color:#fff}
+  #app_load { position: absolute; top: 0; left: 0; right:0; bottom: 0; background-color: #2c3e50;}
+  #app_load_spinner { margin: 30vh auto; width: 150px; height: 150px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: app_load_spin 1s ease-in-out infinite; }
+  @keyframes app_load_spin { to { transform: rotate(360deg); } }
+  </style>
+  <div id="app_load"><div id="app_load_spinner"></div></div>
+  <div id="app_load_failure">
+<pre>
+<span>Perfetto UI - An unrecoverable problem occurred</span>
+
+If you are seeing this message, something went wrong while loading the UI.
+Please file a bug (details below) and try these remediation steps:
+
+* Force-reload the page with Ctrl+Shift+R (Mac: Meta+Shift+R) or
+  Shift + click on the refresh button.
+
+* <a href="javascript:clearAllCaches();">Click here</a> to clear all the site storage and caches and reload the page.
+
+* Clear the site data and caches from devtools, following <a target="_blank" href="https://developers.google.com/web/tools/chrome-devtools/storage/cache#deletecache">these instructions</a>.
+
+* If neither of these work, you can use an old fallback instance hosted at
+  <a target="_blank" href="https://staging-dot-perfetto-ui.appspot.com">staging-dot-perfetto-ui.appspot.com</a>
+
+In any case, **FILE A BUG** attaching logs and screenshots from devtools.
+  Googlers:      <a href="http://go/perfetto-ui-bug" target="_blank">go/perfetto-ui-bug</a>
+  Non-googlers:  <a href="https://github.com/google/perfetto/issues/new" target="_blank">github.com/google/perfetto/issues/new</a>
+
+<div id=app_load_failure_err></div>
+Technical Information:
+<div id=app_load_failure_dbg></div>
+</pre>
+  </div>
+  <script type="text/javascript">
+    'use strict';
+    (function () {
+      const TIMEOUT_MS = 20000;
+      let errTimerId = undefined;
+
+      function errHandler(err) {
+        // Note: we deliberately don't clearTimeout(), which means that this
+        // handler is called also in the happy case when the UI loads. In that
+        // case, though, the onCssLoaded() in frontend/index.ts will empty the
+        // <body>, so |div| below will be null and this function becomes a
+        // no-op.
+        const div = document.getElementById('app_load_failure');
+        if (!div) return;
+        div.style.opacity ='1';
+        const errDom = document.getElementById('app_load_failure_err');
+        if (!errDom) return;
+        console.error(err);
+        errDom.innerText += `${err}\n`;
+        const storageJson = JSON.stringify(window.localStorage);
+        const dbg = document.getElementById('app_load_failure_dbg');
+        if (!dbg) return;
+        dbg.innerText = `LocalStorage: ${storageJson}\n`;
+        if (errTimerId !== undefined) clearTimeout(errTimerId);
+      }
+
+      // For the 'Click here to clear all caches'.
+      window.clearAllCaches = () => {
+        if (window.localStorage) window.localStorage.clear();
+        if (window.sessionStorage) window.sessionStorage.clear();
+        const promises = [];
+        if (window.caches) {
+          window.caches.keys().then(
+            keys => keys.forEach(k => promises.push(window.caches.delete(k))));
+        }
+        if (navigator.serviceWorker) {
+          navigator.serviceWorker.getRegistrations().then(regs => {
+            regs.forEach(reg => promises.push(reg.unregister()));
+          });
+        }
+        Promise.all(promises).then(() => window.location.reload());
+      }
+
+      // If the frontend doesn't come up, make the error page above visible.
+      errTimerId = setTimeout(() => errHandler('Timed out'), TIMEOUT_MS);
+      window.onerror = errHandler;
+      window.onunhandledrejection = errHandler;
+
+      const versionStr = document.body.dataset['perfetto_version'] || '{}';
+      const versionMap = JSON.parse(versionStr);
+      const channel = localStorage.getItem('perfettoUiChannel') || 'stable';
+
+      // The '.' below is a fallback for the case of opening a pinned version
+      // (e.g., ui.perfetto.dev/v1.2.3./). In that case, the index.html has no
+      // valid version map; we want to load the frontend from the same
+      // sub-directory directory, hence ./frontend_bundle.js.
+      const version = versionMap[channel] || versionMap['stable'] || '.';
+
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = version + '/frontend_bundle.js';
+      script.onerror = () => errHandler(`Failed to load ${script.src}`);
+
+      document.head.append(script);
+    })();
+  </script>
+</body>
+</html>

deps/perfetto/manifest.json

@@ -0,0 +1,49 @@
+{
+  "resources": {
+    "assets/MaterialIcons.woff2": "sha256-THB+Mug7hh5UeaNZ5yZK88pWnLWCNTJMm8MtHXhPdas=",
+    "assets/Raleway-Regular.woff2": "sha256-NlDei8Ldg1KwGqSenwriJQmOhqMdoysE2Bq7drWY0NY=",
+    "assets/Raleway-Thin.woff2": "sha256-ZRS1+Xh/dFZeWZi/dz8QMWg/8PYQHNdazsNX2oX8s70=",
+    "assets/Roboto-100.woff2": "sha256-IkglhK6qex103gcnkyRsZeOLQCrCMfOLsNkQKAJUMjA=",
+    "assets/Roboto-300.woff2": "sha256-M1MLAHBxKBqX55uqsT3ffMS53pQuvT4hIiSFczX3y5c=",
+    "assets/Roboto-400.woff2": "sha256-zEYyLVxNQdpEfyb3+nFIJ/LsmhEpaMEu9XNsdJSYXso=",
+    "assets/Roboto-500.woff2": "sha256-u0btB5w908Oa9QUbStpI8p9JFR2tT6IYEXutL9teYW8=",
+    "assets/RobotoCondensed-Light.woff2": "sha256-rELob/HQ/Hinhwpyz10bvwpQmoUtuh2Kvcc0iSsNSEQ=",
+    "assets/RobotoCondensed-Regular.woff2": "sha256-SaG04SlmRaovUTyHoOX+VqMFp+1njC9kmWMewfOzWFY=",
+    "assets/RobotoMono-Regular.woff2": "sha256-5DK7glyj4CZ9Yo+ttqjKY7DMo/xzRfFcfwgPeouCFl4=",
+    "assets/brand.png": "sha256-U34ng2vKNqzITxwkGF+PPLQiM6YdB5fvDdqyHPHqiLo=",
+    "assets/catapult_trace_viewer.html": "sha256-wLrVZQID01LZXrQygBUzpUlJcvHKCcoetygA1jrOjj8=",
+    "assets/catapult_trace_viewer.js": "sha256-tpvMkJYBPHRuDjmhKIiiuCVJzjgWa4LcIRxqsb3axf0=",
+    "assets/favicon.png": "sha256-0kge5x4UIrS2BqOEKGzZd9l7thrAOJsoiliiwpfn4aE=",
+    "assets/logo-128.png": "sha256-c+D898ryKYVcgkNLeV5Pf25yi/D/nIv0OIXwmsGv8ns=",
+    "assets/logo-3d.png": "sha256-cNpuyQnaU7JRoW+T+QldM5a5xk4HwKVffw45V2tiKe0=",
+    "assets/rec_atrace.png": "sha256-dIcpPtIGrnXSgJcwmLcsbwsg3ckX7msQ7b81ct3TnYc=",
+    "assets/rec_battery_counters.png": "sha256-ps4d9PYYa5i8n6wgMVauITCXGQrv+y7PBudZbZLnHyw=",
+    "assets/rec_board_voltage.png": "sha256-6w5TN3sBYJNevRdjj3ZkzhDDwMsUID/EsOyL/v+JA2c=",
+    "assets/rec_cpu_coarse.png": "sha256-gqTfM9LG4xSOLTC+auuWvy5ovTLbVG6wb4c9KP4dZSs=",
+    "assets/rec_cpu_fine.png": "sha256-2ncaNBPU78Waf+H1VHr8qfcwhfSrRW+2yIBW3FVShLE=",
+    "assets/rec_cpu_freq.png": "sha256-0GNig+HKE0ag4KNmpOZvh+12teGKnWpoyGVYyzeYSrA=",
+    "assets/rec_cpu_voltage.png": "sha256-ap0/YZ0p0Q3Py6GoOJqrb2mPg8i2H9/09JpotIWZYr0=",
+    "assets/rec_frame_timeline.png": "sha256-epQ2K8lt+sMTX7dN0iHEInzNdmJrVpfZeEGeSuZRM7w=",
+    "assets/rec_ftrace.png": "sha256-+SxCOHlHkJw84Ev/oJxa5IcyHjRJEgCHtJVj4YNNC7I=",
+    "assets/rec_gpu_mem_total.png": "sha256-M4ggVqemJEoIB14Zz0/wFL7nORk7B06q4pIM6u1U8vo=",
+    "assets/rec_java_heap_dump.png": "sha256-wMPAmG/jj8mZUeHj/1RLxEInic0jLm4osHKUPicLoKc=",
+    "assets/rec_lmk.png": "sha256-i5s7gC4FPJF898aRvxew1ob0qp77Ts7YE/I65FSnsTg=",
+    "assets/rec_logcat.png": "sha256-saca16fp7AqXCVCEJqZav1/h/FuiEZJOl0avdhBjUdM=",
+    "assets/rec_long_trace.png": "sha256-IAj0+L2YJWw/uW1mNwf0bSQF269HqNlkwowapWbRsvg=",
+    "assets/rec_mem_hifreq.png": "sha256-KrITVZhp3/D+MetAFyY31NC68kJsdgu1DyPiZQksBU0=",
+    "assets/rec_meminfo.png": "sha256-tj+d95JJdPLYN0jUgYuT6xtZe2oGvuI09yTT9iKi1ig=",
+    "assets/rec_native_heap_profiler.png": "sha256-u7omLys+opSmE/DJZjSzSoJdKh0zcsg9LxWo9IhBg9Q=",
+    "assets/rec_one_shot.png": "sha256-CLJP9CsfHBUSEFFfn/mXVVZLFjKmLJVSqVYPxPHw56U=",
+    "assets/rec_ps_stats.png": "sha256-KvVjhTipkSR3xOYFPxcyKOpO+NP220BTRmhr8h1F4gM=",
+    "assets/rec_ring_buf.png": "sha256-IddHPrwbieCGZctKKbAHW2/1+3VQE3qXs1QwlkyoGKc=",
+    "assets/rec_syscalls.png": "sha256-4ePrwW8K9bI4VLHtZU5CyE0HXuMVn+DrInWejtWtQ0c=",
+    "assets/rec_vmstat.png": "sha256-NPpW3mqNqAU9gLehEMmEJa0qFEPjIWTFgFb+shQzxoc=",
+    "controller_bundle.js": "sha256-avE2ius8YlS3UuzIHa3nimc6sOzFX+8WxQWFEyBHaqQ=",
+    "engine_bundle.js": "sha256-OCWg/5vC4fOBtfSYf1xb1sGmYDnxQ9OrRexMdhh7gak=",
+    "frontend_bundle.js": "sha256-B5KXKoHrKRxyAFj2a5lR+yCvWUT0sKlTimbfINzeCx8=",
+    "perfetto.css": "sha256-ag94ZSH5vDLpe2e+whhUAIPfg2bDagNC7SM8H4jutzw=",
+    "trace_processor.wasm": "sha256-HeCkTUQ1D+Px2rfpvZsuJYhN9vp/0Q+Gi1aaAmL9+Pc=",
+    "trace_to_text.wasm": "sha256-dlh53YktOXjFIDFpL4eloLZchuwkyS1M5mibLH0R+Bs=",
+    "traceconv_bundle.js": "sha256-MVNshYP4As6LV8kcXRdCkPbg08ME7WeSDoUCIiB9uqM="
+  }
+}

src/file.js.c

@@ -48,7 +48,7 @@ void tf_file_register(JSContext* context)
 	JS_FreeValue(context, global);
 }
 
-static const int k_file_read_max = 4 * 1024 * 1024;
+static const int k_file_read_max = 8 * 1024 * 1024;
 
 static void _file_async_close_callback(uv_fs_t* req)
 {