1<!DOCTYPE html> 2<!-- 3 Copyright 2014 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found in the LICENSE file. 6--> 7<html> 8<head> 9 <title>Binary Size Analysis</title> 10 <link rel='stylesheet' href='webtreemap/webtreemap.css'> 11 <style> 12 body { font-family: sans-serif; } 13 tt, pre { font-family: WebKitWorkaround, monospace; } 14 #map { 15 margin: 0 auto; 16 position: relative; 17 cursor: pointer; 18 -webkit-user-select: none; 19 } 20 #table { 21 border: 1px solid black; 22 } 23 .treemaplegend { 24 margin: 0 auto; 25 position: relative; 26 } 27 .webtreemap-symbol-vtable { 28 background: #FFFFAA; 29 } 30 .webtreemap-node:hover { 31 border-color: red; 32 background: linear-gradient(rgb(240,240,200), rgb(180,180,200)); 33 } 34 </style> 35 <script src='webtreemap/webtreemap.js'></script> 36 <script src='treemap-dump.js'></script> 37 <script src='largest-symbols.js'></script> 38 <script src='largest-sources.js'></script> 39 <script src='largest-vtables.js'></script> 40</head> 41<body onload='show_report_treemap()'> 42<div style='text-align: center; margin-bottom: 2em;'> 43 <h1>Binary Size Analysis</h1> 44 <a href='#' onclick='show_report_treemap()'>Spatial Treemap</a> 45 ~ 46 <a href='#' onclick='show_report_largest_sources()'>Largest Sources</a> 47 ~ 48 <a href='#' onclick='show_report_largest_symbols()'>Largest Symbols</a> 49 ~ 50 <a href='#' onclick='show_report_largest_vtables()'>Largest VTables</a> 51</div> 52<div id='report'></div> 53<script> 54function escape(str) { 55 return str.replace(/&/g, '&') 56 .replace(/"/g, '"') 57 .replace(/</g, '<') 58 .replace(/>/g, '>'); 59} 60 61var treemap_width = 800; 62var treemap_height = 450; 63function show_report_treemap() { 64 console.log('displaying treemap') 65 var div = document.getElementById('report'); 66 var w = window.treemap_width; 67 var h = window.treemap_height; 68 div.innerHTML = '<div style=\'text-align: center;\'>' + 69 '<button onclick=\'zoomInTreemap()\'>Bigger (More Detail)</button>' + 70 ', <button onclick=\'zoomOutTreemap()\'>Smaller (Less Detail)</button>' + 71 ' or resize to: ' + 72 '<input type=text size=5 id=treemap_width value=' + w + '>x' + 73 '<input type=text size=5 id=treemap_height value=' + h + '>' + 74 '<button onclick=\'resizeTreemap()\'>Go</button>' + 75 '<br><em>Click on a box to zoom in and reveal more detail. ' + 76 'Click on the outermost box to zoom out.</em>' + 77 '<br>Legend: <table border=1 class=\'treemaplegend\' cellborder=1><tr>' + 78 '<td class=\'webtreemap-symbol-bss\'>BSS</td>' + 79 '<td class=\'webtreemap-symbol-data\'>Data</td>' + 80 '<td class=\'webtreemap-symbol-code\'>Code</td>' + 81 '<td class=\'webtreemap-symbol-read-only_data\'>RO Data</td>' + 82 '<td class=\'webtreemap-symbol-weak_symbol\'>Weak</td>' + 83 '<td class=\'webtreemap-symbol-vtable\'>VTable</td>' + 84 '</tr></table>' + 85 '<br>' + 86 '<div id=\'map\' ' + 87 'style=\'width: ' + w + 'px; height: ' + h + 'px;\'>' + 88 '</div></div>'; 89 var map = document.getElementById('map'); 90 appendTreemap(map, kTree); 91} 92 93function zoomInTreemap() { 94 window.treemap_width = Math.round(window.treemap_width * 1.25); 95 window.treemap_height = Math.round(window.treemap_height * 1.25); 96 show_report_treemap(); 97} 98 99function zoomOutTreemap() { 100 window.treemap_width = Math.round(window.treemap_width / 1.25); 101 window.treemap_height = Math.round(window.treemap_height / 1.25); 102 show_report_treemap(); 103} 104 105function resizeTreemap() { 106 window.treemap_width = document.getElementById('treemap_width').value; 107 window.treemap_height = document.getElementById('treemap_height').value; 108 show_report_treemap(); 109} 110 111function show_report_largest_symbols() { 112 console.log('displaying largest-symbols report') 113 var div = document.getElementById('report'); 114 div.innerHTML = '<div><table id=\'list\' border=1><tr>' + 115 '<th>Rank</th><th>Size</th><th>Type</th><th>Source</th>' + 116 '</tr></table>'; 117 var list = document.getElementById('list'); 118 for (var i = 0; i < largestSymbols.length; i++) { 119 var record = largestSymbols[i]; 120 var link; 121 if (record.location.indexOf('out') == 0) { 122 link = record.location; 123 } else { 124 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/src/' 125 + record.location + '">' + escape(record.location) + '</a>'; 126 } 127 list.innerHTML += '<tr>' 128 + '<td>' + (i+1) + '</td>' 129 + '<td>' + escape(record.size) + '</td>' 130 + '<td style=\'white-space: nowrap;\'>' + escape(record.type) + '</td>' 131 + '<td>' + link + ':<br>' 132 + escape(record.symbol) + '</td>' 133 + '</tr>'; 134 } 135} 136 137function show_report_largest_sources() { 138 console.log('displaying largest-sources report') 139 var div = document.getElementById('report'); 140 div.innerHTML = '<div><table id=\'list\' border=1><tr>' + 141 '<th>Rank</th><th>Size</th><th>Symbol Count</th><th>Source</th>' + 142 '</tr></table>'; 143 var list = document.getElementById('list'); 144 for (var i = 0; i < largestSources.length; i++) { 145 var record = largestSources[i]; 146 var link; 147 if (record.location.indexOf('out') == 0) { 148 link = record.location; 149 } else { 150 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/src/' 151 + record.location + '">' + escape(record.location) + '</a>'; 152 } 153 154 list.innerHTML += '<tr>' 155 + '<td>' + (i+1) + '</td>' 156 + '<td>' + escape(record.size) + '</td>' 157 + '<td>' + escape(record.symbol_count) + '</td>' 158 + '<td>' + link + '</td>' 159 + '</tr>'; 160 } 161} 162 163function show_report_largest_vtables() { 164 console.log('displaying largest-vtables report') 165 var div = document.getElementById('report'); 166 div.innerHTML = '<div><table id=\'list\' border=1><tr>' + 167 '<th>Rank</th><th>Size</th><th>Symbol</th><th>Source</th>' + 168 '</tr></table>'; 169 var list = document.getElementById('list'); 170 for (var i = 0; i < largestVTables.length; i++) { 171 var record = largestVTables[i]; 172 var link; 173 if (record.location.indexOf('out') == 0) { 174 link = record.location; 175 } else { 176 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/src/' 177 + record.location + '">' + escape(record.location) + '</a>'; 178 } 179 180 list.innerHTML += '<tr>' 181 + '<td>' + (i+1) + '</td>' 182 + '<td>' + escape(record.size) + '</td>' 183 + '<td>' + escape(record.symbol) + '</td>' 184 + '<td>' + link + '</td>' 185 + '</tr>'; 186 } 187} 188</script> 189</body> 190</html>