chrome/browser/resources/about_memory.html - platform/external/chromium - Git at Google

 <!DOCTYPE HTML>

 <!--
 about:memory template page
 -->
 <html id="t">
   <head>
     <title>About Memory</title>
     <link rel="stylesheet" href="shared/css/about_memory.css">

 <style>
 body {
   font-family: Helvetica, Arial, sans-serif;
 }
 div#header select {
   font-family: Helvetica, Arial, sans-serif;
 }
 div.viewOptions input {
   font-family: Helvetica, Arial, sans-serif;
 }
 div.otherbrowsers {
   font-family: Helvetica, Arial, sans-serif;
 }
 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(1),
 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(4),
 table.list#browserComparison tr.firstRow th:nth-child(1),
 table.list#browserComparison tr.firstRow th:nth-child(2) {
   border-right: 1px solid #b5c6de;
 }
 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(2),
 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(5),
 table.list#memoryDetails tr.firstRow th:nth-child(2),
 table.list#memoryDetails tr.firstRow th:nth-child(3) {
   border-right: 1px solid #b5c6de;
 }
 </style>
 <script>
 function reload() {
   if (document.getElementById('helpTooltip'))
     return;
   history.go(0);
 }

 function formatNumber(str) {
   str += '';
   if (str == '0') {
     return 'N/A ';
   }
   var x = str.split('.');
   var x1 = x[0];
   var x2 = x.length > 1 ? '.' + x[1] : '';
   var regex = /(\d+)(\d{3})/;
   while (regex.test(x1)) {
     x1 = x1.replace(regex, '$1' + ',' + '$2');
   }
   return x1;
 }

 function addToSum(id, value) {
   var target = document.getElementById(id);
   var sum = parseInt(target.innerHTML);
   sum += parseInt(value);
   target.innerHTML = sum;
 }

 function handleHelpTooltipMouseOver(event) {
   var el = document.createElement('div');
   el.id = 'helpTooltip';
   el.innerHTML = event.toElement.getElementsByTagName('div')[0].innerHTML;
   el.style.top = 0;
   el.style.left = 0;
   el.style.visibility = 'hidden';
   document.body.appendChild(el);

   var width = el.offsetWidth;
   var height = el.offsetHeight;

   if (event.pageX - width - 50 + document.body.scrollLeft >= 0 ) {
     el.style.left = (event.pageX - width - 20) + 'px';
   } else {
     el.style.left = (event.pageX + 20) + 'px';
   }


   if (event.pageY - height - 50 + document.body.scrollTop >= 0) {
     el.style.top = (event.pageY - height - 20) + 'px';
   } else {
     el.style.top = (event.pageY + 20) + 'px';
   }

   el.style.visibility = 'visible';
 }

 function handleHelpTooltipMouseOut(event) {
   var el = document.getElementById('helpTooltip');
   el.parentNode.removeChild(el);
 }

 function enableHelpTooltips() {
   var helpEls = document.getElementsByClassName('help');

   for (var i = 0, helpEl; helpEl = helpEls[i]; i++) {
     helpEl.onmouseover = handleHelpTooltipMouseOver;
     helpEl.onmouseout = handleHelpTooltipMouseOut;
   }
 }

 //setInterval("reload()", 10000);
 </script>
 </head>
 <body>
     <div id='header'>
       <h1>
         About memory
       </h1>
       <p>
         Measuring memory usage in a multi-process browser
       </p>
     </div>

     <div id='content'>
       <h2>
         Summary
         <div class='help'>
           <div>
             <p>
               Summary of memory used by currently active browsers. For browsers
               which use multiple processes, memory reflects aggregate memory
               used across all browser processes.
             </p>
             <p>
               For <span jscontent="current_browser_name"></span>, processes used
               to to display diagnostics information (such as this
               "about:memory") are excluded.
             </p>
           </div>
         </div>
       </h2>

       <table class='list' id='browserComparison'>
         <colgroup>
           <col class='name' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
         </colgroup>
         <tr class='firstRow doNotFilter'>
           <th>
           </th>
           <th colspan='3'>
             Memory
             <div class='help'>
               <div>
                 <p>
                   <strong>Memory</strong>
                 </p>
                 <p>
                   <strong>Private:</strong>
                   Resident memory size that is not shared with any other
                   process.  This is the best indicator of browser memory
                   resource usage.
                 </p>
                 <p>
                   <strong>Shared:</strong>
                   Resident memory size that is currently shared with 2 or more
                   processes.  Note: For browsers using multiple processes, if we
                   simply added the shared memory of each individual process,
                   this value would be inflated. Therefore, this value is
                   computed as an approximate value for shared memory in each of
                   the browser's processes. Note also that shared memory varies
                   depending on what other processes are running on the system,
                   and may be difficult to measure reproducibly.
                 </p>
                 <p>
                   <strong>Total:</strong>
                   The sum of the private + shared resident memory sizes.
                 </p>
               </div>
             </div>
           </th>
           <th colspan='2'>
             Virtual memory
             <div class='help'>
               <div>
                 <p>
                   <strong>Virtual memory</strong>
                 </p>
                 <p>
                   <strong>Private:</strong>
                   The resident and paged bytes committed for use by only this
                   process.
                 </p>
                 <p>
                   <strong>Mapped:</strong>
                   Total bytes allocated by this process that are mapped into the
                   view of a section, backed by either system pagefile or file
                   system. This is primarily memory-mapped files.
                 </p>
               </div>
             </div>
           </th>
         </tr>
         <tr class='secondRow doNotFilter'>
           <th class='name'>
             Browser
           </th>
           <th class='name'>
             Private
           </th>
           <th class='number'>
             Shared
           </th>
           <th class='number'>
             Total
           </th>
           <th class='number'>
             Private
           </th>
           <th class='number'>
             Mapped
           </th>
         </tr>
         <tr jsselect="browsers">
           <td class='name'>
             <div>
               <strong jscontent="name"></strong>
               <span jscontent="version"></span>
             </div>
           </td>
           <td class='number'>
             <span class='th'
                 jscontent="formatNumber(ws_priv + ws_shareable - ws_shared)">
             </span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jscontent="formatNumber(ws_shared / processes)">
             </span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th'
                 jscontent="formatNumber(ws_priv + ws_shareable - ws_shared +
                 (ws_shared / processes))"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jscontent="formatNumber(comm_priv)"></span>
             <span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jscontent="formatNumber(comm_map)"></span>
             <span class='k'>k</span>
           </td>
         </tr>
       </table>
       <div class=otherbrowsers jsdisplay="browsers.length == 1">
         Note: If other browsers (e.g. IE, Firefox, Safari) are running,
         I'll show their memory details here.
       </div>

       <br /><br /><br />

       <h2>
         Processes
         <div class='help'>
           <div>
             <p>
               Details of memory usage for each of
               <span jscontent="current_browser_name"></span>'s processes.
             </p>
           </div>
         </div>
       </h2>

       <table class='list' id='memoryDetails'>
         <colgroup>
           <col class='pid' />
           <col class='name' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
           <col class='number' />
         </colgroup>
         <tr class='firstRow doNotFilter'>
           <th>
           </th>
           <th>
           </th>
           <th colspan='3'>
             Memory
           </th>
           <th colspan='2'>
             Virtual memory
           </th>

         </tr>
         <tr class='secondRow doNotFilter'>
           <th class='pid'>
             PID
           </th>
           <th class='name'>
             Name
           </th>
           <th class='number'>
             Private
           </th>
           <th class='number'>
             Shared
           </th>
           <th class='number'>
             Total
           </th>
           <th class='number'>
             Private
           </th>
           <th class='number'>
             Mapped
           </th>
         </tr>

         <tr jsselect="browzr_data">
           <td class='pid'>
             <span class='th' jscontent="pid"></span>
           </td>
           <td class='name'>
             <div>
               Browser
             </div>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv +
                 $this.ws_shareable - $this.ws_shared)" jscontent="ws_priv +
             ws_shareable - ws_shared"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jscontent="ws_shared"></span>
             <span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_ws_tot', $this.ws_priv +
                 $this.ws_shareable)" jscontent="ws_priv +
             ws_shareable"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_comm_priv', $this.comm_priv)"
                 jscontent="comm_priv"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_comm_map', $this.comm_map)"
                 jscontent="comm_map"></span><span class='k'>k</span>
           </td>
         </tr>
         <tr jsselect="child_data">
           <td class='pid'>
             <span class='th' jscontent="pid"></span>
           </td>
           <td class='name'>
             <div jscontent="child_name"></div>
             <div jsselect="titles">
               <span jscontent="$this"></span><br>
             </div>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv +
                 $this.ws_shareable - $this.ws_shared)" jscontent="ws_priv +
             ws_shareable - ws_shared"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jscontent="ws_shared"></span><span
                 class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_ws_tot', $this.ws_priv +
                 $this.ws_shareable)" jscontent="ws_priv +
             ws_shareable"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_comm_priv', $this.comm_priv)"
                 jscontent="comm_priv"></span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' jseval="addToSum('tot_comm_map', $this.comm_map)"
                 jscontent="comm_map"></span><span class='k'>k</span>
           </td>
         </tr>
         <tr class='total doNotFilter'>
           <td class='pid'>
           </td>
           <td class='name'>
             &Sigma;
           </td>
           <td class='number'>
             <span class='th' id="tot_ws_priv">0</span><span class='k'>k</span>
           </td>
           <td class='number'>
           </td>
           <td class='number'>
             <span class='th' id="tot_ws_tot">0</span><span class='k'>k</span>
           </td>
           <td class='number'>
             <span class='th' id="tot_comm_priv">0</span><span class='k'>k</span>
           </td>
           <td class='number'>
             <div class='help'>
               <div>
                 <p>
                   This is an approximation. Conceptually, this is the total
                   amount of in-memory pages for the entire logical
                   <span jscontent="current_browser_name"></span> application,
                   without double counting shared pages (e.g.  mapped DLLs,
                   SharedMemory bitmaps, etc.) across the browser and renderers.
                 </p>
               </div>
             </div>
             <span class='th' id="tot_comm_map">0</span><span class='k'>k</span>
           </td>
         </tr>

         <tr class='noResults'>
           <td colspan='99'>
             No results found.
           </td>
         </tr>
       </table>
     </div>
 </body>
 <script>
   enableHelpTooltips();
 </script>
 </html>
	<!DOCTYPE HTML>

	<!--
	about:memory template page
	-->
	<html id="t">
	<head>
	<title>About Memory</title>
	<link rel="stylesheet" href="shared/css/about_memory.css">

	<style>
	body {
	font-family: Helvetica, Arial, sans-serif;
	}
	div#header select {
	font-family: Helvetica, Arial, sans-serif;
	}
	div.viewOptions input {
	font-family: Helvetica, Arial, sans-serif;
	}
	div.otherbrowsers {
	font-family: Helvetica, Arial, sans-serif;
	}
	table.list#browserComparison tr:not([class='firstRow']) > :nth-child(1),
	table.list#browserComparison tr:not([class='firstRow']) > :nth-child(4),
	table.list#browserComparison tr.firstRow th:nth-child(1),
	table.list#browserComparison tr.firstRow th:nth-child(2) {
	border-right: 1px solid #b5c6de;
	}
	table.list#memoryDetails tr:not([class='firstRow']) > :nth-child(2),
	table.list#memoryDetails tr:not([class='firstRow']) > :nth-child(5),
	table.list#memoryDetails tr.firstRow th:nth-child(2),
	table.list#memoryDetails tr.firstRow th:nth-child(3) {
	border-right: 1px solid #b5c6de;
	}
	</style>
	<script>
	function reload() {
	if (document.getElementById('helpTooltip'))
	return;
	history.go(0);
	}

	function formatNumber(str) {
	str += '';
	if (str == '0') {
	return 'N/A ';
	}
	var x = str.split('.');
	var x1 = x[0];
	var x2 = x.length > 1 ? '.' + x[1] : '';
	var regex = /(\d+)(\d{3})/;
	while (regex.test(x1)) {
	x1 = x1.replace(regex, '$1' + ',' + '$2');
	}
	return x1;
	}

	function addToSum(id, value) {
	var target = document.getElementById(id);
	var sum = parseInt(target.innerHTML);
	sum += parseInt(value);
	target.innerHTML = sum;
	}

	function handleHelpTooltipMouseOver(event) {
	var el = document.createElement('div');
	el.id = 'helpTooltip';
	el.innerHTML = event.toElement.getElementsByTagName('div')[0].innerHTML;
	el.style.top = 0;
	el.style.left = 0;
	el.style.visibility = 'hidden';
	document.body.appendChild(el);

	var width = el.offsetWidth;
	var height = el.offsetHeight;

	if (event.pageX - width - 50 + document.body.scrollLeft >= 0 ) {
	el.style.left = (event.pageX - width - 20) + 'px';
	} else {
	el.style.left = (event.pageX + 20) + 'px';
	}


	if (event.pageY - height - 50 + document.body.scrollTop >= 0) {
	el.style.top = (event.pageY - height - 20) + 'px';
	} else {
	el.style.top = (event.pageY + 20) + 'px';
	}

	el.style.visibility = 'visible';
	}

	function handleHelpTooltipMouseOut(event) {
	var el = document.getElementById('helpTooltip');
	el.parentNode.removeChild(el);
	}

	function enableHelpTooltips() {
	var helpEls = document.getElementsByClassName('help');

	for (var i = 0, helpEl; helpEl = helpEls[i]; i++) {
	helpEl.onmouseover = handleHelpTooltipMouseOver;
	helpEl.onmouseout = handleHelpTooltipMouseOut;
	}
	}

	//setInterval("reload()", 10000);
	</script>
	</head>
	<body>
	<div id='header'>
	<h1>
	About memory
	</h1>
	<p>
	Measuring memory usage in a multi-process browser
	</p>
	</div>

	<div id='content'>
	<h2>
	Summary
	<div class='help'>
	<div>
	<p>
	Summary of memory used by currently active browsers. For browsers
	which use multiple processes, memory reflects aggregate memory
	used across all browser processes.
	</p>
	<p>
	For <span jscontent="current_browser_name"></span>, processes used
	to to display diagnostics information (such as this
	"about:memory") are excluded.
	</p>
	</div>
	</div>
	</h2>

	<table class='list' id='browserComparison'>
	<colgroup>
	<col class='name' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	</colgroup>
	<tr class='firstRow doNotFilter'>
	<th>
	</th>
	<th colspan='3'>
	Memory
	<div class='help'>
	<div>
	<p>
	<strong>Memory</strong>
	</p>
	<p>
	<strong>Private:</strong>
	Resident memory size that is not shared with any other
	process. This is the best indicator of browser memory
	resource usage.
	</p>
	<p>
	<strong>Shared:</strong>
	Resident memory size that is currently shared with 2 or more
	processes. Note: For browsers using multiple processes, if we
	simply added the shared memory of each individual process,
	this value would be inflated. Therefore, this value is
	computed as an approximate value for shared memory in each of
	the browser's processes. Note also that shared memory varies
	depending on what other processes are running on the system,
	and may be difficult to measure reproducibly.
	</p>
	<p>
	<strong>Total:</strong>
	The sum of the private + shared resident memory sizes.
	</p>
	</div>
	</div>
	</th>
	<th colspan='2'>
	Virtual memory
	<div class='help'>
	<div>
	<p>
	<strong>Virtual memory</strong>
	</p>
	<p>
	<strong>Private:</strong>
	The resident and paged bytes committed for use by only this
	process.
	</p>
	<p>
	<strong>Mapped:</strong>
	Total bytes allocated by this process that are mapped into the
	view of a section, backed by either system pagefile or file
	system. This is primarily memory-mapped files.
	</p>
	</div>
	</div>
	</th>
	</tr>
	<tr class='secondRow doNotFilter'>
	<th class='name'>
	Browser
	</th>
	<th class='name'>
	Private
	</th>
	<th class='number'>
	Shared
	</th>
	<th class='number'>
	Total
	</th>
	<th class='number'>
	Private
	</th>
	<th class='number'>
	Mapped
	</th>
	</tr>
	<tr jsselect="browsers">
	<td class='name'>
	<div>
	<strong jscontent="name"></strong>
	<span jscontent="version"></span>
	</div>
	</td>
	<td class='number'>
	<span class='th'
	jscontent="formatNumber(ws_priv + ws_shareable - ws_shared)">
	</span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jscontent="formatNumber(ws_shared / processes)">
	</span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th'
	jscontent="formatNumber(ws_priv + ws_shareable - ws_shared +
	(ws_shared / processes))"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jscontent="formatNumber(comm_priv)"></span>
	<span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jscontent="formatNumber(comm_map)"></span>
	<span class='k'>k</span>
	</td>
	</tr>
	</table>
	<div class=otherbrowsers jsdisplay="browsers.length == 1">
	Note: If other browsers (e.g. IE, Firefox, Safari) are running,
	I'll show their memory details here.
	</div>

	<br /><br /><br />

	<h2>
	Processes
	<div class='help'>
	<div>
	<p>
	Details of memory usage for each of
	<span jscontent="current_browser_name"></span>'s processes.
	</p>
	</div>
	</div>
	</h2>

	<table class='list' id='memoryDetails'>
	<colgroup>
	<col class='pid' />
	<col class='name' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	<col class='number' />
	</colgroup>
	<tr class='firstRow doNotFilter'>
	<th>
	</th>
	<th>
	</th>
	<th colspan='3'>
	Memory
	</th>
	<th colspan='2'>
	Virtual memory
	</th>

	</tr>
	<tr class='secondRow doNotFilter'>
	<th class='pid'>
	PID
	</th>
	<th class='name'>
	Name
	</th>
	<th class='number'>
	Private
	</th>
	<th class='number'>
	Shared
	</th>
	<th class='number'>
	Total
	</th>
	<th class='number'>
	Private
	</th>
	<th class='number'>
	Mapped
	</th>
	</tr>

	<tr jsselect="browzr_data">
	<td class='pid'>
	<span class='th' jscontent="pid"></span>
	</td>
	<td class='name'>
	<div>
	Browser
	</div>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv +
	$this.ws_shareable - $this.ws_shared)" jscontent="ws_priv +
	ws_shareable - ws_shared"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jscontent="ws_shared"></span>
	<span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_ws_tot', $this.ws_priv +
	$this.ws_shareable)" jscontent="ws_priv +
	ws_shareable"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_comm_priv', $this.comm_priv)"
	jscontent="comm_priv"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_comm_map', $this.comm_map)"
	jscontent="comm_map"></span><span class='k'>k</span>
	</td>
	</tr>
	<tr jsselect="child_data">
	<td class='pid'>
	<span class='th' jscontent="pid"></span>
	</td>
	<td class='name'>
	<div jscontent="child_name"></div>
	<div jsselect="titles">
	<span jscontent="$this"></span><br>
	</div>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv +
	$this.ws_shareable - $this.ws_shared)" jscontent="ws_priv +
	ws_shareable - ws_shared"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jscontent="ws_shared"></span><span
	class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_ws_tot', $this.ws_priv +
	$this.ws_shareable)" jscontent="ws_priv +
	ws_shareable"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_comm_priv', $this.comm_priv)"
	jscontent="comm_priv"></span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' jseval="addToSum('tot_comm_map', $this.comm_map)"
	jscontent="comm_map"></span><span class='k'>k</span>
	</td>
	</tr>
	<tr class='total doNotFilter'>
	<td class='pid'>
	</td>
	<td class='name'>
	Σ
	</td>
	<td class='number'>
	<span class='th' id="tot_ws_priv">0</span><span class='k'>k</span>
	</td>
	<td class='number'>
	</td>
	<td class='number'>
	<span class='th' id="tot_ws_tot">0</span><span class='k'>k</span>
	</td>
	<td class='number'>
	<span class='th' id="tot_comm_priv">0</span><span class='k'>k</span>
	</td>
	<td class='number'>
	<div class='help'>
	<div>
	<p>
	This is an approximation. Conceptually, this is the total
	amount of in-memory pages for the entire logical
	<span jscontent="current_browser_name"></span> application,
	without double counting shared pages (e.g. mapped DLLs,
	SharedMemory bitmaps, etc.) across the browser and renderers.
	</p>
	</div>
	</div>
	<span class='th' id="tot_comm_map">0</span><span class='k'>k</span>
	</td>
	</tr>

	<tr class='noResults'>
	<td colspan='99'>
	No results found.
	</td>
	</tr>
	</table>
	</div>
	</body>
	<script>
	enableHelpTooltips();
	</script>
	</html>