Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-04 13:10:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update trace-dump.{js,css} from upstream

Browse source 
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 2016-05-09 13:22:09 -07:00
parent c226bf85a9
commit d9ef29f62f
2 changed files with 518 additions and 449 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/profile/trace-dump.css
View file

@ -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 /* 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 * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

289
components/profile/trace-dump.js
View file

@ -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 /* 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 * 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/. */ * 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", "#0088cc",
"#5b5fff", "#5b5fff",
"#b82ee5", "#b82ee5",
@ -15,15 +22,16 @@ window.COLORS = [
"#0072ab", "#0072ab",
]; ];
window.MIN_TRACE_TIME = 100000; // .1 ms
// A class containing the cleaned up trace state. // A class containing the cleaned up trace state.
window.State = (function () { const State = exports.State = (function () {
return class { return class State {
constructor() { constructor(rawTraces, windowWidth) {
// The traces themselves. // The traces themselves.
this.traces = null; 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 // Maximimum and minimum times seen in traces. These get normalized to be
// relative to 0, so after initialization minTime is always 0. // relative to 0, so after initialization minTime is always 0.
this.minTime = Infinity; this.minTime = Infinity;
@ -34,7 +42,7 @@ window.State = (function () {
this.endSelection = 0; this.endSelection = 0;
// The current width of the window. // 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 // Whether the user is actively grabbing the left or right grabby, or the
// viewport slider. // viewport slider.
@ -47,13 +55,12 @@ window.State = (function () {
this.colorIndex = 0; this.colorIndex = 0;
this.categoryToColor = Object.create(null); this.categoryToColor = Object.create(null);
this.initialize(); this.initialize(rawTraces);
} }
// Clean up and massage the trace data. // Clean up and massage the trace data.
initialize() { initialize(rawTraces) {
this.traces = TRACES.filter(t => t.endTime - t.startTime >= MIN_TRACE_TIME); this.traces = rawTraces.filter(t => t.endTime - t.startTime >= this.minimumTraceTime);
window.TRACES = null;
this.traces.sort((t1, t2) => { this.traces.sort((t1, t2) => {
let cmp = t1.startTime - t2.startTime; let cmp = t1.startTime - t2.startTime;
@ -126,15 +133,91 @@ window.State = (function () {
} }
return 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;
}
}; };
}()); }());
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. // Get the closest power of ten to the given number.
window.closestPowerOfTen = n => { const closestPowerOfTen = exports.closestPowerOfTen = n => {
let powerOfTen = 1; let powerOfTen = 1;
let diff = Math.abs(n - powerOfTen); 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 // Select the tick increment for the given range size and maximum number of
// ticks to show for that range. // ticks to show for that range.
window.selectIncrement = (range, maxTicks) => { const selectIncrement = exports.selectIncrement = (range, maxTicks) => {
let increment = closestPowerOfTen(range / 10); let increment = closestPowerOfTen(range / 10);
while (range / increment > maxTicks) { while (range / increment > maxTicks) {
increment *= 2; increment *= 2;
@ -162,39 +245,52 @@ window.selectIncrement = (range, maxTicks) => {
}; };
// Get the category name for the given trace. // Get the category name for the given trace.
window.traceCategory = trace => { const traceCategory = exports.traceCategory = trace => {
return Object.keys(trace.category)[0]; 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"; 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"; leftGrabby.className = "grabby";
sliderContainer.appendChild(leftGrabby); sliderContainer.appendChild(leftGrabby);
window.sliderViewport = document.createElement("span"); const sliderViewport = window.document.createElement("span");
sliderViewport.id = "slider-viewport"; sliderViewport.id = "slider-viewport";
sliderContainer.appendChild(sliderViewport); sliderContainer.appendChild(sliderViewport);
window.rightGrabby = document.createElement("span"); const rightGrabby = window.document.createElement("span");
rightGrabby.className = "grabby"; rightGrabby.className = "grabby";
sliderContainer.appendChild(rightGrabby); sliderContainer.appendChild(rightGrabby);
window.tracesContainer = document.createElement("div"); const tracesContainer = window.document.createElement("div");
tracesContainer.id = "traces"; tracesContainer.id = "traces";
document.body.appendChild(tracesContainer); window.document.body.appendChild(tracesContainer);
/*** Listeners ***************************************************************/ /*** Listeners *************************************************************/
// Run the given function and render afterwards. // Run the given function and render afterwards.
window.withRender = fn => (...args) => { const withRender = fn => function () {
fn(...args); fn.apply(null, arguments);
render(); render();
}; };
@ -219,56 +315,37 @@ sliderViewport.addEventListener("mousedown", () => {
}); });
window.addEventListener("mousemove", event => { 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) { if (state.grabbingSlider) {
let delta = event.movementX / state.windowWidth * state.maxTime; state.moveSelection(event.movementX);
if (delta < 0) { event.preventDefault();
delta = Math.max(-state.startSelection, delta);
} else {
delta = Math.min(state.maxTime - state.endSelection, delta);
}
state.startSelection += delta;
state.endSelection += delta;
render(); render();
} else if (state.grabbingLeft) { } else if (state.grabbingLeft) {
state.startSelection = Math.min(absTime, state.endSelection); state.updateStartSelection(event.clientX);
event.preventDefault();
render(); render();
} else if (state.grabbingRight) { } else if (state.grabbingRight) {
state.endSelection = Math.max(absTime, state.startSelection); state.updateEndSelection(event.clientX);
event.preventDefault();
render(); render();
} }
}); });
sliderContainer.addEventListener("wheel", withRender(event => { sliderContainer.addEventListener("wheel", withRender(event => {
let increment = state.maxTime / 1000; state.zoomSelection(event.deltaY);
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);
})); }));
/*** Rendering ***************************************************************/ /*** Rendering **************************************************************/
// Create a function that calls the given function `fn` only once per animation // Create a function that calls the given function `fn` only once per animation
// frame. // frame.
window.oncePerAnimationFrame = fn => { const oncePerAnimationFrame = fn => {
let animationId = null; let animationId = null;
return () => { return () => {
if (animationId !== null) { if (animationId !== null) {
return; return;
} }
animationId = requestAnimationFrame(() => { animationId = window.requestAnimationFrame(() => {
fn(); fn();
animationId = null; animationId = null;
}); });
@ -276,7 +353,7 @@ window.oncePerAnimationFrame = fn => {
}; };
// Only call the given function once per window width resize. // Only call the given function once per window width resize.
window.oncePerWindowWidth = fn => { const oncePerWindowWidth = fn => {
let lastWidth = null; let lastWidth = null;
return () => { return () => {
if (state.windowWidth !== lastWidth) { if (state.windowWidth !== lastWidth) {
@ -287,64 +364,52 @@ window.oncePerWindowWidth = fn => {
}; };
// Top level entry point for rendering. Renders the current `window.state`. // Top level entry point for rendering. Renders the current `window.state`.
window.render = oncePerAnimationFrame(() => { const render = oncePerAnimationFrame(() => {
renderSlider(); renderSlider();
renderTraces(); renderTraces();
}); });
// Render the slider at the top of the screen. // Render the slider at the top of the screen.
window.renderSlider = () => { const renderSlider = () => {
let selectionDelta = state.endSelection - state.startSelection; 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. // -6px because of the 3px width of each grabby.
sliderViewport.style.width = (selectionDelta / state.maxTime) * state.windowWidth - 6 + "px"; sliderViewport.style.width = state.nsToPx(selectionDelta) - 6 + "px";
leftGrabby.style.marginLeft = state.nsToPx(state.startSelection) + "px";
rightGrabby.style.rightMargin = (state.maxTime - state.endSelection) / state.maxTime rightGrabby.style.rightMargin = state.nsToPx(state.maxTime - state.endSelection) + "px";
* state.windowWidth + "px";
renderSliderTicks(); renderSliderTicks();
}; };
// Render the ticks along the slider overview. // Render the ticks along the slider overview.
window.renderSliderTicks = oncePerWindowWidth(() => { const renderSliderTicks = oncePerWindowWidth(() => {
let oldTicks = Array.from(document.querySelectorAll(".slider-tick")); let oldTicks = Array.from(window.document.querySelectorAll(".slider-tick"));
for (let tick of oldTicks) { for (let tick of oldTicks) {
tick.remove(); tick.remove();
} }
let increment = selectIncrement(state.maxTime, 20); let increment = selectIncrement(state.maxTime, 20);
let px = increment / state.maxTime * state.windowWidth; let px = state.nsToPx(increment);
let ms = 0; let ms = 0;
for (let i = 0; i < state.windowWidth; i += px) { 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.className = "slider-tick";
tick.textContent = ms + " ms"; tick.textContent = ms + " ms";
tick.style.left = i + "px"; tick.style.left = i + "px";
document.body.appendChild(tick); window.document.body.appendChild(tick);
ms += increment / 1000000; ms += increment / 1000000;
} }
}); });
// Render the individual traces. // Render the individual traces.
window.renderTraces = () => { const renderTraces = () => {
renderTracesTicks(); renderTracesTicks();
let tracesToRender = []; let tracesToRender = state.getTracesInSelection();
for (let i = 0; i < state.traces.length; i++) {
let trace = state.traces[i];
if (trace.endTime < state.startSelection || trace.startTime > state.endSelection) { // Ensure that we have exactly enough trace row elements. If we have more
continue; // 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.
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.
let rows = Array.from(tracesContainer.querySelectorAll(".outer")); let rows = Array.from(tracesContainer.querySelectorAll(".outer"));
while (rows.length > tracesToRender.length) { while (rows.length > tracesToRender.length) {
rows.pop().remove(); rows.pop().remove();
@ -361,7 +426,7 @@ window.renderTraces = () => {
}; };
// Render the ticks behind the traces. // Render the ticks behind the traces.
window.renderTracesTicks = () => { const renderTracesTicks = () => {
let oldTicks = Array.from(tracesContainer.querySelectorAll(".traces-tick")); let oldTicks = Array.from(tracesContainer.querySelectorAll(".traces-tick"));
for (let tick of oldTicks) { for (let tick of oldTicks) {
tick.remove(); tick.remove();
@ -369,7 +434,7 @@ window.renderTracesTicks = () => {
let selectionDelta = state.endSelection - state.startSelection; let selectionDelta = state.endSelection - state.startSelection;
let increment = selectIncrement(selectionDelta, 10); let increment = selectIncrement(selectionDelta, 10);
let px = increment / selectionDelta * state.windowWidth; let px = state.nsToPx(increment);
let offset = state.startSelection % increment; let offset = state.startSelection % increment;
let time = state.startSelection - offset + increment; let time = state.startSelection - offset + increment;
@ -377,7 +442,7 @@ window.renderTracesTicks = () => {
let tick = document.createElement("div"); let tick = document.createElement("div");
tick.className = "traces-tick"; tick.className = "traces-tick";
tick.textContent = Math.round(time / 1000000) + " ms"; 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); tracesContainer.appendChild(tick);
time += increment; time += increment;
@ -385,63 +450,63 @@ window.renderTracesTicks = () => {
}; };
// Create the DOM structure for an individual trace. // Create the DOM structure for an individual trace.
window.makeTraceTemplate = () => { const makeTraceTemplate = () => {
let outer = document.createElement("div"); let outer = window.document.createElement("div");
outer.className = "outer"; outer.className = "outer";
let inner = document.createElement("div"); let inner = window.document.createElement("div");
inner.className = "inner"; inner.className = "inner";
let tooltip = document.createElement("div"); let tooltip = window.document.createElement("div");
tooltip.className = "tooltip"; tooltip.className = "tooltip";
let header = document.createElement("h3"); let header = window.document.createElement("h3");
header.className = "header"; header.className = "header";
tooltip.appendChild(header); tooltip.appendChild(header);
let duration = document.createElement("h4"); let duration = window.document.createElement("h4");
duration.className = "duration"; duration.className = "duration";
tooltip.appendChild(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:" timeStartLabel.textContent = "Start:"
pairs.appendChild(timeStartLabel); pairs.appendChild(timeStartLabel);
let timeStartValue = document.createElement("dd"); let timeStartValue = window.document.createElement("dd");
timeStartValue.className = "start"; timeStartValue.className = "start";
pairs.appendChild(timeStartValue); pairs.appendChild(timeStartValue);
let timeEndLabel = document.createElement("dt"); let timeEndLabel = window.document.createElement("dt");
timeEndLabel.textContent = "End:" timeEndLabel.textContent = "End:"
pairs.appendChild(timeEndLabel); pairs.appendChild(timeEndLabel);
let timeEndValue = document.createElement("dd"); let timeEndValue = window.document.createElement("dd");
timeEndValue.className = "end"; timeEndValue.className = "end";
pairs.appendChild(timeEndValue); pairs.appendChild(timeEndValue);
let urlLabel = document.createElement("dt"); let urlLabel = window.document.createElement("dt");
urlLabel.textContent = "URL:"; urlLabel.textContent = "URL:";
pairs.appendChild(urlLabel); pairs.appendChild(urlLabel);
let urlValue = document.createElement("dd"); let urlValue = window.document.createElement("dd");
urlValue.className = "url"; urlValue.className = "url";
pairs.appendChild(urlValue); pairs.appendChild(urlValue);
let iframeLabel = document.createElement("dt"); let iframeLabel = window.document.createElement("dt");
iframeLabel.textContent = "iframe?"; iframeLabel.textContent = "iframe?";
pairs.appendChild(iframeLabel); pairs.appendChild(iframeLabel);
let iframeValue = document.createElement("dd"); let iframeValue = window.document.createElement("dd");
iframeValue.className = "iframe"; iframeValue.className = "iframe";
pairs.appendChild(iframeValue); pairs.appendChild(iframeValue);
let incrementalLabel = document.createElement("dt"); let incrementalLabel = window.document.createElement("dt");
incrementalLabel.textContent = "Incremental?"; incrementalLabel.textContent = "Incremental?";
pairs.appendChild(incrementalLabel); pairs.appendChild(incrementalLabel);
let incrementalValue = document.createElement("dd"); let incrementalValue = window.document.createElement("dd");
incrementalValue.className = "incremental"; incrementalValue.className = "incremental";
pairs.appendChild(incrementalValue); pairs.appendChild(incrementalValue);
@ -458,13 +523,10 @@ window.makeTraceTemplate = () => {
// enough, iterating over the complete set of traces hasn't been a performance // 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 // problem at all and the bottleneck seems to be purely rendering the subset of
// traces we wish to show. // traces we wish to show.
window.renderTrace = (trace, elem) => { const renderTrace = (trace, elem) => {
let inner = elem.querySelector(".inner"); let inner = elem.querySelector(".inner");
inner.style.width = (trace.endTime - trace.startTime) / (state.endSelection - state.startSelection) inner.style.width = state.nsToSelectionPx(trace.endTime - trace.startTime) + "px";
* state.windowWidth + "px"; inner.style.marginLeft = state.nsToSelectionPx(trace.startTime - state.startSelection) + "px";
inner.style.marginLeft = (trace.startTime - state.startSelection)
/ (state.endSelection - state.startSelection)
* state.windowWidth + "px";
let category = traceCategory(trace); let category = traceCategory(trace);
inner.textContent = category; inner.textContent = category;
@ -502,3 +564,6 @@ window.renderTrace = (trace, elem) => {
}; };
render(); render();
}(typeof exports === "object" ? exports : window,
typeof window === "object" ? window : null));