speedscope/assets/index.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>