template.html (251 lines of code) (raw):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>$process | Top Crashes</title>
<link rel="stylesheet" href="crashstyles.css?v=1">
<link rel="stylesheet" href="fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="fontawesome/css/solid.css">
<link rel="stylesheet" href="alertify/css/alertify.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<style>
</style>
<script type="text/javascript" src="./alertify/alertify.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript">
function expandElement(target, id, evt) {
hideAnnotatonWindow();
var isSpan = target instanceof HTMLSpanElement;
var isDiv = target instanceof HTMLDivElement;
var isHref = target instanceof HTMLAnchorElement;
if (isHref && evt)
evt.preventDefault();
if (!isSpan) {
var e = document.getElementById(id);
if (e.style.display == 'none' || e.style.display == '') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}
}
return false;
}
function getAnchor() {
var currentUrl = document.URL,
urlParts = currentUrl.split('#');
return (urlParts.length > 1) ? urlParts[1] : null;
}
function onLoad() {
var anchor = getAnchor();
var e = document.getElementById(anchor);
//alert(anchor);
if (anchor != null) {
expandElement(e, anchor.substring(1));
}
}
// for these functions to work, the page must be loaded via https
function copyText(text) {
hideAnnotatonWindow();
if (typeof (navigator.clipboard) == 'undefined') {
alertify.notify('You need to load the page vis HTTPS to gain access to the clipboard.', 'failure', 1);
return;
}
navigator.clipboard.writeText(text).then(function () {
alertify.notify('Signature text copied successfully', 'success', 1);
}, function () {
alertify.notify('Failed to copy signature text', 'failure', 1);
});
}
lastAnnotation = null;
function hideAnnotatonWindow() {
if (lastAnnotation != null)
lastAnnotation.style.display = 'none';
lastAnnotation = null;
}
function displayAnnotations(evt, annDivId) {
evt.stopPropagation();
var e = document.getElementById(annDivId);
if (e == null)
return;
if (lastAnnotation != null) {
tmp = lastAnnotation;
hideAnnotatonWindow();
if (e == tmp)
return;
}
var pageY = evt.pageY;
pageY += 15;
e.style.top = pageY + 'px';
if (e.style.display == 'none') {
e.style.display = 'block';
lastAnnotation = e;
} else {
e.style.display = 'none';
lastAnnotation - null;
}
}
function setClipboard(elementid) {
var el = document.getElementById(elementid);
/*
// needs 'dom.events.asyncClipboard.clipboardItem' enabled to work
var blob = new Blob([el.innerHTML], { type: 'text/html' });
var data = [new ClipboardItem({ 'text/html': blob })];
navigator.clipboard.write(data).then(
function () {
},
function () {
}
);
*/
navigator.clipboard.writeText(el.innerText).then(function () {
/* clipboard successfully set */
}, function () {
/* clipboard write failed */
});
}
</script>
<!-- start of crash template -->
<script type="module">
import { sparkline } from './sparkline.js';
function findClosest(target, tagName) {
if (target.tagName === tagName) {
return target;
}
while ((target = target.parentNode)) {
if (target.tagName === tagName) {
break;
}
}
return target;
}
var sloptions = {
onmousemove(event, datapoint) {
var svg = findClosest(event.target, "svg");
// note the double dollar signs below are escapes for python's template substitution.
//var date = (new Date(datapoint.date)).toUTCString().replace(/^.*?, (.*?) \d{2}:\d{2}:\d{2}.*?$$/, "$$1");
var date = (new Date(datapoint.date)).toDateString();
var valueElement = svg.previousElementSibling;
//valueElement.hidden = false;
valueElement.textContent = '' + datapoint.value.toFixed(0) + ' - ' + date;
},
onmouseout() {
var svg = findClosest(event.target, "svg");
var valueElement = svg.previousElementSibling;
//valueElement.hidden = true;
}
};
////// sparkline data
$sparkline
////// sparkline data
</script>
<div id="mainlist">
<div class="header">
<div class="header-elements">Channel - $channel</div>
<div class="header-elements">Version - $version</div>
<div class="header-elements">Process - $process</div>
$ipcActorHdr
<div class="header-elements">($sigcount signatures, $repcount crashes)</div>
</div>
<div class="listheader">
<div class="hdr-rank">rank</div>
<div class="hdr-percent">%</div>
<div class="hdr-signature">signature</div>
<div class="hdr-rightpanel">
<div class="hdr-search"></div>
<div class="hdr-search"></div>
<div class="hdr-search"></div>
<div class="hdr-search"></div>
<div class="hdr-search"></div>
<div class="hdr-clientcount">clients</div>
<div class="hdr-count">count</div>
</div>
</div>
<!-- start of signature template -->
<div class="signature" onclick="expandElement(event.target, '$expandosig', event);" id="a$expandosig">
<div class="hdr-rank">$rank</div>
<div class="hdr-percent">$percent</div>
<div class="hdr-signature"><a href='#a$expandosig'>$signature</a></div>
<div class="hdr-rightpanel">
<div class="hdr-search"><span title="New Signature" class="$newicon fas fa-bell oomiconclass"></span></div>
<div class="hdr-search"><span title="Lockdown Signature" class="$lockicon fas fa-lock oomiconclass"></span></div>
<!-- <div class="hdr-search"><span title="Fission Signature" class="$fissionicon fas fa-atom oomiconclass"></span></div>-->
<div class="hdr-search"><span title="OOM Signature" class="$oomicon fas fa-battery-quarter oomiconclass"></span></div>
<div class="hdr-search"><span title="View signature annotations" onclick="return displayAnnotations(event, 'ann$annexpandosig');" class="$anniconclass fas fa-list copyicon"></span></div>
<div class="hdr-search"><span title="Copy signature to clipboard" onclick="copyText('$signature')" class="icon fas fa-copy copyicon"></span></div>
<div class="hdr-search"><a href='$cslink' target="_blank" title="Find crash reports"><span class="$iconclass fas fa-fingerprint"></span></a></div>
<div class="hdr-search"><a href='$cssearchlink' target="_blank" title="Search for signature"><span class="icon fas fa-signature"></span></a></div>
<div class="hdr-clientcount">$clientcount</div>
<div class="hdr-count">$count</div>
</div>
</div>
<!-- start of signature meta template -->
<div style="display:none;" id="$expandosig">
<div class="signature-meta" onclick="expandElement(event.target, '$expandosig');">
<div class="signature-meta-left">
<!-- grid left -->
<div class="meta-title-os">Operating System</div>
<div class="meta-title-fxver">Firefox Version</div>
<div class="meta-title-ver">Version</div>
<div class="meta-title-arch">Arch</div>
<!-- grid right -->
<div class="meta-data-os">$os</div>
<div class="meta-data-fxver">$fxver</div>
<div class="meta-data-ver">$osver</div>
<div class="meta-data-arch">$arch</div>
</div>
<div class="signature-meta-right">
<div class="sparkline-container">
<!-- sparkline graph, sibling relationship here is important -->
<div class="sparkline-value"> </div>
<svg class="svg-$expandosig sparkline-svg" width="500" height="53" stroke-width="1"></svg>
</div>
</div>
</div>
<div class="report">
<div class="report-header">
<div class="report-meta-data-index">#</div>
<div class="report-meta-data-meta"></div>
<div class="report-meta-data-compositor">Compositor</div>
<div class="report-meta-data-oom">OOM</div>
<div class="report-meta-data-long">Hardware</div>
<div class="report-meta-data-short">Gen</div>
<div class="report-meta-data-short">Chipset</div>
<div class="report-meta-data-short">Version</div>
<div class="report-meta-data-short">Date</div>
<div class="report-meta-data-type">Crash Type</div>
<div class="report-meta-data-reason">Reason</div>
</div>
</div>
<!-- start of report template -->
<div class="report">
<div class="report-meta" onclick="expandElement(event.target, '$expandostack');">
<div class="report-meta-data-index">$rindex</div>
<div class="report-meta-data-meta"><a target="_blank" title="View meta data on redash" href="$infolink"><span class="icon fas fa-external-link-alt"></span></a> <span class="$startupiconclass fas fa-rocket"></span></div>
<div class="report-meta-data-compositor">$compositor</div>
<div class="report-meta-data-oom">$oomsize</div>
<div class="report-meta-data-long">$description</div>
<div class="report-meta-data-short">$devgen</div>
<div class="report-meta-data-short">$devchipset</div>
<div class="report-meta-data-short">$drvver</div>
<div class="report-meta-data-short">$drvdate</div>
<div class="report-meta-data-type" title="$type">$type</div>
<div class="report-meta-data-reason" title="$reason">$reason</div>
</div>
<div class="stack" style="display:none;" id="$expandostack">
<!-- start of stackline template -->
<div class='stackline'>
<div class="frame-index">$frameindex</div>
<div class="src-link"><a target="_blank" style="display:$style;" href="$srcurl">src</a></div>
<div class="module-name">$module</div>
<div class="stack-frame">$frame</div>
</div>
<!-- end of stackline template -->
<div class="clickdiv" onclick="setClipboard('$expandostack'); return false;">copy stack</div>
</div>
</div>
<!-- end of report template -->
</div>
<!-- end of signature meta template -->
<!-- end of signature template -->
</div>
<!-- end of crash template -->
<!-- start of annotation template -->
<div id="ann$expandosig" class="annotation-container" style="display:none;">
<div class="ann-hdr">
<div class="ann-fixed-by">Fixed By</div>
<div class="ann-notes">Notes</div>
</div>
<!-- start of annotation report template -->
<div class="ann-hdr">
<div class="ann-fixed-by">$fixedbyversion $fixedbybug</div>
<div class="ann-notes">$annotations</div>
</div>
<!-- end of annotation report template -->
</div>
<!-- end of annotation template -->
<div class="processeddate">$processeddate</div>Source code for this dashboard is <a href="https://github.com/mozilla/process-top-crashes">available on Github</a>.
</body>
</html>