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 {
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
.count {
text-align: right;
width: 5em;
}
}
.percentage {
.percentage {
text-align: right;
width: 5em;
}
}
.key {
.key {
padding-left: 1em;
}
}
.drilldown-group-title {
.drilldown-group-title {
font-weight: bold;
padding: 0.5em 0 0.2em 0;
}
.entry-details {
}
}
.entry-details TD {
}
.entry-details {}
.details {
.entry-details TD {}
.details {
width: 0.1em;
}
}
.details span {
.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;
}
}
#legend {
#legend {
padding-right: 20px;
}
}
dl {
dl {
float: right;
border-style: solid;
border-width: 1px;
padding: 20px;
}
}
</style>
<div class="panel">
<h2>IC Panel</h2>
......
......@@ -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,10 +113,10 @@ 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)){
|| (majorVersion < this.MAJOR_VERSION)) {
window.alert(
`Unsupported version ${majorVersion}.${minorVersion}. \n` +
`Please use the matching tool for given the V8 version.`);
......@@ -216,7 +216,7 @@ class CustomIcProcessor extends IcProcessor {
}
get timeline(){
get timeline() {
return this.#timeline;
}
......@@ -279,4 +279,4 @@ class IcLogEvent extends Event {
}
}
export { CustomIcProcessor as default, IcLogEvent};
export { CustomIcProcessor as default, IcLogEvent };
......@@ -116,7 +116,8 @@ found in the LICENSE file. -->
<script type="module">
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");
</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;
......@@ -20,7 +21,7 @@ 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);
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;
}
......@@ -67,6 +68,7 @@ found in the LICENSE file. -->
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
......@@ -74,7 +76,7 @@ found in the LICENSE file. -->
</style>
<section id="fileReaderSection">
<div id="fileReader" tabindex=1 >
<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>
......
// 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 {
......@@ -35,7 +35,7 @@ defineCustomElement('log-file-reader', (templateText) =>
// Used for drop and file change.
event.preventDefault();
this.dispatchEvent(new CustomEvent(
'fileuploadstart', {bubbles: true, composed: true}));
'fileuploadstart', { bubbles: true, composed: true }));
var host = event.dataTransfer ? event.dataTransfer : event.target;
this.readFile(host.files[0]);
}
......@@ -63,7 +63,10 @@ defineCustomElement('log-file-reader', (templateText) =>
dataModel.chunk = e.target.result;
this.updateLabel('Finished loading \'' + file.name + '\'.');
this.dispatchEvent(new CustomEvent(
'fileuploadend', {bubbles: true, composed: true, detail: dataModel}));
'fileuploadend', {
bubbles: true, composed: true,
detail: dataModel
}));
this.section.className = 'success';
this.$('#fileReader').classList.add('done');
} catch (err) {
......@@ -74,4 +77,4 @@ defineCustomElement('log-file-reader', (templateText) =>
// 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,9 +2,11 @@
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 {
#timelineOverview {
width: 100%;
height: 50px;
position: relative;
......@@ -14,28 +16,32 @@ found in the LICENSE file. -->
border: 1px var(--surface-color) solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
top: 0px;
cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
background-color: rgba(200, 200, 200, 0.5);
width: 10000px;
height: 100%;
position: absolute;
top: 0px;
}
#timelineOverviewIndicator .leftMask {
}
#timelineOverviewIndicator .leftMask {
right: 100%;
}
#timelineOverviewIndicator .rightMask {
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
}
</style>
<div class="panel">
<h2>Timeline Panel</h2>
......
......@@ -2,7 +2,7 @@
// 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) =>
......@@ -34,19 +34,19 @@ defineCustomElement('timeline-panel', (templateText) =>
get timeline() {
return this.timelineTracks[0].timeline;
}
set nofChunks(count){
set nofChunks(count) {
for (const track of this.timelineTracks) {
track.nofChunks = count;
}
}
get nofChunks(){
get nofChunks() {
return this.timelineTracks[0].nofChunks;
}
get timelineTracks(){
get timelineTracks() {
return this.$("slot").assignedNodes().filter(
track => track.nodeType === Node.ELEMENT_NODE);
}
handleTrackScroll(event){
handleTrackScroll(event) {
//TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) {
track.scrollLeft = event.detail;
......@@ -74,9 +74,9 @@ defineCustomElement('timeline-panel', (templateText) =>
indicator.style.left = left + 'px';
}
handleOverviewBackgroundUpdate(e){
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){
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