<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="report.css">
  <title>Oh no! Reflow! Report!</title>
</head>
<body>
  <div id="buttons">
    <button id="save">Save report</button><button id="load">Load report</button><button id="reset">Reset</button>
    <input type="file" id="load-input" accept="application/json" style="display:none">
  </div>

  <div id="status">Fetching reports...</div>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Reflow time</th>
        <th>Number of frames (coming soon!)</th>
        <th>Stack</th>
        <th>File a bug</th>
      </tr>
    </thead>
    <tbody id="table-body">
    </tbody>
  </table>

  <footer>
    <a id="native-reflow" name="note-on-native-reflow">
      <p>
        <strong>Note:</strong> Native reflows are caused by our C++ layer, and we can't show stacks for those here. Consider attaching a debugger to the main process: the Reflow Observer API WebExtension Experiment will hit a breakpoint automatically if it detects an uninterruptible reflow with a debugger attached.
      </p>
    </a>
  </footer>
</body>

<script src="report.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="report.css">
  <link rel="shortcut icon" href="/icons/toolbar_on.png">
  <title>Oh no! Reflow! Report!</title>
</head>
<body>
  <div id="buttons">
    <button id="save">Save report</button><button id="load">Load report</button><button id="reset">Reset</button>
    <input type="file" id="load-input" accept="application/json" style="display:none">
  </div>

  <div id="status">Fetching reports...</div>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Reflow time</th>
        <th>Number of frames (coming soon!)</th>
        <th>Stack</th>
        <th>File a bug</th>
      </tr>
    </thead>
    <tbody id="table-body">
    </tbody>
  </table>

  <footer>
    <a id="native-reflow" name="note-on-native-reflow">
      <p>
        <strong>Note:</strong> Native reflows are caused by our C++ layer, and we can't show stacks for those here. Consider attaching a debugger to the main process: the Reflow Observer API WebExtension Experiment will hit a breakpoint automatically if it detects an uninterruptible reflow with a debugger attached.
      </p>
    </a>
  </footer>
</body>

<script src="report.js"></script>
</html>

Add a favicon for easier tab-findage.
Add a favicon for easier tab-findage.
