Skip to content

V
V8
Commit a57270cf authored by Zeynep Cankara's avatar Zeynep Cankara Committed by Commit Bot
Browse files
Options

[tools][system-analyzer] Format sources and relative css import 

Action items:
* Replace alls css @import with link tags.
* Format all sources in system-analyzer/*.

Bug: v8:10644

Change-Id: I6354cf7b0ed2aca8cdab4888cf9d504a1d963b50
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2367869
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: 's avatarCamillo Bruni <cbruni@chromium.org>
Reviewed-by: 's avatarSathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69545}
parent 76be833e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 408 deletions
tools/profile.js
View file @ a57270cf
This diff is collapsed.
tools/system-analyzer/event.mjs
View file @ a57270cf
...@@ -10,12 +10,12 @@ class Event { ...@@ -10,12 +10,12 @@ class Event {
this.#time = time; this.#time = time;
this.#type = type; this.#type = type;
} }
get time(){ get time() {
return this.#time; return this.#time;
} }
get type(){ get type() {
return this.#type; return this.#type;
} }
} }
export {Event}; export { Event };
tools/system-analyzer/ic-model.mjs
View file @ a57270cf
...@@ -51,7 +51,7 @@ export class Group { ...@@ -51,7 +51,7 @@ export class Group {
group.percentage = Math.round(group.count / length * 100 * 100) / 100; group.percentage = Math.round(group.count / length * 100 * 100) / 100;
result.push(group); result.push(group);
} }
result.sort((a, b) => {return b.count - a.count}); result.sort((a, b) => { return b.count - a.count });
return result; return result;
} }
......
tools/system-analyzer/ic-panel-template.html
View file @ a57270cf
<!-- Copyright 2020 the V8 project authors. All rights reserved. <!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be 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. -->
<style>
@import "./index.css";
.count { <head>
text-align: right; <link href="./index.css" rel="stylesheet">
width: 5em; </head>
} <style>
.count {
text-align: right;
width: 5em;
}
.percentage { .percentage {
text-align: right; text-align: right;
width: 5em; width: 5em;
} }
.key { .key {
padding-left: 1em; padding-left: 1em;
} }
.drilldown-group-title { .drilldown-group-title {
font-weight: bold; font-weight: bold;
padding: 0.5em 0 0.2em 0; padding: 0.5em 0 0.2em 0;
} }
.entry-details {
}
.entry-details TD { .entry-details {}
}
.details { .entry-details TD {}
width: 0.1em;
}
.details span { .details {
padding: 0 0.4em 0 0.4em; width: 0.1em;
background-color: var(--on-surface-color); }
color: var(--surface-color);
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
}
#legend { .details span {
padding-right: 20px; padding: 0 0.4em 0 0.4em;
} background-color: var(--on-surface-color);
color: var(--surface-color);
border-radius: 25px;
text-align: center;
cursor: -webkit-zoom-in;
}
dl { #legend {
float: right; padding-right: 20px;
border-style: solid; }
border-width: 1px;
padding: 20px;
}
dl {
float: right;
border-style: solid;
border-width: 1px;
padding: 20px;
}
</style> </style>
<div class="panel"> <div class="panel">
<h2>IC Panel</h2> <h2>IC Panel</h2>
...@@ -79,21 +79,21 @@ dl { ...@@ -79,21 +79,21 @@ dl {
<p>Trace Count: <span id="count">0</span></p> <p>Trace Count: <span id="count">0</span></p>
<h3>Result</h3> <h3>Result</h3>
<p> <p>
Group-Key: Group-Key:
<select id="group-key"></select> <select id="group-key"></select>
</p> </p>
<p> <p>
Filter by Time Filter by Time
<br></br> <br></br>
<input type="search" id="filter-time-start" placeholder="start"></input> : <input type="search" id="filter-time-start" placeholder="start"></input> :
<input type="search" id="filter-time-end" placeholder="end"></input> <input type="search" id="filter-time-end" placeholder="end"></input>
<button id="filterICTimeBtn">Filter</button> <button id="filterICTimeBtn">Filter</button>
<p> <p>
<table id="table" width="100%"> <table id="table" width="100%">
<tbody id="table-body"> <tbody id="table-body">
</tbody> </tbody>
</table> </table>
</p> </p>
</div> </div>
tools/system-analyzer/ic-processor.mjs
View file @ a57270cf
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be // 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.
import {Event} from './event.mjs'; import { Event } from './event.mjs';
import {Timeline} from './timeline.mjs'; import { Timeline } from './timeline.mjs';
/** /**
* Parser for dynamic code optimization state. * Parser for dynamic code optimization state.
...@@ -45,10 +45,10 @@ class IcProcessor extends LogReader { ...@@ -45,10 +45,10 @@ class IcProcessor extends LogReader {
processor: this.processV8Version processor: this.processV8Version
}, },
'code-move': 'code-move':
{parsers: [parseInt, parseInt], processor: this.processCodeMove}, { parsers: [parseInt, parseInt], processor: this.processCodeMove },
'code-delete': {parsers: [parseInt], processor: this.processCodeDelete}, 'code-delete': { parsers: [parseInt], processor: this.processCodeDelete },
'sfi-move': 'sfi-move':
{parsers: [parseInt, parseInt], processor: this.processFunctionMove}, { parsers: [parseInt, parseInt], processor: this.processFunctionMove },
'LoadGlobalIC': { 'LoadGlobalIC': {
parsers: propertyICParser, parsers: propertyICParser,
processor: this.processPropertyIC.bind(this, 'LoadGlobalIC') processor: this.processPropertyIC.bind(this, 'LoadGlobalIC')
...@@ -88,7 +88,7 @@ class IcProcessor extends LogReader { ...@@ -88,7 +88,7 @@ class IcProcessor extends LogReader {
this.KeyedStoreIC = 0; this.KeyedStoreIC = 0;
this.StoreInArrayLiteralIC = 0; this.StoreInArrayLiteralIC = 0;
} }
get profile(){ get profile() {
return this.#profile; return this.#profile;
} }
/** /**
...@@ -113,13 +113,13 @@ class IcProcessor extends LogReader { ...@@ -113,13 +113,13 @@ class IcProcessor extends LogReader {
this.processLogLine(line); this.processLogLine(line);
} }
} }
processV8Version(majorVersion, minorVersion){ processV8Version(majorVersion, minorVersion) {
if( if (
(majorVersion == this.MAJOR_VERSION && minorVersion <= this.MINOR_VERSION) (majorVersion == this.MAJOR_VERSION && minorVersion <= this.MINOR_VERSION)
|| (majorVersion < this.MAJOR_VERSION)){ || (majorVersion < this.MAJOR_VERSION)) {
window.alert( window.alert(
`Unsupported version ${majorVersion}.${minorVersion}. \n` + `Unsupported version ${majorVersion}.${minorVersion}. \n` +
`Please use the matching tool for given the V8 version.`); `Please use the matching tool for given the V8 version.`);
} }
} }
processLogFile(fileName) { processLogFile(fileName) {
...@@ -147,7 +147,7 @@ class IcProcessor extends LogReader { ...@@ -147,7 +147,7 @@ class IcProcessor extends LogReader {
let funcAddr = parseInt(maybe_func[0]); let funcAddr = parseInt(maybe_func[0]);
let state = parseState(maybe_func[1]); let state = parseState(maybe_func[1]);
this.#profile.addFuncCode( this.#profile.addFuncCode(
type, name, timestamp, start, size, funcAddr, state); type, name, timestamp, start, size, funcAddr, state);
} else { } else {
this.#profile.addCode(type, name, timestamp, start, size); this.#profile.addCode(type, name, timestamp, start, size);
} }
...@@ -171,15 +171,15 @@ class IcProcessor extends LogReader { ...@@ -171,15 +171,15 @@ class IcProcessor extends LogReader {
} }
processPropertyIC( processPropertyIC(
type, pc, time, line, column, old_state, new_state, map, name, modifier, type, pc, time, line, column, old_state, new_state, map, name, modifier,
slow_reason) { slow_reason) {
this[type]++; this[type]++;
let entry = this.#profile.findEntry(pc); let entry = this.#profile.findEntry(pc);
print( print(
type + ' (' + old_state + '->' + new_state + modifier + ') at ' + type + ' (' + old_state + '->' + new_state + modifier + ') at ' +
this.formatName(entry) + ':' + line + ':' + column + ' ' + name + this.formatName(entry) + ':' + line + ':' + column + ' ' + name +
' (map 0x' + map.toString(16) + ')' + ' (map 0x' + map.toString(16) + ')' +
(slow_reason ? ' ' + slow_reason : '') + 'time: ' + time); (slow_reason ? ' ' + slow_reason : '') + 'time: ' + time);
} }
} }
...@@ -206,8 +206,8 @@ class CustomIcProcessor extends IcProcessor { ...@@ -206,8 +206,8 @@ class CustomIcProcessor extends IcProcessor {
} }
processPropertyIC( processPropertyIC(
type, pc, time, line, column, old_state, new_state, map, key, modifier, type, pc, time, line, column, old_state, new_state, map, key, modifier,
slow_reason) { slow_reason) {
let fnName = this.functionName(pc); let fnName = this.functionName(pc);
let entry = new IcLogEvent( let entry = new IcLogEvent(
type, fnName, time, line, column, key, old_state, new_state, map, type, fnName, time, line, column, key, old_state, new_state, map,
...@@ -216,7 +216,7 @@ class CustomIcProcessor extends IcProcessor { ...@@ -216,7 +216,7 @@ class CustomIcProcessor extends IcProcessor {
} }
get timeline(){ get timeline() {
return this.#timeline; return this.#timeline;
} }
...@@ -228,8 +228,8 @@ class CustomIcProcessor extends IcProcessor { ...@@ -228,8 +228,8 @@ class CustomIcProcessor extends IcProcessor {
class IcLogEvent extends Event { class IcLogEvent extends Event {
constructor( constructor(
type, fn_file, time, line, column, key, oldState, newState, map, reason, type, fn_file, time, line, column, key, oldState, newState, map, reason,
additional) { additional) {
super(type, time); super(type, time);
this.category = 'other'; this.category = 'other';
if (this.type.indexOf('Store') !== -1) { if (this.type.indexOf('Store') !== -1) {
...@@ -279,4 +279,4 @@ class IcLogEvent extends Event { ...@@ -279,4 +279,4 @@ class IcLogEvent extends Event {
} }
} }
export { CustomIcProcessor as default, IcLogEvent}; export { CustomIcProcessor as default, IcLogEvent };
tools/system-analyzer/index.html
View file @ a57270cf
...@@ -116,8 +116,9 @@ found in the LICENSE file. --> ...@@ -116,8 +116,9 @@ found in the LICENSE file. -->
<script type="module"> <script type="module">
import { App } from './index.mjs'; import { App } from './index.mjs';
globalThis.app = new App("#log-file-reader", "#map-panel", "#timeline-panel", globalThis.app =
"#ic-panel", "#map-track", "#ic-track"); new App("#log-file-reader", "#map-panel", "#timeline-panel",
"#ic-panel", "#map-track", "#ic-track");
</script> </script>
</head> </head>
......
tools/system-analyzer/log-file-reader-template.html
View file @ a57270cf
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
Use of this source code is governed by a BSD-style license that can be 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. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style> <style>
@import "./index.css";
#fileReader { #fileReader {
width: 100%; width: 100%;
height: 100px; height: 100px;
...@@ -18,9 +19,9 @@ found in the LICENSE file. --> ...@@ -18,9 +19,9 @@ found in the LICENSE file. -->
} }
#fileReader.done { #fileReader.done {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
} }
#fileReader:hover { #fileReader:hover {
...@@ -32,7 +33,7 @@ found in the LICENSE file. --> ...@@ -32,7 +33,7 @@ found in the LICENSE file. -->
cursor: wait; cursor: wait;
} }
#fileReader > input { #fileReader>input {
display: none; display: none;
} }
...@@ -64,23 +65,24 @@ found in the LICENSE file. --> ...@@ -64,23 +65,24 @@ found in the LICENSE file. -->
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% {
100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
<section id="fileReaderSection"> <section id="fileReaderSection">
<div id="fileReader" tabindex=1 > <div id="fileReader" tabindex=1>
<span id="label"> <span id="label">
Drag and drop a v8.log file into this area, or click to choose from disk. Drag and drop a v8.log file into this area, or click to choose from disk.
</span> </span>
<input id="file" type="file" name="file"> <input id="file" type="file" name="file">
</div> </div>
<div id="loader"> <div id="loader">
<div id="spinner"></div> <div id="spinner"></div>
</div> </div>
</section> </section>
tools/system-analyzer/log-file-reader.mjs
View file @ a57270cf
// Copyright 2020 the V8 project authors. All rights reserved. // Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be // 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.
import {defineCustomElement, V8CustomElement} from './helper.mjs'; import { defineCustomElement, V8CustomElement } from './helper.mjs';
defineCustomElement('log-file-reader', (templateText) => defineCustomElement('log-file-reader', (templateText) =>
class LogFileReader extends V8CustomElement { class LogFileReader extends V8CustomElement {
constructor() { constructor() {
super(templateText); super(templateText);
this.addEventListener('click', e => this.handleClick(e)); this.addEventListener('click', e => this.handleClick(e));
this.addEventListener('dragover', e => this.handleDragOver(e)); this.addEventListener('dragover', e => this.handleDragOver(e));
this.addEventListener('drop', e => this.handleChange(e)); this.addEventListener('drop', e => this.handleChange(e));
this.$('#file').addEventListener('change', e => this.handleChange(e)); this.$('#file').addEventListener('change', e => this.handleChange(e));
this.$('#fileReader').addEventListener('keydown', this.$('#fileReader').addEventListener('keydown',
e => this.handleKeyEvent(e)); e => this.handleKeyEvent(e));
} }
get section() {
return this.$('#fileReaderSection');
}
updateLabel(text) { get section() {
this.$('#label').innerText = text; return this.$('#fileReaderSection');
} }
handleKeyEvent(event) { updateLabel(text) {
if (event.key == "Enter") this.handleClick(event); this.$('#label').innerText = text;
} }
handleClick(event) { handleKeyEvent(event) {
this.$('#file').click(); if (event.key == "Enter") this.handleClick(event);
} }
handleChange(event) { handleClick(event) {
// Used for drop and file change. this.$('#file').click();
event.preventDefault(); }
this.dispatchEvent(new CustomEvent(
'fileuploadstart', {bubbles: true, composed: true}));
var host = event.dataTransfer ? event.dataTransfer : event.target;
this.readFile(host.files[0]);
}
handleDragOver(event) { handleChange(event) {
event.preventDefault(); // Used for drop and file change.
} event.preventDefault();
this.dispatchEvent(new CustomEvent(
'fileuploadstart', { bubbles: true, composed: true }));
var host = event.dataTransfer ? event.dataTransfer : event.target;
this.readFile(host.files[0]);
}
connectedCallback() { handleDragOver(event) {
this.$('#fileReader').focus(); event.preventDefault();
} }
readFile(file) { connectedCallback() {
if (!file) { this.$('#fileReader').focus();
this.updateLabel('Failed to load file.');
return;
} }
this.$('#fileReader').blur();
this.section.className = 'loading'; readFile(file) {
const reader = new FileReader(); if (!file) {
reader.onload = (e) => { this.updateLabel('Failed to load file.');
try { return;
let dataModel = Object.create(null);
dataModel.file = file;
dataModel.chunk = e.target.result;
this.updateLabel('Finished loading \'' + file.name + '\'.');
this.dispatchEvent(new CustomEvent(
'fileuploadend', {bubbles: true, composed: true, detail: dataModel}));
this.section.className = 'success';
this.$('#fileReader').classList.add('done');
} catch (err) {
console.error(err);
this.section.className = 'failure';
} }
}; this.$('#fileReader').blur();
// Delay the loading a bit to allow for CSS animations to happen. this.section.className = 'loading';
setTimeout(() => reader.readAsText(file), 0); const reader = new FileReader();
reader.onload = (e) => {
try {
let dataModel = Object.create(null);
dataModel.file = file;
dataModel.chunk = e.target.result;
this.updateLabel('Finished loading \'' + file.name + '\'.');
this.dispatchEvent(new CustomEvent(
'fileuploadend', {
bubbles: true, composed: true,
detail: dataModel
}));
this.section.className = 'success';
this.$('#fileReader').classList.add('done');
} catch (err) {
console.error(err);
this.section.className = 'failure';
}
};
// Delay the loading a bit to allow for CSS animations to happen.
setTimeout(() => reader.readAsText(file), 0);
} }
}); });
tools/system-analyzer/map-panel-template.html
View file @ a57270cf
<!-- Copyright 2020 the V8 project authors. All rights reserved. <!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be 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. -->
<style>
@import "./index.css";
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#searchBarInput { #searchBarInput {
width: 200px; width: 200px;
} }
......
tools/system-analyzer/map-panel/map-transitions.mjs
View file @ a57270cf
...@@ -66,7 +66,8 @@ defineCustomElement( ...@@ -66,7 +66,8 @@ defineCustomElement(
// Timeline dbl click to show map transitions of selected maps // Timeline dbl click to show map transitions of selected maps
this.transitionView.style.display = "none"; this.transitionView.style.display = "none";
this.removeAllChildren(this.transitionView); this.removeAllChildren(this.transitionView);
this.selectedMapLogEvents.forEach((map) => this.addMapAndParentTransitions(map)); this.selectedMapLogEvents.forEach((map) =>
this.addMapAndParentTransitions(map));
this.transitionView.style.display = ""; this.transitionView.style.display = "";
} }
......
tools/system-analyzer/map-processor.mjs
View file @ a57270cf
...@@ -58,7 +58,10 @@ class MapProcessor extends LogReader { ...@@ -58,7 +58,10 @@ class MapProcessor extends LogReader {
parsers: [parseInt, parseInt], parsers: [parseInt, parseInt],
'sfi-move': 'sfi-move':
{ parsers: [parseInt, parseInt], processor: this.processCodeMove }, { parsers: [parseInt, parseInt], processor: this.processCodeMove },
'code-delete': { parsers: [parseInt], processor: this.processCodeDelete }, 'code-delete': {
parsers: [parseInt],
processor: this.processCodeDelete
},
processor: this.processFunctionMove processor: this.processFunctionMove
}, },
'map-create': 'map-create':
......
tools/system-analyzer/stats-panel-template.html
View file @ a57270cf
<!-- Copyright 2020 the V8 project authors. All rights reserved. <!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be 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. -->
<style>
@import "./index.css";
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#stats { #stats {
display: flex; display: flex;
height: 250px; height: 250px;
......
tools/system-analyzer/stats-panel.mjs
View file @ a57270cf
...@@ -81,7 +81,8 @@ defineCustomElement( ...@@ -81,7 +81,8 @@ defineCustomElement(
let text = ""; let text = "";
let tableNode = this.table("transitionType"); let tableNode = this.table("transitionType");
tableNode.innerHTML = tableNode.innerHTML =
"<thead><tr><td>Color</td><td>Type</td><td>Count</td><td>Percent</td></tr></thead>"; "<thead><tr><td>Color</td><td>Type</td><td>Count</td>" +
"<td>Percent</td></tr></thead>";
let name, filter; let name, filter;
let total = this.timeline.size(); let total = this.timeline.size();
pairs.forEach(([name, color, filter]) => { pairs.forEach(([name, color, filter]) => {
......
tools/system-analyzer/timeline-panel-template.html
View file @ a57270cf
...@@ -2,40 +2,46 @@ ...@@ -2,40 +2,46 @@
Use of this source code is governed by a BSD-style license that can be 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. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style> <style>
@import "./index.css"; #timelineOverview {
#timelineOverview { width: 100%;
width: 100%; height: 50px;
height: 50px; position: relative;
position: relative; margin-top: -50px;
margin-top: -50px; margin-bottom: 10px;
margin-bottom: 10px; background-size: 100% 100%;
background-size: 100% 100%; border: 1px var(--surface-color) solid;
border: 1px var(--surface-color) solid; border-width: 1px 0 1px 0;
border-width: 1px 0 1px 0; overflow: hidden;
overflow: hidden; }
}
#timelineOverviewIndicator { #timelineOverviewIndicator {
height: 100%; height: 100%;
position: absolute; position: absolute;
box-shadow: 0px 2px 20px -5px var(--surface-color) inset; box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
top: 0px; top: 0px;
cursor: ew-resize; cursor: ew-resize;
} }
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask { #timelineOverviewIndicator .leftMask,
background-color: rgba(200, 200, 200, 0.5); #timelineOverviewIndicator .rightMask {
width: 10000px; background-color: rgba(200, 200, 200, 0.5);
height: 100%; width: 10000px;
position: absolute; height: 100%;
top: 0px; position: absolute;
} top: 0px;
#timelineOverviewIndicator .leftMask { }
right: 100%;
} #timelineOverviewIndicator .leftMask {
#timelineOverviewIndicator .rightMask { right: 100%;
left: 100%; }
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
</style> </style>
<div class="panel"> <div class="panel">
<h2>Timeline Panel</h2> <h2>Timeline Panel</h2>
......
tools/system-analyzer/timeline-panel.mjs
View file @ a57270cf
...@@ -2,81 +2,81 @@ ...@@ -2,81 +2,81 @@
// Use of this source code is governed by a BSD-style license that can be // 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.
import {defineCustomElement, V8CustomElement} from './helper.mjs'; import { defineCustomElement, V8CustomElement } from './helper.mjs';
import './timeline/timeline-track.mjs'; import './timeline/timeline-track.mjs';
defineCustomElement('timeline-panel', (templateText) => defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends V8CustomElement { class TimelinePanel extends V8CustomElement {
constructor() { constructor() {
super(templateText); super(templateText);
this.timelineOverview.addEventListener( this.timelineOverview.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e)); 'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener( this.addEventListener(
'overviewupdate', e => this.handleOverviewBackgroundUpdate(e)); 'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
this.addEventListener( this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e)); 'scrolltrack', e => this.handleTrackScroll(e));
this.backgroundCanvas = document.createElement('canvas'); this.backgroundCanvas = document.createElement('canvas');
this.isLocked = false; this.isLocked = false;
} }
get timelineOverview() { get timelineOverview() {
return this.$('#timelineOverview'); return this.$('#timelineOverview');
} }
get timelineOverviewIndicator() { get timelineOverviewIndicator() {
return this.$('#timelineOverviewIndicator'); return this.$('#timelineOverviewIndicator');
} }
get timelineCanvas() { get timelineCanvas() {
return this.timelineTracks[0].timelineCanvas; return this.timelineTracks[0].timelineCanvas;
} }
get timeline() { get timeline() {
return this.timelineTracks[0].timeline; return this.timelineTracks[0].timeline;
} }
set nofChunks(count){ set nofChunks(count) {
for (const track of this.timelineTracks) { for (const track of this.timelineTracks) {
track.nofChunks = count; track.nofChunks = count;
}
} }
} get nofChunks() {
get nofChunks(){ return this.timelineTracks[0].nofChunks;
return this.timelineTracks[0].nofChunks;
}
get timelineTracks(){
return this.$("slot").assignedNodes().filter(
track => track.nodeType === Node.ELEMENT_NODE);
}
handleTrackScroll(event){
//TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) {
track.scrollLeft = event.detail;
} }
} get timelineTracks() {
handleTimelineIndicatorMove(event) { return this.$("slot").assignedNodes().filter(
if (event.buttons == 0) return; track => track.nodeType === Node.ELEMENT_NODE);
let timelineTotalWidth = this.timelineCanvas.offsetWidth; }
let factor = this.timelineOverview.offsetWidth / timelineTotalWidth; handleTrackScroll(event) {
for (const track of this.timelineTracks) { //TODO(zcankara) add forEachTrack helper method
track.timelineIndicatorMove(event.movementX / factor); for (const track of this.timelineTracks) {
track.scrollLeft = event.detail;
}
}
handleTimelineIndicatorMove(event) {
if (event.buttons == 0) return;
let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = this.timelineOverview.offsetWidth / timelineTotalWidth;
for (const track of this.timelineTracks) {
track.timelineIndicatorMove(event.movementX / factor);
}
} }
}
updateOverviewWindow() { updateOverviewWindow() {
let indicator = this.timelineOverviewIndicator; let indicator = this.timelineOverviewIndicator;
let totalIndicatorWidth = let totalIndicatorWidth =
this.timelineOverview.offsetWidth; this.timelineOverview.offsetWidth;
let div = this.timeline; let div = this.timeline;
let timelineTotalWidth = this.timelineCanvas.offsetWidth; let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = totalIndicatorWidth / timelineTotalWidth; let factor = totalIndicatorWidth / timelineTotalWidth;
let width = div.offsetWidth * factor; let width = div.offsetWidth * factor;
let left = div.scrollLeft * factor; let left = div.scrollLeft * factor;
indicator.style.width = width + 'px'; indicator.style.width = width + 'px';
indicator.style.left = left + 'px'; indicator.style.left = left + 'px';
} }
handleOverviewBackgroundUpdate(e){ handleOverviewBackgroundUpdate(e) {
this.timelineOverview.style.backgroundImage = this.timelineOverview.style.backgroundImage =
'url(' + e.detail + ')'; 'url(' + e.detail + ')';
} }
}); });
tools/system-analyzer/timeline.mjs
View file @ a57270cf
...@@ -10,24 +10,24 @@ class Timeline { ...@@ -10,24 +10,24 @@ class Timeline {
this.startTime = 0; this.startTime = 0;
this.endTime = 0; this.endTime = 0;
} }
get all(){ get all() {
return this.#values; return this.#values;
} }
get selection(){ get selection() {
return this.#selection; return this.#selection;
} }
set selection(value){ set selection(value) {
this.#selection = value; this.#selection = value;
} }
selectTimeRange(start, end){ selectTimeRange(start, end) {
this.#selection = this.filter( this.#selection = this.filter(
e => e.time >= start && e.time <= end); e => e.time >= start && e.time <= end);
} }
getChunks(windowSizeMs){ getChunks(windowSizeMs) {
//TODO(zcankara) Fill this one //TODO(zcankara) Fill this one
return this.chunkSizes(windowSizeMs); return this.chunkSizes(windowSizeMs);
} }
get values(){ get values() {
//TODO(zcankara) Not to break something delete later //TODO(zcankara) Not to break something delete later
return this.#values; return this.#values;
} }
...@@ -216,11 +216,11 @@ class Chunk { ...@@ -216,11 +216,11 @@ class Chunk {
return chunk; return chunk;
} }
getBreakdown(event_fn){ getBreakdown(event_fn) {
if (event_fn === void 0) { if (event_fn === void 0) {
event_fn = each => each; event_fn = each => each;
} }
let breakdown = {__proto__: null}; let breakdown = { __proto__: null };
this.items.forEach(each => { this.items.forEach(each => {
const type = event_fn(each); const type = event_fn(each);
const v = breakdown[type]; const v = breakdown[type];
...@@ -229,10 +229,10 @@ class Chunk { ...@@ -229,10 +229,10 @@ class Chunk {
return Object.entries(breakdown).sort((a, b) => a[1] - b[1]); return Object.entries(breakdown).sort((a, b) => a[1] - b[1]);
} }
filter(){ filter() {
return this.items.filter(map => !map.parent() || !this.has(map.parent())); return this.items.filter(map => !map.parent() || !this.has(map.parent()));
} }
} }
export {Timeline, Chunk}; export { Timeline, Chunk };
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