src/tools/memory_inspector/memory_inspector/frontends/www_content/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 lang="en-us">
   8 <head>
   9   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  10   <title>Memory Inspector</title>
  11   <link href='//fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>
  12   <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" rel="stylesheet">
  13   <link href="/css/mmap.css" rel="stylesheet" type="text/css">
  14   <link href="/css/nheap.css" rel="stylesheet" type="text/css">
  15   <link href="/css/processes.css" rel="stylesheet" type="text/css">
  16   <link href="/css/profiler.css" rel="stylesheet" type="text/css">
  17   <link href="/css/rootUi.css" rel="stylesheet" type="text/css">
  18   <link href="/css/settings.css" rel="stylesheet" type="text/css">
  19   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  20   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  21   <script src="//www.google.com/jsapi"></script>
  22   <script type="text/javascript">
  23     google.load('visualization', '1',
  24                 { packages: ['corechart', 'table', 'orgchart', 'treemap'] });
  25   </script>
  26   <script src="/js/devices.js"></script>
  27   <script src="/js/mmap.js"></script>
  28   <script src="/js/nheap.js"></script>
  29   <script src="/js/processes.js"></script>
  30   <script src="/js/profiler.js"></script>
  31   <script src="/js/rootUi.js"></script>
  32   <script src="/js/settings.js"></script>
  33   <script src="/js/storage.js"></script>
  34   <script src="/js/timers.js"></script>
  35   <script src="/js/webservice.js"></script>
  36 </head>
  37 <body>
  38   <div id="wrapper">
  39     <h1>Memory Inspector</h1>
  40     <div id="tabs">
  41       <ul>
  42         <li><a href="#tabs-ps">Processes</a></li>
  43         <li><a href="#tabs-prof">Profiler</a></li>
  44         <li><a href="#tabs-mm">Memory maps table</a></li>
  45         <li><a href="#tabs-nheap">Native S.Traces</a></li>
  46         <li><a href="#tabs-storage">Archived traces</a></li>
  47         <li><a href="#tabs-settings">Settings</a></li>
  48       </ul>
  49
  50       <div id="tabs-ps">
  51         <div>
  52           Device:
  53           <select id="devices"></select>
  54           <input type="button" id="refresh-devices" value="&#10226;">
  55         </div>
  56         <div id="device_tabs">
  57           <ul>
  58             <li><a href="#device_tabs-osstats">Device stats</a></li>
  59             <li><a href="#device_tabs-procstats">Selected process stats</a></li>
  60           </ul>
  61           <div id="device_tabs-osstats">
  62             <div id="os-mem_chart"></div>
  63             <div id="os-cpu_chart"></div>
  64           </div>
  65           <div id="device_tabs-procstats">
  66             <div id="proc-cpu_chart"></div>
  67             <div id="proc-mem_chart"></div>
  68           </div>
  69         </div>
  70
  71         <div id="ps-table-wrapper">
  72           <div id="ps-toolbar" class="ui-widget-header ui-corner-all">
  73             <button id="ps-quick_snapshot">Quick snapshot</button>
  74             <button id="ps-dump_mmaps">Dump mmaps</button>
  75             <button id="ps-full_profile">Full profile</button>
  76             <input type="checkbox" id="ps-show_all">
  77             <label for="ps-show_all">Show all processes</label>
  78           </div>
  79           <div id="ps-table"></div>
  80         </div>
  81
  82         <div id="ps-tracer-dialog" title="Trace process">
  83           <div>
  84             <label for="ps-tracer-process">Process</label>
  85             <input type="text" id="ps-tracer-process" readonly class="text ui-widget-content">
  86           </div>
  87           <div>
  88             <label for="ps-tracer-period">Period [s.]</label>
  89             <input type="text" id="ps-tracer-period" value="20">
  90           </div>
  91           <div>
  92             <label for="ps-tracer-snapshots">Num snapshots</label>
  93             <input type="text" id="ps-tracer-snapshots" value="1">
  94           </div>
  95           <div>
  96             <input type="checkbox" id="ps-tracer-bt" class="ui-widget-content">
  97             <label for="ps-tracer-bt">Detailed (w/ backtraces)</label>
  98           </div>
  99         </div>
 100       </div>
 101
 102       <div id="tabs-prof">
 103         <header id="prof-options">
 104           <span>
 105             Rules:
 106             <select id="prof-ruleset"></select>
 107           </span>
 108           <span>
 109             Metric:
 110             <select id="prof-metric"></select>
 111           </span>
 112           <span>
 113             Snapshot:
 114             <div id="prof-time"></div>
 115             T = <span id="prof-time_label">0</span> s.
 116           </span>
 117         </header>
 118         <div id="prof-tree_chart"></div>
 119         <div id="prof-time_chart"></div>
 120       </div>
 121
 122       <div id="tabs-mm">
 123         <header>
 124           <table id="mm-tools">
 125             <tr>
 126               <th colspan="3">
 127                 Data filters
 128                 <input type="button" id="mm-filter-clear" value="&#10226;">
 129               </th>
 130             </tr>
 131             <tr>
 132               <th>Filter</th>
 133               <td>Prot: <input type="text" id="mm-filter-prot"></td>
 134               <td>File: <input type="text" id="mm-filter-file"></td>
 135             </tr>
 136             <tr>
 137               <th>Lookup</th>
 138               <td>Addr: <input type="text" id="mm-lookup-addr"></td>
 139               <td>Offset: <input type="text" id="mm-lookup-offset" readonly=""></td>
 140             </tr>
 141           </table>
 142           <table id="mm-stats">
 143             <tr>
 144               <th>Totals</th>
 145               <th>Priv Dirty [KB]</th>
 146               <th>Priv Clean [KB]</th>
 147               <th>Shared Dirty [KB]</th>
 148               <th>Shared Clean [KB]</th>
 149             </tr>
 150             <tr>
 151               <th>Shown</th>
 152               <td><span id="mm-totals-priv-dirty">0</span></td>
 153               <td><span id="mm-totals-priv-clean">0</span></td>
 154               <td><span id="mm-totals-shared-dirty">0</span></td>
 155               <td><span id="mm-totals-shared-clean">0</span></td>
 156             </tr>
 157             <tr>
 158               <th>Selected</th>
 159               <td><span id="mm-selected-priv-dirty">0</span></td>
 160               <td><span id="mm-selected-priv-clean">0</span></td>
 161               <td><span id="mm-selected-shared-dirty">0</span></td>
 162               <td><span id="mm-selected-shared-clean">0</span></td>
 163             </tr>
 164           </table>
 165         </header>
 166         <div id="mm-table"></div>
 167       </div>
 168
 169       <div id="tabs-nheap">
 170         <div id="nheap-toolbar" class="ui-widget-header ui-corner-all">
 171           <label>Totals: </label>
 172           <input type="text" id="nheap-totals" values="0 KB" readonly>
 173           <label>Selected: </label>
 174           <input type="text" id="nheap-selected" values="0 KB" readonly>
 175           <label>Filter: </label>
 176           <input type="text" id="nheap-filter">
 177         </div>
 178         <div id="nheap-table"></div>
 179       </div>
 180
 181       <div id="tabs-storage">
 182         <div id="storage-toolbar" class="ui-widget-header ui-corner-all">
 183           <label>Group:</label>
 184           <button id="storage-profile-mmaps">Profile memory maps</button>
 185           <button id="storage-profile-native">Profile native allocations</button>
 186           <label>Single snapshot:</label>
 187           <button id="storage-dump-mmaps">Show memory maps</button>
 188           <button id="storage-dump-nheap">Show native heap</button>
 189         </div>
 190         <div id="storage-table"></div>
 191       </div>
 192
 193       <div id="tabs-settings">
 194         <div id="settings-container">
 195         </div>
 196         <button id="settings-store">Save settings</button>
 197       </div>
 198     </div>
 199   </div>
 200
 201   <div id="status_bar">
 202     <div id="status_messages"></div>
 203     <div id="progress_bar"><div id="progress_bar-label">Progress...</div></div>
 204   </div>
 205
 206   <div id="js_loading_banner">
 207   Loading JavaScript content. If you see this message something has probably gone wrong. Check JS console.
 208   </div>
 209
 210 </body>
 211 </html>