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>