Skip to content

Instantly share code, notes, and snippets.

@DickSmith

DickSmith/times_arm64_disabled.html

Created March 13, 2018 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DickSmith/0d0e377c4de21c0ea717e932a7f0305a to your computer and use it in GitHub Desktop.
Save DickSmith/0d0e377c4de21c0ea717e932a7f0305a to your computer and use it in GitHub Desktop.
Download ZIP
Android NativeScript with ARM64 Enabled and Disabled
Raw
times_arm64_disabled.html
<!DOCTYPE html>
<html>
<head>
<title>Profiling</title>
<style>
* {
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.trace {
position: absolute;
border: 1px solid black;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #DDD;
cursor: default;
line-height: 20px;
height: 20px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}
.trace.Modules {
background-color: #BFF;
}
.trace.Runtime {
background-color: #FFB;
}
.trace:hover {
background-color: #FFF;
border-color: orange;
z-index: 1;
box-shadow: 0px 1px 5px black;
}
</style>
</head>
<body>
<script>
var timeline = [{"domain":"Runtime","name":"Extracting assets","from":1520963782938,"to":1520963783424},{"domain":"Runtime","name":"Runtime.init","from":1520963783430,"to":1520963783519},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/tns-java-classes.js","from":1520963783644.128,"to":1520963783669.259},{"domain":"Runtime","name":"RequireCallback /data/data/com.ugroupmedia.pnp.client.mobile/files/app/tns-java-classes.js","from":1520963783643.784,"to":1520963783669.349},{"domain":"Runtime","name":"Load","from":1520963783640.913,"to":1520963783669.373},{"domain":"Runtime","name":"RuntimeHelper.initRuntime","from":1520963782891,"to":1520963783669},{"domain":"Runtime","name":"Compile, no cache","from":1520963783677.27,"to":1520963783710.507},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/bundle.js","from":1520963783671.474,"to":1520963783710.557},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/bundle.js","from":1520963783671.462,"to":1520963783805.569},{"domain":"Runtime","name":"RequireCallback ./bundle","from":1520963783671.288,"to":1520963783805.688},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/starter.js","from":1520963783670.605,"to":1520963783805.717},{"domain":"Runtime","name":"RequireCallback /data/data/com.ugroupmedia.pnp.client.mobile/files/app/./starter.js","from":1520963783670.429,"to":1520963783805.742},{"domain":"Runtime","name":"Load","from":1520963783670.328,"to":1520963783805.763},{"domain":"Runtime","name":"Runtime.run","from":1520963783669,"to":1520963783805},{"domain":"Runtime","name":"NaitveScriptApplication.onCreate","from":1520963782890,"to":1520963783805},{"domain":"Runtime","name":"Materizlizing class: android/content/Intent","from":1520963783836.81,"to":1520963783868.54},{"domain":"Runtime","name":"Materizlizing class: android/app/ApplicationPackageManager","from":1520963784384.307,"to":1520963784404.837},{"domain":"Runtime","name":"Materizlizing class: android/view/View","from":1520963784505.085,"to":1520963784555.012},{"domain":"Runtime","name":"Materizlizing class: android/view/ViewGroup","from":1520963784505.052,"to":1520963784563.097},{"domain":"Runtime","name":"Materizlizing class: android/widget/FrameLayout","from":1520963784505.028,"to":1520963784563.604},{"domain":"Runtime","name":"Materizlizing class: com/android/internal/policy/PhoneWindow$DecorView","from":1520963784504.904,"to":1520963784565.558},{"domain":"Runtime","name":"MarkReachableObjects: com.tns.gen.android.app.Application_ActivityLifecycleCallbacks","from":1520963784715.734,"to":1520963785444.425},{"domain":"Runtime","name":"Compile, no cache","from":1520963785948.422,"to":1520963785970.248},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/10.js","from":1520963785946.457,"to":1520963785970.297},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/10.js","from":1520963785946.435,"to":1520963785970.525},{"domain":"Runtime","name":"RequireCallback ./10.js","from":1520963785946.202,"to":1520963785970.578},{"domain":"Runtime","name":"Compile, no cache","from":1520963786029.138,"to":1520963786059.225},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/4.js","from":1520963786025.987,"to":1520963786059.289},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/4.js","from":1520963786025.954,"to":1520963786059.547},{"domain":"Runtime","name":"RequireCallback ./4.js","from":1520963786025.575,"to":1520963786059.613},{"domain":"Runtime","name":"Compile, no cache","from":1520963786063.562,"to":1520963786096.938},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/3.js","from":1520963786060.452,"to":1520963786096.994},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/3.js","from":1520963786060.424,"to":1520963786097.254},{"domain":"Runtime","name":"RequireCallback ./3.js","from":1520963786060.104,"to":1520963786097.313},{"domain":"Runtime","name":"Compile, no cache","from":1520963786101.923,"to":1520963786151.225},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/0.js","from":1520963786097.936,"to":1520963786151.289},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/0.js","from":1520963786097.912,"to":1520963786151.663},{"domain":"Runtime","name":"RequireCallback ./0.js","from":1520963786097.647,"to":1520963786151.734},{"domain":"Runtime","name":"Compile, no cache","from":1520963786155.353,"to":1520963786185.847},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/1.js","from":1520963786152.362,"to":1520963786185.905},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/1.js","from":1520963786152.335,"to":1520963786186.236},{"domain":"Runtime","name":"RequireCallback ./1.js","from":1520963786152.024,"to":1520963786186.299},{"domain":"Runtime","name":"Compile, no cache","from":1520963786190.896,"to":1520963786226.593},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/2.js","from":1520963786187.055,"to":1520963786226.639},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/2.js","from":1520963786187.02,"to":1520963786226.872},{"domain":"Runtime","name":"RequireCallback ./2.js","from":1520963786186.725,"to":1520963786226.932},{"domain":"Runtime","name":"Compile, no cache","from":1520963786230.429,"to":1520963786264.652},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/5.js","from":1520963786227.443,"to":1520963786264.715},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/5.js","from":1520963786227.419,"to":1520963786264.946},{"domain":"Runtime","name":"RequireCallback ./5.js","from":1520963786227.173,"to":1520963786265.005},{"domain":"Runtime","name":"Compile, no cache","from":1520963786276.307,"to":1520963786307.7},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/7.js","from":1520963786265.677,"to":1520963786307.756},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/7.js","from":1520963786265.572,"to":1520963786307.977},{"domain":"Runtime","name":"RequireCallback ./7.js","from":1520963786265.28,"to":1520963786308.028},{"domain":"Runtime","name":"Compile, no cache","from":1520963786310.534,"to":1520963786332.444},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/8.js","from":1520963786308.562,"to":1520963786332.493},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/8.js","from":1520963786308.536,"to":1520963786332.684},{"domain":"Runtime","name":"RequireCallback ./8.js","from":1520963786308.271,"to":1520963786332.729},{"domain":"Runtime","name":"Compile, no cache","from":1520963786335.252,"to":1520963786358.672},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/9.js","from":1520963786333.205,"to":1520963786358.721},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/9.js","from":1520963786333.187,"to":1520963786358.924},{"domain":"Runtime","name":"RequireCallback ./9.js","from":1520963786332.956,"to":1520963786358.967},{"domain":"Runtime","name":"Compile, no cache","from":1520963786361.511,"to":1520963786385.888},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/6.js","from":1520963786359.467,"to":1520963786385.945},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/6.js","from":1520963786359.444,"to":1520963786386.188},{"domain":"Runtime","name":"RequireCallback ./6.js","from":1520963786359.21,"to":1520963786386.268},{"domain":"Runtime","name":"Compile, no cache","from":1520963786389.48,"to":1520963786417.849},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/11.js","from":1520963786386.92,"to":1520963786417.913},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/11.js","from":1520963786386.895,"to":1520963786418.167},{"domain":"Runtime","name":"RequireCallback ./11.js","from":1520963786386.574,"to":1520963786418.225},{"from":1520963782890,"to":1520963786418.225,"name":"ALL"}];
var background = document.createElement('canvas');
var context = background.getContext("2d");
var rulerBackgroundPattern = document.createElement('canvas');
var rulerBackgroundPatternContext = rulerBackgroundPattern.getContext("2d");
var timelineBackgroundPattern = document.createElement('canvas');
var timelineBackgroundPatternContext = timelineBackgroundPattern.getContext("2d");
var chart = document.createElement('div');
chart.id = "chart";
chart.appendChild(background);
var tracesDiv = document.createElement('div');
tracesDiv.id = "traces";
chart.appendChild(tracesDiv);
document.body.appendChild(chart);
function createStackTraces(traces) {
traces = traces.slice(0).sort(function (a, b) {
if (a.from < b.from) {
return -1;
}
else if (a.from === b.from) {
if (a.to > b.to) {
return -1;
}
else if (a.to === b.to) {
return 0;
}
else {
return 1;
}
}
else {
return 1;
}
});
var traceAtDepth = [];
var stackedTraces = traces.map(function (original) {
var from = original.from, to = original.to, name = original.name, domain = original.domain;
var trace = { from: from, to: to };
var depth;
for (var i = 0; i <= traceAtDepth.length; i++) {
if (traceAtDepth[i] === undefined || traceAtDepth[i].to <= from) {
depth = i;
traceAtDepth[i] = trace;
break;
}
}
var parent;
for (var i = depth - 1; i >= 0; i--) {
var potentialParent = traceAtDepth[i];
if (potentialParent.from <= trace.from && potentialParent.to >= trace.to) {
trace.parent = parent = potentialParent;
break;
}
}
var importance;
if (parent) {
// If it is very big, or very small - it does not matter, if it is about half its parent then it is important.
var ratio = (trace.to - trace.from) / (parent.to - parent.from);
importance = depth <= 1 ? 1 : 0.5 - Math.cos(2 * Math.PI * ratio) * 0.5;
}
else {
importance = 1;
}
var innerText = name + " " + Math.round(to - from) + "ms";
var title = name + " " + (to - from) + "ms " + importance;
var visible = false;
var div = document.createElement('div');
div.className = "trace " + domain;
tracesDiv.appendChild(div);
div.title = title;
div.innerText = innerText;
div.style.visibility = "hidden";
div.style.top = 30 + depth * 21 + "px";
div.addEventListener("click", focusTrace);
Object.assign(trace, { from: from, to: to, name: name, domain: domain, depth: depth, innerText: innerText, title: title, div: div, visible: visible, leftPx: 0, rightPx: 0, parent: parent, importance: importance });
div.trace = trace;
return trace;
}).sort(function (a, b) { return b.importance - a.importance; });
return stackedTraces;
}
var stackTraces = createStackTraces(timeline);
var visibleStackTraces = new Set();
var min = stackTraces.reduce(function (min, trace) { return Math.min(min, trace.from); }, Number.POSITIVE_INFINITY);
var max = stackTraces.reduce(function (max, trace) { return Math.max(max, trace.to); }, Number.NEGATIVE_INFINITY);
var left = min;
var pixelPerMs = 0.0000001;
var levelOfDetail = 0 /* High */;
var debounceLODTimeout;
function highLOD() {
if (debounceLODTimeout) {
clearTimeout(debounceLODTimeout);
}
levelOfDetail = 0 /* High */;
tracesDiv.style.pointerEvents = "auto";
updateStackTraces();
}
function lowLOD() {
levelOfDetail = 1 /* Low */;
if (debounceLODTimeout) {
clearTimeout(debounceLODTimeout);
}
debounceLODTimeout = setTimeout(highLOD, 1000);
tracesDiv.style.pointerEvents = "none";
}
function updateStackTraces() {
var windowWidth = window.innerWidth;
var right = left + (windowWidth / pixelPerMs);
var nextVisible = new Set();
var showTraces = levelOfDetail === 1 /* Low */ ? 64 : 512;
for (var i = 0; i < stackTraces.length && nextVisible.size < showTraces; i++) {
var trace = stackTraces[i];
trace.leftPx = (trace.from - left) * pixelPerMs;
trace.rightPx = (trace.to - left) * pixelPerMs;
if (trace.rightPx >= 0 && trace.leftPx <= windowWidth && (trace.rightPx - trace.leftPx >= 2)) {
nextVisible.add(trace);
}
}
visibleStackTraces.forEach(function (trace) {
if (nextVisible.has(trace)) {
return;
}
trace.div.style.visibility = "collapse";
});
nextVisible.forEach(function (trace) {
var div = trace.div, leftPx = trace.leftPx, rightPx = trace.rightPx;
div.style.left = Math.max(-5, leftPx) + "px";
div.style.right = Math.max(-5, windowWidth - rightPx) + "px";
if (!visibleStackTraces.has(trace)) {
div.style.visibility = "visible";
}
});
visibleStackTraces = nextVisible;
}
function snap(px) {
return Math.floor(px) + 0.5;
}
function redrawBackground() {
rulerBackgroundPatternContext.fillStyle = "#DDD";
rulerBackgroundPatternContext.fillRect(0, 0, rulerBackgroundPattern.width, rulerBackgroundPattern.height);
timelineBackgroundPatternContext.fillStyle = "#FFF";
timelineBackgroundPatternContext.fillRect(0, 0, timelineBackgroundPattern.width, timelineBackgroundPattern.height);
rulerBackgroundPatternContext.lineWidth = 1;
rulerBackgroundPatternContext.strokeStyle = "#BBB";
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(0), 0);
rulerBackgroundPatternContext.lineTo(snap(0), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(0), 0);
timelineBackgroundPatternContext.lineTo(snap(0), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
// timeline horizontal lines
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(0, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.lineTo(timelineBackgroundPattern.width, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.stroke();
rulerBackgroundPatternContext.strokeStyle = "#CCC";
timelineBackgroundPatternContext.strokeStyle = "#EEE";
for (var i = 1; i < 10; i++) {
var x = rulerBackgroundPattern.width / 1000 * i * 100;
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(x), rulerBackgroundPattern.height - rulerBackgroundPattern.height * 0.25);
rulerBackgroundPatternContext.lineTo(snap(x), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(x), 0);
timelineBackgroundPatternContext.lineTo(snap(x), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
}
var rulerOffset = -Math.round((left - Math.floor(left / 1000) * 1000) * pixelPerMs);
var rulerPattern = context.createPattern(rulerBackgroundPattern, "repeat");
context.fillStyle = rulerPattern;
context.translate(rulerOffset, 0);
context.fillRect(-rulerOffset, 0, background.width, 30);
context.translate(-rulerOffset, 0);
var timelinePattern = context.createPattern(timelineBackgroundPattern, "repeat");
context.fillStyle = timelinePattern;
context.translate(rulerOffset, 31);
context.fillRect(-rulerOffset, 0, background.width, background.height - 30);
context.translate(-rulerOffset, -31);
// Separators
context.lineWidth = 1;
context.strokeStyle = "#666";
context.beginPath();
context.moveTo(0, snap(30));
context.lineTo(background.width, snap(30));
context.stroke();
}
function resize() {
background.width = window.innerWidth;
background.height = window.innerHeight;
}
function resizeRulers() {
// Lets try major rules on seconds and minor rules on 100ms.
var width = 1000 * pixelPerMs;
rulerBackgroundPattern.width = width;
rulerBackgroundPattern.height = 30;
timelineBackgroundPattern.width = width;
timelineBackgroundPattern.height = 21;
}
function clampViewPort() {
pixelPerMs = Math.max(window.innerWidth / (max - min), pixelPerMs);
left = Math.min(Math.max(min, left), max - window.innerWidth / pixelPerMs);
}
function focusTrace(ev) {
if (suspendClicks) {
return;
}
var trace = this.trace;
pixelPerMs = window.innerWidth / (trace.to - trace.from);
left = trace.from;
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
}
window.addEventListener("resize", function () {
resize();
resizeRulers();
clampViewPort();
updateStackTraces();
redrawBackground();
});
window.addEventListener("mousewheel", function (e) {
var mousePoint = left + e.clientX / pixelPerMs;
pixelPerMs = Math.pow(2, Math.log2(pixelPerMs) + Math.max(-0.25, Math.min(0.25, e.wheelDelta)));
left = mousePoint - e.clientX / pixelPerMs;
lowLOD();
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
});
var dragging = false;
var suspendClicks = false;
var mouseDown = false;
var dragOriginXms; // The millisecond at which the chart was grabbed
var dragOriginXpx;
window.addEventListener("mousedown", function (e) {
dragOriginXms = left + e.clientX / pixelPerMs;
dragOriginXpx = e.clientX;
mouseDown = true;
}, true);
window.addEventListener("mouseup", function (e) {
if (dragging) {
dragging = false;
// Cant find a way to prevent the click action
suspendClicks = true;
setTimeout(function () { return suspendClicks = false; }, 1);
}
mouseDown = false;
});
window.addEventListener("mousemove", function (e) {
if (mouseDown && !dragging && Math.abs(e.clientX - dragOriginXpx) > 8) {
dragging = true;
}
if (dragging) {
left = dragOriginXms - e.clientX / pixelPerMs;
lowLOD();
clampViewPort();
redrawBackground();
updateStackTraces();
}
});
clampViewPort();
resize();
resizeRulers();
redrawBackground();
updateStackTraces();
</script>
</body>
</html>
Raw
times_arm64_enabled.html
<!DOCTYPE html>
<html>
<head>
<title>Profiling</title>
<style>
* {
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.trace {
position: absolute;
border: 1px solid black;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #DDD;
cursor: default;
line-height: 20px;
height: 20px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}
.trace.Modules {
background-color: #BFF;
}
.trace.Runtime {
background-color: #FFB;
}
.trace:hover {
background-color: #FFF;
border-color: orange;
z-index: 1;
box-shadow: 0px 1px 5px black;
}
</style>
</head>
<body>
<script>
var timeline = [{"domain":"Runtime","name":"loadLibrary NativeScript","from":1520964199703,"to":1520964199733},{"domain":"Runtime","name":"Extracting assets","from":1520964199797,"to":1520964200205},{"domain":"Runtime","name":"Runtime.init","from":1520964200212,"to":1520964200305},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/tns-java-classes.js","from":1520964200418.568,"to":1520964200444.883},{"domain":"Runtime","name":"RequireCallback /data/data/com.ugroupmedia.pnp.client.mobile/files/app/tns-java-classes.js","from":1520964200418.264,"to":1520964200444.963},{"domain":"Runtime","name":"Load","from":1520964200414.442,"to":1520964200444.982},{"domain":"Runtime","name":"RuntimeHelper.initRuntime","from":1520964199703,"to":1520964200445},{"domain":"Runtime","name":"Compile, no cache","from":1520964200448.93,"to":1520964200482.583},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/bundle.js","from":1520964200447.155,"to":1520964200482.624},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/bundle.js","from":1520964200447.142,"to":1520964200577.46},{"domain":"Runtime","name":"RequireCallback ./bundle","from":1520964200446.985,"to":1520964200577.519},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/starter.js","from":1520964200446.256,"to":1520964200577.544},{"domain":"Runtime","name":"RequireCallback /data/data/com.ugroupmedia.pnp.client.mobile/files/app/./starter.js","from":1520964200446.101,"to":1520964200577.57},{"domain":"Runtime","name":"Load","from":1520964200445.985,"to":1520964200577.59},{"domain":"Runtime","name":"Runtime.run","from":1520964200445,"to":1520964200577},{"domain":"Runtime","name":"NaitveScriptApplication.onCreate","from":1520964199702,"to":1520964200577},{"domain":"Runtime","name":"Materizlizing class: android/content/Intent","from":1520964200588.062,"to":1520964200633.499},{"domain":"Runtime","name":"Materizlizing class: android/content/pm/PackageManager","from":1520964200796.57,"to":1520964200814.009},{"domain":"Runtime","name":"Materizlizing class: android/app/ApplicationPackageManager","from":1520964200796.509,"to":1520964200820.784},{"domain":"Runtime","name":"Materizlizing class: android/view/View","from":1520964200883.718,"to":1520964200949.625},{"domain":"Runtime","name":"Materizlizing class: android/view/ViewGroup","from":1520964200883.694,"to":1520964200958.197},{"domain":"Runtime","name":"Materizlizing class: android/widget/FrameLayout","from":1520964200883.672,"to":1520964200958.749},{"domain":"Runtime","name":"Materizlizing class: com/android/internal/policy/PhoneWindow$DecorView","from":1520964200883.594,"to":1520964200959.479},{"domain":"Runtime","name":"MarkReachableObjects: com.tns.gen.android.app.Application_ActivityLifecycleCallbacks","from":1520964200977.453,"to":1520964201594.278},{"domain":"Runtime","name":"Compile, no cache","from":1520964202245.847,"to":1520964202269.767},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/10.js","from":1520964202244.337,"to":1520964202269.817},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/10.js","from":1520964202244.313,"to":1520964202272.479},{"domain":"Runtime","name":"RequireCallback ./10.js","from":1520964202244.042,"to":1520964202272.541},{"domain":"Runtime","name":"Compile, no cache","from":1520964202348.279,"to":1520964202376.5},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/4.js","from":1520964202346.678,"to":1520964202376.55},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/4.js","from":1520964202346.652,"to":1520964202376.781},{"domain":"Runtime","name":"RequireCallback ./4.js","from":1520964202346.423,"to":1520964202376.826},{"domain":"Runtime","name":"Compile, no cache","from":1520964202379.181,"to":1520964202411.026},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/3.js","from":1520964202377.531,"to":1520964202411.089},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/3.js","from":1520964202377.504,"to":1520964202411.367},{"domain":"Runtime","name":"RequireCallback ./3.js","from":1520964202377.274,"to":1520964202411.432},{"domain":"Runtime","name":"Compile, no cache","from":1520964202414.847,"to":1520964202450.143},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/0.js","from":1520964202412.155,"to":1520964202450.194},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/0.js","from":1520964202412.122,"to":1520964202450.471},{"domain":"Runtime","name":"RequireCallback ./0.js","from":1520964202411.796,"to":1520964202450.526},{"domain":"Runtime","name":"Compile, no cache","from":1520964202452.629,"to":1520964202478.813},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/1.js","from":1520964202451.027,"to":1520964202478.856},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/1.js","from":1520964202451.005,"to":1520964202485.251},{"domain":"Runtime","name":"RequireCallback ./1.js","from":1520964202450.754,"to":1520964202485.321},{"domain":"Runtime","name":"Compile, no cache","from":1520964202488.025,"to":1520964202520.562},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/2.js","from":1520964202485.981,"to":1520964202520.619},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/2.js","from":1520964202485.958,"to":1520964202520.859},{"domain":"Runtime","name":"RequireCallback ./2.js","from":1520964202485.703,"to":1520964202520.913},{"domain":"Runtime","name":"Compile, no cache","from":1520964202523.384,"to":1520964202554.504},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/5.js","from":1520964202521.465,"to":1520964202554.555},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/5.js","from":1520964202521.436,"to":1520964202554.759},{"domain":"Runtime","name":"RequireCallback ./5.js","from":1520964202521.165,"to":1520964202554.809},{"domain":"Runtime","name":"Compile, no cache","from":1520964202556.968,"to":1520964202583.061},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/7.js","from":1520964202555.325,"to":1520964202583.109},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/7.js","from":1520964202555.3,"to":1520964202583.32},{"domain":"Runtime","name":"RequireCallback ./7.js","from":1520964202555.035,"to":1520964202583.373},{"domain":"Runtime","name":"Compile, no cache","from":1520964202585.487,"to":1520964202608.445},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/8.js","from":1520964202583.864,"to":1520964202608.495},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/8.js","from":1520964202583.841,"to":1520964202608.708},{"domain":"Runtime","name":"RequireCallback ./8.js","from":1520964202583.599,"to":1520964202608.755},{"domain":"Runtime","name":"Compile, no cache","from":1520964202610.968,"to":1520964202635.226},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/9.js","from":1520964202609.261,"to":1520964202635.275},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/9.js","from":1520964202609.238,"to":1520964202635.478},{"domain":"Runtime","name":"RequireCallback ./9.js","from":1520964202608.983,"to":1520964202635.528},{"domain":"Runtime","name":"Compile, no cache","from":1520964202637.717,"to":1520964202661.153},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/6.js","from":1520964202636.059,"to":1520964202661.205},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/6.js","from":1520964202636.036,"to":1520964202661.417},{"domain":"Runtime","name":"RequireCallback ./6.js","from":1520964202635.788,"to":1520964202661.464},{"domain":"Runtime","name":"Compile, no cache","from":1520964202663.625,"to":1520964202686.631},{"domain":"Runtime","name":"LoadScript /data/data/com.ugroupmedia.pnp.client.mobile/files/app/11.js","from":1520964202661.978,"to":1520964202686.68},{"domain":"Runtime","name":"LoadModule /data/data/com.ugroupmedia.pnp.client.mobile/files/app/11.js","from":1520964202661.953,"to":1520964202686.88},{"domain":"Runtime","name":"RequireCallback ./11.js","from":1520964202661.704,"to":1520964202686.933},{"from":1520964199702,"to":1520964202686.933,"name":"ALL"}];
var background = document.createElement('canvas');
var context = background.getContext("2d");
var rulerBackgroundPattern = document.createElement('canvas');
var rulerBackgroundPatternContext = rulerBackgroundPattern.getContext("2d");
var timelineBackgroundPattern = document.createElement('canvas');
var timelineBackgroundPatternContext = timelineBackgroundPattern.getContext("2d");
var chart = document.createElement('div');
chart.id = "chart";
chart.appendChild(background);
var tracesDiv = document.createElement('div');
tracesDiv.id = "traces";
chart.appendChild(tracesDiv);
document.body.appendChild(chart);
function createStackTraces(traces) {
traces = traces.slice(0).sort(function (a, b) {
if (a.from < b.from) {
return -1;
}
else if (a.from === b.from) {
if (a.to > b.to) {
return -1;
}
else if (a.to === b.to) {
return 0;
}
else {
return 1;
}
}
else {
return 1;
}
});
var traceAtDepth = [];
var stackedTraces = traces.map(function (original) {
var from = original.from, to = original.to, name = original.name, domain = original.domain;
var trace = { from: from, to: to };
var depth;
for (var i = 0; i <= traceAtDepth.length; i++) {
if (traceAtDepth[i] === undefined || traceAtDepth[i].to <= from) {
depth = i;
traceAtDepth[i] = trace;
break;
}
}
var parent;
for (var i = depth - 1; i >= 0; i--) {
var potentialParent = traceAtDepth[i];
if (potentialParent.from <= trace.from && potentialParent.to >= trace.to) {
trace.parent = parent = potentialParent;
break;
}
}
var importance;
if (parent) {
// If it is very big, or very small - it does not matter, if it is about half its parent then it is important.
var ratio = (trace.to - trace.from) / (parent.to - parent.from);
importance = depth <= 1 ? 1 : 0.5 - Math.cos(2 * Math.PI * ratio) * 0.5;
}
else {
importance = 1;
}
var innerText = name + " " + Math.round(to - from) + "ms";
var title = name + " " + (to - from) + "ms " + importance;
var visible = false;
var div = document.createElement('div');
div.className = "trace " + domain;
tracesDiv.appendChild(div);
div.title = title;
div.innerText = innerText;
div.style.visibility = "hidden";
div.style.top = 30 + depth * 21 + "px";
div.addEventListener("click", focusTrace);
Object.assign(trace, { from: from, to: to, name: name, domain: domain, depth: depth, innerText: innerText, title: title, div: div, visible: visible, leftPx: 0, rightPx: 0, parent: parent, importance: importance });
div.trace = trace;
return trace;
}).sort(function (a, b) { return b.importance - a.importance; });
return stackedTraces;
}
var stackTraces = createStackTraces(timeline);
var visibleStackTraces = new Set();
var min = stackTraces.reduce(function (min, trace) { return Math.min(min, trace.from); }, Number.POSITIVE_INFINITY);
var max = stackTraces.reduce(function (max, trace) { return Math.max(max, trace.to); }, Number.NEGATIVE_INFINITY);
var left = min;
var pixelPerMs = 0.0000001;
var levelOfDetail = 0 /* High */;
var debounceLODTimeout;
function highLOD() {
if (debounceLODTimeout) {
clearTimeout(debounceLODTimeout);
}
levelOfDetail = 0 /* High */;
tracesDiv.style.pointerEvents = "auto";
updateStackTraces();
}
function lowLOD() {
levelOfDetail = 1 /* Low */;
if (debounceLODTimeout) {
clearTimeout(debounceLODTimeout);
}
debounceLODTimeout = setTimeout(highLOD, 1000);
tracesDiv.style.pointerEvents = "none";
}
function updateStackTraces() {
var windowWidth = window.innerWidth;
var right = left + (windowWidth / pixelPerMs);
var nextVisible = new Set();
var showTraces = levelOfDetail === 1 /* Low */ ? 64 : 512;
for (var i = 0; i < stackTraces.length && nextVisible.size < showTraces; i++) {
var trace = stackTraces[i];
trace.leftPx = (trace.from - left) * pixelPerMs;
trace.rightPx = (trace.to - left) * pixelPerMs;
if (trace.rightPx >= 0 && trace.leftPx <= windowWidth && (trace.rightPx - trace.leftPx >= 2)) {
nextVisible.add(trace);
}
}
visibleStackTraces.forEach(function (trace) {
if (nextVisible.has(trace)) {
return;
}
trace.div.style.visibility = "collapse";
});
nextVisible.forEach(function (trace) {
var div = trace.div, leftPx = trace.leftPx, rightPx = trace.rightPx;
div.style.left = Math.max(-5, leftPx) + "px";
div.style.right = Math.max(-5, windowWidth - rightPx) + "px";
if (!visibleStackTraces.has(trace)) {
div.style.visibility = "visible";
}
});
visibleStackTraces = nextVisible;
}
function snap(px) {
return Math.floor(px) + 0.5;
}
function redrawBackground() {
rulerBackgroundPatternContext.fillStyle = "#DDD";
rulerBackgroundPatternContext.fillRect(0, 0, rulerBackgroundPattern.width, rulerBackgroundPattern.height);
timelineBackgroundPatternContext.fillStyle = "#FFF";
timelineBackgroundPatternContext.fillRect(0, 0, timelineBackgroundPattern.width, timelineBackgroundPattern.height);
rulerBackgroundPatternContext.lineWidth = 1;
rulerBackgroundPatternContext.strokeStyle = "#BBB";
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(0), 0);
rulerBackgroundPatternContext.lineTo(snap(0), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(0), 0);
timelineBackgroundPatternContext.lineTo(snap(0), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
// timeline horizontal lines
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(0, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.lineTo(timelineBackgroundPattern.width, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.stroke();
rulerBackgroundPatternContext.strokeStyle = "#CCC";
timelineBackgroundPatternContext.strokeStyle = "#EEE";
for (var i = 1; i < 10; i++) {
var x = rulerBackgroundPattern.width / 1000 * i * 100;
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(x), rulerBackgroundPattern.height - rulerBackgroundPattern.height * 0.25);
rulerBackgroundPatternContext.lineTo(snap(x), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(x), 0);
timelineBackgroundPatternContext.lineTo(snap(x), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
}
var rulerOffset = -Math.round((left - Math.floor(left / 1000) * 1000) * pixelPerMs);
var rulerPattern = context.createPattern(rulerBackgroundPattern, "repeat");
context.fillStyle = rulerPattern;
context.translate(rulerOffset, 0);
context.fillRect(-rulerOffset, 0, background.width, 30);
context.translate(-rulerOffset, 0);
var timelinePattern = context.createPattern(timelineBackgroundPattern, "repeat");
context.fillStyle = timelinePattern;
context.translate(rulerOffset, 31);
context.fillRect(-rulerOffset, 0, background.width, background.height - 30);
context.translate(-rulerOffset, -31);
// Separators
context.lineWidth = 1;
context.strokeStyle = "#666";
context.beginPath();
context.moveTo(0, snap(30));
context.lineTo(background.width, snap(30));
context.stroke();
}
function resize() {
background.width = window.innerWidth;
background.height = window.innerHeight;
}
function resizeRulers() {
// Lets try major rules on seconds and minor rules on 100ms.
var width = 1000 * pixelPerMs;
rulerBackgroundPattern.width = width;
rulerBackgroundPattern.height = 30;
timelineBackgroundPattern.width = width;
timelineBackgroundPattern.height = 21;
}
function clampViewPort() {
pixelPerMs = Math.max(window.innerWidth / (max - min), pixelPerMs);
left = Math.min(Math.max(min, left), max - window.innerWidth / pixelPerMs);
}
function focusTrace(ev) {
if (suspendClicks) {
return;
}
var trace = this.trace;
pixelPerMs = window.innerWidth / (trace.to - trace.from);
left = trace.from;
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
}
window.addEventListener("resize", function () {
resize();
resizeRulers();
clampViewPort();
updateStackTraces();
redrawBackground();
});
window.addEventListener("mousewheel", function (e) {
var mousePoint = left + e.clientX / pixelPerMs;
pixelPerMs = Math.pow(2, Math.log2(pixelPerMs) + Math.max(-0.25, Math.min(0.25, e.wheelDelta)));
left = mousePoint - e.clientX / pixelPerMs;
lowLOD();
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
});
var dragging = false;
var suspendClicks = false;
var mouseDown = false;
var dragOriginXms; // The millisecond at which the chart was grabbed
var dragOriginXpx;
window.addEventListener("mousedown", function (e) {
dragOriginXms = left + e.clientX / pixelPerMs;
dragOriginXpx = e.clientX;
mouseDown = true;
}, true);
window.addEventListener("mouseup", function (e) {
if (dragging) {
dragging = false;
// Cant find a way to prevent the click action
suspendClicks = true;
setTimeout(function () { return suspendClicks = false; }, 1);
}
mouseDown = false;
});
window.addEventListener("mousemove", function (e) {
if (mouseDown && !dragging && Math.abs(e.clientX - dragOriginXpx) > 8) {
dragging = true;
}
if (dragging) {
left = dragOriginXms - e.clientX / pixelPerMs;
lowLOD();
clampViewPort();
redrawBackground();
updateStackTraces();
}
});
clampViewPort();
resize();
resizeRulers();
redrawBackground();
updateStackTraces();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment