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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2724253002: V1 of //tools/binary_size rewrite (Closed)
Patch Set: Put everthing after ()s in the name, not just [attrib] Created 3 years, 9 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
« no previous file with comments | « tools/binary_size/template/D3SymbolTreeMap.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 Copyright 2014 The Chromium Authors. All rights reserved. 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 3 Use of this source code is governed by a BSD-style license that can be
4 found in the LICENSE file. 4 found in the LICENSE file.
5 --> 5 -->
6 <html> 6 <html>
7 <head> 7 <head>
8 <title>Binary Size Analysis</title> 8 <title>Binary Size Analysis</title>
9 <script src="d3/d3.js" charset="utf-8"></script> 9 <script src="d3/d3.js" charset="utf-8"></script>
10 <script src="D3SymbolTreeMap.js" charset="utf-8"></script> 10 <script src="D3SymbolTreeMap.js" charset="utf-8"></script>
11 <script src="data.js" charset="utf-8"></script> 11 <script src="data.js" charset="utf-8"></script>
12 <style> 12 <style>
13 body { 13 body {
14 margin: 0px; 14 margin: 0px;
15 padding: 5px; 15 padding: 5px;
16 } 16 }
17 .swatch { 17 .swatch {
18 border: 1px solid rgb(100,100,100); 18 border: 1px solid rgb(100,100,100);
19 -webkit-user-select: none; 19 -webkit-user-select: none;
20 cursor: default; 20 cursor: default;
21 } 21 }
22 </style> 22 </style>
23 <script> 23 <script>
24 var treemap; 24 var treemap;
25 var filterChanging = false; 25 var filterChanging = false;
26 var savedSettings = {}; 26 var savedSettings = {};
27 var NUM_SYMBOL_TYPES = 6
27 28
28 function init() { 29 function init() {
29 if (window.metadata !== undefined && window.metadata.subtitle) { 30 if (window.metadata !== undefined && window.metadata.subtitle) {
30 document.getElementById('subtitle').innerHTML = ': ' + escape(metadata.s ubtitle); 31 document.getElementById('subtitle').innerHTML = ': ' + escape(metadata.s ubtitle);
31 } 32 }
32 initFilterOptions(); 33 initFilterOptions();
33 treemap = new D3SymbolTreeMap( 34 treemap = new D3SymbolTreeMap(
34 savedSettings.width, 35 savedSettings.width,
35 savedSettings.height, 36 savedSettings.height,
36 savedSettings.maxLevels); 37 savedSettings.maxLevels);
(...skipping 142 matching lines...) Expand 10 before | Expand all | Expand 10 after
179 180
180 } 181 }
181 }; 182 };
182 showReport('100 Largest Paths', list, headers, dataFunction, styleFunction); 183 showReport('100 Largest Paths', list, headers, dataFunction, styleFunction);
183 } 184 }
184 185
185 function symbolFilterTextChanged() { 186 function symbolFilterTextChanged() {
186 if (filterChanging) return true; 187 if (filterChanging) return true;
187 filterChanging = true; 188 filterChanging = true;
188 var enabled = document.getElementById('symbol_types_filter').value; 189 var enabled = document.getElementById('symbol_types_filter').value;
189 for (var x=0; x<=25; x++) { 190 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
190 var checkBox = document.getElementById('check_' + x); 191 var checkBox = document.getElementById('check_' + x);
191 checkBox.checked = (enabled.indexOf(checkBox.value) != -1); 192 checkBox.checked = (enabled.indexOf(checkBox.value) != -1);
192 } 193 }
193 filterChanging = false; 194 filterChanging = false;
194 } 195 }
195 196
196 function updateFilterText() { 197 function updateFilterText() {
197 if (filterChanging) return true; 198 if (filterChanging) return true;
198 filterChanging = true; 199 filterChanging = true;
199 var text = ''; 200 var text = '';
200 for (var x=0; x<=25; x++) { 201 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
201 var checkBox = document.getElementById('check_' + x); 202 var checkBox = document.getElementById('check_' + x);
202 if (checkBox.checked) { 203 if (checkBox.checked) {
203 text += checkBox.value; 204 text += checkBox.value;
204 } 205 }
205 } 206 }
206 document.getElementById('symbol_types_filter').value=text; 207 document.getElementById('symbol_types_filter').value=text;
207 filterChanging = false; 208 filterChanging = false;
208 } 209 }
209 210
210 function initFilterOptions() { 211 function initFilterOptions() {
211 updateFilterText(); 212 updateFilterText();
212 for (var x=0; x<=25; x++) { 213 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
213 var checkBox = document.getElementById('check_' + x); 214 var checkBox = document.getElementById('check_' + x);
214 checkBox.onchange=updateFilterText; 215 checkBox.onchange=updateFilterText;
215 var swatch = document.getElementById('swatch_' + x); 216 var swatch = document.getElementById('swatch_' + x);
216 swatch.style.backgroundColor = D3SymbolTreeMap.getColorForType(checkBox. value).toString(); 217 swatch.style.backgroundColor = D3SymbolTreeMap.getColorForType(checkBox. value).toString();
217 } 218 }
218 var gteCheckbox = document.getElementById('check_gte'); 219 var gteCheckbox = document.getElementById('check_gte');
219 gteCheckbox.onchange = function() { 220 gteCheckbox.onchange = function() {
220 document.getElementById('symbol_filter_gte').disabled = !gteCheckbox.che cked; 221 document.getElementById('symbol_filter_gte').disabled = !gteCheckbox.che cked;
221 } 222 }
222 var regexCheckbox = document.getElementById('check_regex'); 223 var regexCheckbox = document.getElementById('check_regex');
223 regexCheckbox.onchange = function() { 224 regexCheckbox.onchange = function() {
224 document.getElementById('symbol_filter_regex').disabled = !regexCheckbox .checked; 225 document.getElementById('symbol_filter_regex').disabled = !regexCheckbox .checked;
225 } 226 }
226 var excludeRegexCheckbox = document.getElementById('check_exclude_regex'); 227 var excludeRegexCheckbox = document.getElementById('check_exclude_regex');
227 excludeRegexCheckbox.onchange = function() { 228 excludeRegexCheckbox.onchange = function() {
228 document.getElementById('symbol_filter_exclude_regex').disabled = !exclu deRegexCheckbox.checked; 229 document.getElementById('symbol_filter_exclude_regex').disabled = !exclu deRegexCheckbox.checked;
229 } 230 }
230 var idealSizes = getIdealSizes(); 231 var idealSizes = getIdealSizes();
231 document.getElementById('width').value = idealSizes.width; 232 document.getElementById('width').value = idealSizes.width;
232 document.getElementById('height').value = idealSizes.height; 233 document.getElementById('height').value = idealSizes.height;
233 saveFilterSettings(); 234 saveFilterSettings();
234 } 235 }
235 236
236 function filterSetAll(enabled) { 237 function filterSetAll(enabled) {
237 for (var x=0; x<=25; x++) { 238 for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
238 var checkBox = document.getElementById('check_' + x); 239 var checkBox = document.getElementById('check_' + x);
239 checkBox.checked = enabled; 240 checkBox.checked = enabled;
240 } 241 }
241 updateFilterText(); 242 updateFilterText();
242 } 243 }
243 244
244 function showOptions() { 245 function showOptions() {
245 loadFilterSettings(); 246 loadFilterSettings();
246 var container = document.getElementById('options_container'); 247 var container = document.getElementById('options_container');
247 var w = container.offsetWidth; 248 var w = container.offsetWidth;
(...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after
416 Reports: 417 Reports:
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.'> 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.'>
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.'> 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.'>
419 </div> 420 </div>
420 <div style='text-align: center; margin-bottom: 5px;'> 421 <div style='text-align: center; margin-bottom: 5px;'>
421 <span style='font-size: x-large; font-weight: bold; font-variant: small-caps '>Binary Size Analysis<span id='subtitle'></span></span> 422 <span style='font-size: x-large; font-weight: bold; font-variant: small-caps '>Binary Size Analysis<span id='subtitle'></span></span>
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> 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>
423 </div> 424 </div>
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'> 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'>
425 <table cellspacing=0 cellborder=0 style='width:100%'> 426 <table cellspacing=0 cellborder=0 style='width:100%'>
426 <tr><th colspan=3 style='padding-bottom: .25em; text-decoration: underli ne;'>Symbol Types To Show</th></tr> 427 <tr><th style='padding-bottom: .25em; text-decoration: underline;'>Symbo l Types To Show</th></tr>
427 <tr> 428 <tr>
428 <td style='width: 33%; white-space: nowrap; vertical-align: top;'> 429 <td style='white-space: nowrap; vertical-align: top;'>
429 <span class='swatch' id='swatch_0'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_0' value='A'>Global absolute (A) 430 <br><span class='swatch' id='swatch_0'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_0' value='b'>Uninitialized data (.bss)
430 <br><span class='swatch' id='swatch_1'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_1' value='B'>Global uninitialized data (B) 431 <br><span class='swatch' id='swatch_1'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_1' value='d'>Initialized data (.data)
431 <br><span class='swatch' id='swatch_2'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_2' value='b'>Local uninitialized data ( b) 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)
432 <br><span class='swatch' id='swatch_3'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_3' value='C'>Global uninitialized commo n (C) 433 <br><span class='swatch' id='swatch_3'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_3' value='t'>Code (.text)
433 <br><span class='swatch' id='swatch_4'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_4' value='D'>Global initialized data (D ) 434 <br><span class='swatch' id='swatch_4'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_4' value='v'>Vtable entries
434 <br><span class='swatch' id='swatch_5'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_5' value='d'>Local initialized data (d) 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)
435 <br><span class='swatch' id='swatch_6'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_6' value='G'>Global small initialized d ata (G)
436 <br><span class='swatch' id='swatch_7'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_7' value='g'>Local small initialized da ta (g)
437 <br><span class='swatch' id='swatch_8'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_8' value='i'>Indirect function (i)
438 </td>
439 <td style='width: 33%; white-space: nowrap; vertical-align: top;'>
440 <span class='swatch' id='swatch_9'>&nbsp;&nbsp;&nbsp;</span> <input checked type='checkbox' id='check_9' value='N'>Debugging (N)
441 <br><span class='swatch' id='swatch_10'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_10' value='p'>Stack unwind (p)
442 <br><span class='swatch' id='swatch_11'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_11' value='R'>Global read-only data (R )
443 <br><span class='swatch' id='swatch_12'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_12' value='r'>Local read-only data (r)
444 <br><span class='swatch' id='swatch_13'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_13' value='S'>Global small uninitializ ed data (S)
445 <br><span class='swatch' id='swatch_14'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_14' value='s'>Local small uninitialize d data (s)
446 <br><span class='swatch' id='swatch_15'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_15' value='T'>Global code (T)
447 <br><span class='swatch' id='swatch_16'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_16' value='t'>Local code (t)
448 <br><span class='swatch' id='swatch_17'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_17' value='U'>Undefined (U)
449 </td>
450 <td style='width: 33%; white-space: nowrap; vertical-align: top;'>
451 <span class='swatch' id='swatch_18'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_18' value='u'>Unique (u)
452 <br><span class='swatch' id='swatch_19'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_19' value='V'>Global weak object (V)
453 <br><span class='swatch' id='swatch_20'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_20' value='v'>Local weak object (v)
454 <br><span class='swatch' id='swatch_21'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_21' value='W'>Global weak symbol (W)
455 <br><span class='swatch' id='swatch_22'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_22' value='w'>Local weak symbol (w)
456 <br><span class='swatch' id='swatch_23'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_23' value='@'>Vtable entry (@)
457 <br><span class='swatch' id='swatch_24'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_24' value='-'>STABS debugging (-)
458 <br><span class='swatch' id='swatch_25'>&nbsp;&nbsp;&nbsp;</span ><input checked type='checkbox' id='check_25' value='?'>Unrecognized (?)
459 </td> 436 </td>
460 </tr> 437 </tr>
461 <tr><td colspan=3 style='text-align: center; white-space: nowrap; paddin g-top: 1em;'> 438 <tr><td style='text-align: center; white-space: nowrap; padding-top: 1em ;'>
462 Select <input type='button' onclick='filterSetAll(true)' value='All' >, 439 Select <input type='button' onclick='filterSetAll(true)' value='All' >,
463 <input type='button' onclick='filterSetAll(false)' value='None'>, 440 <input type='button' onclick='filterSetAll(false)' value='None'>,
464 or type a string: <input id='symbol_types_filter' size=30 value='' o nkeyup='symbolFilterTextChanged()' onblur='updateFilterText()'> 441 or type a string: <input id='symbol_types_filter' size=30 value='' o nkeyup='symbolFilterTextChanged()' onblur='updateFilterText()'>
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> 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>
466 </td></tr> 443 </td></tr>
467 </table> 444 </table>
468 </td></tr><tr><td style='vertical-align: top; padding-top: 10px; border-top: 1px solid grey;'> 445 </td></tr><tr><td style='vertical-align: top; padding-top: 10px; border-top: 1px solid grey;'>
469 <table cellspacing=0 cellborder=0 style='width: 100%'> 446 <table cellspacing=0 cellborder=0 style='width: 100%'>
470 <tr><th colspan=2 style='padding-bottom: .25em; text-decoration: underli ne;'>Advanced Options</th></tr> 447 <tr><th colspan=2 style='padding-bottom: .25em; text-decoration: underli ne;'>Advanced Options</th></tr>
471 <tr> 448 <tr>
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
516 </td> 493 </td>
517 </tr> 494 </tr>
518 </table> 495 </table>
519 </td></tr> 496 </td></tr>
520 <tr><td style='padding-top: 10px; text-align: right; border-top: 1px solid grey' > 497 <tr><td style='padding-top: 10px; text-align: right; border-top: 1px solid grey' >
521 <input type='button' value='Apply' onclick='applySettings()'> 498 <input type='button' value='Apply' onclick='applySettings()'>
522 <input type='button' value='Cancel' onclick='cancelSettings()'> 499 <input type='button' value='Cancel' onclick='cancelSettings()'>
523 </td></tr></table> 500 </td></tr></table>
524 </body> 501 </body>
525 </html> 502 </html>
OLDNEW
« no previous file with comments | « tools/binary_size/template/D3SymbolTreeMap.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698