| OLD | NEW |
| (Empty) |
| 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> | |
| 54 function escape(str) { | |
| 55 return str.replace(/&/g, '&') | |
| 56 .replace(/"/g, '"') | |
| 57 .replace(/</g, '<') | |
| 58 .replace(/>/g, '>'); | |
| 59 } | |
| 60 | |
| 61 var treemap_width = 800; | |
| 62 var treemap_height = 450; | |
| 63 function 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)</but
ton>' + | |
| 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\' cellborde
r=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 | |
| 93 function 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 | |
| 99 function 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 | |
| 105 function 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 | |
| 111 function 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/sr
c/' | |
| 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 | |
| 137 function 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/sr
c/' | |
| 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 | |
| 163 function 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/sr
c/' | |
| 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> | |
| OLD | NEW |