v8/tools/system-analyzer/index.html
Camillo Bruni c84213ef0f [tools] System-analyzer improvements
- Fix landing page
- Introduce and use SelectRelatedEvent for centralising the logic of
  finding and showing related LogEntries. It also clears the selection
  of all list panels if there are no related entries.
- Add "select related" button to the script-panel to show events only
  from the currently selected script
- Add selection type tabs for the map-panel
- Fix transition colors for map-transitions view
- Introduce separate map-transition view for the currently selected Map

Bug: v8:10644
Change-Id: I4199a8332bab2518d98078712ed5ce9a8f1dc19e
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2599555
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71849}
2020-12-21 13:26:08 +00:00

244 lines
6.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="./view/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>
.theme-switch {
display: inline-block;
height: 16px;
position: relative;
width: 38px;
vertical-align: middle;
}
.theme-switch input {
display: none;
}
.slider {
background-color: var(--primary-color);
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
border-radius: 34px;
}
.slider:before {
background-color: var(--surface-color);
position: absolute;
height: 10px;
width: 10px;
bottom: 3px;
content: "";
left: 4px;
border-radius: 50%;
}
input:checked+.slider:before {
transform: translateX(20px);
}
#container.initial {
display: none;
}
#timeline-panel {
width: 100%;
}
.panels {
display: grid;
align-content: center;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-auto-flow: row dense;
grid-gap: 10px;
margin-top: 10px;
}
dt::after {
content: ":";
}
</style>
</head>
<body>
<tool-tip id="tool-tip"></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 id="map-track" title="Map"></timeline-track>
<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-track id="api-track" title="API"></timeline-track>
</timeline-panel>
<div class="panels">
<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>
<list-panel id="api-list" title="API Events"></list-panel>
<source-panel id="source-panel"></source-panel>
<code-panel id="code-panel"></code-panel>
</div>
</section>
<div class="panels">
<section id="settings" class="panel">
<h2>Settings</h2>
<div class="panelBody">
<span>Theme:</span>
<label class="theme-switch" for="theme-switch-input">
<input type="checkbox" id="theme-switch-input" >
<div class="slider"></div>
</label>
</div>
</section>
<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>--trace-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_trace_ic">
<code>--trace-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_api">
<code>--log-api</code>
</a>
</dt>
<dd>Log various API uses.</dd>
</dl>
<h3>Keyboard Shortcuts for Navigation</h3>
<dl>
<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>