Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(135)

Side by Side Diff: tools/binary_size/template/index.html

Issue 2813963002: //tools/binary_size: Consolidate most tools into "supersize" command (Closed)
Patch Set: Fix readme formatting. Make archive's --outoput-file a positional arg Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 Copyright 2014 The Chromium Authors. All rights reserved.
3 Use of this source code is governed by a BSD-style license that can be
4 found in the LICENSE file.
5 -->
6 <html>
7 <head>
8 <title>Binary Size Analysis</title>
9 <script src="d3/d3.js" charset="utf-8"></script>
10 <script src="D3SymbolTreeMap.js" charset="utf-8"></script>
11 <script src="data.js" charset="utf-8"></script>
12 <style>
13 body {
14 margin: 0px;
15 padding: 5px;
16 }
17 .swatch {
18 border: 1px solid rgb(100,100,100);
19 -webkit-user-select: none;
20 cursor: default;
21 }
22 </style>
23 <script>
24 var treemap;
25 var filterChanging = false;
26 var savedSettings = {};
27 var NUM_SYMBOL_TYPES = 6
28
29 function init() {
30 if (window.metadata !== undefined && window.metadata.subtitle) {
31 document.getElementById('subtitle').innerHTML = ': ' + escape(metadata.s ubtitle);
32 }
33 initFilterOptions();
34 treemap = new D3SymbolTreeMap(
35 savedSettings.width,
36 savedSettings.height,
37 savedSettings.maxLevels);
38 treemap.init();
39 }
40
41 function getIdealSizes() {
42 var width = window.innerWidth - 20;
43 var height = window.innerHeight - 70;
44 return {'width': width, 'height': height};
45 }
46
47 function showReport(title, data, headers, dataFunction, styleFunction) {
48 var div = d3.select('body').append('div')
49 .style('margin', '0')
50 .style('padding', '5px')
51 .style('position', 'absolute')
52 .style('top', '10%')
53 .style('left', '10%')
54 .style('background-color', 'rgba(255,255,255,0.9)')
55 .style('width', '80%')
56 .style('height', '80%')
57 .style('z-index', '2147483647')
58 .style('border', '3px ridge grey')
59 .style('box-shadow', '10px 10px 5px rgba(80,80,80,0.7)')
60 .style('text-align', 'center')
61 .style('border-radius', '10px');
62 var titlebar = div.append('div')
63 .style('margin', '0')
64 .style('padding', '5px')
65 .style('position', 'absolute')
66 .style('top', '0%')
67 .style('left', '0%')
68 .style('width', '100%')
69 .style('height', '10%')
70 .style('font-size', 'x-large');
71 titlebar.text(title);
72 var controls = div.append('div')
73 .style('margin', '0')
74 .style('padding', '5px')
75 .style('position', 'absolute')
76 .style('top', '90%')
77 .style('left', '0%')
78 .style('width', '100%')
79 .style('height', '10%');
80 controls.append('input').attr('type', 'button')
81 .attr('value', 'Dismiss')
82 .on('click', function(){div.remove();});
83
84 var tableDiv = div.append('div')
85 .style('overflow', 'auto')
86 .style('position', 'absolute')
87 .style('top', '10%')
88 .style('left', '0%')
89 .style('width', '100%')
90 .style('height', '80%')
91 .style('border-top', '1px solid rgb(230,230,230)')
92 .style('border-bottom', '1px solid rgb(230,230,230)');
93 var table = tableDiv.append('table')
94 .attr('border', '1')
95 .attr('cellspacing', '0')
96 .attr('cellpadding', '2')
97 .style('margin-left', 'auto')
98 .style('margin-right', 'auto');
99 var header = table.append('tr');
100 for (var i = 0; i < headers.length; i++) {
101 header.append('th').text(headers[i]);
102 }
103
104 for (var i = 0; i < data.length; i++) {
105 var row = table.append('tr');
106 for (j = 0; j < headers.length; j++) {
107 var td = row.append('td');
108 if (styleFunction) {
109 styleFunction.call(this, td, j);
110 }
111 dataFunction.call(this, data[i], j, td);
112 }
113 }
114 }
115
116 function bigSymbolsReport() {
117 var list = treemap.biggestSymbols(100);
118 var headers = ['Rank', 'Size (Bytes)', 'Type', 'Location'];
119 var styleFunction = function(selection, index) {
120 if (index === 3) {
121 selection.style('font-family', 'monospace');
122 }
123 };
124 var recordIndex = 1;
125 var dataFunction = function(record, index, cell) {
126 if (index === 0) {
127 cell.text(recordIndex++);
128 } else if (index === 1) {
129 cell.text(D3SymbolTreeMap._pretty(record.value));
130 } else if (index === 2) {
131 cell.text(record.t);
132 } else {
133 if (treemap.pathFor(record).indexOf('/out') == 0) {
134 cell.append('span').text(treemap.pathFor(record));
135 cell.append('br');
136 cell.append('span').text('Symbol: ');
137 cell.append('span').text(record.n);
138 } else {
139 var href = 'https://code.google.com/p/chromium/codesearch#chromi um/src'
140 + treemap.pathFor(record)
141 + '&q='
142 + record.n;
143 cell.append('a')
144 .attr('href', href)
145 .attr('target', '_blank')
146 .text(treemap.pathFor(record));
147 cell.append('br');
148 cell.append('span').text('Symbol: ');
149 cell.append('span').text(record.n);
150 }
151 }
152 };
153 showReport('100 Largest Symbols', list, headers, dataFunction, styleFunction );
154 }
155
156 function bigPathsReport() {
157 var list = treemap.biggestPaths(100);
158 var headers = ['Rank', 'Size (Bytes)', 'Location'];
159 var styleFunction = function(selection, index) {
160 if (index === 2) {
161 selection.style('font-family', 'monospace');
162 }
163 };
164 var recordIndex = 1;
165 var dataFunction = function(record, index, cell) {
166 if (index === 0) {
167 cell.text(recordIndex++);
168 } else if (index === 1) {
169 cell.text(D3SymbolTreeMap._pretty(record.value));
170 } else if (index === 2) {
171 if (treemap.pathFor(record).indexOf('/out') == 0) {
172 cell.text(treemap.pathFor(record));
173 } else {
174 var href = 'https://code.google.com/p/chromium/codesearch#chromi um/src' + treemap.pathFor(record);
175 cell.append('a')
176 .attr('href', href)
177 .attr('target', '_blank')
178 .text(treemap.pathFor(record));
179 }
180
181 }
182 };
183 showReport('100 Largest Paths', list, headers, dataFunction, styleFunction);
184 }
185
186 function symbolFilterTextChanged() {
187 if (filterChanging) return true;
188 filterChanging = true;
189 var enabled = document.getElementById('symbol_types_filter').value;
190 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
191 var checkBox = document.getElementById('check_' + x);
192 checkBox.checked = (enabled.indexOf(checkBox.value) != -1);
193 }
194 filterChanging = false;
195 }
196
197 function updateFilterText() {
198 if (filterChanging) return true;
199 filterChanging = true;
200 var text = '';
201 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
202 var checkBox = document.getElementById('check_' + x);
203 if (checkBox.checked) {
204 text += checkBox.value;
205 }
206 }
207 document.getElementById('symbol_types_filter').value=text;
208 filterChanging = false;
209 }
210
211 function initFilterOptions() {
212 updateFilterText();
213 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
214 var checkBox = document.getElementById('check_' + x);
215 checkBox.onchange=updateFilterText;
216 var swatch = document.getElementById('swatch_' + x);
217 swatch.style.backgroundColor = D3SymbolTreeMap.getColorForType(checkBox. value).toString();
218 }
219 var gteCheckbox = document.getElementById('check_gte');
220 gteCheckbox.onchange = function() {
221 document.getElementById('symbol_filter_gte').disabled = !gteCheckbox.che cked;
222 }
223 var regexCheckbox = document.getElementById('check_regex');
224 regexCheckbox.onchange = function() {
225 document.getElementById('symbol_filter_regex').disabled = !regexCheckbox .checked;
226 }
227 var excludeRegexCheckbox = document.getElementById('check_exclude_regex');
228 excludeRegexCheckbox.onchange = function() {
229 document.getElementById('symbol_filter_exclude_regex').disabled = !exclu deRegexCheckbox.checked;
230 }
231 var idealSizes = getIdealSizes();
232 document.getElementById('width').value = idealSizes.width;
233 document.getElementById('height').value = idealSizes.height;
234 saveFilterSettings();
235 }
236
237 function filterSetAll(enabled) {
238 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
239 var checkBox = document.getElementById('check_' + x);
240 checkBox.checked = enabled;
241 }
242 updateFilterText();
243 }
244
245 function showOptions() {
246 loadFilterSettings();
247 var container = document.getElementById('options_container');
248 var w = container.offsetWidth;
249 var h = container.offsetHeight;
250 container.style.margin = '-' + (h/2) + 'px 0 0 -' + (w/2) + 'px';
251 container.style.visibility = 'visible';
252 }
253
254 function hideOptions() {
255 var container = document.getElementById('options_container');
256 container.style.visibility = 'hidden';
257 }
258
259 function applySettings() {
260 hideOptions();
261 var oldWidth = savedSettings.width;
262 var oldHeight = savedSettings.height;
263 var oldSymbols = savedSettings.symbolTypes;
264 var oldRegex = savedSettings.regex;
265 var oldExcludeRegex = savedSettings.excludeRegex;
266 var oldGte = savedSettings.gte;
267 var oldMaxLevels = savedSettings.maxLevels;
268 saveFilterSettings();
269 var resizeNeeded = oldWidth !== savedSettings.width || oldHeight !== savedSe ttings.height;
270 var regexChanged = oldRegex !== savedSettings.regex;
271 var excludeRegexChanged = oldExcludeRegex !== savedSettings.excludeRegex;
272 var symbolsChanged = oldSymbols !== savedSettings.symbolTypes;
273 var gteChanged = oldGte !== savedSettings.gte;
274 var filterChanged = regexChanged || excludeRegexChanged || symbolsChanged || gteChanged;
275 var maxLevelsChanged = oldMaxLevels !== savedSettings.maxLevels;
276
277 if (filterChanged) {
278 // Type filters
279 typeFilter = function(datum) {
280 if (datum.depth === 0) return true; // root node
281 if (datum.t === undefined) return true;
282 return savedSettings.symbolTypes !== undefined &&
283 savedSettings.symbolTypes.indexOf(datum.t) !== -1;
284 }
285
286 // Regex filter
287 var regexFilter = undefined;
288 if (savedSettings.regex !== undefined && savedSettings.regex.length > 0) {
289 console.log('filter: regex is "' + savedSettings.regex + '"');
290 var regex = new RegExp(savedSettings.regex);
291 regexFilter = function(datum) {
292 if (datum.depth === 0) return true; // root node
293 var fullName = this.pathFor(datum);
294 if (datum.children === undefined) { // it is a leaf node (symbol )
295 fullName += ':' + datum.n;
296 }
297 return regex.test(fullName);
298 }
299 }
300
301 // Exclude regex filter
302 var excludeRegexFilter = undefined;
303 if (savedSettings.excludeRegex !== undefined && savedSettings.excludeReg ex.length > 0) {
304 console.log('filter: exclude-regex is "' + savedSettings.excludeRege x + '"');
305 var excludeRegex = new RegExp(savedSettings.excludeRegex);
306 excludeRegexFilter = function(datum) {
307 if (datum.depth === 0) return true; // root node
308 var fullName = this.pathFor(datum);
309 if (datum.children === undefined) { // it is a leaf node (symbol )
310 fullName += ':' + datum.n;
311 }
312 return !excludeRegex.test(fullName);
313 }
314 }
315
316 // Size filter
317 var sizeFilter = undefined;
318 if (savedSettings.gte !== undefined) {
319 console.log('filter: minimum size is ' + savedSettings.gte + ' bytes ');
320 sizeFilter = function(datum) {
321 if (datum.children !== undefined) return true; // non-leaf
322 if (datum.value === undefined) console.log('whoops');
323 return datum.value >= savedSettings.gte;
324 }
325 }
326
327 // Make a filter to apply to the tree
328 var filter = function(datum) {
329 if (typeFilter && !typeFilter.call(this, datum)) return false;
330 if (regexFilter && !regexFilter.call(this, datum)) return false;
331 if (excludeRegexFilter && !excludeRegexFilter.call(this, datum)) ret urn false;
332 if (sizeFilter && !sizeFilter.call(this, datum)) return false;
333 return true;
334 };
335 treemap.filter(filter);
336 }
337
338 // Adjust levels if needed.
339 if (maxLevelsChanged) {
340 treemap.setMaxLevels(savedSettings.maxLevels);
341 }
342
343 // Resize map if necessary.
344 if (resizeNeeded) {
345 console.log('desired treemap dimensions have changed, requesting resize' );
346 treemap.resize(savedSettings.width, savedSettings.height);
347 }
348 }
349
350 function cancelSettings() {
351 hideOptions();
352 loadFilterSettings();
353 }
354
355 function saveFilterSettings() {
356 savedSettings.symbolTypes = document.getElementById('symbol_types_filter').v alue;
357 if (document.getElementById('check_regex').checked) {
358 savedSettings.regex = document.getElementById('symbol_filter_regex').val ue;
359 } else {
360 savedSettings.regex = undefined;
361 }
362 if (document.getElementById('check_exclude_regex').checked) {
363 savedSettings.excludeRegex = document.getElementById('symbol_filter_excl ude_regex').value;
364 } else {
365 savedSettings.excludeRegex = undefined;
366 }
367 if (document.getElementById('check_gte').checked) {
368 savedSettings.gte = parseInt(document.getElementById('symbol_filter_gte' ).value);
369 } else {
370 savedSettings.gte = undefined;
371 }
372 savedSettings.width = parseInt(document.getElementById('width').value);
373 savedSettings.height = parseInt(document.getElementById('height').value);
374 savedSettings.maxLevels = parseInt(document.getElementById('max_levels').val ue);
375 }
376
377 function loadFilterSettings() {
378 document.getElementById('symbol_types_filter').value = savedSettings.symbolT ypes;
379 symbolFilterTextChanged();
380 if (savedSettings.regex !== undefined) {
381 document.getElementById('check_regex').checked = true;
382 document.getElementById('symbol_filter_regex').value = savedSettings.reg ex;
383 } else {
384 document.getElementById('check_regex').checked = false;
385 }
386 if (savedSettings.excludeRegex !== undefined) {
387 document.getElementById('check_exclude_regex').checked = true;
388 document.getElementById('symbol_filter_exclude_regex').value = savedSett ings.excludeRegex;
389 } else {
390 document.getElementById('check_exclude_regex').checked = false;
391 }
392 if (savedSettings.gte !== undefined) {
393 document.getElementById('check_gte').checked = true;
394 document.getElementById('symbol_filter_gte').value = savedSettings.gte;
395 } else {
396 document.getElementById('check_gte').checked = false;
397 }
398 document.getElementById('width').value = savedSettings.width;
399 document.getElementById('height').value = savedSettings.height;
400 document.getElementById('max_levels').value = savedSettings.maxLevels;
401 }
402
403 function escape(str) {
404 return str.replace(/&/g, '&amp;')
405 .replace(/"/g, '&quot;')
406 .replace(/</g, '&lt;')
407 .replace(/>/g, '&gt;');
408 }
409 </script>
410 </head>
411 <body onload='init()'>
412 <div style='position: absolute; top: 5px; left: 5px;'>
413 <input type='button' onclick='showOptions()' value='Options &amp; Legend...'>
414 <span style='-webkit-user-select: none; cursor: help;' title='Click to view th e symbol legend or to configure filters and options for the treemap'>[?]</span>
415 </div>
416 <div style='position: absolute; right: 5px; top: 5px; white-space: nowrap;'>
417 Reports:
418 <input type='button' onclick='bigSymbolsReport()' value='Large Symbols' titl e='Click to view a report of the largest 100 symbols that are with the bounds of the treemap that is currently displayed.'>
419 <input type='button' onclick='bigPathsReport()' value='Large Files' title='C lick to view a report of the largest 100 source files that are with the bounds o f the treemap that is currently displayed.'>
420 </div>
421 <div style='text-align: center; margin-bottom: 5px;'>
422 <span style='font-size: x-large; font-weight: bold; font-variant: small-caps '>Binary Size Analysis<span id='subtitle'></span></span>
423 <br><span style='font-size: small; font-style: italic;'>Double-click a box t o zoom in, double-click outermost title to zoom out.</span>
424 </div>
425 <table id='options_container' style='visibility: hidden; border: 3px ridge grey; padding: 0px; top: 50%; left: 50%; position: fixed; z-index: 2147483646; overfl ow: auto; background-color: rgba(255,255,255,0.9); border-radius: 10px; box-shad ow: 10px 10px 5px rgba(80,80,80,0.7);'><tr><td style='vertical-align: top'>
426 <table cellspacing=0 cellborder=0 style='width:100%'>
427 <tr><th style='padding-bottom: .25em; text-decoration: underline;'>Symbo l Types To Show</th></tr>
428 <tr>
429 <td style='white-space: nowrap; vertical-align: top;'>
430 <br><span class='swatch' id='swatch_0'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_0' value='b'>Uninitialized data (.bss)
431 <br><span class='swatch' id='swatch_1'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_1' value='d'>Initialized data (.data)
432 <br><span class='swatch' id='swatch_2'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_2' value='r'>Read-only data (.rodata)
433 <br><span class='swatch' id='swatch_3'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_3' value='t'>Code (.text)
434 <br><span class='swatch' id='swatch_4'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_4' value='v'>Vtable entries
435 <br><span class='swatch' id='swatch_5'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_5' value='!'>Generated Symbols (typeinf o, thunks, etc)
436 </td>
437 </tr>
438 <tr><td style='text-align: center; white-space: nowrap; padding-top: 1em ;'>
439 Select <input type='button' onclick='filterSetAll(true)' value='All' >,
440 <input type='button' onclick='filterSetAll(false)' value='None'>,
441 or type a string: <input id='symbol_types_filter' size=30 value='' o nkeyup='symbolFilterTextChanged()' onblur='updateFilterText()'>
442 <span style='-webkit-user-select: none; cursor: help;' title='Enter codes from the list above for the symbols you want to see. The checkboxes will u pdate automatically to match the string that you enter.'>[?]</span>
443 </td></tr>
444 </table>
445 </td></tr><tr><td style='vertical-align: top; padding-top: 10px; border-top: 1px solid grey;'>
446 <table cellspacing=0 cellborder=0 style='width: 100%'>
447 <tr><th colspan=2 style='padding-bottom: .25em; text-decoration: underli ne;'>Advanced Options</th></tr>
448 <tr>
449 <td style='white-space: nowrap; vertical-align: top;'>
450 <input type='checkbox' id='check_regex'>
451 Only include symbols matching this regex:
452 </td>
453 <td style='text-align: right; vertical-align: top;'>
454 <input disabled id='symbol_filter_regex' size=30 value='' style= 'text-align: right;'>
455 <span style='-webkit-user-select: none; cursor: help;' title='En ter a javascript regex. Only symbols that match this regex will be shown. This f ilter applies before any exclusion regex specified below. The format of each sym bol is [path]:[symbol_name]'>[?]</span>
456 </td>
457 </tr>
458 <tr>
459 <td style='white-space: nowrap; vertical-align: top;'>
460 <input type='checkbox' id='check_exclude_regex'>
461 Exclude all symbols matching this regex:
462 </td>
463 <td style='text-align: right; vertical-align: top;'>
464 <input disabled id='symbol_filter_exclude_regex' size=30 value=' ' style='text-align: right;'>
465 <span style='-webkit-user-select: none; cursor: help;' title='En ter a javascript regex. Symbols that match this tegex will not be shown. This fi lter applies after any inclusion filter specified above. The format of each symb ol is [path]:[symbol_name]'>[?]</span>
466 </td>
467 </tr>
468 <tr>
469 <td style='white-space: nowrap; vertical-align: top;'>
470 <input type='checkbox' id='check_gte'>
471 Only include symbols that are at least <span style='font-style: italic;'>n</span> bytes:
472 </td>
473 <td style='text-align: right; vertical-align: top;'>
474 <input disabled id='symbol_filter_gte' size=8 value='' style='te xt-align: right;'>
475 <span style='-webkit-user-select: none; cursor: help;' title='Sy mbols whose size is less than this value will be hidden.'>[?]</span>
476 </td>
477 </tr>
478 <tr>
479 <td style='white-space: nowrap vertical-align: top;;'>
480 Show at most <span style='font-style: italic;'>n</span> levels o f detail at a time:
481 </td>
482 <td style='text-align: right; vertical-align: top;'>
483 <input id='max_levels' size=4 value='2' style='text-align: right ;'><span style='-webkit-user-select: none; cursor: help;' title='Increasing this value shows more detail without the need to zoom, but uses more computing power .'>[?]</span>
484 </td>
485 </tr>
486 <tr>
487 <td style='white-space: nowrap vertical-align: top;;'>
488 Set the size of the treemap to <span style='font-style: italic;' >W x H</span> pixels:
489 </td>
490 <td style='text-align: right; vertical-align: top;'>
491 <input id='width' size=4 value='' style='text-align: right;'>
492 &nbsp;x&nbsp;<input id='height' size=4 value='' style='text-alig n: right;'>
493 </td>
494 </tr>
495 </table>
496 </td></tr>
497 <tr><td style='padding-top: 10px; text-align: right; border-top: 1px solid grey' >
498 <input type='button' value='Apply' onclick='applySettings()'>
499 <input type='button' value='Cancel' onclick='cancelSettings()'>
500 </td></tr></table>
501 </body>
502 </html>
OLDNEW
« no previous file with comments | « tools/binary_size/template/D3SymbolTreeMap.js ('k') | tools/binary_size/template/test-data-generator.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698