Skip to content

V
V8
Commit 2ead8034 authored by Camillo Bruni's avatar Camillo Bruni Committed by Commit Bot
Browse files
Options

[tools] Add loader to heap stats visualizer 

- Add busy loader loop
- Drop type attributes as per suggestion
- Hide details view until loading data
- Move instruction below details section

Bug: v8:7266
Change-Id: If37699243e935a4918a4a7f7968553c2ba490c67
No-try: true
Reviewed-on: https://chromium-review.googlesource.com/916006
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: 's avatarMichael Lippautz <mlippautz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#51283}
parent e0fd4277
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 58 deletions
tools/heap-stats/details-selection.html
View file @ 2ead8034
......@@ -3,6 +3,10 @@ Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<template id="details-selection-template">
<style>
#dataSelectionSection {
display: none;
}
.box {
border-left: dashed 1px #666666;
border-right: dashed 1px #666666;
......@@ -56,48 +60,51 @@ found in the LICENSE file. -->
}
</style>
<h2>Data selection</h2>
<ul>
<li>
<label for="isolate-select">
Isolate
</label>
<select id="isolate-select">
<option>No data</option>
</select>
</li>
<li>
<label for="dataset-select">
Data set
</label>
<select id="dataset-select">
<option>No data</option>
</select>
</li>
<li>
<input type="checkbox" id="merge-categories" checked=checked />
<label for="merge-categories">
Merge categories
</label>
</li>
<li>
<label for="gc-select">
Garbage collection (at a specific time in ms)
</label>
<select id="gc-select">
<option>No data</option>
</select>
</li>
<li>
<input id="category-filter" type="text" value="0" disabled="disabled" />KB
<button id="category-filter-btn" disabled="disabled">Filter categories with less memory</button>
</li>
<li>
<button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
</li>
</ul>
<section id="dataSelectionSection">
<h2>Data selection</h2>
<ul>
<li>
<label for="isolate-select">
Isolate
</label>
<select id="isolate-select">
<option>No data</option>
</select>
</li>
<li>
<label for="dataset-select">
Data set
</label>
<select id="dataset-select">
<option>No data</option>
</select>
</li>
<li>
<input type="checkbox" id="merge-categories" checked=checked />
<label for="merge-categories">
Merge categories
</label>
</li>
<li>
<label for="gc-select">
Garbage collection (at a specific time in ms)
</label>
<select id="gc-select">
<option>No data</option>
</select>
</li>
<li>
<input id="category-filter" type="text" value="0" disabled="disabled" />KB
<button id="category-filter-btn" disabled="disabled">Filter categories with less memory</button>
</li>
<li>
<button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
</li>
</ul>
<div id="categories"></div>
<div id="categories"></div>
</section>
</template>
<script type="text/javascript" src="categories.js"></script>
<script type="text/javascript" src="details-selection.js"></script>
\ No newline at end of file
<script type="text/javascript" src="details-selection.js"></script>
tools/heap-stats/details-selection.js
View file @ 2ead8034
......@@ -101,6 +101,7 @@ class DetailsSelection extends HTMLElement {
this.resetUI(true);
this.populateIsolateSelect();
this.handleIsolateChange();
this.$('#dataSelectionSection').style.display = 'block';
}
populateIsolateSelect() {
......
tools/heap-stats/index.html
View file @ 2ead8034
......@@ -8,10 +8,10 @@ found in the LICENSE file. -->
<head>
<meta charset="UTF-8">
<title>V8 Heap Statistics</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script type="text/javascript"
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<script
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
crossorigin="anonymous"></script>
......@@ -21,8 +21,7 @@ found in the LICENSE file. -->
<link rel="import" href="histogram-viewer.html">
<link rel="import" href="trace-file-reader.html">
<style type="text/css">
<style>
body {
font-family: 'Roboto', sans-serif;
margin-left: 5%;
......@@ -30,7 +29,7 @@ body {
}
</style>
<script type="text/javascript">
<script>
'use strict';
......@@ -70,6 +69,11 @@ function globalSelectionChangedA(e) {
<body>
<trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
<details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
<global-timeline id="global-timeline"></global-timeline>
<histogram-viewer id="histogram-viewer"></histogram-viewer>
<h1>V8 Heap Statistics</h1>
<p>Visualize object statistics that have been gathered using</p>
<ul>
......@@ -86,9 +90,6 @@ function globalSelectionChangedA(e) {
requiring <a
href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
</p>
<details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
<global-timeline id="global-timeline"></global-timeline>
<histogram-viewer id="histogram-viewer"></histogram-viewer>
</body>
</html>
tools/heap-stats/trace-file-reader.html
View file @ 2ead8034
......@@ -10,18 +10,66 @@ found in the LICENSE file. -->
text-align: center;
border: solid 1px #000000;
border-radius: 5px;
cursor: pointer;
}
.loading #fileReader {
cursor: wait;
}
#fileReader > input {
display: none;
}
#loader {
display: none;
}
.loading #loader{
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
#spinner {
position: absolute;
width: 100px;
height: 100px;
top: 40%;
left: 50%;
margin-left: -50px;
border: 30px solid #000;
border-top: 30px solid #36E;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
};
100% {
transform: rotate(360deg);
};
}
</style>
<div id="fileReader">
<span id="label">
Drag and drop a trace file into this area, or click to choose from disk.
</span>
<input id="file" type="file" name="file" />
</div>
<section id="fileReaderSection">
<div id="fileReader">
<span id="label">
Drag and drop a trace file into this area, or click to choose from disk.
</span>
<input id="file" type="file" name="file" />
</div>
<div id="loader">
<div id="spinner"></div>
</div>
</section>
</template>
<script type="text/javascript" src="model.js"></script>
<script type="text/javascript" src="trace-file-reader.js"></script>
<script src="trace-file-reader.js"></script>
tools/heap-stats/trace-file-reader.js
View file @ 2ead8034
......@@ -23,6 +23,10 @@ class TraceFileReader extends HTMLElement {
return this.shadowRoot.querySelector(id);
}
get section() {
return this.$('#fileReaderSection');
}
updateLabel(text) {
this.$('#label').innerText = text;
}
......@@ -50,6 +54,7 @@ class TraceFileReader extends HTMLElement {
return;
}
this.section.className = 'loading';
const reader = new FileReader();
if (['application/gzip', 'application/x-gzip'].includes(file.type)) {
......@@ -57,8 +62,10 @@ class TraceFileReader extends HTMLElement {
try {
const textResult = pako.inflate(e.target.result, {to: 'string'});
this.processRawText(file, textResult);
this.section.className = 'success';
} catch (err) {
console.error(err);
this.section.className = 'failure';
}
};
reader.readAsArrayBuffer(file);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment