tools/binary_size/template/index.html - Issue 231803002: New binary size tool visualization options.

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

Issue 231803002: New binary size tool visualization options. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: So indent, very space, much format. Wow. Created 6 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

OLD	NEW
1 <!DOCTYPE html>

2 <!--	1 <!--

3 Copyright 2014 The Chromium Authors. All rights reserved.	2 Copyright 2014 The Chromium Authors. All rights reserved.

4 Use of this source code is governed by a BSD-style license that can be	3 Use of this source code is governed by a BSD-style license that can be

5 found in the LICENSE file.	4 found in the LICENSE file.

6 -->	5 -->

7 <html>	6 <html>

8 <head>	7 <head>

9 <title>Binary Size Analysis</title>	8 <title>Binary Size Analysis</title>

10 <link rel='stylesheet' href='webtreemap/webtreemap.css'>	9 <script src="d3/d3.js" charset="utf-8"></script>

11 <style>	10 <script src="D3SymbolTreeMap.js" charset="utf-8"></script>

12 body { font-family: sans-serif; }	11 <script src="data.js" charset="utf-8"></script>

13 tt, pre { font-family: WebKitWorkaround, monospace; }	12 <style>

14 #map {	13 body {

15 margin: 0 auto;	14 margin: 0px;

16 position: relative;	15 padding: 5px;

17 cursor: pointer;	16 }

18 -webkit-user-select: none;	17 .swatch {

19 }	18 border: 1px solid rgb(100,100,100);

20 #table {	19 -webkit-user-select: none;

21 border: 1px solid black;	20 cursor: default;

22 }	21 }

23 .treemaplegend {	22 </style>

24 margin: 0 auto;	23 <script>

25 position: relative;	24 var treemap;

26 }	25 var filterChanging = false;

27 .webtreemap-symbol-vtable {	26 var savedSettings = {};

28 background: #FFFFAA;	27

29 }	28 function init() {

30 .webtreemap-node:hover {	29 if (window.metadata !== undefined && window.metadata.subtitle) {

31 border-color: red;	30 document.getElementById('subtitle').innerHTML = ': ' + escape(metadata.s ubtitle);

32 background: linear-gradient(rgb(240,240,200), rgb(180,180,200));	31 }

33 }	32 initFilterOptions();

34 </style>	33 treemap = new D3SymbolTreeMap(

35 <script src='webtreemap/webtreemap.js'></script>	34 savedSettings.width,

36 <script src='treemap-dump.js'></script>	35 savedSettings.height,

37 <script src='largest-symbols.js'></script>	36 savedSettings.maxLevels);

38 <script src='largest-sources.js'></script>	37 treemap.init();

39 <script src='largest-vtables.js'></script>	38 }

	39

	40 function getIdealSizes() {

	41 var width = window.innerWidth - 20;

	42 var height = window.innerHeight - 70;

	43 return {'width': width, 'height': height};

	44 }

	45

	46 function showReport(title, data, headers, dataFunction, styleFunction) {

	47 var div = d3.select('body').append('div')

	48 .style('margin', '0')

	49 .style('padding', '5px')

	50 .style('position', 'absolute')

	51 .style('top', '10%')

	52 .style('left', '10%')

	53 .style('background-color', 'rgba(255,255,255,0.9)')

	54 .style('width', '80%')

	55 .style('height', '80%')

	56 .style('z-index', '2147483647')

	57 .style('border', '3px ridge grey')

	58 .style('box-shadow', '10px 10px 5px rgba(80,80,80,0.7)')

	59 .style('text-align', 'center')

	60 .style('border-radius', '10px');

	61 var titlebar = div.append('div')

	62 .style('margin', '0')

	63 .style('padding', '5px')

	64 .style('position', 'absolute')

	65 .style('top', '0%')

	66 .style('left', '0%')

	67 .style('width', '100%')

	68 .style('height', '10%')

	69 .style('font-size', 'x-large');

	70 titlebar.text(title);

	71 var controls = div.append('div')

	72 .style('margin', '0')

	73 .style('padding', '5px')

	74 .style('position', 'absolute')

	75 .style('top', '90%')

	76 .style('left', '0%')

	77 .style('width', '100%')

	78 .style('height', '10%');

	79 controls.append('input').attr('type', 'button')

	80 .attr('value', 'Dismiss')

	81 .on('click', function(){div.remove();});

	82

	83 var tableDiv = div.append('div')

	84 .style('overflow', 'auto')

	85 .style('position', 'absolute')

	86 .style('top', '10%')

	87 .style('left', '0%')

	88 .style('width', '100%')

	89 .style('height', '80%')

	90 .style('border-top', '1px solid rgb(230,230,230)')

	91 .style('border-bottom', '1px solid rgb(230,230,230)');

	92 var table = tableDiv.append('table')

	93 .attr('border', '1')

	94 .attr('cellspacing', '0')

	95 .attr('cellpadding', '2')

	96 .style('margin-left', 'auto')

	97 .style('margin-right', 'auto');

	98 var header = table.append('tr');

	99 for (var i = 0; i < headers.length; i++) {

	100 header.append('th').text(headers[i]);

	101 }

	102

	103 for (var i = 0; i < data.length; i++) {

	104 var row = table.append('tr');

	105 for (j = 0; j < headers.length; j++) {

	106 var td = row.append('td');

	107 if (styleFunction) {

	108 styleFunction.call(this, td, j);

	109 }

	110 dataFunction.call(this, data[i], j, td);

	111 }

	112 }

	113 }

	114

	115 function bigSymbolsReport() {

	116 var list = treemap.biggestSymbols(100);

	117 var headers = ['Rank', 'Size (Bytes)', 'Type', 'Location'];

	118 var styleFunction = function(selection, index) {

	119 if (index === 3) {

	120 selection.style('font-family', 'monospace');

	121 }

	122 };

	123 var recordIndex = 1;

	124 var dataFunction = function(record, index, cell) {

	125 if (index === 0) {

	126 cell.text(recordIndex++);

	127 } else if (index === 1) {

	128 cell.text(D3SymbolTreeMap._pretty(record.value));

	129 } else if (index === 2) {

	130 cell.text(record.t);

	131 } else {

	132 if (treemap.pathFor(record).indexOf('/out') == 0) {

	133 cell.append('span').text(treemap.pathFor(record));

	134 cell.append('br');

	135 cell.append('span').text('Symbol: ');

	136 cell.append('span').text(escape(record.n));

	137 } else {

	138 var href = 'https://code.google.com/p/chromium/codesearch#chromi um/src'

	139 + treemap.pathFor(record)

	140 + '&q='

	141 + escape(record.n);

	142 cell.append('a')

	143 .attr('href', href)

	144 .attr('target', '_blank')

	145 .text(escape(treemap.pathFor(record)));

	146 cell.append('br');

	147 cell.append('span').text('Symbol: ');

	148 cell.append('span').text(escape(record.n));

	149 }

	150 }

	151 };

	152 showReport('100 Largest Symbols', list, headers, dataFunction, styleFunction );

	153 }

	154

	155 function bigPathsReport() {

	156 var list = treemap.biggestPaths(100);

	157 var headers = ['Rank', 'Size (Bytes)', 'Location'];

	158 var styleFunction = function(selection, index) {

	159 if (index === 2) {

	160 selection.style('font-family', 'monospace');

	161 }

	162 };

	163 var recordIndex = 1;

	164 var dataFunction = function(record, index, cell) {

	165 if (index === 0) {

	166 cell.text(recordIndex++);

	167 } else if (index === 1) {

	168 cell.text(D3SymbolTreeMap._pretty(record.value));

	169 } else if (index === 2) {

	170 if (treemap.pathFor(record).indexOf('/out') == 0) {

	171 cell.text(treemap.pathFor(record));

	172 } else {

	173 var href = 'https://code.google.com/p/chromium/codesearch#chromi um/src' + treemap.pathFor(record);

	174 cell.append('a')

	175 .attr('href', href)

	176 .attr('target', '_blank')

	177 .text(escape(treemap.pathFor(record)));

	178 }

	179

	180 }

	181 };

	182 showReport('100 Largest Paths', list, headers, dataFunction, styleFunction);

	183 }

	184

	185 function symbolFilterTextChanged() {

	186 if (filterChanging) return true;

	187 filterChanging = true;

	188 var enabled = document.getElementById('symbol_types_filter').value;

	189 for (var x=0; x<=25; x++) {

	190 var checkBox = document.getElementById('check_' + x);

	191 checkBox.checked = (enabled.indexOf(checkBox.value) != -1);

	192 }

	193 filterChanging = false;

	194 }

	195

	196 function updateFilterText() {

	197 if (filterChanging) return true;

	198 filterChanging = true;

	199 var text = '';

	200 for (var x=0; x<=25; x++) {

	201 var checkBox = document.getElementById('check_' + x);

	202 if (checkBox.checked) {

	203 text += checkBox.value;

	204 }

	205 }

	206 document.getElementById('symbol_types_filter').value=text;

	207 filterChanging = false;

	208 }

	209

	210 function initFilterOptions() {

	211 updateFilterText();

	212 for (var x=0; x<=25; x++) {

	213 var checkBox = document.getElementById('check_' + x);

	214 checkBox.onchange=updateFilterText;

	215 var swatch = document.getElementById('swatch_' + x);

	216 swatch.style.backgroundColor = D3SymbolTreeMap.getColorForType(checkBox. value).toString();

	217 }

	218 var gteCheckbox = document.getElementById('check_gte');

	219 gteCheckbox.onchange = function() {

	220 document.getElementById('symbol_filter_gte').disabled = !gteCheckbox.che cked;

	221 }

	222 var regexCheckbox = document.getElementById('check_regex');

	223 regexCheckbox.onchange = function() {

	224 document.getElementById('symbol_filter_regex').disabled = !regexCheckbox .checked;

	225 }

	226 var excludeRegexCheckbox = document.getElementById('check_exclude_regex');

	227 excludeRegexCheckbox.onchange = function() {

	228 document.getElementById('symbol_filter_exclude_regex').disabled = !exclu deRegexCheckbox.checked;

	229 }

	230 var idealSizes = getIdealSizes();

	231 document.getElementById('width').value = idealSizes.width;

	232 document.getElementById('height').value = idealSizes.height;

	233 saveFilterSettings();

	234 }

	235

	236 function filterSetAll(enabled) {

	237 for (var x=0; x<=25; x++) {

	238 var checkBox = document.getElementById('check_' + x);

	239 checkBox.checked = enabled;

	240 }

	241 updateFilterText();

	242 }

	243

	244 function showOptions() {

	245 loadFilterSettings();

	246 var container = document.getElementById('options_container');

	247 var w = container.offsetWidth;

	248 var h = container.offsetHeight;

	249 container.style.margin = '-' + (h/2) + 'px 0 0 -' + (w/2) + 'px';

	250 container.style.visibility = 'visible';

	251 }

	252

	253 function hideOptions() {

	254 var container = document.getElementById('options_container');

	255 container.style.visibility = 'hidden';

	256 }

	257

	258 function applySettings() {

	259 hideOptions();

	260 var oldWidth = savedSettings.width;

	261 var oldHeight = savedSettings.height;

	262 var oldSymbols = savedSettings.symbolTypes;

	263 var oldRegex = savedSettings.regex;

	264 var oldExcludeRegex = savedSettings.excludeRegex;

	265 var oldGte = savedSettings.gte;

	266 var oldMaxLevels = savedSettings.maxLevels;

	267 saveFilterSettings();

	268 var resizeNeeded = oldWidth !== savedSettings.width \|\| oldHeight !== savedSe ttings.height;

	269 var regexChanged = oldRegex !== savedSettings.regex;

	270 var excludeRegexChanged = oldExcludeRegex !== savedSettings.excludeRegex;

	271 var symbolsChanged = oldSymbols !== savedSettings.symbolTypes;

	272 var gteChanged = oldGte !== savedSettings.gte;

	273 var filterChanged = regexChanged \|\| excludeRegexChanged \|\| symbolsChanged \|\| gteChanged;

	274 var maxLevelsChanged = oldMaxLevels !== savedSettings.maxLevels;

	275

	276 if (filterChanged) {

	277 // Type filters

	278 typeFilter = function(datum) {

	279 if (datum.depth === 0) return true; // root node

	280 if (datum.t === undefined) return true;

	281 return savedSettings.symbolTypes !== undefined &&

	282 savedSettings.symbolTypes.indexOf(datum.t) !== -1;

	283 }

	284

	285 // Regex filter

	286 var regexFilter = undefined;

	287 if (savedSettings.regex !== undefined && savedSettings.regex.length > 0) {

	288 console.log('filter: regex is "' + savedSettings.regex + '"');

	289 var regex = new RegExp(savedSettings.regex);

	290 regexFilter = function(datum) {

	291 if (datum.depth === 0) return true; // root node

	292 var fullName = this.pathFor(datum);

	293 if (datum.children === undefined) { // it is a leaf node (symbol )

	294 fullName += ':' + datum.n;

	295 }

	296 return regex.test(fullName);

	297 }

	298 }

	299

	300 // Exclude regex filter

	301 var excludeRegexFilter = undefined;

	302 if (savedSettings.excludeRegex !== undefined && savedSettings.excludeReg ex.length > 0) {

	303 console.log('filter: exclude-regex is "' + savedSettings.excludeRege x + '"');

	304 var excludeRegex = new RegExp(savedSettings.excludeRegex);

	305 excludeRegexFilter = function(datum) {

	306 if (datum.depth === 0) return true; // root node

	307 var fullName = this.pathFor(datum);

	308 if (datum.children === undefined) { // it is a leaf node (symbol )

	309 fullName += ':' + datum.n;

	310 }

	311 return !excludeRegex.test(fullName);

	312 }

	313 }

	314

	315 // Size filter

	316 var sizeFilter = undefined;

	317 if (savedSettings.gte !== undefined) {

	318 console.log('filter: minimum size is ' + savedSettings.gte + ' bytes ');

	319 sizeFilter = function(datum) {

	320 if (datum.children !== undefined) return true; // non-leaf

	321 if (datum.value === undefined) console.log('whoops');

	322 return datum.value >= savedSettings.gte;

	323 }

	324 }

	325

	326 // Make a filter to apply to the tree

	327 var filter = function(datum) {

	328 if (typeFilter && !typeFilter.call(this, datum)) return false;

	329 if (regexFilter && !regexFilter.call(this, datum)) return false;

	330 if (excludeRegexFilter && !excludeRegexFilter.call(this, datum)) ret urn false;

	331 if (sizeFilter && !sizeFilter.call(this, datum)) return false;

	332 return true;

	333 };

	334 treemap.filter(filter);

	335 }

	336

	337 // Adjust levels if needed.

	338 if (maxLevelsChanged) {

	339 treemap.setMaxLevels(savedSettings.maxLevels);

	340 }

	341

	342 // Resize map if necessary.

	343 if (resizeNeeded) {

	344 console.log('desired treemap dimensions have changed, requesting resize' );

	345 treemap.resize(savedSettings.width, savedSettings.height);

	346 }

	347 }

	348

	349 function cancelSettings() {

	350 hideOptions();

	351 loadFilterSettings();

	352 }

	353

	354 function saveFilterSettings() {

	355 savedSettings.symbolTypes = document.getElementById('symbol_types_filter').v alue;

	356 if (document.getElementById('check_regex').checked) {

	357 savedSettings.regex = document.getElementById('symbol_filter_regex').val ue;

	358 } else {

	359 savedSettings.regex = undefined;

	360 }

	361 if (document.getElementById('check_exclude_regex').checked) {

	362 savedSettings.excludeRegex = document.getElementById('symbol_filter_excl ude_regex').value;

	363 } else {

	364 savedSettings.excludeRegex = undefined;

	365 }

	366 if (document.getElementById('check_gte').checked) {

	367 savedSettings.gte = parseInt(document.getElementById('symbol_filter_gte' ).value);

	368 } else {

	369 savedSettings.gte = undefined;

	370 }

	371 savedSettings.width = parseInt(document.getElementById('width').value);

	372 savedSettings.height = parseInt(document.getElementById('height').value);

	373 savedSettings.maxLevels = parseInt(document.getElementById('max_levels').val ue);

	374 }

	375

	376 function loadFilterSettings() {

	377 document.getElementById('symbol_types_filter').value = savedSettings.symbolT ypes;

	378 symbolFilterTextChanged();

	379 if (savedSettings.regex !== undefined) {

	380 document.getElementById('check_regex').checked = true;

	381 document.getElementById('symbol_filter_regex').value = savedSettings.reg ex;

	382 } else {

	383 document.getElementById('check_regex').checked = false;

	384 }

	385 if (savedSettings.excludeRegex !== undefined) {

	386 document.getElementById('check_exclude_regex').checked = true;

	387 document.getElementById('symbol_filter_exclude_regex').value = savedSett ings.excludeRegex;

	388 } else {

	389 document.getElementById('check_exclude_regex').checked = false;

	390 }

	391 if (savedSettings.gte !== undefined) {

	392 document.getElementById('check_gte').checked = true;

	393 document.getElementById('symbol_filter_gte').value = savedSettings.gte;

	394 } else {

	395 document.getElementById('check_gte').checked = false;

	396 }

	397 document.getElementById('width').value = savedSettings.width;

	398 document.getElementById('height').value = savedSettings.height;

	399 document.getElementById('max_levels').value = savedSettings.maxLevels;

	400 }

	401

	402 function escape(str) {

	403 return str.replace(/&/g, '&')

	404 .replace(/"/g, '"')

	405 .replace(/</g, '<')

	406 .replace(/>/g, '>');

	407 }

	408 </script>

40 </head>	409 </head>

41 <body onload='show_report_treemap()'>	410 <body onload='init()'>

42 <div style='text-align: center; margin-bottom: 2em;'>	411 <div style='position: absolute; top: 5px; left: 5px;'>

43 <h1>Binary Size Analysis</h1>	412 <input type='button' onclick='showOptions()' value='Options & Legend...'>

44 <a href='#' onclick='show_report_treemap()'>Spatial Treemap</a>	413 <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>

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>	414 </div>

52 <div id='report'></div>	415 <div style='position: absolute; right: 5px; top: 5px; white-space: nowrap;'>

53 <script>	416 Reports:

54 function escape(str) {	417 <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.'>

55 return str.replace(/&/g, '&')	418 <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.'>

56 .replace(/"/g, '"')	419 </div>

57 .replace(/</g, '<')	420 <div style='text-align: center; margin-bottom: 5px;'>

58 .replace(/>/g, '>');	421 <span style='font-size: x-large; font-weight: bold; font-variant: small-caps '>Binary Size Analysis<span id='subtitle'></span></span>

59 }	422 <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>

60	423 </div>

61 var treemap_width = 800;	424 <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'>

62 var treemap_height = 450;	425 <table cellspacing=0 cellborder=0 style='width:100%'>

63 function show_report_treemap() {	426 <tr><th colspan=3 style='padding-bottom: .25em; text-decoration: underli ne;'>Symbol Types To Show</th></tr>

64 console.log('displaying treemap')	427 <tr>

65 var div = document.getElementById('report');	428 <td style='width: 33%; white-space: nowrap; vertical-align: top;'>

66 var w = window.treemap_width;	429 <span class='swatch' id='swatch_0'>   </span> <input checked type='checkbox' id='check_0' value='A'>Global absolute (A)

67 var h = window.treemap_height;	430 <br><span class='swatch' id='swatch_1'>   </span> <input checked type='checkbox' id='check_1' value='B'>Global uninitialized data (B)

68 div.innerHTML = '<div style=\'text-align: center;\'>' +	431 <br><span class='swatch' id='swatch_2'>   </span> <input checked type='checkbox' id='check_2' value='b'>Local uninitialized data ( b)

69 '<button onclick=\'zoomInTreemap()\'>Bigger (More Detail)</but ton>' +	432 <br><span class='swatch' id='swatch_3'>   </span> <input checked type='checkbox' id='check_3' value='C'>Global uninitialized commo n (C)

70 ', <button onclick=\'zoomOutTreemap()\'>Smaller (Less Detail)< /button>' +	433 <br><span class='swatch' id='swatch_4'>   </span> <input checked type='checkbox' id='check_4' value='D'>Global initialized data (D )

71 ' or resize to: ' +	434 <br><span class='swatch' id='swatch_5'>   </span> <input checked type='checkbox' id='check_5' value='d'>Local initialized data (d)

72 '<input type=text size=5 id=treemap_width value=' + w + '>x' +	435 <br><span class='swatch' id='swatch_6'>   </span> <input checked type='checkbox' id='check_6' value='G'>Global small initialized d ata (G)

73 '<input type=text size=5 id=treemap_height value=' + h + '>' +	436 <br><span class='swatch' id='swatch_7'>   </span> <input checked type='checkbox' id='check_7' value='g'>Local small initialized da ta (g)

74 '<button onclick=\'resizeTreemap()\'>Go</button>' +	437 <br><span class='swatch' id='swatch_8'>   </span> <input checked type='checkbox' id='check_8' value='i'>Indirect function (i)

75 '<br><em>Click on a box to zoom in and reveal more detail. ' +	438 </td>

76 'Click on the outermost box to zoom out.</em>' +	439 <td style='width: 33%; white-space: nowrap; vertical-align: top;'>

77 '<br>Legend: <table border=1 class=\'treemaplegend\' cellborde r=1><tr>' +	440 <span class='swatch' id='swatch_9'>   </span> <input checked type='checkbox' id='check_9' value='N'>Debugging (N)

78 '<td class=\'webtreemap-symbol-bss\'>BSS</td>' +	441 <br><span class='swatch' id='swatch_10'>   </span ><input checked type='checkbox' id='check_10' value='p'>Stack unwind (p)

79 '<td class=\'webtreemap-symbol-data\'>Data</td>' +	442 <br><span class='swatch' id='swatch_11'>   </span ><input checked type='checkbox' id='check_11' value='R'>Global read-only data (R )

80 '<td class=\'webtreemap-symbol-code\'>Code</td>' +	443 <br><span class='swatch' id='swatch_12'>   </span ><input checked type='checkbox' id='check_12' value='r'>Local read-only data (r)

81 '<td class=\'webtreemap-symbol-read-only_data\'>RO Data</td>' +	444 <br><span class='swatch' id='swatch_13'>   </span ><input checked type='checkbox' id='check_13' value='S'>Global small uninitializ ed data (S)

82 '<td class=\'webtreemap-symbol-weak_symbol\'>Weak</td>' +	445 <br><span class='swatch' id='swatch_14'>   </span ><input checked type='checkbox' id='check_14' value='s'>Local small uninitialize d data (s)

83 '<td class=\'webtreemap-symbol-vtable\'>VTable</td>' +	446 <br><span class='swatch' id='swatch_15'>   </span ><input checked type='checkbox' id='check_15' value='T'>Global code (T)

84 '</tr></table>' +	447 <br><span class='swatch' id='swatch_16'>   </span ><input checked type='checkbox' id='check_16' value='t'>Local code (t)

85 '<br>' +	448 <br><span class='swatch' id='swatch_17'>   </span ><input checked type='checkbox' id='check_17' value='U'>Undefined (U)

86 '<div id=\'map\' ' +	449 </td>

87 'style=\'width: ' + w + 'px; height: ' + h + 'px;\'>' +	450 <td style='width: 33%; white-space: nowrap; vertical-align: top;'>

88 '</div></div>';	451 <span class='swatch' id='swatch_18'>   </span ><input checked type='checkbox' id='check_18' value='u'>Unique (u)

89 var map = document.getElementById('map');	452 <br><span class='swatch' id='swatch_19'>   </span ><input checked type='checkbox' id='check_19' value='V'>Global weak object (V)

90 appendTreemap(map, kTree);	453 <br><span class='swatch' id='swatch_20'>   </span ><input checked type='checkbox' id='check_20' value='v'>Local weak object (v)

91 }	454 <br><span class='swatch' id='swatch_21'>   </span ><input checked type='checkbox' id='check_21' value='W'>Global weak symbol (W)

92	455 <br><span class='swatch' id='swatch_22'>   </span ><input checked type='checkbox' id='check_22' value='w'>Local weak symbol (w)

93 function zoomInTreemap() {	456 <br><span class='swatch' id='swatch_23'>   </span ><input checked type='checkbox' id='check_23' value='@'>Vtable entry (@)

94 window.treemap_width = Math.round(window.treemap_width * 1.25);	457 <br><span class='swatch' id='swatch_24'>   </span ><input checked type='checkbox' id='check_24' value='-'>STABS debugging (-)

95 window.treemap_height = Math.round(window.treemap_height * 1.25);	458 <br><span class='swatch' id='swatch_25'>   </span ><input checked type='checkbox' id='check_25' value='?'>Unrecognized (?)

96 show_report_treemap();	459 </td>

97 }	460 </tr>

98	461 <tr><td colspan=3 style='text-align: center; white-space: nowrap; paddin g-top: 1em;'>

99 function zoomOutTreemap() {	462 Select <input type='button' onclick='filterSetAll(true)' value='All' >,

100 window.treemap_width = Math.round(window.treemap_width / 1.25);	463 <input type='button' onclick='filterSetAll(false)' value='None'>,

101 window.treemap_height = Math.round(window.treemap_height / 1.25);	464 or type a string: <input id='symbol_types_filter' size=30 value='' o nkeyup='symbolFilterTextChanged()' onblur='updateFilterText()'>

102 show_report_treemap();	465 <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>

103 }	466 </td></tr>

104	467 </table>

105 function resizeTreemap() {	468 </td></tr><tr><td style='vertical-align: top; padding-top: 10px; border-top: 1px solid grey;'>

106 window.treemap_width = document.getElementById('treemap_width').value;	469 <table cellspacing=0 cellborder=0 style='width: 100%'>

107 window.treemap_height = document.getElementById('treemap_height').value;	470 <tr><th colspan=2 style='padding-bottom: .25em; text-decoration: underli ne;'>Advanced Options</th></tr>

108 show_report_treemap();	471 <tr>

109 }	472 <td style='white-space: nowrap; vertical-align: top;'>

110	473 <input type='checkbox' id='check_regex'>

111 function show_report_largest_symbols() {	474 Only include symbols matching this regex:

112 console.log('displaying largest-symbols report')	475 </td>

113 var div = document.getElementById('report');	476 <td style='text-align: right; vertical-align: top;'>

114 div.innerHTML = '<div><table id=\'list\' border=1><tr>' +	477 <input disabled id='symbol_filter_regex' size=30 value='' style= 'text-align: right;'>

115 '<th>Rank</th><th>Size</th><th>Type</th><th>Source</th>' +	478 <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>

116 '</tr></table>';	479 </td>

117 var list = document.getElementById('list');	480 </tr>

118 for (var i = 0; i < largestSymbols.length; i++) {	481 <tr>

119 var record = largestSymbols[i];	482 <td style='white-space: nowrap; vertical-align: top;'>

120 var link;	483 <input type='checkbox' id='check_exclude_regex'>

121 if (record.location.indexOf('out') == 0) {	484 Exclude all symbols matching this regex:

122 link = record.location;	485 </td>

123 } else {	486 <td style='text-align: right; vertical-align: top;'>

124 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/sr c/'	487 <input disabled id='symbol_filter_exclude_regex' size=30 value=' ' style='text-align: right;'>

125 + record.location + '">' + escape(record.location) + '</a>';	488 <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>

126 }	489 </td>

127 list.innerHTML += '<tr>'	490 </tr>

128 + '<td>' + (i+1) + '</td>'	491 <tr>

129 + '<td>' + escape(record.size) + '</td>'	492 <td style='white-space: nowrap; vertical-align: top;'>

130 + '<td style=\'white-space: nowrap;\'>' + escape(record.type) + '</td>'	493 <input type='checkbox' id='check_gte'>

131 + '<td>' + link + ':<br>'	494 Only include symbols that are at least <span style='font-style: italic;'>n</span> bytes:

132 + escape(record.symbol) + '</td>'	495 </td>

133 + '</tr>';	496 <td style='text-align: right; vertical-align: top;'>

134 }	497 <input disabled id='symbol_filter_gte' size=8 value='' style='te xt-align: right;'>

135 }	498 <span style='-webkit-user-select: none; cursor: help;' title='Sy mbols whose size is less than this value will be hidden.'>[?]</span>

136	499 </td>

137 function show_report_largest_sources() {	500 </tr>

138 console.log('displaying largest-sources report')	501 <tr>

139 var div = document.getElementById('report');	502 <td style='white-space: nowrap vertical-align: top;;'>

140 div.innerHTML = '<div><table id=\'list\' border=1><tr>' +	503 Show at most <span style='font-style: italic;'>n</span> levels o f detail at a time:

141 '<th>Rank</th><th>Size</th><th>Symbol Count</th><th>Source</th >' +	504 </td>

142 '</tr></table>';	505 <td style='text-align: right; vertical-align: top;'>

143 var list = document.getElementById('list');	506 <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>

144 for (var i = 0; i < largestSources.length; i++) {	507 </td>

145 var record = largestSources[i];	508 </tr>

146 var link;	509 <tr>

147 if (record.location.indexOf('out') == 0) {	510 <td style='white-space: nowrap vertical-align: top;;'>

148 link = record.location;	511 Set the size of the treemap to <span style='font-style: italic;' >W x H</span> pixels:

149 } else {	512 </td>

150 link = '<a href="https://code.google.com/p/chromium/codesearch#chromium/sr c/'	513 <td style='text-align: right; vertical-align: top;'>

151 + record.location + '">' + escape(record.location) + '</a>';	514 <input id='width' size=4 value='' style='text-align: right;'>

152 }	515  x <input id='height' size=4 value='' style='text-alig n: right;'>

153	516 </td>

154 list.innerHTML += '<tr>'	517 </tr>

155 + '<td>' + (i+1) + '</td>'	518 </table>

156 + '<td>' + escape(record.size) + '</td>'	519 </td></tr>

157 + '<td>' + escape(record.symbol_count) + '</td>'	520 <tr><td style='padding-top: 10px; text-align: right; border-top: 1px solid grey' >

158 + '<td>' + link + '</td>'	521 <input type='button' value='Apply' onclick='applySettings()'>

159 + '</tr>';	522 <input type='button' value='Cancel' onclick='cancelSettings()'>

160 }	523 </td></tr></table>

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>	524 </body>

190 </html>	525 </html>

OLD	NEW

« 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 »