mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
d9ef29f62f
Part of making the trace-dump.js code unit testable was moving it out to another repo. This brings in all the changes made while writing unit tests, and making the code more unit testable.
569 lines
18 KiB
JavaScript
569 lines
18 KiB
JavaScript
/*
|
|
!!! THIS FILE IS COPIED FROM https://github.com/fitzgen/servo-trace-dump !!!
|
|
Make sure to upstream changes, or they will get lost!
|
|
*/
|
|
/* 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/. */
|
|
"use strict";
|
|
|
|
(function (exports, window) {
|
|
|
|
/*** State ******************************************************************/
|
|
|
|
const COLORS = exports.COLORS = [
|
|
"#0088cc",
|
|
"#5b5fff",
|
|
"#b82ee5",
|
|
"#ed2655",
|
|
"#f13c00",
|
|
"#d97e00",
|
|
"#2cbb0f",
|
|
"#0072ab",
|
|
];
|
|
|
|
// A class containing the cleaned up trace state.
|
|
const State = exports.State = (function () {
|
|
return class State {
|
|
constructor(rawTraces, windowWidth) {
|
|
// The traces themselves.
|
|
this.traces = null;
|
|
|
|
// Only display traces that take at least this long. Default is .1 ms.
|
|
this.minimumTraceTime = 100000;
|
|
|
|
// Maximimum and minimum times seen in traces. These get normalized to be
|
|
// relative to 0, so after initialization minTime is always 0.
|
|
this.minTime = Infinity;
|
|
this.maxTime = 0;
|
|
|
|
// The current start and end of the viewport selection.
|
|
this.startSelection = 0;
|
|
this.endSelection = 0;
|
|
|
|
// The current width of the window.
|
|
this.windowWidth = windowWidth;
|
|
|
|
// Whether the user is actively grabbing the left or right grabby, or the
|
|
// viewport slider.
|
|
this.grabbingLeft = false;
|
|
this.grabbingRight = false;
|
|
this.grabbingSlider = false;
|
|
|
|
// Maps category labels to a persistent color so that they are always
|
|
// rendered the same color.
|
|
this.colorIndex = 0;
|
|
this.categoryToColor = Object.create(null);
|
|
|
|
this.initialize(rawTraces);
|
|
}
|
|
|
|
// Clean up and massage the trace data.
|
|
initialize(rawTraces) {
|
|
this.traces = rawTraces.filter(t => t.endTime - t.startTime >= this.minimumTraceTime);
|
|
|
|
this.traces.sort((t1, t2) => {
|
|
let cmp = t1.startTime - t2.startTime;
|
|
if (cmp !== 0) {
|
|
return cmp;
|
|
}
|
|
|
|
return t1.endTime - t2.endTime;
|
|
});
|
|
|
|
this.findMinTime();
|
|
this.normalizeTimes();
|
|
this.removeIdleTime();
|
|
this.findMaxTime();
|
|
|
|
this.startSelection = 3 * this.maxTime / 8;
|
|
this.endSelection = 5 * this.maxTime / 8;
|
|
}
|
|
|
|
// Find the minimum timestamp.
|
|
findMinTime() {
|
|
this.minTime = this.traces.reduce((min, t) => Math.min(min, t.startTime),
|
|
Infinity);
|
|
}
|
|
|
|
// Find the maximum timestamp.
|
|
findMaxTime() {
|
|
this.maxTime = this.traces.reduce((max, t) => Math.max(max, t.endTime),
|
|
0);
|
|
}
|
|
|
|
// Normalize all times to be relative to the minTime and then reset the
|
|
// minTime to 0.
|
|
normalizeTimes() {
|
|
for (let i = 0; i < this.traces.length; i++) {
|
|
let trace = this.traces[i];
|
|
trace.startTime -= this.minTime;
|
|
trace.endTime -= this.minTime;
|
|
}
|
|
this.minTime = 0;
|
|
}
|
|
|
|
// Remove idle time between traces. It isn't useful to see and makes
|
|
// visualizing the data more difficult.
|
|
removeIdleTime() {
|
|
let totalIdleTime = 0;
|
|
let lastEndTime = null;
|
|
|
|
for (let i = 0; i < this.traces.length; i++) {
|
|
let trace = this.traces[i];
|
|
|
|
if (lastEndTime !== null && trace.startTime > lastEndTime) {
|
|
totalIdleTime += trace.startTime - lastEndTime;
|
|
}
|
|
|
|
lastEndTime = trace.endTime;
|
|
|
|
trace.startTime -= totalIdleTime;
|
|
trace.endTime -= totalIdleTime;
|
|
}
|
|
}
|
|
|
|
// Get the color for the given category, or assign one if no such color
|
|
// exists yet.
|
|
getColorForCategory(category) {
|
|
let result = this.categoryToColor[category];
|
|
if (!result) {
|
|
result = COLORS[this.colorIndex++ % COLORS.length];
|
|
this.categoryToColor[category] = result;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// Translate pixels into nanoseconds.
|
|
pxToNs(px) {
|
|
return px / this.windowWidth * this.maxTime;
|
|
}
|
|
|
|
// Translate nanoseconds into pixels.
|
|
nsToPx(ns) {
|
|
return ns / this.maxTime * this.windowWidth
|
|
}
|
|
|
|
// Translate nanoseconds into pixels in the zoomed viewport region.
|
|
nsToSelectionPx(ns) {
|
|
return ns / (this.endSelection - this.startSelection) * this.windowWidth;
|
|
}
|
|
|
|
// Update the start selection to the given position's time.
|
|
updateStartSelection(position) {
|
|
this.startSelection = clamp(this.pxToNs(position),
|
|
this.minTime,
|
|
this.endSelection);
|
|
}
|
|
|
|
// Update the end selection to the given position's time.
|
|
updateEndSelection(position) {
|
|
this.endSelection = clamp(this.pxToNs(position),
|
|
this.startSelection,
|
|
this.maxTime);
|
|
}
|
|
|
|
// Move the start and end selection by the given delta movement.
|
|
moveSelection(movement) {
|
|
let delta = clamp(this.pxToNs(movement),
|
|
-this.startSelection,
|
|
this.maxTime - this.endSelection);
|
|
|
|
this.startSelection += delta;
|
|
this.endSelection += delta;
|
|
}
|
|
|
|
// Widen or narrow the selection based on the given zoom.
|
|
zoomSelection(zoom) {
|
|
const increment = this.maxTime / 1000;
|
|
|
|
this.startSelection = clamp(this.startSelection - zoom * increment,
|
|
this.minTime,
|
|
this.endSelection);
|
|
|
|
this.endSelection = clamp(this.endSelection + zoom * increment,
|
|
this.startSelection,
|
|
this.maxTime);
|
|
}
|
|
|
|
// Get the set of traces that overlap the current selection.
|
|
getTracesInSelection() {
|
|
const tracesInSelection = [];
|
|
|
|
for (let i = 0; i < state.traces.length; i++) {
|
|
let trace = state.traces[i];
|
|
|
|
if (trace.endTime < state.startSelection) {
|
|
continue;
|
|
}
|
|
|
|
if (trace.startTime > state.endSelection) {
|
|
break;
|
|
}
|
|
|
|
tracesInSelection.push(trace);
|
|
}
|
|
|
|
return tracesInSelection;
|
|
}
|
|
};
|
|
}());
|
|
|
|
/*** Utilities **************************************************************/
|
|
|
|
// Ensure that min <= value <= max
|
|
const clamp = exports.clamp = (value, min, max) => {
|
|
return Math.max(Math.min(value, max), min);
|
|
};
|
|
|
|
// Get the closest power of ten to the given number.
|
|
const closestPowerOfTen = exports.closestPowerOfTen = n => {
|
|
let powerOfTen = 1;
|
|
let diff = Math.abs(n - powerOfTen);
|
|
|
|
while (true) {
|
|
let nextPowerOfTen = powerOfTen * 10;
|
|
let nextDiff = Math.abs(n - nextPowerOfTen);
|
|
|
|
if (nextDiff > diff) {
|
|
return powerOfTen;
|
|
}
|
|
|
|
diff = nextDiff;
|
|
powerOfTen = nextPowerOfTen;
|
|
}
|
|
};
|
|
|
|
// Select the tick increment for the given range size and maximum number of
|
|
// ticks to show for that range.
|
|
const selectIncrement = exports.selectIncrement = (range, maxTicks) => {
|
|
let increment = closestPowerOfTen(range / 10);
|
|
while (range / increment > maxTicks) {
|
|
increment *= 2;
|
|
}
|
|
return increment;
|
|
};
|
|
|
|
// Get the category name for the given trace.
|
|
const traceCategory = exports.traceCategory = trace => {
|
|
return Object.keys(trace.category)[0];
|
|
};
|
|
|
|
/*** Window Specific Code ***************************************************/
|
|
|
|
if (!window) {
|
|
return;
|
|
}
|
|
|
|
// XXX: Everything below here relies on the presence of `window`! Try to
|
|
// minimize this code and factor out the parts that don't explicitly need
|
|
// `window` or `document` as much as possible. We can't easily test code that
|
|
// relies upon `window`.
|
|
|
|
const state = exports.state = new State(window.TRACES, window.innerWidth);
|
|
|
|
/*** Initial Persistent Element Creation ************************************/
|
|
|
|
window.document.body.innerHTML = "";
|
|
|
|
const sliderContainer = window.document.createElement("div");
|
|
sliderContainer.id = "slider";
|
|
window.document.body.appendChild(sliderContainer);
|
|
|
|
const leftGrabby = window.document.createElement("span");
|
|
leftGrabby.className = "grabby";
|
|
sliderContainer.appendChild(leftGrabby);
|
|
|
|
const sliderViewport = window.document.createElement("span");
|
|
sliderViewport.id = "slider-viewport";
|
|
sliderContainer.appendChild(sliderViewport);
|
|
|
|
const rightGrabby = window.document.createElement("span");
|
|
rightGrabby.className = "grabby";
|
|
sliderContainer.appendChild(rightGrabby);
|
|
|
|
const tracesContainer = window.document.createElement("div");
|
|
tracesContainer.id = "traces";
|
|
window.document.body.appendChild(tracesContainer);
|
|
|
|
/*** Listeners *************************************************************/
|
|
|
|
// Run the given function and render afterwards.
|
|
const withRender = fn => function () {
|
|
fn.apply(null, arguments);
|
|
render();
|
|
};
|
|
|
|
window.addEventListener("resize", withRender(() => {
|
|
state.windowWidth = window.innerWidth;
|
|
}));
|
|
|
|
window.addEventListener("mouseup", () => {
|
|
state.grabbingSlider = state.grabbingLeft = state.grabbingRight = false;
|
|
});
|
|
|
|
leftGrabby.addEventListener("mousedown", () => {
|
|
state.grabbingLeft = true;
|
|
});
|
|
|
|
rightGrabby.addEventListener("mousedown", () => {
|
|
state.grabbingRight = true;
|
|
});
|
|
|
|
sliderViewport.addEventListener("mousedown", () => {
|
|
state.grabbingSlider = true;
|
|
});
|
|
|
|
window.addEventListener("mousemove", event => {
|
|
if (state.grabbingSlider) {
|
|
state.moveSelection(event.movementX);
|
|
event.preventDefault();
|
|
render();
|
|
} else if (state.grabbingLeft) {
|
|
state.updateStartSelection(event.clientX);
|
|
event.preventDefault();
|
|
render();
|
|
} else if (state.grabbingRight) {
|
|
state.updateEndSelection(event.clientX);
|
|
event.preventDefault();
|
|
render();
|
|
}
|
|
});
|
|
|
|
sliderContainer.addEventListener("wheel", withRender(event => {
|
|
state.zoomSelection(event.deltaY);
|
|
}));
|
|
|
|
/*** Rendering **************************************************************/
|
|
|
|
// Create a function that calls the given function `fn` only once per animation
|
|
// frame.
|
|
const oncePerAnimationFrame = fn => {
|
|
let animationId = null;
|
|
return () => {
|
|
if (animationId !== null) {
|
|
return;
|
|
}
|
|
|
|
animationId = window.requestAnimationFrame(() => {
|
|
fn();
|
|
animationId = null;
|
|
});
|
|
};
|
|
};
|
|
|
|
// Only call the given function once per window width resize.
|
|
const oncePerWindowWidth = fn => {
|
|
let lastWidth = null;
|
|
return () => {
|
|
if (state.windowWidth !== lastWidth) {
|
|
fn();
|
|
lastWidth = state.windowWidth;
|
|
}
|
|
};
|
|
};
|
|
|
|
// Top level entry point for rendering. Renders the current `window.state`.
|
|
const render = oncePerAnimationFrame(() => {
|
|
renderSlider();
|
|
renderTraces();
|
|
});
|
|
|
|
// Render the slider at the top of the screen.
|
|
const renderSlider = () => {
|
|
let selectionDelta = state.endSelection - state.startSelection;
|
|
|
|
// -6px because of the 3px width of each grabby.
|
|
sliderViewport.style.width = state.nsToPx(selectionDelta) - 6 + "px";
|
|
leftGrabby.style.marginLeft = state.nsToPx(state.startSelection) + "px";
|
|
rightGrabby.style.rightMargin = state.nsToPx(state.maxTime - state.endSelection) + "px";
|
|
|
|
renderSliderTicks();
|
|
};
|
|
|
|
// Render the ticks along the slider overview.
|
|
const renderSliderTicks = oncePerWindowWidth(() => {
|
|
let oldTicks = Array.from(window.document.querySelectorAll(".slider-tick"));
|
|
for (let tick of oldTicks) {
|
|
tick.remove();
|
|
}
|
|
|
|
let increment = selectIncrement(state.maxTime, 20);
|
|
let px = state.nsToPx(increment);
|
|
let ms = 0;
|
|
for (let i = 0; i < state.windowWidth; i += px) {
|
|
let tick = window.document.createElement("div");
|
|
tick.className = "slider-tick";
|
|
tick.textContent = ms + " ms";
|
|
tick.style.left = i + "px";
|
|
window.document.body.appendChild(tick);
|
|
ms += increment / 1000000;
|
|
}
|
|
});
|
|
|
|
// Render the individual traces.
|
|
const renderTraces = () => {
|
|
renderTracesTicks();
|
|
|
|
let tracesToRender = state.getTracesInSelection();
|
|
|
|
// Ensure that we have exactly enough trace row elements. If we have more
|
|
// elements than traces we are going to render, then remove some. If we have
|
|
// fewer elements than traces we are going to render, then add some.
|
|
let rows = Array.from(tracesContainer.querySelectorAll(".outer"));
|
|
while (rows.length > tracesToRender.length) {
|
|
rows.pop().remove();
|
|
}
|
|
while (rows.length < tracesToRender.length) {
|
|
let elem = makeTraceTemplate();
|
|
tracesContainer.appendChild(elem);
|
|
rows.push(elem);
|
|
}
|
|
|
|
for (let i = 0; i < tracesToRender.length; i++) {
|
|
renderTrace(tracesToRender[i], rows[i]);
|
|
}
|
|
};
|
|
|
|
// Render the ticks behind the traces.
|
|
const renderTracesTicks = () => {
|
|
let oldTicks = Array.from(tracesContainer.querySelectorAll(".traces-tick"));
|
|
for (let tick of oldTicks) {
|
|
tick.remove();
|
|
}
|
|
|
|
let selectionDelta = state.endSelection - state.startSelection;
|
|
let increment = selectIncrement(selectionDelta, 10);
|
|
let px = state.nsToPx(increment);
|
|
let offset = state.startSelection % increment;
|
|
let time = state.startSelection - offset + increment;
|
|
|
|
while (time < state.endSelection) {
|
|
let tick = document.createElement("div");
|
|
tick.className = "traces-tick";
|
|
tick.textContent = Math.round(time / 1000000) + " ms";
|
|
tick.style.left = state.nsToSelectionPx(time - state.startSelection) + "px";
|
|
tracesContainer.appendChild(tick);
|
|
|
|
time += increment;
|
|
}
|
|
};
|
|
|
|
// Create the DOM structure for an individual trace.
|
|
const makeTraceTemplate = () => {
|
|
let outer = window.document.createElement("div");
|
|
outer.className = "outer";
|
|
|
|
let inner = window.document.createElement("div");
|
|
inner.className = "inner";
|
|
|
|
let tooltip = window.document.createElement("div");
|
|
tooltip.className = "tooltip";
|
|
|
|
let header = window.document.createElement("h3");
|
|
header.className = "header";
|
|
tooltip.appendChild(header);
|
|
|
|
let duration = window.document.createElement("h4");
|
|
duration.className = "duration";
|
|
tooltip.appendChild(duration);
|
|
|
|
let pairs = window.document.createElement("dl");
|
|
|
|
let timeStartLabel = window.document.createElement("dt");
|
|
timeStartLabel.textContent = "Start:"
|
|
pairs.appendChild(timeStartLabel);
|
|
|
|
let timeStartValue = window.document.createElement("dd");
|
|
timeStartValue.className = "start";
|
|
pairs.appendChild(timeStartValue);
|
|
|
|
let timeEndLabel = window.document.createElement("dt");
|
|
timeEndLabel.textContent = "End:"
|
|
pairs.appendChild(timeEndLabel);
|
|
|
|
let timeEndValue = window.document.createElement("dd");
|
|
timeEndValue.className = "end";
|
|
pairs.appendChild(timeEndValue);
|
|
|
|
let urlLabel = window.document.createElement("dt");
|
|
urlLabel.textContent = "URL:";
|
|
pairs.appendChild(urlLabel);
|
|
|
|
let urlValue = window.document.createElement("dd");
|
|
urlValue.className = "url";
|
|
pairs.appendChild(urlValue);
|
|
|
|
let iframeLabel = window.document.createElement("dt");
|
|
iframeLabel.textContent = "iframe?";
|
|
pairs.appendChild(iframeLabel);
|
|
|
|
let iframeValue = window.document.createElement("dd");
|
|
iframeValue.className = "iframe";
|
|
pairs.appendChild(iframeValue);
|
|
|
|
let incrementalLabel = window.document.createElement("dt");
|
|
incrementalLabel.textContent = "Incremental?";
|
|
pairs.appendChild(incrementalLabel);
|
|
|
|
let incrementalValue = window.document.createElement("dd");
|
|
incrementalValue.className = "incremental";
|
|
pairs.appendChild(incrementalValue);
|
|
|
|
tooltip.appendChild(pairs);
|
|
outer.appendChild(tooltip);
|
|
outer.appendChild(inner);
|
|
return outer;
|
|
};
|
|
|
|
// Render `trace` into the given `elem`. We reuse the trace elements and modify
|
|
// them with the new trace that will populate this particular `elem` rather than
|
|
// clearing the DOM out and rebuilding it from scratch. Its a bit of a
|
|
// performance win when there are a lot of traces being rendered. Funnily
|
|
// enough, iterating over the complete set of traces hasn't been a performance
|
|
// problem at all and the bottleneck seems to be purely rendering the subset of
|
|
// traces we wish to show.
|
|
const renderTrace = (trace, elem) => {
|
|
let inner = elem.querySelector(".inner");
|
|
inner.style.width = state.nsToSelectionPx(trace.endTime - trace.startTime) + "px";
|
|
inner.style.marginLeft = state.nsToSelectionPx(trace.startTime - state.startSelection) + "px";
|
|
|
|
let category = traceCategory(trace);
|
|
inner.textContent = category;
|
|
inner.style.backgroundColor = state.getColorForCategory(category);
|
|
|
|
let header = elem.querySelector(".header");
|
|
header.textContent = category;
|
|
|
|
let duration = elem.querySelector(".duration");
|
|
duration.textContent = (trace.endTime - trace.startTime) / 1000000 + " ms";
|
|
|
|
let timeStartValue = elem.querySelector(".start");
|
|
timeStartValue.textContent = trace.startTime / 1000000 + " ms";
|
|
|
|
let timeEndValue = elem.querySelector(".end");
|
|
timeEndValue.textContent = trace.endTime / 1000000 + " ms";
|
|
|
|
if (trace.metadata) {
|
|
let urlValue = elem.querySelector(".url");
|
|
urlValue.textContent = trace.metadata.url;
|
|
urlValue.removeAttribute("hidden");
|
|
|
|
let iframeValue = elem.querySelector(".iframe");
|
|
iframeValue.textContent = trace.metadata.iframe.RootWindow ? "No" : "Yes";
|
|
iframeValue.removeAttribute("hidden");
|
|
|
|
let incrementalValue = elem.querySelector(".incremental");
|
|
incrementalValue.textContent = trace.metadata.incremental.Incremental ? "Yes" : "No";
|
|
incrementalValue.removeAttribute("hidden");
|
|
} else {
|
|
elem.querySelector(".url").setAttribute("hidden", "");
|
|
elem.querySelector(".iframe").setAttribute("hidden", "");
|
|
elem.querySelector(".incremental").setAttribute("hidden", "");
|
|
}
|
|
};
|
|
|
|
render();
|
|
|
|
}(typeof exports === "object" ? exports : window,
|
|
typeof window === "object" ? window : null));
|