static/catapult.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="../catapult/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../catapult/polymer/polymer.html" />

    <link type="text/css" rel="stylesheet" href="../catapult/main.css" />
    <link type="text/css" rel="stylesheet" href="../catapult/status_view.css" />
    <link type="text/css" rel="stylesheet" href="../catapult/events_view.css" />
    <link
      type="text/css"
      rel="stylesheet"
      href="../catapult/timeline_view.css"
    />
    <link type="text/css" rel="stylesheet" href="../catapult/tab_views.css" />

    <link
      type="text/css"
      rel="stylesheet"
      href="../../node_modules/@blueprintjs/core/lib/css/blueprint.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="../catapult/sleuth-overrides.css"
    />

    <link rel="import" href="../catapult/netlog_viewer.html" />

    <script>
      function load(payload) {
        try {
          console.log(`Attempting to load`, payload);
          return LogUtil.loadLogFile(payload.content, payload.fileName);
        } catch (error) {
          console.log(`Tried to load, but failed. Deferring.`);
          setTimeout(() => load(payload), 250);
        }
      }

      // Since we're on a file:// protocol, we can't just
      // call window.myMethod() from Sleuth and have to send
      // it as a cross-origin message. This will help.
      window.addEventListener('message', ({ data }) => {
        if (!data) return;

        const { instruction, payload } = data;

        if (instruction === 'load') {
          return load(payload);
        }

        if (instruction === 'dark-mode') {
          console.log(`Setting dark mode to`, payload);
          if (!!payload) {
            document.body.classList.add('bp3-dark');
          } else {
            document.body.classList.remove('bp3-dark');
          }
        }
      });
    </script>
  </head>
  <body class="bp3-dark">
    <netlog-viewer></netlog-viewer>
  </body>
</html>