Files
filament/tools/zbloat/template.html
2020-12-06 15:25:08 -08:00

87 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>$TITLE$</title>
<link rel="stylesheet" href="https://prideout.net/webtreemap/webtreemap.css">
<style>
body {
font-family: sans-serif;
font-size: 0.8em;
margin: 2ex 4ex;
}
tt, pre {
font-family: WebKitWorkaround, monospace;
}
h1, h2 {
font-weight: normal;
}
h2 {
margin-top: 4ex;
}
#legend {
width: 800px;
}
.diagram {
width: 800px;
height: 600px;
position: relative;
cursor: pointer;
-webkit-user-select: none;
}
#sections {
height: 300px;
}
</style>
</head>
<body>
<h1>$TITLE$</h1>
<p>$INFO$</p>
Try clicking around in the two treemap diagrams below.
<ul>
<li> All sizes are decimal (i.e. kilobytes instead of kibibytes). </li>
<li> Materials will appear in the rodata portion of the sections diagram. </li>
<li> Sizes in parentheses represent an approximate compressed size. </li>
</p>
<div class="diagram" id="sections"></div>
<div class="diagram" id="symbols"></div>
<div id='legend'>
<div class='webtreemap-symbol-bss'>bss</div>
<div class='webtreemap-symbol-bss webtreemap-aggregate'>bss aggregate</div>
<div class='webtreemap-symbol-data'>data</div>
<div class='webtreemap-symbol-data webtreemap-aggregate'>data aggregate</div>
<div class='webtreemap-symbol-read-only_data'>read-only data</div>
<div class='webtreemap-symbol-read-only_data webtreemap-aggregate'>read-only data aggregate</div>
<div class='webtreemap-symbol-code'>code</div>
<div class='webtreemap-symbol-code webtreemap-aggregate'>code aggregate</div>
<div class='webtreemap-symbol-weak_symbol'>weak symbol</div>
<div class='webtreemap-symbol-weak_symbol webtreemap-aggregate'>weak symbol aggregate</div>
</div>
<script src="https://prideout.net/webtreemap/webtreemap.js"></script>
<script>
$SYMBOLS_JSON$
$SECTIONS_JSON$
appendTreemap(document.getElementById('symbols'), kSymbols);
appendTreemap(document.getElementById('sections'), kSections);
</script>
</body>
</html>