Commit a57270cf authored by Zeynep Cankara's avatar Zeynep Cankara Committed by Commit Bot

[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
This diff is collapsed.
......@@ -10,12 +10,12 @@ class Event {
this.#time = time;
this.#type = type;
}
get time(){
get time() {
return this.#time;
}
get type(){
get type() {
return this.#type;
}
}
export {Event};
export { Event };
......@@ -51,7 +51,7 @@ export class Group {
group.percentage = Math.round(group.count / length * 100 * 100) / 100;
result.push(group);
}
result.sort((a, b) => {return b.count - a.count});
result.sort((a, b) => { return b.count - a.count });
return result;
}
......
<!-- 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. -->
<style>
@import "./index.css";
.count {
text-align: right;
width: 5em;
}
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
.count {
text-align: right;
width: 5em;
}
.percentage {
text-align: right;
width: 5em;
}
.percentage {
text-align: right;
width: 5em;
}
.key {
padding-left: 1em;
}
.key {
padding-left: 1em;
}
.drilldown-group-title {
font-weight: bold;
padding: 0.5em 0 0.2em 0;
}
.entry-details {
}
.drilldown-group-title {
font-weight: bold;
padding: 0.5em 0 0.2em 0;
}
.entry-details TD {
}
.entry-details {}
.details {
width: 0.1em;
}
.entry-details TD {}
.details span {
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;
}
.details {
width: 0.1em;
}
#legend {
padding-right: 20px;
}
.details span {
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 {
float: right;
border-style: solid;
border-width: 1px;
padding: 20px;
}
#legend {
padding-right: 20px;
}
dl {
float: right;
border-style: solid;
border-width: 1px;
padding: 20px;
}
</style>
<div class="panel">
<h2>IC Panel</h2>
......@@ -79,21 +79,21 @@ dl {
<p>Trace Count: <span id="count">0</span></p>
<h3>Result</h3>
<p>
<h3>Result</h3>
<p>
Group-Key:
<select id="group-key"></select>
</p>
<p>
</p>
<p>
Filter by Time
<br></br>
<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>
<p>
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</p>
<p>
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</p>
</div>
......@@ -2,8 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {Event} from './event.mjs';
import {Timeline} from './timeline.mjs';
import { Event } from './event.mjs';
import { Timeline } from './timeline.mjs';
/**
* Parser for dynamic code optimization state.
......@@ -45,10 +45,10 @@ class IcProcessor extends LogReader {
processor: this.processV8Version
},
'code-move':
{parsers: [parseInt, parseInt], processor: this.processCodeMove},
'code-delete': {parsers: [parseInt], processor: this.processCodeDelete},
{ parsers: [parseInt, parseInt], processor: this.processCodeMove },
'code-delete': { parsers: [parseInt], processor: this.processCodeDelete },
'sfi-move':
{parsers: [parseInt, parseInt], processor: this.processFunctionMove},
{ parsers: [parseInt, parseInt], processor: this.processFunctionMove },
'LoadGlobalIC': {
parsers: propertyICParser,
processor: this.processPropertyIC.bind(this, 'LoadGlobalIC')
......@@ -88,7 +88,7 @@ class IcProcessor extends LogReader {
this.KeyedStoreIC = 0;
this.StoreInArrayLiteralIC = 0;
}
get profile(){
get profile() {
return this.#profile;
}
/**
......@@ -113,13 +113,13 @@ class IcProcessor extends LogReader {
this.processLogLine(line);
}
}
processV8Version(majorVersion, minorVersion){
if(
processV8Version(majorVersion, minorVersion) {
if (
(majorVersion == this.MAJOR_VERSION && minorVersion <= this.MINOR_VERSION)
|| (majorVersion < this.MAJOR_VERSION)){
window.alert(
`Unsupported version ${majorVersion}.${minorVersion}. \n` +
`Please use the matching tool for given the V8 version.`);
|| (majorVersion < this.MAJOR_VERSION)) {
window.alert(
`Unsupported version ${majorVersion}.${minorVersion}. \n` +
`Please use the matching tool for given the V8 version.`);
}
}
processLogFile(fileName) {
......@@ -147,7 +147,7 @@ class IcProcessor extends LogReader {
let funcAddr = parseInt(maybe_func[0]);
let state = parseState(maybe_func[1]);
this.#profile.addFuncCode(
type, name, timestamp, start, size, funcAddr, state);
type, name, timestamp, start, size, funcAddr, state);
} else {
this.#profile.addCode(type, name, timestamp, start, size);
}
......@@ -171,15 +171,15 @@ class IcProcessor extends LogReader {
}
processPropertyIC(
type, pc, time, line, column, old_state, new_state, map, name, modifier,
slow_reason) {
type, pc, time, line, column, old_state, new_state, map, name, modifier,
slow_reason) {
this[type]++;
let entry = this.#profile.findEntry(pc);
print(
type + ' (' + old_state + '->' + new_state + modifier + ') at ' +
this.formatName(entry) + ':' + line + ':' + column + ' ' + name +
' (map 0x' + map.toString(16) + ')' +
(slow_reason ? ' ' + slow_reason : '') + 'time: ' + time);
type + ' (' + old_state + '->' + new_state + modifier + ') at ' +
this.formatName(entry) + ':' + line + ':' + column + ' ' + name +
' (map 0x' + map.toString(16) + ')' +
(slow_reason ? ' ' + slow_reason : '') + 'time: ' + time);
}
}
......@@ -206,8 +206,8 @@ class CustomIcProcessor extends IcProcessor {
}
processPropertyIC(
type, pc, time, line, column, old_state, new_state, map, key, modifier,
slow_reason) {
type, pc, time, line, column, old_state, new_state, map, key, modifier,
slow_reason) {
let fnName = this.functionName(pc);
let entry = new IcLogEvent(
type, fnName, time, line, column, key, old_state, new_state, map,
......@@ -216,7 +216,7 @@ class CustomIcProcessor extends IcProcessor {
}
get timeline(){
get timeline() {
return this.#timeline;
}
......@@ -228,8 +228,8 @@ class CustomIcProcessor extends IcProcessor {
class IcLogEvent extends Event {
constructor(
type, fn_file, time, line, column, key, oldState, newState, map, reason,
additional) {
type, fn_file, time, line, column, key, oldState, newState, map, reason,
additional) {
super(type, time);
this.category = 'other';
if (this.type.indexOf('Store') !== -1) {
......@@ -279,4 +279,4 @@ class IcLogEvent extends Event {
}
}
export { CustomIcProcessor as default, IcLogEvent};
export { CustomIcProcessor as default, IcLogEvent };
......@@ -116,8 +116,9 @@ found in the LICENSE file. -->
<script type="module">
import { App } from './index.mjs';
globalThis.app = new App("#log-file-reader", "#map-panel", "#timeline-panel",
"#ic-panel", "#map-track", "#ic-track");
globalThis.app =
new App("#log-file-reader", "#map-panel", "#timeline-panel",
"#ic-panel", "#map-track", "#ic-track");
</script>
</head>
......
......@@ -2,9 +2,10 @@
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
@import "./index.css";
#fileReader {
width: 100%;
height: 100px;
......@@ -18,9 +19,9 @@ found in the LICENSE file. -->
}
#fileReader.done {
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);
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);
}
#fileReader:hover {
......@@ -32,7 +33,7 @@ found in the LICENSE file. -->
cursor: wait;
}
#fileReader > input {
#fileReader>input {
display: none;
}
......@@ -64,23 +65,24 @@ found in the LICENSE file. -->
}
@keyframes spin {
0% {
0% {
transform: rotate(0deg);
}
100% {
}
100% {
transform: rotate(360deg);
}
}
}
</style>
<section id="fileReaderSection">
<div id="fileReader" tabindex=1 >
<span id="label">
Drag and drop a v8.log 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>
<div id="fileReader" tabindex=1>
<span id="label">
Drag and drop a v8.log 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>
// 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.
import {defineCustomElement, V8CustomElement} from './helper.mjs';
import { defineCustomElement, V8CustomElement } from './helper.mjs';
defineCustomElement('log-file-reader', (templateText) =>
class LogFileReader extends V8CustomElement {
constructor() {
super(templateText);
this.addEventListener('click', e => this.handleClick(e));
this.addEventListener('dragover', e => this.handleDragOver(e));
this.addEventListener('drop', e => this.handleChange(e));
this.$('#file').addEventListener('change', e => this.handleChange(e));
this.$('#fileReader').addEventListener('keydown',
e => this.handleKeyEvent(e));
}
get section() {
return this.$('#fileReaderSection');
}
class LogFileReader extends V8CustomElement {
constructor() {
super(templateText);
this.addEventListener('click', e => this.handleClick(e));
this.addEventListener('dragover', e => this.handleDragOver(e));
this.addEventListener('drop', e => this.handleChange(e));
this.$('#file').addEventListener('change', e => this.handleChange(e));
this.$('#fileReader').addEventListener('keydown',
e => this.handleKeyEvent(e));
}
updateLabel(text) {
this.$('#label').innerText = text;
}
get section() {
return this.$('#fileReaderSection');
}
handleKeyEvent(event) {
if (event.key == "Enter") this.handleClick(event);
}
updateLabel(text) {
this.$('#label').innerText = text;
}
handleClick(event) {
this.$('#file').click();
}
handleKeyEvent(event) {
if (event.key == "Enter") this.handleClick(event);
}
handleChange(event) {
// 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]);
}
handleClick(event) {
this.$('#file').click();
}
handleDragOver(event) {
event.preventDefault();
}
handleChange(event) {
// 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() {
this.$('#fileReader').focus();
}
handleDragOver(event) {
event.preventDefault();
}
readFile(file) {
if (!file) {
this.updateLabel('Failed to load file.');
return;
connectedCallback() {
this.$('#fileReader').focus();
}
this.$('#fileReader').blur();
this.section.className = 'loading';
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';
readFile(file) {
if (!file) {
this.updateLabel('Failed to load file.');
return;
}
};
// Delay the loading a bit to allow for CSS animations to happen.
setTimeout(() => reader.readAsText(file), 0);
this.$('#fileReader').blur();
this.section.className = 'loading';
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);
}
});
});
<!-- 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. -->
<style>
@import "./index.css";
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#searchBarInput {
width: 200px;
}
......
......@@ -66,7 +66,8 @@ defineCustomElement(
// Timeline dbl click to show map transitions of selected maps
this.transitionView.style.display = "none";
this.removeAllChildren(this.transitionView);
this.selectedMapLogEvents.forEach((map) => this.addMapAndParentTransitions(map));
this.selectedMapLogEvents.forEach((map) =>
this.addMapAndParentTransitions(map));
this.transitionView.style.display = "";
}
......
......@@ -58,7 +58,10 @@ class MapProcessor extends LogReader {
parsers: [parseInt, parseInt],
'sfi-move':
{ parsers: [parseInt, parseInt], processor: this.processCodeMove },
'code-delete': { parsers: [parseInt], processor: this.processCodeDelete },
'code-delete': {
parsers: [parseInt],
processor: this.processCodeDelete
},
processor: this.processFunctionMove
},
'map-create':
......
<!-- 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. -->
<style>
@import "./index.css";
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#stats {
display: flex;
height: 250px;
......
......@@ -81,7 +81,8 @@ defineCustomElement(
let text = "";
let tableNode = this.table("transitionType");
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 total = this.timeline.size();
pairs.forEach(([name, color, filter]) => {
......
......@@ -2,40 +2,46 @@
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
@import "./index.css";
#timelineOverview {
width: 100%;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 10px;
background-size: 100% 100%;
border: 1px var(--surface-color) solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
top: 0px;
cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
background-color: rgba(200, 200, 200, 0.5);
width: 10000px;
height: 100%;
position: absolute;
top: 0px;
}
#timelineOverviewIndicator .leftMask {
right: 100%;
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
#timelineOverview {
width: 100%;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 10px;
background-size: 100% 100%;
border: 1px var(--surface-color) solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
top: 0px;
cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
background-color: rgba(200, 200, 200, 0.5);
width: 10000px;
height: 100%;
position: absolute;
top: 0px;
}
#timelineOverviewIndicator .leftMask {
right: 100%;
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
</style>
<div class="panel">
<h2>Timeline Panel</h2>
......
......@@ -2,81 +2,81 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {defineCustomElement, V8CustomElement} from './helper.mjs';
import { defineCustomElement, V8CustomElement } from './helper.mjs';
import './timeline/timeline-track.mjs';
defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends V8CustomElement {
constructor() {
super(templateText);
this.timelineOverview.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener(
'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e));
this.backgroundCanvas = document.createElement('canvas');
this.isLocked = false;
}
class TimelinePanel extends V8CustomElement {
constructor() {
super(templateText);
this.timelineOverview.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener(
'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e));
this.backgroundCanvas = document.createElement('canvas');
this.isLocked = false;
}
get timelineOverview() {
return this.$('#timelineOverview');
}
get timelineOverview() {
return this.$('#timelineOverview');
}
get timelineOverviewIndicator() {
return this.$('#timelineOverviewIndicator');
}
get timelineOverviewIndicator() {
return this.$('#timelineOverviewIndicator');
}
get timelineCanvas() {
return this.timelineTracks[0].timelineCanvas;
}
get timelineCanvas() {
return this.timelineTracks[0].timelineCanvas;
}
get timeline() {
return this.timelineTracks[0].timeline;
}
set nofChunks(count){
for (const track of this.timelineTracks) {
track.nofChunks = count;
get timeline() {
return this.timelineTracks[0].timeline;
}
set nofChunks(count) {
for (const track of this.timelineTracks) {
track.nofChunks = count;
}
}
}
get 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 nofChunks() {
return this.timelineTracks[0].nofChunks;
}
}
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);
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;
}
}
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() {
let indicator = this.timelineOverviewIndicator;
let totalIndicatorWidth =
updateOverviewWindow() {
let indicator = this.timelineOverviewIndicator;
let totalIndicatorWidth =
this.timelineOverview.offsetWidth;
let div = this.timeline;
let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = totalIndicatorWidth / timelineTotalWidth;
let width = div.offsetWidth * factor;
let left = div.scrollLeft * factor;
indicator.style.width = width + 'px';
indicator.style.left = left + 'px';
}
let div = this.timeline;
let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = totalIndicatorWidth / timelineTotalWidth;
let width = div.offsetWidth * factor;
let left = div.scrollLeft * factor;
indicator.style.width = width + 'px';
indicator.style.left = left + 'px';
}
handleOverviewBackgroundUpdate(e){
this.timelineOverview.style.backgroundImage =
'url(' + e.detail + ')';
}
handleOverviewBackgroundUpdate(e) {
this.timelineOverview.style.backgroundImage =
'url(' + e.detail + ')';
}
});
});
......@@ -10,24 +10,24 @@ class Timeline {
this.startTime = 0;
this.endTime = 0;
}
get all(){
get all() {
return this.#values;
}
get selection(){
get selection() {
return this.#selection;
}
set selection(value){
set selection(value) {
this.#selection = value;
}
selectTimeRange(start, end){
this.#selection = this.filter(
selectTimeRange(start, end) {
this.#selection = this.filter(
e => e.time >= start && e.time <= end);
}
getChunks(windowSizeMs){
getChunks(windowSizeMs) {
//TODO(zcankara) Fill this one
return this.chunkSizes(windowSizeMs);
}
get values(){
get values() {
//TODO(zcankara) Not to break something delete later
return this.#values;
}
......@@ -216,11 +216,11 @@ class Chunk {
return chunk;
}
getBreakdown(event_fn){
getBreakdown(event_fn) {
if (event_fn === void 0) {
event_fn = each => each;
}
let breakdown = {__proto__: null};
let breakdown = { __proto__: null };
this.items.forEach(each => {
const type = event_fn(each);
const v = breakdown[type];
......@@ -229,10 +229,10 @@ class Chunk {
return Object.entries(breakdown).sort((a, b) => a[1] - b[1]);
}
filter(){
filter() {
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