browser/resources/about_memory.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'>
            &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>