mirror of
https://github.com/servo/servo.git
synced 2025-08-04 13:10:20 +01:00
Update trace-dump.{js,css} from upstream
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.
This commit is contained in:
Nick Fitzgerald
parent
c226bf85a9
commit
d9ef29f62f
2 changed files with 518 additions and 449 deletions
|
|
@ -1,3 +1,7 @@
|
|||
/*
|
||||
!!! 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/. */
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
/*
|
||||
!!! 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";
|
||||
|
||||
/*** State *******************************************************************/
|
||||
(function (exports, window) {
|
||||
|
||||
window.COLORS = [
|
||||
/*** State ******************************************************************/
|
||||
|
||||
const COLORS = exports.COLORS = [
|
||||
"#0088cc",
|
||||
"#5b5fff",
|
||||
"#b82ee5",
|
||||
|
|
@ -15,15 +22,16 @@ window.COLORS = [
|
|||
"#0072ab",
|
||||
];
|
||||
|
||||
window.MIN_TRACE_TIME = 100000; // .1 ms
|
||||
|
||||
// A class containing the cleaned up trace state.
|
||||
window.State = (function () {
|
||||
return class {
|
||||
constructor() {
|
||||
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;
|
||||
|
|
@ -34,7 +42,7 @@ window.State = (function () {
|
|||
this.endSelection = 0;
|
||||
|
||||
// The current width of the window.
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowWidth = windowWidth;
|
||||
|
||||
// Whether the user is actively grabbing the left or right grabby, or the
|
||||
// viewport slider.
|
||||
|
|
@ -47,13 +55,12 @@ window.State = (function () {
|
|||
this.colorIndex = 0;
|
||||
this.categoryToColor = Object.create(null);
|
||||
|
||||
this.initialize();
|
||||
this.initialize(rawTraces);
|
||||
}
|
||||
|
||||
// Clean up and massage the trace data.
|
||||
initialize() {
|
||||
this.traces = TRACES.filter(t => t.endTime - t.startTime >= MIN_TRACE_TIME);
|
||||
window.TRACES = null;
|
||||
initialize(rawTraces) {
|
||||
this.traces = rawTraces.filter(t => t.endTime - t.startTime >= this.minimumTraceTime);
|
||||
|
||||
this.traces.sort((t1, t2) => {
|
||||
let cmp = t1.startTime - t2.startTime;
|
||||
|
|
@ -126,15 +133,91 @@ window.State = (function () {
|
|||
}
|
||||
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;
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
window.state = new State();
|
||||
/*** Utilities **************************************************************/
|
||||
|
||||
/*** 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.
|
||||
window.closestPowerOfTen = n => {
|
||||
const closestPowerOfTen = exports.closestPowerOfTen = n => {
|
||||
let powerOfTen = 1;
|
||||
let diff = Math.abs(n - powerOfTen);
|
||||
|
||||
|
|
@ -153,7 +236,7 @@ window.closestPowerOfTen = n => {
|
|||
|
||||
// Select the tick increment for the given range size and maximum number of
|
||||
// ticks to show for that range.
|
||||
window.selectIncrement = (range, maxTicks) => {
|
||||
const selectIncrement = exports.selectIncrement = (range, maxTicks) => {
|
||||
let increment = closestPowerOfTen(range / 10);
|
||||
while (range / increment > maxTicks) {
|
||||
increment *= 2;
|
||||
|
|
@ -162,39 +245,52 @@ window.selectIncrement = (range, maxTicks) => {
|
|||
};
|
||||
|
||||
// Get the category name for the given trace.
|
||||
window.traceCategory = trace => {
|
||||
const traceCategory = exports.traceCategory = trace => {
|
||||
return Object.keys(trace.category)[0];
|
||||
};
|
||||
|
||||
/*** Initial Persistent Element Creation **************************************/
|
||||
/*** Window Specific Code ***************************************************/
|
||||
|
||||
document.body.innerHTML = "";
|
||||
if (!window) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.sliderContainer = document.createElement("div");
|
||||
// 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";
|
||||
document.body.appendChild(sliderContainer);
|
||||
window.document.body.appendChild(sliderContainer);
|
||||
|
||||
window.leftGrabby = document.createElement("span");
|
||||
const leftGrabby = window.document.createElement("span");
|
||||
leftGrabby.className = "grabby";
|
||||
sliderContainer.appendChild(leftGrabby);
|
||||
|
||||
window.sliderViewport = document.createElement("span");
|
||||
const sliderViewport = window.document.createElement("span");
|
||||
sliderViewport.id = "slider-viewport";
|
||||
sliderContainer.appendChild(sliderViewport);
|
||||
|
||||
window.rightGrabby = document.createElement("span");
|
||||
const rightGrabby = window.document.createElement("span");
|
||||
rightGrabby.className = "grabby";
|
||||
sliderContainer.appendChild(rightGrabby);
|
||||
|
||||
window.tracesContainer = document.createElement("div");
|
||||
const tracesContainer = window.document.createElement("div");
|
||||
tracesContainer.id = "traces";
|
||||
document.body.appendChild(tracesContainer);
|
||||
window.document.body.appendChild(tracesContainer);
|
||||
|
||||
/*** Listeners ***************************************************************/
|
||||
/*** Listeners *************************************************************/
|
||||
|
||||
// Run the given function and render afterwards.
|
||||
window.withRender = fn => (...args) => {
|
||||
fn(...args);
|
||||
const withRender = fn => function () {
|
||||
fn.apply(null, arguments);
|
||||
render();
|
||||
};
|
||||
|
||||
|
|
@ -219,56 +315,37 @@ sliderViewport.addEventListener("mousedown", () => {
|
|||
});
|
||||
|
||||
window.addEventListener("mousemove", event => {
|
||||
let ratio = event.clientX / state.windowWidth;
|
||||
let relativeTime = ratio * state.maxTime;
|
||||
let absTime = state.minTime + relativeTime;
|
||||
absTime = Math.min(state.maxTime, absTime);
|
||||
absTime = Math.max(state.minTime, absTime);
|
||||
|
||||
if (state.grabbingSlider) {
|
||||
let delta = event.movementX / state.windowWidth * state.maxTime;
|
||||
if (delta < 0) {
|
||||
delta = Math.max(-state.startSelection, delta);
|
||||
} else {
|
||||
delta = Math.min(state.maxTime - state.endSelection, delta);
|
||||
}
|
||||
|
||||
state.startSelection += delta;
|
||||
state.endSelection += delta;
|
||||
state.moveSelection(event.movementX);
|
||||
event.preventDefault();
|
||||
render();
|
||||
} else if (state.grabbingLeft) {
|
||||
state.startSelection = Math.min(absTime, state.endSelection);
|
||||
state.updateStartSelection(event.clientX);
|
||||
event.preventDefault();
|
||||
render();
|
||||
} else if (state.grabbingRight) {
|
||||
state.endSelection = Math.max(absTime, state.startSelection);
|
||||
state.updateEndSelection(event.clientX);
|
||||
event.preventDefault();
|
||||
render();
|
||||
}
|
||||
});
|
||||
|
||||
sliderContainer.addEventListener("wheel", withRender(event => {
|
||||
let increment = state.maxTime / 1000;
|
||||
|
||||
state.startSelection -= event.deltaY * increment
|
||||
state.startSelection = Math.max(0, state.startSelection);
|
||||
state.startSelection = Math.min(state.startSelection, state.endSelection);
|
||||
|
||||
state.endSelection += event.deltaY * increment;
|
||||
state.endSelection = Math.min(state.maxTime, state.endSelection);
|
||||
state.endSelection = Math.max(state.startSelection, state.endSelection);
|
||||
state.zoomSelection(event.deltaY);
|
||||
}));
|
||||
|
||||
/*** Rendering ***************************************************************/
|
||||
/*** Rendering **************************************************************/
|
||||
|
||||
// Create a function that calls the given function `fn` only once per animation
|
||||
// frame.
|
||||
window.oncePerAnimationFrame = fn => {
|
||||
const oncePerAnimationFrame = fn => {
|
||||
let animationId = null;
|
||||
return () => {
|
||||
if (animationId !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(() => {
|
||||
animationId = window.requestAnimationFrame(() => {
|
||||
fn();
|
||||
animationId = null;
|
||||
});
|
||||
|
|
@ -276,7 +353,7 @@ window.oncePerAnimationFrame = fn => {
|
|||
};
|
||||
|
||||
// Only call the given function once per window width resize.
|
||||
window.oncePerWindowWidth = fn => {
|
||||
const oncePerWindowWidth = fn => {
|
||||
let lastWidth = null;
|
||||
return () => {
|
||||
if (state.windowWidth !== lastWidth) {
|
||||
|
|
@ -287,64 +364,52 @@ window.oncePerWindowWidth = fn => {
|
|||
};
|
||||
|
||||
// Top level entry point for rendering. Renders the current `window.state`.
|
||||
window.render = oncePerAnimationFrame(() => {
|
||||
const render = oncePerAnimationFrame(() => {
|
||||
renderSlider();
|
||||
renderTraces();
|
||||
});
|
||||
|
||||
// Render the slider at the top of the screen.
|
||||
window.renderSlider = () => {
|
||||
const renderSlider = () => {
|
||||
let selectionDelta = state.endSelection - state.startSelection;
|
||||
|
||||
leftGrabby.style.marginLeft = (state.startSelection / state.maxTime) * state.windowWidth + "px";
|
||||
|
||||
// -6px because of the 3px width of each grabby.
|
||||
sliderViewport.style.width = (selectionDelta / state.maxTime) * state.windowWidth - 6 + "px";
|
||||
|
||||
rightGrabby.style.rightMargin = (state.maxTime - state.endSelection) / state.maxTime
|
||||
* state.windowWidth + "px";
|
||||
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.
|
||||
window.renderSliderTicks = oncePerWindowWidth(() => {
|
||||
let oldTicks = Array.from(document.querySelectorAll(".slider-tick"));
|
||||
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 = increment / state.maxTime * state.windowWidth;
|
||||
let px = state.nsToPx(increment);
|
||||
let ms = 0;
|
||||
for (let i = 0; i < state.windowWidth; i += px) {
|
||||
let tick = document.createElement("div");
|
||||
let tick = window.document.createElement("div");
|
||||
tick.className = "slider-tick";
|
||||
tick.textContent = ms + " ms";
|
||||
tick.style.left = i + "px";
|
||||
document.body.appendChild(tick);
|
||||
window.document.body.appendChild(tick);
|
||||
ms += increment / 1000000;
|
||||
}
|
||||
});
|
||||
|
||||
// Render the individual traces.
|
||||
window.renderTraces = () => {
|
||||
const renderTraces = () => {
|
||||
renderTracesTicks();
|
||||
|
||||
let tracesToRender = [];
|
||||
for (let i = 0; i < state.traces.length; i++) {
|
||||
let trace = state.traces[i];
|
||||
let tracesToRender = state.getTracesInSelection();
|
||||
|
||||
if (trace.endTime < state.startSelection || trace.startTime > state.endSelection) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tracesToRender.push(trace);
|
||||
}
|
||||
|
||||
// Ensure that we have enouch traces 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.
|
||||
// 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();
|
||||
|
|
@ -361,7 +426,7 @@ window.renderTraces = () => {
|
|||
};
|
||||
|
||||
// Render the ticks behind the traces.
|
||||
window.renderTracesTicks = () => {
|
||||
const renderTracesTicks = () => {
|
||||
let oldTicks = Array.from(tracesContainer.querySelectorAll(".traces-tick"));
|
||||
for (let tick of oldTicks) {
|
||||
tick.remove();
|
||||
|
|
@ -369,7 +434,7 @@ window.renderTracesTicks = () => {
|
|||
|
||||
let selectionDelta = state.endSelection - state.startSelection;
|
||||
let increment = selectIncrement(selectionDelta, 10);
|
||||
let px = increment / selectionDelta * state.windowWidth;
|
||||
let px = state.nsToPx(increment);
|
||||
let offset = state.startSelection % increment;
|
||||
let time = state.startSelection - offset + increment;
|
||||
|
||||
|
|
@ -377,7 +442,7 @@ window.renderTracesTicks = () => {
|
|||
let tick = document.createElement("div");
|
||||
tick.className = "traces-tick";
|
||||
tick.textContent = Math.round(time / 1000000) + " ms";
|
||||
tick.style.left = (time - state.startSelection) / selectionDelta * state.windowWidth + "px";
|
||||
tick.style.left = state.nsToSelectionPx(time - state.startSelection) + "px";
|
||||
tracesContainer.appendChild(tick);
|
||||
|
||||
time += increment;
|
||||
|
|
@ -385,63 +450,63 @@ window.renderTracesTicks = () => {
|
|||
};
|
||||
|
||||
// Create the DOM structure for an individual trace.
|
||||
window.makeTraceTemplate = () => {
|
||||
let outer = document.createElement("div");
|
||||
const makeTraceTemplate = () => {
|
||||
let outer = window.document.createElement("div");
|
||||
outer.className = "outer";
|
||||
|
||||
let inner = document.createElement("div");
|
||||
let inner = window.document.createElement("div");
|
||||
inner.className = "inner";
|
||||
|
||||
let tooltip = document.createElement("div");
|
||||
let tooltip = window.document.createElement("div");
|
||||
tooltip.className = "tooltip";
|
||||
|
||||
let header = document.createElement("h3");
|
||||
let header = window.document.createElement("h3");
|
||||
header.className = "header";
|
||||
tooltip.appendChild(header);
|
||||
|
||||
let duration = document.createElement("h4");
|
||||
let duration = window.document.createElement("h4");
|
||||
duration.className = "duration";
|
||||
tooltip.appendChild(duration);
|
||||
|
||||
let pairs = document.createElement("dl");
|
||||
let pairs = window.document.createElement("dl");
|
||||
|
||||
let timeStartLabel = document.createElement("dt");
|
||||
let timeStartLabel = window.document.createElement("dt");
|
||||
timeStartLabel.textContent = "Start:"
|
||||
pairs.appendChild(timeStartLabel);
|
||||
|
||||
let timeStartValue = document.createElement("dd");
|
||||
let timeStartValue = window.document.createElement("dd");
|
||||
timeStartValue.className = "start";
|
||||
pairs.appendChild(timeStartValue);
|
||||
|
||||
let timeEndLabel = document.createElement("dt");
|
||||
let timeEndLabel = window.document.createElement("dt");
|
||||
timeEndLabel.textContent = "End:"
|
||||
pairs.appendChild(timeEndLabel);
|
||||
|
||||
let timeEndValue = document.createElement("dd");
|
||||
let timeEndValue = window.document.createElement("dd");
|
||||
timeEndValue.className = "end";
|
||||
pairs.appendChild(timeEndValue);
|
||||
|
||||
let urlLabel = document.createElement("dt");
|
||||
let urlLabel = window.document.createElement("dt");
|
||||
urlLabel.textContent = "URL:";
|
||||
pairs.appendChild(urlLabel);
|
||||
|
||||
let urlValue = document.createElement("dd");
|
||||
let urlValue = window.document.createElement("dd");
|
||||
urlValue.className = "url";
|
||||
pairs.appendChild(urlValue);
|
||||
|
||||
let iframeLabel = document.createElement("dt");
|
||||
let iframeLabel = window.document.createElement("dt");
|
||||
iframeLabel.textContent = "iframe?";
|
||||
pairs.appendChild(iframeLabel);
|
||||
|
||||
let iframeValue = document.createElement("dd");
|
||||
let iframeValue = window.document.createElement("dd");
|
||||
iframeValue.className = "iframe";
|
||||
pairs.appendChild(iframeValue);
|
||||
|
||||
let incrementalLabel = document.createElement("dt");
|
||||
let incrementalLabel = window.document.createElement("dt");
|
||||
incrementalLabel.textContent = "Incremental?";
|
||||
pairs.appendChild(incrementalLabel);
|
||||
|
||||
let incrementalValue = document.createElement("dd");
|
||||
let incrementalValue = window.document.createElement("dd");
|
||||
incrementalValue.className = "incremental";
|
||||
pairs.appendChild(incrementalValue);
|
||||
|
||||
|
|
@ -458,13 +523,10 @@ window.makeTraceTemplate = () => {
|
|||
// 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.
|
||||
window.renderTrace = (trace, elem) => {
|
||||
const renderTrace = (trace, elem) => {
|
||||
let inner = elem.querySelector(".inner");
|
||||
inner.style.width = (trace.endTime - trace.startTime) / (state.endSelection - state.startSelection)
|
||||
* state.windowWidth + "px";
|
||||
inner.style.marginLeft = (trace.startTime - state.startSelection)
|
||||
/ (state.endSelection - state.startSelection)
|
||||
* state.windowWidth + "px";
|
||||
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;
|
||||
|
|
@ -502,3 +564,6 @@ window.renderTrace = (trace, elem) => {
|
|||
};
|
||||
|
||||
render();
|
||||
|
||||
}(typeof exports === "object" ? exports : window,
|
||||
typeof window === "object" ? window : null));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue