mirror of
https://github.com/jlfwong/speedscope.git
synced 2024-11-26 07:35:55 +03:00
608006232f
While it was kind of nice having everything at the top level, the number of files is now getting a bit unwieldy and hard to understand, so I took a stab at organizing the directories without introducing too much nesting. Test Plan: - Ran `npm run serve` to ensure that local builds still work - Ran `npm run prepack` then `open dist/release/index.html` to ensure that release builds still work - Ran `scripts/deploy.sh` to ensure that the deployed version of the site will still work when I eventually redeploy - Ran `npm run jest` to ensure that tests still work correctly
172 lines
5.7 KiB
HTML
172 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>speedscope</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
|
|
<script>
|
|
// https://github.com/evanw/webgl-recorder
|
|
false && (function () {
|
|
var getContext = HTMLCanvasElement.prototype.getContext;
|
|
var requestAnimationFrame = window.requestAnimationFrame;
|
|
var frameSincePageLoad = 0;
|
|
|
|
function countFrames() {
|
|
frameSincePageLoad++;
|
|
requestAnimationFrame(countFrames);
|
|
}
|
|
|
|
window.requestAnimationFrame = function () {
|
|
return requestAnimationFrame.apply(window, arguments);
|
|
};
|
|
|
|
HTMLCanvasElement.prototype.getContext = function (type) {
|
|
var canvas = this;
|
|
var context = getContext.apply(canvas, arguments);
|
|
|
|
if (type === 'webgl' || type === 'experimental-webgl') {
|
|
var oldWidth = canvas.width;
|
|
var oldHeight = canvas.height;
|
|
var oldFrameCount = frameSincePageLoad;
|
|
var trace = [];
|
|
var variables = {};
|
|
var fakeContext = {
|
|
trace: trace,
|
|
compileTrace: compileTrace,
|
|
downloadTrace: downloadTrace,
|
|
};
|
|
|
|
trace.push(' gl.canvas.width = ' + oldWidth + ';');
|
|
trace.push(' gl.canvas.height = ' + oldHeight + ';');
|
|
|
|
function compileTrace() {
|
|
var text = 'function* render(gl) {\n';
|
|
text += ' // Recorded using https://github.com/evanw/webgl-recorder\n';
|
|
for (var key in variables) {
|
|
text += ' var ' + key + 's = [];\n';
|
|
}
|
|
text += trace.join('\n');
|
|
text += '\n}\n';
|
|
return text;
|
|
}
|
|
|
|
function downloadTrace() {
|
|
var text = compileTrace();
|
|
var link = document.createElement('a');
|
|
link.href = URL.createObjectURL(new Blob([text], { type: 'application/javascript' }));
|
|
link.download = 'trace.js';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
function getVariable(value) {
|
|
if (value instanceof WebGLActiveInfo ||
|
|
value instanceof WebGLBuffer ||
|
|
value instanceof WebGLFramebuffer ||
|
|
value instanceof WebGLProgram ||
|
|
value instanceof WebGLRenderbuffer ||
|
|
value instanceof WebGLShader ||
|
|
value instanceof WebGLShaderPrecisionFormat ||
|
|
value instanceof WebGLTexture ||
|
|
value instanceof WebGLUniformLocation) {
|
|
var name = value.constructor.name;
|
|
var list = variables[name] || (variables[name] = []);
|
|
var index = list.indexOf(value);
|
|
|
|
if (index === -1) {
|
|
index = list.length;
|
|
list.push(value);
|
|
}
|
|
|
|
return name + 's[' + index + ']';
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
console.timeStamp('start')
|
|
var start = performance.now()
|
|
for (var key in context) {
|
|
var value = context[key];
|
|
|
|
if (typeof value === 'function') {
|
|
fakeContext[key] = function (key, value) {
|
|
return function () {
|
|
trace.push(`// ${performance.now() - start}`)
|
|
var result = value.apply(context, arguments);
|
|
var args = [];
|
|
|
|
if (frameSincePageLoad !== oldFrameCount) {
|
|
oldFrameCount = frameSincePageLoad;
|
|
trace.push(' yield;');
|
|
}
|
|
|
|
if (canvas.width !== oldWidth || canvas.height !== oldHeight) {
|
|
oldWidth = canvas.width;
|
|
oldHeight = canvas.height;
|
|
trace.push(' gl.canvas.width = ' + oldWidth + ';');
|
|
trace.push(' gl.canvas.height = ' + oldHeight + ';');
|
|
}
|
|
|
|
for (var i = 0; i < arguments.length; i++) {
|
|
var arg = arguments[i];
|
|
|
|
if (typeof arg === 'number' || typeof arg === 'boolean' || typeof arg === 'string' || arg === null) {
|
|
args.push(JSON.stringify(arg));
|
|
}
|
|
|
|
else if (ArrayBuffer.isView(arg)) {
|
|
args.push('new ' + arg.constructor.name + '([' + Array.prototype.slice.call(arg) + '])');
|
|
}
|
|
|
|
else {
|
|
var variable = getVariable(arg);
|
|
if (variable !== null) {
|
|
args.push(variable);
|
|
}
|
|
|
|
else {
|
|
console.log('unsupported value:', arg);
|
|
args.push('null');
|
|
}
|
|
}
|
|
}
|
|
|
|
var text = 'gl.' + key + '(' + args.join(', ') + ');';
|
|
var variable = getVariable(result);
|
|
if (variable !== null) text = variable + ' = ' + text;
|
|
trace.push(' ' + text);
|
|
|
|
return result;
|
|
};
|
|
}(key, value);
|
|
}
|
|
|
|
else {
|
|
fakeContext[key] = value;
|
|
}
|
|
}
|
|
|
|
return fakeContext;
|
|
}
|
|
|
|
return context;
|
|
};
|
|
|
|
countFrames();
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="reset.css">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
</head>
|
|
|
|
<body>
|
|
<script src="../src/speedscope.tsx"></script>
|
|
</body>
|
|
|
|
</html> |