palemoon-dev/platform/devtools/client/shared/test/browser_flame-graph-04.js

/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Tests that text metrics in the flame graph widget work properly.

const HTML_NS = "http://www.w3.org/1999/xhtml";
const {ELLIPSIS} = require("devtools/shared/l10n");
const {FlameGraph} = require("devtools/client/shared/widgets/FlameGraph");
const {FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE} = require("devtools/client/shared/widgets/FlameGraph");
const {FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY} = require("devtools/client/shared/widgets/FlameGraph");

add_task(function* () {
  yield addTab("about:blank");
  yield performTest();
  gBrowser.removeCurrentTab();
});

function* performTest() {
  let [host,, doc] = yield createHost();
  let graph = new FlameGraph(doc.body, 1);
  yield graph.ready();

  testGraph(graph);

  yield graph.destroy();
  host.destroy();
}

function testGraph(graph) {
  is(graph._averageCharWidth, getAverageCharWidth(),
    "The average char width was calculated correctly.");
  is(graph._overflowCharWidth, getCharWidth(ELLIPSIS),
    "The ellipsis char width was calculated correctly.");

  let text = "This text is maybe overflowing";
  let text1000px = graph._getFittedText(text, 1000);
  let text50px = graph._getFittedText(text, 50);
  let text10px = graph._getFittedText(text, 10);
  let text1px = graph._getFittedText(text, 1);

  is(graph._getTextWidthApprox(text), getAverageCharWidth() * text.length,
    "The approximate width was calculated correctly.");

  info("Text at 1000px width: " + text1000px);
  info("Text at 50px width  : " + text50px);
  info("Text at 10px width  : " + text10px);
  info("Text at 1px width   : " + text1px);

  is(text1000px, text,
    "The fitted text for 1000px width is correct.");

  isnot(text50px, text,
    "The fitted text for 50px width is correct (1).");

  ok(text50px.includes(ELLIPSIS),
    "The fitted text for 50px width is correct (2).");

  is(graph._getFittedText(text, FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE + 1), ELLIPSIS,
    "The fitted text for text font size width is correct.");

  is(graph._getFittedText(text, 1), "",
    "The fitted text for 1px width is correct.");
}

function getAverageCharWidth() {
  let letterWidthsSum = 0;

  let start = " ".charCodeAt(0);
  let end = "z".charCodeAt(0) + 1;

  for (let i = start; i < end; i++) {
    let char = String.fromCharCode(i);
    letterWidthsSum += getCharWidth(char);
  }

  return letterWidthsSum / (end - start);
}

function getCharWidth(char) {
  let canvas = document.createElementNS(HTML_NS, "canvas");
  let ctx = canvas.getContext("2d");

  let fontSize = FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE;
  let fontFamily = FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY;
  ctx.font = fontSize + "px " + fontFamily;

  return ctx.measureText(char).width;
}