Quelle  ui.js   Sprache: JAVA

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

var stroke = {
  gcslice: "rgb(255,100,0)",
  minor: "rgb(0,255,100)",
  initialMajor: "rgb(180,60,255)",
};

var numSamples = 500;

var tests = new Map();

var gHistogram = new Map(); // {ms: count}
var gHistory = new FrameHistory(numSamples);
var gPerf = new PerfTracker();

var latencyGraph;
var memoryGraph;
var ctx;
var memoryCtx;

var loadState = "(init)"; // One of '(active)', '(inactive)', '(N/A)'
var testState = "idle"; // One of 'idle' or 'running'.
var enabled = { trackingSizes: false };

var gMemory = performance.mozMemory?.gc || performance.mozMemory || {};

var Firefox = class extends Host {
  start_turn() {
    // Handled by Gecko.
  }

  end_turn() {
    // Handled by Gecko.
  }

  suspend(duration) {
    // Not used; requestAnimationFrame takes its place.
    throw new Error("unimplemented");
  }

  get minorGCCount() {
    return gMemory.minorGCCount;
  }
  get majorGCCount() {
    return gMemory.majorGCCount;
  }
  get GCSliceCount() {
    return gMemory.sliceCount;
  }
  get gcBytes() {
    return gMemory.zone.gcBytes;
  }
  get mallocBytes() {
    return gMemory.zone.mallocBytes;
  }
  get gcAllocTrigger() {
    return gMemory.zone.gcAllocTrigger;
  }
  get mallocTrigger() {
    return gMemory.zone.mallocTriggerBytes;
  }

  features = {
    haveMemorySizes: 'gcBytes' in gMemory,
    haveGCCounts: 'majorGCCount' in gMemory,
  };
};

var gHost = new Firefox();

function parse_units(v) {
  if (!v.length) {
    return NaN;
  }
  var lastChar = v[v.length - 1].toLowerCase();
  if (!isNaN(parseFloat(lastChar))) {
    return parseFloat(v);
  }
  var units = parseFloat(v.substr(0, v.length - 1));
  if (lastChar == "k") {
    return units * 1e3;
  }
  if (lastChar == "m") {
    return units * 1e6;
  }
  if (lastChar == "g") {
    return units * 1e9;
  }
  return NaN;
}

var Graph = class {
  constructor(canvas) {
    this.ctx = canvas.getContext('2d');

    // Adjust scale for high-DPI displays.
    this.scale = window.devicePixelRatio || 1;
    let rect = canvas.getBoundingClientRect();
    canvas.width = Math.floor(rect.width * this.scale);
    canvas.height = Math.floor(rect.height * this.scale);
    canvas.style.width = rect.width;
    canvas.style.height = rect.height;

    // Record canvas size to draw into.
    this.width = canvas.width;
    this.height = canvas.height;

    this.layout = {
      xAxisLabel_Y: this.height - 20 * this.scale,
    };
  }

  xpos(index) {
    return (index / numSamples) * (this.width - 100 * this.scale);
  }

  clear() {
    this.ctx.clearRect(0, 0, this.width, this.height);
  }

  drawScale(delay) {
    this.drawHBar(delay, `${delay}ms`, "rgb(150,150,150)");
  }

  draw60fps() {
    this.drawHBar(1000 / 60, "60fps", "#00cf61", 25);
  }

  draw30fps() {
    this.drawHBar(1000 / 30, "30fps", "#cf0061", 25);
  }

  drawAxisLabels(x_label, y_label) {
    const ctx = this.ctx;

    ctx.font = `${10 * this.scale}px sans-serif`;

    ctx.fillText(x_label, this.width / 2, this.layout.xAxisLabel_Y);

    ctx.save();
    ctx.rotate(Math.PI / 2);
    var start = this.height / 2 - ctx.measureText(y_label).width / 2;
    ctx.fillText(y_label, start, -this.width + 20 * this.scale);
    ctx.restore();
  }

  drawFrame() {
    const ctx = this.ctx;
    const width = this.width;
    const height = this.height;

    // Draw frame to show size
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(width, 0);
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.closePath();
    ctx.stroke();
  }
};

var LatencyGraph = class extends Graph {
  constructor(ctx) {
    super(ctx);
  }

  ypos(delay) {
    return this.height + this.scale * (100 - Math.log(delay) * 64);
  }

  drawHBar(delay, label, color = "rgb(0,0,0)", label_offset = 0) {
    const ctx = this.ctx;

    let y = this.ypos(delay);

    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.fillText(
      label,
      this.xpos(numSamples) + 4 + label_offset,
      this.ypos(delay) + 3
    );

    ctx.beginPath();
    ctx.moveTo(this.xpos(0), this.ypos(delay));
    ctx.lineTo(this.xpos(numSamples) + label_offset, this.ypos(delay));
    ctx.stroke();
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,0,0)";
  }

  draw() {
    const ctx = this.ctx;

    this.clear();
    this.drawFrame();

    for (var delay of [10, 20, 30, 50, 100, 200, 400, 800]) {
      this.drawScale(delay);
    }
    this.draw60fps();
    this.draw30fps();

    var worst = 0,
      worstpos = 0;
    ctx.beginPath();
    for (let i = 0; i < numSamples; i++) {
      ctx.lineTo(this.xpos(i), this.ypos(gHistory.delays[i]));
      if (gHistory.delays[i] >= worst) {
        worst = gHistory.delays[i];
        worstpos = i;
      }
    }
    ctx.stroke();

    // Draw vertical lines marking minor and major GCs
    if (gHost.features.haveGCCounts) {
      ctx.strokeStyle = stroke.gcslice;
      let idx = sampleIndex % numSamples;
      const count = {
        major: gHistory.majorGCs[idx],
        minor: 0,
        slice: gHistory.slices[idx],
      };
      for (let i = 0; i < numSamples; i++) {
        idx = (sampleIndex + i) % numSamples;
        const isMajorStart = count.major < gHistory.majorGCs[idx];
        if (count.slice < gHistory.slices[idx]) {
          if (isMajorStart) {
            ctx.strokeStyle = stroke.initialMajor;
          }
          ctx.beginPath();
          ctx.moveTo(this.xpos(idx), 0);
          ctx.lineTo(this.xpos(idx), this.layout.xAxisLabel_Y);
          ctx.stroke();
          if (isMajorStart) {
            ctx.strokeStyle = stroke.gcslice;
          }
        }
        count.major = gHistory.majorGCs[idx];
        count.slice = gHistory.slices[idx];
      }

      ctx.strokeStyle = stroke.minor;
      idx = sampleIndex % numSamples;
      count.minor = gHistory.minorGCs[idx];
      for (let i = 0; i < numSamples; i++) {
        idx = (sampleIndex + i) % numSamples;
        if (count.minor < gHistory.minorGCs[idx]) {
          ctx.beginPath();
          ctx.moveTo(this.xpos(idx), 0);
          ctx.lineTo(this.xpos(idx), 20);
          ctx.stroke();
        }
        count.minor = gHistory.minorGCs[idx];
      }
    }

    ctx.fillStyle = "rgb(255,0,0)";
    if (worst) {
      ctx.fillText(
        `${worst.toFixed(2)}ms`,
        this.xpos(worstpos) - 10,
        this.ypos(worst) - 14
      );
    }

    // Mark and label the slowest frame
    ctx.beginPath();
    var where = sampleIndex % numSamples;
    ctx.arc(
      this.xpos(where),
      this.ypos(gHistory.delays[where]),
      5,
      0,
      Math.PI * 2,
      true
    );
    ctx.fill();
    ctx.fillStyle = "rgb(0,0,0)";

    this.drawAxisLabels("Time", "Pause between frames (log scale)");
  }
};

var MemoryGraph = class extends Graph {
  constructor(ctx) {
    super(ctx);
    this.range = 1;
  }

  ypos(size) {
    const percent = size / this.range;
    return (1 - percent) * this.height * 0.9 + this.scale * 20;
  }

  drawHBarForBytes(size, name, color) {
    this.drawHBar(size, `${format_bytes(size)} ${name}`, color)
  }

  drawHBar(size, label, color) {
    const ctx = this.ctx;

    const y = this.ypos(size);

    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.fillText(label, this.xpos(numSamples) + 4, y + 3);

    ctx.beginPath();
    ctx.moveTo(this.xpos(0), y);
    ctx.lineTo(this.xpos(numSamples), y);
    ctx.stroke();
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,0,0)";
  }

  draw() {
    const ctx = this.ctx;

    this.clear();
    this.drawFrame();

    let gcMaxPos = 0;
    let mallocMaxPos = 0;
    let gcMax = 0;
    let mallocMax = 0;
    for (let i = 0; i < numSamples; i++) {
      if (gHistory.gcBytes[i] >= gcMax) {
        gcMax = gHistory.gcBytes[i];
        gcMaxPos = i;
      }
      if (gHistory.mallocBytes[i] >= mallocMax) {
        mallocMax = gHistory.mallocBytes[i];
        mallocMaxPos = i;
      }
    }

    this.range = Math.max(gcMax, mallocMax, gHost.gcAllocTrigger, gHost.mallocTrigger);

    this.drawHBarForBytes(gcMax, "GC max", "#00cf61");
    this.drawHBarForBytes(mallocMax, "Malloc max", "#cc1111");
    this.drawHBarForBytes(gHost.gcAllocTrigger, "GC trigger", "#cc11cc");
    this.drawHBarForBytes(gHost.mallocTrigger, "Malloc trigger", "#cc11cc");

    ctx.fillStyle = "rgb(255,0,0)";

    if (gcMax !== 0) {
      ctx.fillText(
        format_bytes(gcMax),
        this.xpos(gcMaxPos) - 10,
        this.ypos(gcMax) - 14
      );
    }
    if (mallocMax !== 0) {
      ctx.fillText(
        format_bytes(mallocMax),
        this.xpos(mallocMaxPos) - 10,
        this.ypos(mallocMax) - 14
      );
    }

    const where = sampleIndex % numSamples;

    ctx.beginPath();
    ctx.arc(
      this.xpos(where),
      this.ypos(gHistory.gcBytes[where]),
      5,
      0,
      Math.PI * 2,
      true
    );
    ctx.fill();
    ctx.beginPath();
    ctx.arc(
      this.xpos(where),
      this.ypos(gHistory.mallocBytes[where]),
      5,
      0,
      Math.PI * 2,
      true
    );
    ctx.fill();

    ctx.beginPath();
    for (let i = 0; i < numSamples; i++) {
      let x = this.xpos(i);
      let y = this.ypos(gHistory.gcBytes[i]);
      if (i == (sampleIndex + 1) % numSamples) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
      if (i == where) {
        ctx.stroke();
      }
    }
    ctx.stroke();

    ctx.beginPath();
    for (let i = 0; i < numSamples; i++) {
      let x = this.xpos(i);
      let y = this.ypos(gHistory.mallocBytes[i]);
      if (i == (sampleIndex + 1) % numSamples) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
      if (i == where) {
        ctx.stroke();
      }
    }
    ctx.stroke();

    ctx.fillStyle = "rgb(0,0,0)";

    this.drawAxisLabels("Time", "Heap Memory Usage");
  }
};

function onUpdateDisplayChanged() {
  const do_graph = document.getElementById("do-graph");
  if (do_graph.checked) {
    window.requestAnimationFrame(handler);
    gHistory.resume();
  } else {
    gHistory.pause();
  }
  update_load_state_indicator();
}

function onDoLoadChange() {
  const do_load = document.getElementById("do-load");
  gLoadMgr.paused = !do_load.checked;
  console.log(`load paused: ${gLoadMgr.paused}`);
  update_load_state_indicator();
}

var previous = 0;
function handler(timestamp) {
  if (gHistory.is_stopped()) {
    return;
  }

  const completed = gLoadMgr.tick(timestamp);
  if (completed) {
    end_test(timestamp, gLoadMgr.lastActive);
    if (!gLoadMgr.stopped()) {
      start_test();
    }
    update_load_display();
  }

  if (testState == "running") {
    document.getElementById("test-progress").textContent =
      (gLoadMgr.currentLoadRemaining(timestamp) / 1000).toFixed(1) + " sec";
  }

  const delay = gHistory.on_frame(timestamp);

  update_histogram(gHistogram, delay);

  latencyGraph.draw();
  if (memoryGraph) {
    memoryGraph.draw();
  }
  window.requestAnimationFrame(handler);
}

// For interactive debugging.
//
// ['a', 'b', 'b', 'b', 'c', 'c'] => ['a', 'b x 3', 'c x 2']
function summarize(arr) {
  if (!arr.length) {
    return [];
  }

  var result = [];
  var run_start = 0;
  var prev = arr[0];
  for (let i = 1; i <= arr.length; i++) {
    if (i == arr.length || arr[i] != prev) {
      if (i == run_start + 1) {
        result.push(arr[i]);
      } else {
        result.push(prev + " x " + (i - run_start));
      }
      run_start = i;
    }
    if (i != arr.length) {
      prev = arr[i];
    }
  }

  return result;
}

function reset_draw_state() {
  gHistory.reset();
}

function onunload() {
  if (gLoadMgr) {
    gLoadMgr.deactivateLoad();
  }
}

async function onload() {
  // Collect all test loads into the `tests` Map.
  let imports = [];
  foreach_test_file(path => imports.push(import("./" + path)));
  await Promise.all(imports);

  // The order of `tests` is currently based on their asynchronous load
  // order, rather than the listed order. Rearrange by extracting the test
  // names from their filenames, which is kind of gross.
  _tests = tests;
  tests = new Map();
  foreach_test_file(fn => {
    // "benchmarks/foo.js" => "foo"
    const name = fn.split(/\//)[1].split(/\./)[0];
    tests.set(name, _tests.get(name));
  });
  _tests = undefined;

  gLoadMgr = new AllocationLoadManager(tests);

  // Load initial test duration.
  duration_changed();

  // Load initial garbage size.
  garbage_piles_changed();
  garbage_per_frame_changed();

  // Populate the test selection dropdown.
  var select = document.getElementById("test-selection");
  for (var [name, test] of tests) {
    test.name = name;
    var option = document.createElement("option");
    option.id = name;
    option.text = name;
    option.title = test.description;
    select.add(option);
  }

  // Load the initial test.
  gLoadMgr.setActiveLoad(gLoadMgr.getByName("noAllocation"));
  update_load_display();
  document.getElementById("test-selection").value = "noAllocation";

  // Polyfill rAF.
  var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;

  // Acquire our canvas.
  var canvas = document.getElementById("graph");
  latencyGraph = new LatencyGraph(canvas);

  if (!gHost.features.haveMemorySizes) {
    document.getElementById("memgraph-disabled").style.display = "block";
    document.getElementById("track-sizes-div").style.display = "none";
  }

  trackHeapSizes(document.getElementById("track-sizes").checked);

  update_load_state_indicator();
  gHistory.start();

  // Start drawing.
  reset_draw_state();
  window.requestAnimationFrame(handler);
}

function run_one_test() {
  start_test_cycle([gLoadMgr.activeLoad().name]);
}

function run_all_tests() {
  start_test_cycle([...tests.keys()]);
}

function start_test_cycle(tests_to_run) {
  // Convert from an iterable to an array for pop.
  const duration = gLoadMgr.testDurationMS / 1000;
  const mutators = tests_to_run.map(name => new SingleMutatorSequencer(gLoadMgr.getByName(name), gPerf, duration));
  const sequencer = new ChainSequencer(mutators);
  gLoadMgr.startSequencer(sequencer);
  testState = "running";
  gHistogram.clear();
  reset_draw_state();
}

function update_load_state_indicator() {
  if (
    !gLoadMgr.load_running() ||
    gLoadMgr.activeLoad().name == "noAllocation"
  ) {
    loadState = "(none)";
  } else if (gHistory.is_stopped() || gLoadMgr.paused) {
    loadState = "(inactive)";
  } else {
    loadState = "(active)";
  }
  document.getElementById("load-running").textContent = loadState;
}

function start_test() {
  console.log(`Running test: ${gLoadMgr.activeLoad().name}`);
  document.getElementById("test-selection").value = gLoadMgr.activeLoad().name;
  update_load_state_indicator();
}

function end_test(timestamp, load) {
  document.getElementById("test-progress").textContent = "(not running)";
  report_test_result(load, gHistogram);
  gHistogram.clear();
  console.log(`Ending test ${load.name}`);
  if (gLoadMgr.stopped()) {
    testState = "idle";
  }
  update_load_state_indicator();
  reset_draw_state();
}

function compute_test_spark_histogram(histogram) {
  const percents = compute_spark_histogram_percents(histogram);

  var sparks = "▁▂▃▄▅▆▇█";
  var colors = [
    "#aaaa00",
    "#007700",
    "#dd0000",
    "#ff0000",
    "#ff0000",
    "#ff0000",
    "#ff0000",
    "#ff0000",
  ];
  var line = "";
  for (let i = 0; i < percents.length; ++i) {
    var spark = sparks.charAt(parseInt(percents[i] * sparks.length));
    line += `<span style="color:${colors[i]}">${spark}</span>`;
  }
  return line;
}

function report_test_result(load, histogram) {
  var resultList = document.getElementById("results-display");
  var resultElem = document.createElement("div");
  var score = compute_test_score(histogram);
  var sparks = compute_test_spark_histogram(histogram);
  var params = `(${format_num(load.garbagePerFrame)},${format_num(
    load.garbagePiles
  )})`;
  resultElem.innerHTML = `${score.toFixed(3)} ms/s : ${sparks} : ${
    load.name
  }${params} - ${load.description}`;
  resultList.appendChild(resultElem);
}

function update_load_display() {
  const garbage = gLoadMgr.activeLoad()
    ? gLoadMgr.activeLoad().garbagePerFrame
    : parse_units(gDefaultGarbagePerFrame);
  document.getElementById("garbage-per-frame").value = format_num(garbage);
  const piles = gLoadMgr.activeLoad()
    ? gLoadMgr.activeLoad().garbagePiles
    : parse_units(gDefaultGarbagePiles);
  document.getElementById("garbage-piles").value = format_num(piles);
  update_load_state_indicator();
}

function duration_changed() {
  var durationInput = document.getElementById("test-duration");
  gLoadMgr.testDurationMS = parseInt(durationInput.value) * 1000;
  console.log(
    `Updated test duration to: ${gLoadMgr.testDurationMS / 1000} seconds`
  );
}

function onLoadChange() {
  var select = document.getElementById("test-selection");
  console.log(`Switching to test: ${select.value}`);
  gLoadMgr.setActiveLoad(gLoadMgr.getByName(select.value));
  update_load_display();
  gHistogram.clear();
  reset_draw_state();
}

function garbage_piles_changed() {
  const input = document.getElementById("garbage-piles");
  const value = parse_units(input.value);
  if (isNaN(value)) {
    update_load_display();
    return;
  }

  if (gLoadMgr.load_running()) {
    gLoadMgr.change_garbagePiles(value);
    console.log(
      `Updated garbage-piles to ${gLoadMgr.activeLoad().garbagePiles} items`
    );
  }
  gHistogram.clear();
  reset_draw_state();
}

function garbage_per_frame_changed() {
  const input = document.getElementById("garbage-per-frame");
  var value = parse_units(input.value);
  if (isNaN(value)) {
    update_load_display();
    return;
  }
  if (gLoadMgr.load_running()) {
    gLoadMgr.change_garbagePerFrame(value);
    console.log(
      `Updated garbage-per-frame to ${
        gLoadMgr.activeLoad().garbagePerFrame
      } items`
    );
  }
}

function trackHeapSizes(track) {
  enabled.trackingSizes = track && gHost.features.haveMemorySizes;

  var canvas = document.getElementById("memgraph");

  if (enabled.trackingSizes) {
    canvas.style.display = "block";
    memoryGraph = new MemoryGraph(canvas);
  } else {
    canvas.style.display = "none";
    memoryGraph = null;
  }
}