<!DOCTYPE html>
<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Indicium</title>
  <!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->

  <link rel="modulepreload" href="./helper.mjs" >
  <link rel="modulepreload" href="./view/log-file-reader.mjs" >
  <link rel="modulepreload" href="./view/helper.mjs" >
  <link rel="preload" href="../js/log-file-reader-template.html" as="fetch" crossorigin="anonymous">
  <script type="module">
    // Force instatiating the log-reader before anything else.
    import "./view/log-file-reader.mjs";
    // Delay loading of the main App
    (async function() {
      let module = await import('./index.mjs');
      globalThis.app = new module.App();
    })();
  </script>
  <link rel="stylesheet" type="text/css" href="./index.css">
  <style>
    #container.initial {
      display: none;
    }

    #timeline-panel {
      width: 100%;
    }

    .panels {
      display: grid;
      align-content: center;
      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
      grid-auto-flow: row dense;
      grid-gap: 10px;
      margin-top: 10px;
    }

    dt::after  {
      content: ":";
    }
  </style>
</head>

<body>
  <tool-tip id="tool-tip" style="will-change: transform"></tool-tip>

  <section id="file-reader">
    <log-file-reader id="log-file-reader"></log-file-reader>
  </section>

  <section id="container" class="initial">
    <timeline-panel id="timeline-panel">
      <timeline-track-tick id="tick-track" title="Samples"></timeline-track-tick>
      <timeline-track-timer id="timer-track" title="Timers"></timeline-track-timer>
      <timeline-track-map id="map-track" title="Map"></timeline-track-map>
      <timeline-track id="ic-track" title="IC"></timeline-track>
      <timeline-track id="deopt-track" title="Deopt"></timeline-track>
      <timeline-track id="code-track" title="Code"></timeline-track>
    </timeline-panel>

    <div class="panels">
      <script-panel id="script-panel"></script-panel>
      <code-panel id="code-panel"></code-panel>
      <map-panel id="map-panel"></map-panel>
      <list-panel id="ic-list" title="IC List">
        <div class="legend">
          <h3>Legend</h3>
          <dl>
            <dt>0</dt>
            <dd>uninitialized</dd>
            <dt>X</dt>
            <dd>no feedback</dd>
            <dt>1</dt>
            <dd>monomorphic</dd>
            <dt>^</dt>
            <dd>recompute handler</dd>
            <dt>P</dt>
            <dd>polymorphic</dd>
            <dt>N</dt>
            <dd>megamorphic</dd>
            <dt>G</dt>
            <dd>generic</dd>
          </dl>
        </div>
      </list-panel>
      <list-panel id="map-list" title="Map Events"></list-panel>
      <list-panel id="deopt-list" title="Deopt Events"></list-panel>
      <list-panel id="code-list" title="Code Events"></list-panel>
      <profiler-panel id="profiler-panel"></profiler-panel>
    </div>
  </section>

  <div class="panels">
    <section id="instructions" class="panel">
      <h2>Instructions</h2>
      <div class="panelBody">
        <p>
          Unified web interface to analyse runtime information stored in the v8 log.
        </p>
        For generating a v8.log file from <a href="https://v8.dev/docs/build">d8</a>:
        <ul>
          <li>
            <code>/path/do/d8 $LOG_FLAGS $FILE</code>
          </li>
        </ul>
        For generating a v8.log file from Chrome:
        <ul>
          <li>
            <code>/path/to/chrome --user-data-dir=/var/tmp/chr$RANDOM --no-sandbox
            --js-flags='$LOG_FLAGS’
            $WEBSITE_URL</code>
          </li>
        </ul>

        <h3><code>LOG_FLAGS</code>:</h3>
        <dl class="d8-options">
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_all">
              <code>--log-all</code>
            </a>
          </dt>
          <dd>Enable all V8 logging options.</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_trace_maps">
              <code>--log-maps</code>
            </a>
          </dt>
          <dd>
              Log <a href="https://v8.dev/blog/fast-properties">Maps</a>
          </dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_ic">
              <code>--log-ic</code>
            </a>
          </dt>
          <dd>
            Log <a href="https://mathiasbynens.be/notes/shapes-ics">ICs</a>
          </dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_source_code">
              <code>--log-source-code</code>
            </a>
          </dt>
          <dd>Log source code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_code_disassemble">
              <code>--log-code-disassemble</code>
            </a>
          </dt>
          <dd>Log detailed generated generated code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_code">
              <code>--log-code</code>
            </a>
          </dt>
          <dd>Log details about deoptimized code</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_log_deopt">
              <code>--log-deopt</code>
            </a>
          </dt>
          <dd>Log various API uses.</dd>
          <dt>
            <a href="https://source.chromium.org/search?q=FLAG_prof">
              <code>--prof</code>
            </a>
          </dt>
          <dd>Log ticks from the sampling profiler.</dd>
        </dl>

        <h3>Keyboard Shortcuts for Navigation</h3>
        <dl>
          <dt><kbd>A</kbd></dt>
          <dd>Scroll left</dd>

          <dt><kbd>D</kbd></dt>
          <dd>Sroll right</dd>

          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Up</kbd></dt>
          <dd>Follow Map transition forward (first child)</dd>

          <dt><kbd>SHIFT</kbd> + <kbd>Arrow Down</kbd></dt>
          <dd>Follow Map transition backwards</dd>

          <dt><kbd>Arrow Up</kbd></dt>
          <dd>Go to previous Map chunk</dd>

          <dt><kbd>Arrow Down</kbd></dt>
          <dd>Go to next Map in chunk</dd>

          <dt><kbd>Arrow Left</kbd></dt>
          <dd>Go to previous chunk</dd>

          <dt><kbd>Arrow Right</kbd></dt>
          <dd>Go to next chunk</dd>

          <dt><kbd>+</kbd></dt>
          <dd>Timeline zoom in</dd>

          <dt><kbd>-</kbd></dt>
          <dd>Timeline zoom out</dd>
        </dl>
      </div>
    </section>
  </div>
</body>
</html>