src/tools/binary_size/template/index.html

   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, '&amp;')
  56             .replace(/"/g, '&quot;')
  57             .replace(/</g, '&lt;')
  58             .replace(/>/g, '&gt;');
  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)</button>' +
  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\' cellborder=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/src/'
 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/src/'
 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/src/'
 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>