Upload Kmake

deps/v8/tools/js/helper.mjs

@@ -0,0 +1,82 @@
+// Copyright 2021 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.
+
+export const KB = 1024;
+export const MB = KB * KB;
+export const GB = MB * KB;
+export const kMillis2Seconds = 1 / 1000;
+export const kMicro2Milli = 1 / 1000;
+
+export function formatBytes(bytes, digits = 2) {
+  const units = ['B', 'KiB', 'MiB', 'GiB'];
+  const divisor = 1024;
+  let index = 0;
+  while (index < units.length && bytes >= divisor) {
+    index++;
+    bytes /= divisor;
+  }
+  return bytes.toFixed(digits) + units[index];
+}
+
+export function formatMicroSeconds(micro) {
+  return (micro * kMicro2Milli).toFixed(1) + 'ms';
+}
+
+export function formatDurationMicros(micros, digits = 3) {
+  return formatDurationMillis(micros * kMicro2Milli, digits);
+}
+
+export function formatMillis(millis, digits = 3) {
+  return formatDurationMillis(millis, digits);
+}
+
+export function formatDurationMillis(millis, digits = 3) {
+  if (millis < 1000) {
+    if (millis < 1) {
+      if (millis == 0) return (0).toFixed(digits) + 's';
+      return (millis / kMicro2Milli).toFixed(digits) + 'ns';
+    }
+    return millis.toFixed(digits) + 'ms';
+  }
+  let seconds = millis / 1000;
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  seconds = seconds % 60;
+  let buffer = '';
+  if (hours > 0) buffer += hours + 'h ';
+  if (hours > 0 || minutes > 0) buffer += minutes + 'm ';
+  buffer += seconds.toFixed(digits) + 's';
+  return buffer;
+}
+
+// Get the offset in the 4GB virtual memory cage.
+export function calcOffsetInVMCage(address) {
+  let mask = (1n << 32n) - 1n;
+  let ret = Number(address & mask);
+  return ret;
+}
+
+export function delay(time) {
+  return new Promise(resolver => setTimeout(resolver, time));
+}
+
+export function defer() {
+  let resolve_func, reject_func;
+  const p = new Promise((resolve, reject) => {
+    resolve_func = resolve;
+    reject_func = resolve;
+  });
+  p.resolve = resolve_func;
+  p.reject = reject_func;
+  return p;
+}
+
+const kSimpleHtmlEscapeRegexp = /[\&\n><]/g;
+function escaperFn(char) {
+  return `&#${char.charCodeAt(0)};`;
+}
+
+export function simpleHtmlEscape(string) {
+  return string.replace(kSimpleHtmlEscapeRegexp, escaperFn);
+}

deps/v8/tools/js/log-file-reader-template.html

@@ -0,0 +1,117 @@
+<!-- Copyright 2021 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. -->
+
+<head>
+  <link href="./index.css" rel="stylesheet" />
+</head>
+<style>
+  #fileReader {
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.5s ease-in-out;
+    background-color: var(--surface-color);
+    border: solid 1px var(--file-reader-border-color);
+    border-radius: 5px;
+  }
+
+  #fileReader:hover {
+    background-color: var(--primary-color);
+    color: var(--on-primary-color);
+  }
+
+  .done #fileReader {
+    display: none;
+  }
+
+  .fail #fileReader {
+    background-color: var(--error-color);
+  }
+
+  .loading #fileReader {
+    cursor: wait;
+  }
+
+  #fileReader > input {
+    display: none;
+  }
+
+  #loader {
+    display: none;
+    will-change: rotate;
+  }
+
+  .loading #loader {
+    display: block;
+    position: fixed;
+    z-index: 9999;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: var(--file-reader-background-color);
+  }
+
+  #spinner, #progress, #progressText {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    top: 40%;
+    left: 50%;
+    margin-left: calc(-60px - 10px);
+    border-radius: 50%;
+  }
+  #spinner {
+    border: 20px solid var(--surface-color);
+    border-top: 20px solid var(--primary-color);
+    animation: spin 1s linear infinite;
+    will-change: transform;
+    transform: scale(1.1);
+  }
+
+  #progress, #progressText {
+    padding: 20px;
+  }
+
+  #progress {
+    transition: all 0.5s ease-in-out;
+  }
+
+  #progressText {
+    line-height: 120px;
+    font-size: 28px;
+    transform: scale(0.55);
+    text-align: center;
+    vertical-align: middle;
+    background-color:  var(--surface-color);
+  }
+
+  #label {
+    user-select: none;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
+<div id="root">
+  <div id="fileReader" class="panel" tabindex="1">
+    <span id="label">
+      Drag and drop a v8.log file into this area, or click to choose from disk.
+    </span>
+    <input id="file" type="file" name="file" />
+  </div>
+  <div id="loader">
+    <div id="progress"></div>
+    <div id="spinner"></div>
+    <div id="progressText"></div>
+  </div>
+</div>

deps/v8/tools/js/web-api-helper.mjs

@@ -0,0 +1,295 @@
+// Copyright 2021 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 {delay, formatBytes} from './helper.mjs';
+
+export class V8CustomElement extends HTMLElement {
+  _updateTimeoutId;
+  _updateCallback = this.forceUpdate.bind(this);
+
+  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);
+  }
+
+  requestUpdate(useAnimation = false) {
+    if (useAnimation) {
+      window.cancelAnimationFrame(this._updateTimeoutId);
+      this._updateTimeoutId =
+          window.requestAnimationFrame(this._updateCallback);
+    } else {
+      // Use timeout tasks to asynchronously update the UI without blocking.
+      clearTimeout(this._updateTimeoutId);
+      const kDelayMs = 5;
+      this._updateTimeoutId = setTimeout(this._updateCallback, kDelayMs);
+    }
+  }
+
+  forceUpdate() {
+    this._updateTimeoutId = undefined;
+    this._update();
+  }
+
+  _update() {
+    throw Error('Subclass responsibility');
+  }
+
+  get isFocused() {
+    return document.activeElement === this;
+  }
+}
+
+export class FileReader extends V8CustomElement {
+  constructor(templateText) {
+    super(templateText);
+    this.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('dragover', this.handleDragOver.bind(this));
+    this.addEventListener('drop', this.handleChange.bind(this));
+    this.$('#file').addEventListener('change', this.handleChange.bind(this));
+    this.fileReader = this.$('#fileReader');
+    this.fileReader.addEventListener('keydown', this.handleKeyEvent.bind(this));
+    this.progressNode = this.$('#progress');
+    this.progressTextNode = this.$('#progressText');
+  }
+
+  set error(message) {
+    this._updateLabel(message);
+    this.root.className = 'fail';
+  }
+
+  _updateLabel(text) {
+    this.$('#label').innerText = text;
+  }
+
+  handleKeyEvent(event) {
+    if (event.key == 'Enter') this.handleClick(event);
+  }
+
+  handleClick(event) {
+    this.$('#file').click();
+  }
+
+  handleChange(event) {
+    // Used for drop and file change.
+    event.preventDefault();
+    const host = event.dataTransfer ? event.dataTransfer : event.target;
+    this.readFile(host.files[0]);
+  }
+
+  handleDragOver(event) {
+    event.preventDefault();
+  }
+
+  connectedCallback() {
+    this.fileReader.focus();
+  }
+
+  get root() {
+    return this.$('#root');
+  }
+
+  setProgress(progress, processedBytes = 0) {
+    this.progress = Math.max(0, Math.min(progress, 1));
+    this.processedBytes = processedBytes;
+  }
+
+  updateProgressBar() {
+    // Create a circular progress bar, starting at 12 o'clock.
+    this.progressNode.style.backgroundImage = `conic-gradient(
+          var(--primary-color) 0%,
+          var(--primary-color) ${this.progress * 100}%,
+          var(--surface-color) ${this.progress * 100}%)`;
+    this.progressTextNode.innerText =
+        this.processedBytes ? formatBytes(this.processedBytes, 1) : '';
+    if (this.root.className == 'loading') {
+      window.requestAnimationFrame(() => this.updateProgressBar());
+    }
+  }
+
+  readFile(file) {
+    this.dispatchEvent(new CustomEvent('fileuploadstart', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        progressCallback: this.setProgress.bind(this),
+        totalSize: file.size,
+      }
+    }));
+    if (!file) {
+      this.error = 'Failed to load file.';
+      return;
+    }
+    this.fileReader.blur();
+    this.setProgress(0);
+    this.root.className = 'loading';
+    // Delay the loading a bit to allow for CSS animations to happen.
+    window.requestAnimationFrame(() => this.asyncReadFile(file));
+  }
+
+  async asyncReadFile(file) {
+    this.updateProgressBar();
+    const decoder = globalThis.TextDecoderStream;
+    if (decoder) {
+      await this._streamFile(file, decoder);
+    } else {
+      await this._readFullFile(file);
+    }
+    this._updateLabel(`Finished loading '${file.name}'.`);
+    this.dispatchEvent(
+        new CustomEvent('fileuploadend', {bubbles: true, composed: true}));
+    this.root.className = 'done';
+  }
+
+  async _readFullFile(file) {
+    const text = await file.text();
+    this._handleFileChunk(text);
+  }
+
+  async _streamFile(file, decoder) {
+    const stream = file.stream().pipeThrough(new decoder());
+    const reader = stream.getReader();
+    let chunk, readerDone;
+    do {
+      const readResult = await reader.read();
+      chunk = readResult.value;
+      readerDone = readResult.done;
+      if (!chunk) break;
+      this._handleFileChunk(chunk);
+      // Artificial delay to allow for layout updates.
+      await delay(5);
+    } while (!readerDone);
+  }
+
+  _handleFileChunk(chunk) {
+    this.dispatchEvent(new CustomEvent('fileuploadchunk', {
+      bubbles: true,
+      composed: true,
+      detail: chunk,
+    }));
+  }
+}
+
+export class DOM {
+  static element(type, options) {
+    const node = document.createElement(type);
+    if (options === undefined) return node;
+    if (typeof options === 'string') {
+      // Old behaviour: options = class string
+      node.className = options;
+    } else if (Array.isArray(options)) {
+      // Old behaviour: options = class array
+      DOM.addClasses(node, options);
+    } else {
+      // New behaviour: options = attribute dict
+      for (const [key, value] of Object.entries(options)) {
+        if (key == 'className') {
+          node.className = value;
+        } else if (key == 'classList') {
+          DOM.addClasses(node, value);
+        } else if (key == 'textContent') {
+          node.textContent = value;
+        } else if (key == 'children') {
+          for (const child of value) {
+            node.appendChild(child);
+          }
+        } else {
+          node.setAttribute(key, value);
+        }
+      }
+    }
+    return node;
+  }
+
+  static addClasses(node, classes) {
+    const classList = node.classList;
+    if (typeof classes === 'string') {
+      classList.add(classes);
+    } else {
+      for (let i = 0; i < classes.length; i++) {
+        classList.add(classes[i]);
+      }
+    }
+    return node;
+  }
+
+  static text(string) {
+    return document.createTextNode(string);
+  }
+
+  static button(label, clickHandler) {
+    const button = DOM.element('button');
+    button.innerText = label;
+    if (typeof clickHandler != 'function') {
+      throw new Error(
+          `DOM.button: Expected function but got clickHandler=${clickHandler}`);
+    }
+    button.onclick = clickHandler;
+    return button;
+  }
+
+  static div(options) {
+    return this.element('div', options);
+  }
+
+  static span(options) {
+    return this.element('span', options);
+  }
+
+  static table(options) {
+    return this.element('table', options);
+  }
+
+  static tbody(options) {
+    return this.element('tbody', options);
+  }
+
+  static td(textOrNode, className) {
+    const node = this.element('td');
+    if (typeof textOrNode === 'object') {
+      node.appendChild(textOrNode);
+    } else if (textOrNode) {
+      node.innerText = textOrNode;
+    }
+    if (className) node.className = className;
+    return node;
+  }
+
+  static tr(classes) {
+    return this.element('tr', classes);
+  }
+
+  static removeAllChildren(node) {
+    let range = document.createRange();
+    range.selectNodeContents(node);
+    range.deleteContents();
+  }
+
+  static defineCustomElement(
+      path, nameOrGenerator, maybeGenerator = undefined) {
+    let generator = nameOrGenerator;
+    let name = nameOrGenerator;
+    if (typeof nameOrGenerator == 'function') {
+      console.assert(maybeGenerator === undefined);
+      name = path.substring(path.lastIndexOf('/') + 1, path.length);
+    } else {
+      console.assert(typeof nameOrGenerator == 'string');
+      generator = maybeGenerator;
+    }
+    path = path + '-template.html';
+    fetch(path)
+        .then(stream => stream.text())
+        .then(
+            templateText =>
+                customElements.define(name, generator(templateText)));
+  }
+}