Skip to content

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

[tools][system-analyzer] Convert modules to ES6 

This CL identifies dependencies between modules
and convert existing javascript files to ES6
standard modules.

It cleans the unused code and remove duplicate
code throughout the app.

Bug: v8:10670

Change-Id: I787de8ca0d76c56aec5aeb3faa94a9e158a94c72
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2292237
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@{#68847}
parent a21c84cb
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 175 deletions
tools/system-analyzer/ic-model.js → tools/system-analyzer/ic-model.mjs
View file @ 832fac51
......@@ -2,21 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
let entries = [];
export let properties = [
'type',
'category',
'functionName',
'filePosition',
'state',
'key',
'map',
'reason',
'file',
];
import CustomIcProcessor from "./ic-processor.mjs";
// For compatibility with console scripts:
print = console.log;
......@@ -38,8 +24,8 @@ export class Group {
createSubGroups() {
this.groups = {};
for (let i = 0; i < properties.length; i++) {
let subProperty = properties[i];
for (let i = 0; i < CustomIcProcessor.kProperties.length; i++) {
let subProperty = CustomIcProcessor.kProperties[i];
if (this.property == subProperty) continue;
this.groups[subProperty] = Group.groupBy(this.entries, subProperty);
}
......
tools/system-analyzer/ic-panel.mjs
View file @ 832fac51
......@@ -2,7 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {Group, properties} from './ic-model.js';
import {Group} from './ic-model.mjs';
import CustomIcProcessor from "./ic-processor.mjs";
defineCustomElement('ic-panel', (templateText) =>
class ICPanel extends HTMLElement {
......@@ -27,6 +28,14 @@ defineCustomElement('ic-panel', (templateText) =>
return this.shadowRoot.querySelectorAll(query);
}
set entries(value){
this._entries = value;
}
get entries(){
return this._entries;
}
get groupKeySelect() {
return this.$('#group-key');
}
......@@ -143,7 +152,7 @@ defineCustomElement('ic-panel', (templateText) =>
let omitted = entries.length - max;
if (omitted > 0) {
let tr = document.createElement("tr");
let tdNode = td(tr, 'Omitted ' + omitted + " entries.");
let tdNode = this.td(tr, 'Omitted ' + omitted + " entries.");
tdNode.colSpan = 4;
fragment.appendChild(tr);
}
......@@ -200,9 +209,9 @@ defineCustomElement('ic-panel', (templateText) =>
initGroupKeySelect() {
let select = this.groupKeySelect;
select.options.length = 0;
for (let i in properties) {
for (let i in CustomIcProcessor.kProperties) {
let option = document.createElement("option");
option.text = properties[i];
option.text = CustomIcProcessor.kProperties[i];
select.add(option);
}
}
......
tools/system-analyzer/ic-processor.js → tools/system-analyzer/ic-processor.mjs
View file @ 832fac51
......@@ -160,9 +160,8 @@ class IcProcessor extends LogReader {
}
// ================
let entries = [];
let properties = [
IcProcessor.kProperties = [
'type',
'category',
'functionName',
......@@ -171,8 +170,9 @@ let properties = [
'key',
'map',
'reason',
'file',
'file'
];
class CustomIcProcessor extends IcProcessor {
constructor() {
super();
......@@ -245,3 +245,5 @@ class Entry {
return offset;
}
}
export { CustomIcProcessor as default };
\ No newline at end of file
tools/system-analyzer/index.html
View file @ 832fac51
......@@ -10,15 +10,10 @@ found in the LICENSE file. -->
<title>Indicium</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<!-- <link rel="icon" type="image/png" href="/images/favicon.png"/> -->
<!-- <script type="module" src="index.js"></script> -->
<script type="module" src="index.mjs"></script>
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="helper.js"></script>
<script type="module" src="log-file-reader.mjs"></script>
<script type="module" src="map-panel.mjs"></script>
<script type="module" src="timeline-panel.mjs"></script>
<script type="module" src="ic-panel.mjs"></script>
<script src="../splaytree.js"></script>
<script src="../codemap.js"></script>
<script src="../csvparser.js"></script>
......@@ -28,17 +23,24 @@ found in the LICENSE file. -->
<script src="../logreader.js"></script>
<script src="../arguments.js"></script>
<script src="../SourceMap.js"></script>
<script src="./map-processor.js"></script>
<script src="./ic-processor.js"></script>
<script src="./map-model.js"></script>
<style>
#instructions {
padding: 10px 10px 60px 10px ;
margin: auto;
background-color: #121212;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
kbd {
<style>
body {
font-family: 'Roboto', sans-serif;
color: white;
margin-left: 5%;
margin-right: 5%;
background-color: #000000;
}
.colorbox {
width: 10px;
height: 10px;
border: 1px black solid;
}
#instructions {
padding: 10px 10px 60px 10px ;
margin: auto;
}
kbd {
background-color: #BB86FC;
color:black;
border-radius: 3px;
......@@ -62,114 +64,13 @@ dd {
margin: 0;
}
</style>
<script>
'use strict';
// Event handlers
document.onkeydown = handleKeyDown;
function handleKeyDown(event) {
stateGlobal.navigation = document.state.navigation;
let nav = document.state.navigation;
switch(event.key) {
case "ArrowUp":
event.preventDefault();
if (event.shiftKey) {
nav.selectPrevEdge();
} else {
nav.moveInChunk(-1);
}
return false;
case "ArrowDown":
event.preventDefault();
if (event.shiftKey) {
nav.selectNextEdge();
} else {
nav.moveInChunk(1);
}
return false;
case "ArrowLeft":
nav.moveInChunks(false);
break;
case "ArrowRight":
nav.moveInChunks(true);
break;
case "+":
nav.increaseTimelineResolution();
break;
case "-":
nav.decreaseTimelineResolution();
break;
}
}
// Update application state
function updateDocumentState(){
document.state = stateGlobal.state;
try {
document.state.timeline = stateGlobal.timeline;
} catch (error) {
console.log(error);
console.log("cannot assign timeline to the state!");
}
}
// Map event log processing
function handleLoadTextMapProcessor(text) {
let mapProcessor = new MapProcessor();
return mapProcessor.processString(text);
}
// IC event file reading and log processing
function loadFileIC(file) {
let reader = new FileReader();
reader.onload = function(evt) {
let icProcessor = new CustomIcProcessor();
icProcessor.processString(this.result);
let entries = icProcessor.entries;
$("ic-panel").countSelect.innerHTML = entries.length;
$('#ic-panel').entries = entries;
}
reader.readAsText(file);
$("ic-panel").initGroupKeySelect();
}
function $(id) { return document.querySelector(id); }
// holds the state of the application
let stateGlobal = Object.create(null);
// call when a new file uploaded
function globalDataUpload(e) {
stateGlobal.timeline = e.detail;
if(!e.detail) return;
$('#container').style.display = 'block';
// instantiate the app logic
stateGlobal.fileData = e.detail;
stateGlobal.state = new State('#map-panel','#timeline-panel');
stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk);
updateDocumentState();
loadFileIC(stateGlobal.fileData.file);
}
function globalSearchBarEvent(e) {
if(!e.detail.isValidMap) return;
document.state.map = e.detail.map;
}
function handleSelectIcEvents(e){
if(!e.detail) return;
// Set selected IC events on the View
document.state.filteredEntries = e.detail;
}
function showMaps(e) {
if(!e.detail) return;
// Show selected maps on the View
document.state.view.transitionView.showMaps(e.detail);
}
<script type="module" >
import {globalSearchBarEvent, globalDataUpload, showMaps, handleSelectIcEvents} from './index.mjs';
//TODO(zcankara): Build an App component that has these methods, rather than using globals
globalThis.globalDataUpload = globalDataUpload;
globalThis.globalSearchBarEvent = globalSearchBarEvent;
globalThis.showMaps = showMaps;
globalThis.handleSelectIcEvents = handleSelectIcEvents;
</script>
</head>
<body>
......
tools/system-analyzer/index.js → tools/system-analyzer/index.mjs
View file @ 832fac51
......@@ -2,59 +2,20 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
// TODO(zc) make imports work
import CustomIcProcessor from "./ic-processor.mjs";
import {State} from './map-model.mjs';
import {MapProcessor} from './map-processor.mjs';
import './ic-panel.mjs';
import './timeline-panel.mjs';
import './map-panel.mjs';
import './log-file-reader.mjs';
// import "./helper.js";
import '../splaytree.js';
import '../codemap.js';
import '../csvparser.js';
import '../consarray.js';
import '../profile.js';
import '../profile_view.js';
import '../logreader.js';
import '../arguments.js';
import '../SourceMap.js';
import './map-processor.js';
import './ic-processor.js';
import './map-model.js';
define(Array.prototype, 'histogram', function(mapFn) {
let histogram = [];
for (let i = 0; i < this.length; i++) {
let value = this[i];
let index = Math.round(mapFn(value))
let bucket = histogram[index];
if (bucket !== undefined) {
bucket.push(value);
} else {
histogram[index] = [value];
}
}
for (let i = 0; i < histogram.length; i++) {
histogram[i] = histogram[i] || [];
}
return histogram;
});
Object.defineProperty(Edge.prototype, 'getColor', {
value: function() {
return transitionTypeToColor(this.type);
}
});
// ===================================
// Controller logic of the application
// Event handlers
document.onkeydown = handleKeyDown;
function handleKeyDown(event) {
stateGlobal.navigation = document.state.navigation;
let nav = document.state.navigation;
switch (event.key) {
case 'ArrowUp':
switch(event.key) {
case "ArrowUp":
event.preventDefault();
if (event.shiftKey) {
nav.selectPrevEdge();
......@@ -62,7 +23,7 @@ function handleKeyDown(event) {
nav.moveInChunk(-1);
}
return false;
case 'ArrowDown':
case "ArrowDown":
event.preventDefault();
if (event.shiftKey) {
nav.selectNextEdge();
......@@ -70,56 +31,55 @@ function handleKeyDown(event) {
nav.moveInChunk(1);
}
return false;
case 'ArrowLeft':
case "ArrowLeft":
nav.moveInChunks(false);
break;
case 'ArrowRight':
case "ArrowRight":
nav.moveInChunks(true);
break;
case '+':
case "+":
nav.increaseTimelineResolution();
break;
case '-':
case "-":
nav.decreaseTimelineResolution();
break;
}
}
// Update application state
function updateDocumentState() {
document.state = stateGlobal.state;
try {
document.state.timeline = stateGlobal.timeline;
} catch (error) {
console.log(error);
console.log('cannot assign timeline to state!');
}
function updateDocumentState(){
document.state = stateGlobal.state;
try {
document.state.timeline = stateGlobal.timeline;
} catch (error) {
console.log(error);
console.log("cannot assign timeline to state!");
}
}
// Map event log processing
function handleLoadTextMapProcessor(text) {
let mapProcessor = new MapProcessor();
return mapProcessor.processString(text);
let mapProcessor = new MapProcessor();
return mapProcessor.processString(text);
}
// IC event file reading and log processing
/*
function loadFileIC(file) {
let reader = new FileReader();
reader.onload = function(evt) {
let icProcessor = new CustomIcProcessor();
icProcessor.processString(this.result);
entries = icProcessor.entries;
$('ic-panel').countSelect.innerHTML = entries.length;
$('ic-panel').updateTable(entries);
} reader.readAsText(file);
$('ic-panel').initGroupKeySelect();
let entries = icProcessor.entries;
$("ic-panel").entries = entries;
$("ic-panel").countSelect.innerHTML = entries.length;
$("ic-panel").updateTable(entries);
}
reader.readAsText(file);
$("ic-panel").initGroupKeySelect();
}
*/
function $(id) {
return document.querySelector(id);
}
function $(id) { return document.querySelector(id); }
// holds the state of the application
let stateGlobal = Object.create(null);
......@@ -127,10 +87,11 @@ let stateGlobal = Object.create(null);
// call when a new file uploaded
function globalDataUpload(e) {
stateGlobal.timeline = e.detail;
if (!e.detail) return;
if(!e.detail) return;
$('#container').style.display = 'block';
// instantiate the app logic
stateGlobal.fileData = e.detail;
stateGlobal.state = new State();
stateGlobal.state = new State('#map-panel','#timeline-panel');
stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk);
updateDocumentState();
// process the IC explorer
......@@ -138,6 +99,19 @@ function globalDataUpload(e) {
}
function globalSearchBarEvent(e) {
if (!e.detail.isValidMap) return;
if(!e.detail.isValidMap) return;
document.state.map = e.detail.map;
}
function showMaps(e) {
// show maps on the view
document.state.view.transitionView.showMaps(e.detail);
}
function handleSelectIcEvents(e){
if(!e.detail) return;
// Set selected IC events on the View
document.state.filteredEntries = e.detail;
}
export {globalSearchBarEvent, globalDataUpload, showMaps, handleSelectIcEvents};
tools/system-analyzer/map-model.js → tools/system-analyzer/map-model.mjs
View file @ 832fac51
......@@ -2,9 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
// const kChunkHeight = 250;
// const kChunkWidth = 10;
import {kChunkWidth, kChunkHeight} from './map-processor.mjs';
class State {
constructor(mapPanelId, timelinePanelId) {
......@@ -698,25 +696,4 @@ function transitionTypeToColor(type) {
return '#9B6EDC';
}
// ======================= histogram ==========
Object.defineProperty(Edge.prototype, 'getColor', { value:function() {
return transitionTypeToColor(this.type);
}});
define(Array.prototype, "histogram", function(mapFn) {
let histogram = [];
for (let i = 0; i < this.length; i++) {
let value = this[i];
let index = Math.round(mapFn(value))
let bucket = histogram[index];
if (bucket !== undefined) {
bucket.push(value);
} else {
histogram[index] = [value];
}
}
for (let i = 0; i < histogram.length; i++) {
histogram[i] = histogram[i] || [];
}
return histogram;
});
export { State, div, table, tr, td};
\ No newline at end of file
tools/system-analyzer/map-panel.mjs
View file @ 832fac51
......@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import "./stats-panel.mjs";
import {V8Map} from "./map-processor.mjs";
defineCustomElement('map-panel', (templateText) =>
class MapPanel extends HTMLElement {
......@@ -88,3 +89,4 @@ defineCustomElement('map-panel', (templateText) =>
}
});
tools/system-analyzer/map-processor.js → tools/system-analyzer/map-processor.mjs
View file @ 832fac51
......@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// ===========================================================================
const kChunkHeight = 250;
const kChunkWidth = 10;
......@@ -369,6 +370,30 @@ class Edge {
this.time = time;
this.from = from;
this.to = to;
this.getColor = function(type){
switch (type) {
case 'new':
// green
return '#aedc6e';
case 'Normalize':
// violet
return '#d26edc';
case 'SlowToFast':
// orange
return '#dc9b6e';
case 'InitialMap':
// yellow
return '#EEFF41';
case 'Transition':
// pink/violet (primary)
return '#9B6EDC';
case 'ReplaceDescriptors':
// red
return '#dc6eae';
}
// pink/violet (primary)
return '#9B6EDC';
};
}
finishSetup() {
......@@ -760,3 +785,5 @@ class ArgumentsProcessor extends BaseArgumentsProcessor {
};
}
}
export { MapProcessor, V8Map, kChunkWidth, kChunkHeight};
\ No newline at end of file
tools/system-analyzer/stats-panel.mjs
View file @ 832fac51
// 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 {div, table, tr, td} from './map-model.mjs';
defineCustomElement('stats-panel', (templateText) =>
class StatsPanel extends HTMLElement {
......
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