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 |