v8/tools/system-analyzer/helper.mjs
Zeynep Cankara e607d54a0e [tools][system-analyzer] Add map-details and map-transitions
This CL encapsulates map panel behaviour with custom
web components map-details for displaying information
and map-transitions to show map transition tree. The
web components emit/receive events to interact with
the app.

Bug: v8:10644

Change-Id: Ic61c2794ed7ab854ee61fa1e7c8fe9b1c3c31b7e
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2305889
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#69004}
2020-07-22 15:41:33 +00:00

97 lines
2.2 KiB
JavaScript

// 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.
const KB = 1024;
const MB = KB * KB;
const GB = MB * KB;
const kMillis2Seconds = 1 / 1000;
function formatBytes(bytes) {
const units = ['B', 'KiB', 'MiB', 'GiB'];
const divisor = 1024;
let index = 0;
while (index < units.length && bytes >= divisor) {
index++;
bytes /= divisor;
}
return bytes.toFixed(2) + units[index];
}
function formatSeconds(millis) {
return (millis * kMillis2Seconds).toFixed(2) + 's';
}
function 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)));
}
// DOM Helpers
function removeAllChildren(node) {
let range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();
}
function $(id) {
return document.querySelector(id)
}
function div(classes) {
let node = document.createElement('div');
if (classes !== void 0) {
if (typeof classes === 'string') {
node.classList.add(classes);
} else {
classes.forEach(cls => node.classList.add(cls));
}
}
return node;
}
class V8CustomElement extends HTMLElement {
constructor(templateText) {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = templateText;
}
$(id) {
return this.shadowRoot.querySelector(id);
}
querySelectorAll(query) {
return this.shadowRoot.querySelectorAll(query);
}
div(classes) {return div(classes)}
table(className) {
let node = document.createElement('table')
if (className) node.classList.add(className)
return node;
}
td(textOrNode) {
let node = document.createElement('td');
if (typeof textOrNode === 'object') {
node.appendChild(textOrNode);
} else {
node.innerText = textOrNode;
}
return node;
}
tr(){
return document.createElement('tr');
}
removeAllChildren(node) { return removeAllChildren(node); }
}
export {defineCustomElement, V8CustomElement, removeAllChildren, $, div};