From 95eeed52e4077819a61a609aadff7d57b4cd5a85 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 18 Nov 2020 16:51:07 +0100 Subject: [PATCH] [tools] Move system-analyzer view files to separate directory - introduce view specific helper.mjs module - clean up some imports Bug: v8:10644 Change-Id: I0497c1a962c90f61f2beca667aca4a3f53a11e59 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2545705 Reviewed-by: Sathya Gunasekaran Commit-Queue: Camillo Bruni Cr-Commit-Position: refs/heads/master@{#71269} --- tools/system-analyzer/helper.mjs | 250 +----------------- tools/system-analyzer/index.html | 7 +- tools/system-analyzer/index.mjs | 13 +- tools/system-analyzer/view/helper.mjs | 216 +++++++++++++++ .../{ => view}/ic-panel-template.html | 0 tools/system-analyzer/{ => view}/ic-panel.mjs | 13 +- .../{ => view}/log-file-reader-template.html | 0 .../{ => view}/log-file-reader.mjs | 2 +- .../{ => view}/map-panel-template.html | 0 .../system-analyzer/{ => view}/map-panel.mjs | 9 +- .../map-panel/map-details-template.html | 0 .../{ => view}/map-panel/map-details.mjs | 4 +- .../map-panel/map-transitions-template.html | 0 .../{ => view}/map-panel/map-transitions.mjs | 49 +++- .../{ => view}/source-panel-template.html | 0 .../{ => view}/source-panel.mjs | 11 +- .../{ => view}/stats-panel-template.html | 0 .../{ => view}/stats-panel.mjs | 9 +- .../{ => view}/timeline-panel-template.html | 0 .../{ => view}/timeline-panel.mjs | 4 +- .../timeline/timeline-track-template.html | 0 .../{ => view}/timeline/timeline-track.mjs | 10 +- 22 files changed, 302 insertions(+), 295 deletions(-) create mode 100644 tools/system-analyzer/view/helper.mjs rename tools/system-analyzer/{ => view}/ic-panel-template.html (100%) rename tools/system-analyzer/{ => view}/ic-panel.mjs (94%) rename tools/system-analyzer/{ => view}/log-file-reader-template.html (100%) rename tools/system-analyzer/{ => view}/log-file-reader.mjs (97%) rename tools/system-analyzer/{ => view}/map-panel-template.html (100%) rename tools/system-analyzer/{ => view}/map-panel.mjs (93%) rename tools/system-analyzer/{ => view}/map-panel/map-details-template.html (100%) rename tools/system-analyzer/{ => view}/map-panel/map-details.mjs (94%) rename tools/system-analyzer/{ => view}/map-panel/map-transitions-template.html (100%) rename tools/system-analyzer/{ => view}/map-panel/map-transitions.mjs (86%) rename tools/system-analyzer/{ => view}/source-panel-template.html (100%) rename tools/system-analyzer/{ => view}/source-panel.mjs (97%) rename tools/system-analyzer/{ => view}/stats-panel-template.html (100%) rename tools/system-analyzer/{ => view}/stats-panel.mjs (94%) rename tools/system-analyzer/{ => view}/timeline-panel-template.html (100%) rename tools/system-analyzer/{ => view}/timeline-panel.mjs (94%) rename tools/system-analyzer/{ => view}/timeline/timeline-track-template.html (100%) rename tools/system-analyzer/{ => view}/timeline/timeline-track.mjs (98%) diff --git a/tools/system-analyzer/helper.mjs b/tools/system-analyzer/helper.mjs index 26d34a71c9..bbf7a1241d 100644 --- a/tools/system-analyzer/helper.mjs +++ b/tools/system-analyzer/helper.mjs @@ -2,12 +2,12 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -const KB = 1024; -const MB = KB * KB; -const GB = MB * KB; -const kMillis2Seconds = 1 / 1000; +export const KB = 1024; +export const MB = KB * KB; +export const GB = MB * KB; +export const kMillis2Seconds = 1 / 1000; -function formatBytes(bytes) { +export function formatBytes(bytes) { const units = ['B', 'KiB', 'MiB', 'GiB']; const divisor = 1024; let index = 0; @@ -18,244 +18,10 @@ function formatBytes(bytes) { return bytes.toFixed(2) + units[index]; } -function formatSeconds(millis) { +export function formatSeconds(millis) { return (millis * kMillis2Seconds).toFixed(2) + 's'; } -class CSSColor { - static _cache = new Map(); - - static get(name) { - let color = this._cache.get(name); - if (color !== undefined) return color; - const style = getComputedStyle(document.body); - color = style.getPropertyValue(`--${name}`); - if (color === undefined) { - throw new Error(`CSS color does not exist: ${name}`); - } - this._cache.set(name, color); - return color; - } - static reset() { - this._cache.clear(); - } - - static get backgroundColor() { - return this.get('background-color'); - } - static get surfaceColor() { - return this.get('surface-color'); - } - static get primaryColor() { - return this.get('primary-color'); - } - static get secondaryColor() { - return this.get('secondary-color'); - } - static get onSurfaceColor() { - return this.get('on-surface-color'); - } - static get onBackgroundColor() { - return this.get('on-background-color'); - } - static get onPrimaryColor() { - return this.get('on-primary-color'); - } - static get onSecondaryColor() { - return this.get('on-secondary-color'); - } - static get defaultColor() { - return this.get('default-color'); - } - static get errorColor() { - return this.get('error-color'); - } - static get mapBackgroundColor() { - return this.get('map-background-color'); - } - static get timelineBackgroundColor() { - return this.get('timeline-background-color'); - } - static get red() { - return this.get('red'); - } - static get green() { - return this.get('green'); - } - static get yellow() { - return this.get('yellow'); - } - static get blue() { - return this.get('blue'); - } - static get orange() { - return this.get('orange'); - } - static get violet() { - return this.get('violet'); - } -} - -function typeToColor(type) { - switch (type) { - case 'new': - return CSSColor.green; - case 'Normalize': - return CSSColor.violet; - case 'SlowToFast': - return CSSColor.orange; - case 'InitialMap': - return CSSColor.yellow; - case 'Transition': - return CSSColor.primaryColor; - case 'ReplaceDescriptors': - return CSSColor.red; - case 'LoadGlobalIC': - return CSSColor.green; - case 'LoadIC': - return CSSColor.primaryColor; - case 'StoreInArrayLiteralIC': - return CSSColor.violet; - case 'StoreGlobalIC': - return CSSColor.blue; - case 'StoreIC': - return CSSColor.orange; - case 'KeyedLoadIC': - return CSSColor.red; - case 'KeyedStoreIC': - return CSSColor.yellow; - } - return CSSColor.secondaryColor; -} - -class DOM { - static div(classes) { - const node = document.createElement('div'); - if (classes !== void 0) { - if (typeof classes === 'string') { - node.className = classes; - } else { - classes.forEach(cls => node.classList.add(cls)); - } - } - return node; - } - - static table(className) { - const node = document.createElement('table'); - if (className) node.className = className; - return node; - } - - static td(textOrNode, className) { - const node = document.createElement('td'); - if (typeof textOrNode === 'object') { - node.appendChild(textOrNode); - } else if (textOrNode) { - node.innerText = textOrNode; - } - if (className) node.className = className; - return node; - } - - static tr(className) { - const node = document.createElement('tr'); - if (className) node.className = className; - return node; - } - - static text(string) { - return document.createTextNode(string); - } - - static removeAllChildren(node) { - let range = document.createRange(); - range.selectNodeContents(node); - range.deleteContents(); - } - - static defineCustomElement(path, generator) { - let name = path.substring(path.lastIndexOf('/') + 1, path.length); - path = path + '-template.html'; - fetch(path) - .then(stream => stream.text()) - .then( - templateText => - customElements.define(name, generator(templateText))); - } -} - -function $(id) { - return document.querySelector(id) -} - -class V8CustomElement extends HTMLElement { - _updateTimeoutId; - _updateCallback = this._update.bind(this); - - constructor(templateText) { - super(); - const shadowRoot = this.attachShadow({mode: 'open'}); - shadowRoot.innerHTML = templateText; - this._updateCallback = this._update.bind(this); - } - - $(id) { - return this.shadowRoot.querySelector(id); - } - - querySelectorAll(query) { - return this.shadowRoot.querySelectorAll(query); - } - - update() { - // Use timeout tasks to asynchronously update the UI without blocking. - clearTimeout(this._updateTimeoutId); - const kDelayMs = 5; - this._updateTimeoutId = setTimeout(this._updateCallback, kDelayMs); - } - - _update() { - throw Error('Subclass responsibility'); - } -} - -class LazyTable { - constructor(table, rowData, rowElementCreator) { - this._table = table; - this._rowData = rowData; - this._rowElementCreator = rowElementCreator; - const tbody = table.querySelector('tbody'); - table.replaceChild(document.createElement('tbody'), tbody); - table.querySelector('tfoot td').onclick = (e) => this._addMoreRows(); - this._addMoreRows(); - } - - _nextRowDataSlice() { - return this._rowData.splice(0, 100); - } - - _addMoreRows() { - const fragment = new DocumentFragment(); - for (let row of this._nextRowDataSlice()) { - const tr = this._rowElementCreator(row); - fragment.appendChild(tr); - } - this._table.querySelector('tbody').appendChild(fragment); - } -} - -function delay(time) { +export function delay(time) { return new Promise(resolver => setTimeout(resolver, time)); -} - -export { - DOM, - $, - V8CustomElement, - formatBytes, - typeToColor, - CSSColor, - delay, - LazyTable, -}; +} \ No newline at end of file diff --git a/tools/system-analyzer/index.html b/tools/system-analyzer/index.html index a861300f91..b58909003e 100644 --- a/tools/system-analyzer/index.html +++ b/tools/system-analyzer/index.html @@ -8,12 +8,13 @@ found in the LICENSE file. --> Indicium - - + + +