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 Show 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>
<link href="./index.css" rel="stylesheet">
</head>
<style>
.count {
text-align: right; text-align: right;
width: 5em; 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 {}
.details {
width: 0.1em; width: 0.1em;
} }
.details span { .details span {
padding: 0 0.4em 0 0.4em; padding: 0 0.4em 0 0.4em;
background-color: var(--on-surface-color); background-color: var(--on-surface-color);
color: var(--surface-color); color: var(--surface-color);
border-radius: 25px; border-radius: 25px;
text-align: center; text-align: center;
cursor: -webkit-zoom-in; cursor: -webkit-zoom-in;
} }
#legend { #legend {
padding-right: 20px; padding-right: 20px;
} }
dl { dl {
float: right; float: right;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
padding: 20px; padding: 20px;
} }
</style> </style>
<div class="panel"> <div class="panel">
<h2>IC Panel</h2> <h2>IC Panel</h2>
......
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,10 +113,10 @@ class IcProcessor extends LogReader { ...@@ -113,10 +113,10 @@ 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.`);
...@@ -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;
} }
...@@ -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,7 +116,8 @@ found in the LICENSE file. --> ...@@ -116,7 +116,8 @@ 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 =
new App("#log-file-reader", "#map-panel", "#timeline-panel",
"#ic-panel", "#map-track", "#ic-track"); "#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;
...@@ -20,7 +21,7 @@ found in the LICENSE file. --> ...@@ -20,7 +21,7 @@ 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;
} }
...@@ -67,6 +68,7 @@ found in the LICENSE file. --> ...@@ -67,6 +68,7 @@ found in the LICENSE file. -->
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
...@@ -74,7 +76,7 @@ found in the LICENSE file. --> ...@@ -74,7 +76,7 @@ found in the LICENSE file. -->
</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>
......
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 {
...@@ -35,7 +35,7 @@ defineCustomElement('log-file-reader', (templateText) => ...@@ -35,7 +35,7 @@ defineCustomElement('log-file-reader', (templateText) =>
// Used for drop and file change. // Used for drop and file change.
event.preventDefault(); event.preventDefault();
this.dispatchEvent(new CustomEvent( this.dispatchEvent(new CustomEvent(
'fileuploadstart', {bubbles: true, composed: true})); 'fileuploadstart', { bubbles: true, composed: true }));
var host = event.dataTransfer ? event.dataTransfer : event.target; var host = event.dataTransfer ? event.dataTransfer : event.target;
this.readFile(host.files[0]); this.readFile(host.files[0]);
} }
...@@ -63,7 +63,10 @@ defineCustomElement('log-file-reader', (templateText) => ...@@ -63,7 +63,10 @@ defineCustomElement('log-file-reader', (templateText) =>
dataModel.chunk = e.target.result; dataModel.chunk = e.target.result;
this.updateLabel('Finished loading \'' + file.name + '\'.'); this.updateLabel('Finished loading \'' + file.name + '\'.');
this.dispatchEvent(new CustomEvent( this.dispatchEvent(new CustomEvent(
'fileuploadend', {bubbles: true, composed: true, detail: dataModel})); 'fileuploadend', {
bubbles: true, composed: true,
detail: dataModel
}));
this.section.className = 'success'; this.section.className = 'success';
this.$('#fileReader').classList.add('done'); this.$('#fileReader').classList.add('done');
} catch (err) { } catch (err) {
...@@ -74,4 +77,4 @@ defineCustomElement('log-file-reader', (templateText) => ...@@ -74,4 +77,4 @@ defineCustomElement('log-file-reader', (templateText) =>
// Delay the loading a bit to allow for CSS animations to happen. // Delay the loading a bit to allow for CSS animations to happen.
setTimeout(() => reader.readAsText(file), 0); 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,9 +2,11 @@ ...@@ -2,9 +2,11 @@
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;
...@@ -14,28 +16,32 @@ found in the LICENSE file. --> ...@@ -14,28 +16,32 @@ found in the LICENSE file. -->
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,
#timelineOverviewIndicator .rightMask {
background-color: rgba(200, 200, 200, 0.5); background-color: rgba(200, 200, 200, 0.5);
width: 10000px; width: 10000px;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0px; top: 0px;
} }
#timelineOverviewIndicator .leftMask {
#timelineOverviewIndicator .leftMask {
right: 100%; right: 100%;
} }
#timelineOverviewIndicator .rightMask {
#timelineOverviewIndicator .rightMask {
left: 100%; 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,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// 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) =>
...@@ -34,19 +34,19 @@ defineCustomElement('timeline-panel', (templateText) => ...@@ -34,19 +34,19 @@ defineCustomElement('timeline-panel', (templateText) =>
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(){ get timelineTracks() {
return this.$("slot").assignedNodes().filter( return this.$("slot").assignedNodes().filter(
track => track.nodeType === Node.ELEMENT_NODE); track => track.nodeType === Node.ELEMENT_NODE);
} }
handleTrackScroll(event){ handleTrackScroll(event) {
//TODO(zcankara) add forEachTrack helper method //TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) { for (const track of this.timelineTracks) {
track.scrollLeft = event.detail; track.scrollLeft = event.detail;
...@@ -74,9 +74,9 @@ defineCustomElement('timeline-panel', (templateText) => ...@@ -74,9 +74,9 @@ defineCustomElement('timeline-panel', (templateText) =>
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