OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Binary Size Analysis</title> |
| 5 <link rel='stylesheet' href='webtreemap.css'> |
| 6 <style> |
| 7 body { font-family: sans-serif; } |
| 8 tt, pre { font-family: WebKitWorkaround, monospace; } |
| 9 #map { |
| 10 width: 95%; |
| 11 margin: 0 auto; |
| 12 height: 500px; |
| 13 position: relative; |
| 14 cursor: pointer; |
| 15 -webkit-user-select: none; |
| 16 } |
| 17 #table { |
| 18 border: 1px solid black; |
| 19 } |
| 20 </style> |
| 21 <script src='webtreemap.js'></script> |
| 22 <script src='treemap-dump.js'></script> |
| 23 <script src='largest-symbols.js'></script> |
| 24 <script src='largest-sources.js'></script> |
| 25 </head> |
| 26 <body onload='show_report_treemap()'> |
| 27 <div style='text-align: center; margin-bottom: 2em;'> |
| 28 <h1>Binary Size Analysis</h1> |
| 29 <a href='#' onclick='show_report_treemap()'>Spatial Treemap</a> |
| 30 ~ |
| 31 <a href='#' onclick='show_report_largest_sources()'>Largest Sources</a> |
| 32 ~ |
| 33 <a href='#' onclick='show_report_largest_symbols()'>Largest Symbols</a> |
| 34 </div> |
| 35 <div id='report'></div> |
| 36 <script> |
| 37 function escape(str) { |
| 38 return str.replace(/&/g, '&') |
| 39 .replace(/"/g, '"') |
| 40 .replace(/</g, '<') |
| 41 .replace(/>/g, '>'); |
| 42 } |
| 43 |
| 44 function show_report_treemap() { |
| 45 console.log('displaying treemap') |
| 46 var div = document.getElementById('report'); |
| 47 div.innerHTML = '<div style=\'text-align: center;\'>' + |
| 48 '<em>Click on a box to zoom in. ' + |
| 49 'Click on the outermost box to zoom out.</em>' + |
| 50 '<div id=\'map\'></div></div>'; |
| 51 var map = document.getElementById('map'); |
| 52 appendTreemap(map, kTree); |
| 53 } |
| 54 |
| 55 function show_report_largest_symbols() { |
| 56 console.log('displaying largest-symbols report') |
| 57 var div = document.getElementById('report'); |
| 58 div.innerHTML = '<div><table id=\'list\' border=1><tr>' + |
| 59 '<th>Rank</th><th>Size</th><th>Type</th><th>Source</th>' + |
| 60 '</tr></table>'; |
| 61 var list = document.getElementById('list'); |
| 62 for (var i = 0; i < largestSymbols.length; i++) { |
| 63 var record = largestSymbols[i]; |
| 64 var link; |
| 65 if (record.location.indexOf('out') == 0) { |
| 66 link = record.location; |
| 67 } else { |
| 68 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/sr
c/' |
| 69 + record.location + '">' + escape(record.location) + '</a>'; |
| 70 } |
| 71 list.innerHTML += '<tr>' |
| 72 + '<td>' + (i+1) + '</td>' |
| 73 + '<td>' + escape(record.size) + '</td>' |
| 74 + '<td>' + escape(record.type) + '</td>' |
| 75 + '<td>' + link + ':<br>' |
| 76 + escape(record.symbol) + '</td>' |
| 77 + '</tr>'; |
| 78 } |
| 79 } |
| 80 |
| 81 function show_report_largest_sources() { |
| 82 console.log('displaying largest-sources report') |
| 83 var div = document.getElementById('report'); |
| 84 div.innerHTML = '<div><table id=\'list\' border=1><tr>' + |
| 85 '<th>Rank</th><th>Size</th><th>Symbol Count</th><th>Source</th
>' + |
| 86 '</tr></table>'; |
| 87 var list = document.getElementById('list'); |
| 88 for (var i = 0; i < largestSources.length; i++) { |
| 89 var record = largestSources[i]; |
| 90 var link; |
| 91 if (record.location.indexOf('out') == 0) { |
| 92 link = record.location; |
| 93 } else { |
| 94 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/sr
c/' |
| 95 + record.location + '">' + escape(record.location) + '</a>'; |
| 96 } |
| 97 |
| 98 list.innerHTML += '<tr>' |
| 99 + '<td>' + (i+1) + '</td>' |
| 100 + '<td>' + escape(record.size) + '</td>' |
| 101 + '<td>' + escape(record.symbol_count) + '</td>' |
| 102 + '<td>' + link + '</td>' |
| 103 + '</tr>'; |
| 104 } |
| 105 } |
| 106 </script> |
| 107 </body> |
| 108 </html> |
OLD | NEW |