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>
54function escape(str) { 
55  return str.replace(/&/g, '&amp;')
56            .replace(/"/g, '&quot;')
57            .replace(/</g, '&lt;')
58            .replace(/>/g, '&gt;');
59}
60
61var treemap_width = 800;
62var treemap_height = 450;
63function 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
93function 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
99function 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
105function 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
111function 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
137function 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
163function 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>