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 ...@@ -3,6 +3,10 @@ Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. --> found in the LICENSE file. -->
<template id="details-selection-template"> <template id="details-selection-template">
<style> <style>
#dataSelectionSection {
display: none;
}
.box { .box {
border-left: dashed 1px #666666; border-left: dashed 1px #666666;
border-right: dashed 1px #666666; border-right: dashed 1px #666666;
...@@ -56,48 +60,51 @@ found in the LICENSE file. --> ...@@ -56,48 +60,51 @@ found in the LICENSE file. -->
} }
</style> </style>
<h2>Data selection</h2> <section id="dataSelectionSection">
<ul> <h2>Data selection</h2>
<li> <ul>
<label for="isolate-select"> <li>
Isolate <label for="isolate-select">
</label> Isolate
<select id="isolate-select"> </label>
<option>No data</option> <select id="isolate-select">
</select> <option>No data</option>
</li> </select>
<li> </li>
<label for="dataset-select"> <li>
Data set <label for="dataset-select">
</label> Data set
<select id="dataset-select"> </label>
<option>No data</option> <select id="dataset-select">
</select> <option>No data</option>
</li> </select>
<li> </li>
<input type="checkbox" id="merge-categories" checked=checked /> <li>
<label for="merge-categories"> <input type="checkbox" id="merge-categories" checked=checked />
Merge categories <label for="merge-categories">
</label> Merge categories
</li> </label>
<li> </li>
<label for="gc-select"> <li>
Garbage collection (at a specific time in ms) <label for="gc-select">
</label> Garbage collection (at a specific time in ms)
<select id="gc-select"> </label>
<option>No data</option> <select id="gc-select">
</select> <option>No data</option>
</li> </select>
<li> </li>
<input id="category-filter" type="text" value="0" disabled="disabled" />KB <li>
<button id="category-filter-btn" disabled="disabled">Filter categories with less memory</button> <input id="category-filter" type="text" value="0" disabled="disabled" />KB
</li> <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>
</li> <button id="csv-export-btn" disabled="disabled">Export selection as CSV</button>
</ul> </li>
</ul>
<div id="categories"></div> <div id="categories"></div>
</section>
</template> </template>
<script type="text/javascript" src="categories.js"></script> <script type="text/javascript" src="categories.js"></script>
<script type="text/javascript" src="details-selection.js"></script> <script type="text/javascript" src="details-selection.js"></script>
\ No newline at end of file
tools/heap-stats/details-selection.js
View file @ 2ead8034
...@@ -101,6 +101,7 @@ class DetailsSelection extends HTMLElement { ...@@ -101,6 +101,7 @@ class DetailsSelection extends HTMLElement {
this.resetUI(true); this.resetUI(true);
this.populateIsolateSelect(); this.populateIsolateSelect();
this.handleIsolateChange(); this.handleIsolateChange();
this.$('#dataSelectionSection').style.display = 'block';
} }
populateIsolateSelect() { populateIsolateSelect() {
......
tools/heap-stats/index.html
View file @ 2ead8034
...@@ -8,10 +8,10 @@ found in the LICENSE file. --> ...@@ -8,10 +8,10 @@ found in the LICENSE file. -->
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>V8 Heap Statistics</title> <title>V8 Heap Statistics</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<script type="text/javascript" <script
src="https://www.gstatic.com/charts/loader.js"></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" src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.min.js"
integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM=" integrity="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
...@@ -21,8 +21,7 @@ found in the LICENSE file. --> ...@@ -21,8 +21,7 @@ found in the LICENSE file. -->
<link rel="import" href="histogram-viewer.html"> <link rel="import" href="histogram-viewer.html">
<link rel="import" href="trace-file-reader.html"> <link rel="import" href="trace-file-reader.html">
<style type="text/css"> <style>
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin-left: 5%; margin-left: 5%;
...@@ -30,7 +29,7 @@ body { ...@@ -30,7 +29,7 @@ body {
} }
</style> </style>
<script type="text/javascript"> <script>
'use strict'; 'use strict';
...@@ -70,6 +69,11 @@ function globalSelectionChangedA(e) { ...@@ -70,6 +69,11 @@ function globalSelectionChangedA(e) {
<body> <body>
<trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader> <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> <h1>V8 Heap Statistics</h1>
<p>Visualize object statistics that have been gathered using</p> <p>Visualize object statistics that have been gathered using</p>
<ul> <ul>
...@@ -86,9 +90,6 @@ function globalSelectionChangedA(e) { ...@@ -86,9 +90,6 @@ function globalSelectionChangedA(e) {
requiring <a requiring <a
href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
</p> </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> </body>
</html> </html>
tools/heap-stats/trace-file-reader.html
View file @ 2ead8034
...@@ -10,18 +10,66 @@ found in the LICENSE file. --> ...@@ -10,18 +10,66 @@ found in the LICENSE file. -->
text-align: center; text-align: center;
border: solid 1px #000000; border: solid 1px #000000;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
}
.loading #fileReader {
cursor: wait;
} }
#fileReader > input { #fileReader > input {
display: none; 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> </style>
<div id="fileReader">
<span id="label"> <section id="fileReaderSection">
Drag and drop a trace file into this area, or click to choose from disk. <div id="fileReader">
</span> <span id="label">
<input id="file" type="file" name="file" /> Drag and drop a trace file into this area, or click to choose from disk.
</div> </span>
<input id="file" type="file" name="file" />
</div>
<div id="loader">
<div id="spinner"></div>
</div>
</section>
</template> </template>
<script type="text/javascript" src="model.js"></script> <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 { ...@@ -23,6 +23,10 @@ class TraceFileReader extends HTMLElement {
return this.shadowRoot.querySelector(id); return this.shadowRoot.querySelector(id);
} }
get section() {
return this.$('#fileReaderSection');
}
updateLabel(text) { updateLabel(text) {
this.$('#label').innerText = text; this.$('#label').innerText = text;
} }
...@@ -50,6 +54,7 @@ class TraceFileReader extends HTMLElement { ...@@ -50,6 +54,7 @@ class TraceFileReader extends HTMLElement {
return; return;
} }
this.section.className = 'loading';
const reader = new FileReader(); const reader = new FileReader();
if (['application/gzip', 'application/x-gzip'].includes(file.type)) { if (['application/gzip', 'application/x-gzip'].includes(file.type)) {
...@@ -57,8 +62,10 @@ class TraceFileReader extends HTMLElement { ...@@ -57,8 +62,10 @@ class TraceFileReader extends HTMLElement {
try { try {
const textResult = pako.inflate(e.target.result, {to: 'string'}); const textResult = pako.inflate(e.target.result, {to: 'string'});
this.processRawText(file, textResult); this.processRawText(file, textResult);
this.section.className = 'success';
} catch (err) { } catch (err) {
console.error(err); console.error(err);
this.section.className = 'failure';
} }
}; };
reader.readAsArrayBuffer(file); 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