Add hex PID values to about:memory in Chrome
-migrated-
Add hex PID values to about:memory in Chrome Posted on: 10/08/2010 3:41am
Quote Post

this is more or less an addendum to choosing the correct process in chrome

before beginning its probably best to warn you, this is best done by advanced computer users, there is a possibility for you to mess up your software if you screw this up. and really, you should inspect the code i will post here, and not just blindly trust internet strangers.


Sometimes its useful to know the hex value of the pid of chrome processes.  but chrome only gives the PID in decimal, so i figured i would rectify that situation with some code.

When I first delved into this, I hoped it would be as simple as making and installing an extension. Unfortunately, its a tad more complicated(or less as the case may be) than all that.

Most PE (portable executable) files have embedded resources in them. This can be images or even just text strings, pretty much whatever. When we look at chrome's memory manager, we know that there must be an html template for it somewhere. It is embedded inside of chrome.dll so we will need a tool to edit it.

If you dont have it already, go grab a copy of reshacker from http://www.angusj.com/resourcehacker/ Its an awesome tool and can even be used to customize your windows settings like the start menu icon.

so go ahead and run reshacker, and open chrome .dll which is located in c:/users/username/appdata/local/google/chrome/application/version number
if you have multiple versions, pick the folder with the biggest number
(broken image removed)


once you open it, you will see this.
(broken image removed)


Expand the bin data folder and then expand the 500 folder then click on the gear labeled 0.
in the right side it should say "about:memory template page"
(broken image removed)

just take all that text in there and replace it with this

Code: [Select]
<!DOCTYPE HTML>

<!--
about:memory template page
-->
<html id="t">
  <head>
    <title>About Memory</title>

<style>
body {
  font-size: 84%;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0.75em;
  margin: 0;
  min-width: 45em;
}

h1 {
  font-size: 110%;
  font-weight: bold;
  color: #4a8ee6;
  letter-spacing: -1px;
  padding: 0;
  margin: 0;
}
h2 {
  font-size: 110%;
  letter-spacing: -1px;
  font-weight: normal;
  color: #4a8ee6;
  padding: 0;
  margin: 0;
  padding: 0.5em 1em;
  color: #3a75bd;
  margin-left: -38px;
  padding-left: 38px;

  border-top: 1px solid #3a75bd;
  padding-top: 0.5em;

}
h2:first-child {
  border-top: 0;
  padding-top: 0;
}
span.th {
  padding-left: 0.35em;
}
a {
  color: black;
}

div#header {
  padding: 0.75em 1em;
  padding-top: 0.6em;
  padding-left: 0;
  margin-bottom: 0.75em;
  position: relative;
  overflow: hidden;
  background: #5296de;
  background-size: 100%;
  border: 1px solid #3a75bd;
  border-radius: 6px;
  color: white;
  text-shadow: 0 0 2px black;
}
div#header h1 {
  padding-left: 37px;
  margin: 0;
  display: inline;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPCAQAAACouOyaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQdJREFUKJFl0CFOA1EQBuAnED3BChQoFJyCG6BwOC4ApqooOACoqgqqUBhMTVURmAoqHqLJbsJLuiSvockKzIdoS1jIqJn5Msk/QRAE+27MdDfdg8qlzroLm+GLrFIZuPWoVqrct8lYaS6aq5RKUdRvk54kil49m4miN6dtUll4NXSoUBiYiyZbsufMvSy5EH5qqFLqOxaCicbKwlTxi+yqlZKFq2BkpZbMtiEFQSFLSu+ug6FPtWT+j2RJ0gv2dGUf6m0CQdD3JXty6mA7WqMThY7CncanaTv0rSzLoqkFGtl5m0w0smyl0Whky7/fXUfPxl6sNhdHbRJ0JSMdO3Y8Weo5Wm++Ac2ic0DR0k0+AAAAAElFTkSuQmCC") 12px 60% no-repeat;
  color: white;
}
div#header p {
  font-size: 84%;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: white;
  padding-left: 0.4em;
  display: inline;
}
div#header div.navigation {
  position: absolute;
  top: 0;
  right: 1em;
  line-height: 3.5em;
  font-size: 92%;
}
div#header select {
  font-size: 100%;
  font-family: Helvetica, Arial, sans-serif;
  border: 1px solid #3a75bd;
  line-height: 140%;
  color: #315d94;
}
div#header select option {
  padding: 0 0.2em;
}

div#sidebar {
  display: none;
  float: left;
  margin-left: 26px;
  width: 45em;
  min-height: 20em;
  padding: 0.75em;
  padding-top: 0;

  border-right: 1px solid #cfcfcf;
}
div#content {
  margin-left: 0px;
}

div.viewOptions {
  float: right;
  font-size: 92%;
  color: #5f5f5f;
  margin-top: 1em;
}
hr {
  visibility: hidden;
  display: inline;
  padding: 0 0.5em;
}
div.viewOptions input {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  padding: 0.3em 0.4em;
}
div.viewOptions input:focus {
  border-color: white;
}

.k {
  opacity: 0.4;
  font-weight: normal;
  padding-left: 0.1em;
}

.legend {
  font-size: 84%;
  padding: 0;
  padding-top: 0.4em;
  margin-top: 2em;
  text-align: right;
  line-height: 140%;
  color: #7f7f7f;
}
.legend h3 {
  padding: 0;
  padding-right: 0.5em;
  margin: 0;
  font-weight: normal;
  color: black;
  display: inline;
  font-size: 100%;
}
.legend .swatch {
  opacity: 0.66;
  padding: 0 0.5em;
  display: inline-block;
  margin-right: 0.2em;
  height: 0.9em;
}
.legend .swatch.heavyUse {
  background: #cc0000;
}

table.list {
  width: 100%;
  line-height: 200%;
  border-collapse: collapse;
  font-size: 84%;
  table-layout: fixed;
}
table.list:not([class*='filtered']) tr:nth-child(odd) td {
  background: #eff3ff;
}
.hidden {
  display: none;
}
table.list th {
  padding: 0 0.5em;
  vertical-align: top;
  font-weight: bold;
  color: #315d94;
  color: black;
  white-space: nowrap;
}
table.list .firstRow th {
  text-align: left;
  line-height: 100%;
}
table.list .secondRow * {
  text-align: left;
  border-bottom: 1px solid #b5c6de;
}
table.list td {
  padding: 0 0.5em;
  vertical-align: top;
  line-height: 1.4em;
  padding-top: 0.35em;
}
table.list tr td:nth-last-child(1),
table.list tr th:nth-last-child(1) {
  padding-right: 1em;
}
table.list:not([class*='filtered']) .tab .name {
  padding-left: 1.5em;
}

table.list .name {
  width: 100%;
}

table.list .name div {
  height: 1.6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.list .pid {
  width: 8em;
  text-align: right;
}
table.list .pid .th {
  padding: 0;
}
table.list .type {
  width: 5em;
}
table.list .number {
  width: 7em;
  text-align: right;
}
table.list .total {
  font-weight: bold;
}
table.list .total .name {
  color: #315d94;
  text-align: right;
}
table.list .total td {
  border-top: 1px solid #b5c6de;
  background: white !important;
}
table.list .noResults {
  display: none;
}
table.list.noResults .noResults {
  display: table-row;
}
table.list .noResults td {
  text-align: center;
  padding: 3em 0;
  color: #3f3f3f;
}

.heavyUse {
  color: #cc0000;
  font-weight: bold;
}

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;
}

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#browserComparison .name {
  padding-left: 25px;
  background-position: 5px center;
  background-repeat: no-repeat;
}

div.help {
  display: inline-block;
  width: 14px;
  margin: -1px 0;
  height: 14px;
  background: url("data:image/gif;base64,R0lGODlhDAAMAMQAAAAAAP////T4/ujx/ery/UKP7k6W71CX71KY71Sa8Gak8XGr8nWu83ev83qv83ux83yx832y85XA9aHH96rN+KvO+KzO+K3O+LnV+cTc+tDj+9Xm+////wAAAAAAAAAAACH5BAEAABwALAAAAAAMAAwAAAVKIMcRVoMgjUWI3BYVcOxs41tIGqbAEQkvgshkECv9XopAzBQrKASX2KmZyTRRzUYia2lqdkWCrbAwxHqtRxMGoYkIFcbhwKCsOCEAOw==") center bottom no-repeat;
  opacity: 0.33;
}
div.help:hover {
  opacity: 1;
}
div.help div {
  display: none;
}
#helpTooltip {
  z-index: 1000;
  position: absolute;
  background: #d6e8ff;
  padding: 0.3em 0.8em;
  max-width: 30em;
  -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.33);
  border: 1px solid #a8cfff;
  border-radius: 0;
  line-height: 140%;
  font-size: 92%;
}
#helpTooltip p {
  margin: 0.6em 0;
}
div.otherbrowsers {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 84%;
  width: 100%;
  text-align: center;
}
</style>
<script>
function hexPID(value){
  var pid = value + "--->hex= "+value.toString(16);
  return pid;
}
function reload() {
  if (document.getElementById('helpTooltip'))
    return;
  history.go(0);
}

function formatNumber(str) {
  str += '';
  if (str == '0') {
    return 'N/A ';
  }
  var sataniclulz = str.split('.');
  var x1 = sataniclulz[0];
  var x2 = sataniclulz.length > 1 ? '.' + sataniclulz[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="hexPID($this.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="hexPID($this.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>

what this code does different is instead of just displaying the PID it sends the PID to a function we added called hexPID and then displays the results. the PID column also becomes wider due to a change in the css at the top.

as Vexenos pointed out, this template page may change slightly from version to version so here are the specific changes that need to be made.

to make the PID field bigger change this to like 8em, or whatever looks best to your eyes.
Code: [Select]
table.list .pid {
  width: 4em;

This next function gets added to the top of the "<script>" section. it takes the pid converts it to hex and returns it
Code: [Select]
function hexPID(value){
var pid = value + "->hex-> "+value.toString(16);
return pid;  
}


In the body, atleast one change of the following code to needs to be made. in my version there are 2.
Code: [Select]
<td class='pid'>
            <span class='th' jscontent="pid"></span>
          </td>
becomes
Code: [Select]
<td class='pid'>
            <span class='th' jscontent="hexPID($this.pid)"></span>
          </td>
this change simply tells the page to display the output from the function instead of just the PID


to finalize the changes, make sure chrome is not running, then  click the compile script button, and then select file | save.
(broken image removed)


run chrome and check about:memory to see the results.
(broken image removed)

Thanks for this, it worked and it'd definitely make things more convenient (broken image removed) +karma'd.

Alright I think I achieved what I wanted to do, spent some time on it but I was bored anyway. I'm on chromium, which explains the version 8.X thing. also, I wrote something on how replacing the contents of that section of chrome.dll might cause problems across different versions, but meh I don't think the about:memory page can change much across those versions anyway.

(broken image removed)

(broken image removed)

Code: [Select]
<!DOCTYPE HTML>

<!--
about:memory template page
-->
<html id="t">
  <head>
    <title>About Memory</title>
    <style>body {
  font-size: 84%;
  padding: 0.75em;
  margin: 0;
  min-width: 45em;
}

h1 {
  font-size: 110%;
  font-weight: bold;
  color: #4a8ee6;
  letter-spacing: -1px;
  padding: 0;
  margin: 0;
}

h2 {
  font-size: 110%;
  letter-spacing: -1px;
  font-weight: normal;
  color: #4a8ee6;
  padding: 0;
  margin: 0;
  padding: 0.5em 1em;
  color: #3a75bd;
  margin-left: -38px;
  padding-left: 38px;

  border-top: 1px solid #3a75bd;
  padding-top: 0.5em;

}

h2:first-child {
  border-top: 0;
  padding-top: 0;
}

span.th {
  padding-left: 0.35em;
}

a {
  color: black;
}

div#header {
  padding: 0.75em 1em;
  padding-top: 0.6em;
  padding-left: 0;
  margin-bottom: 0.75em;
  position: relative;
  overflow: hidden;
  background: #5296de;
  background-size: 100%;
  border: 1px solid #3a75bd;
  border-radius: 6px;
  color: white;
  text-shadow: 0 0 2px black;
}

div#header h1 {
  padding-left: 37px;
  margin: 0;
  display: inline;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPCAQAAACouOyaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQdJREFUKJFl0CFOA1EQBuAnED3BChQoFJyCG6BwOC4ApqooOACoqgqqUBhMTVURmAoqHqLJbsJLuiSvockKzIdoS1jIqJn5Msk/QRAE+27MdDfdg8qlzroLm+GLrFIZuPWoVqrct8lYaS6aq5RKUdRvk54kil49m4miN6dtUll4NXSoUBiYiyZbsufMvSy5EH5qqFLqOxaCicbKwlTxi+yqlZKFq2BkpZbMtiEFQSFLSu+ug6FPtWT+j2RJ0gv2dGUf6m0CQdD3JXty6mA7WqMThY7CncanaTv0rSzLoqkFGtl5m0w0smyl0Whky7/fXUfPxl6sNhdHbRJ0JSMdO3Y8Weo5Wm++Ac2ic0DR0k0+AAAAAElFTkSuQmCC") 12px 60% no-repeat;
  color: white;
}

div#header p {
  font-size: 84%;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: white;
  padding-left: 0.4em;
  display: inline;
}

div#header div.navigation {
  position: absolute;
  top: 0;
  right: 1em;
  line-height: 3.5em;
  font-size: 92%;
}

div#header select {
  font-size: 100%;
  border: 1px solid #3a75bd;
  line-height: 140%;
  color: #315d94;
}

div#header select option {
  padding: 0 0.2em;
}

div#sidebar {
  display: none;
  float: left;
  margin-left: 26px;
  width: 45em;
  min-height: 20em;
  padding: 0.75em;
  padding-top: 0;

  border-right: 1px solid #cfcfcf;
}

div#content {
  margin-left: 0px;
}

div.viewOptions {
  float: right;
  font-size: 92%;
  color: #5f5f5f;
  margin-top: 1em;
}

hr {
  visibility: hidden;
  display: inline;
  padding: 0 0.5em;
}

div.viewOptions input {
  font-size: 100%;
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  padding: 0.3em 0.4em;
}

div.viewOptions input:focus {
  border-color: white;
}

.k {
  opacity: 0.4;
  font-weight: normal;
  padding-left: 0.1em;
}

.legend {
  font-size: 84%;
  padding: 0;
  padding-top: 0.4em;
  margin-top: 2em;
  text-align: right;
  line-height: 140%;
  color: #7f7f7f;
}

.legend h3 {
  padding: 0;
  padding-right: 0.5em;
  margin: 0;
  font-weight: normal;
  color: black;
  display: inline;
  font-size: 100%;
}

.legend .swatch {
  opacity: 0.66;
  padding: 0 0.5em;
  display: inline-block;
  margin-right: 0.2em;
  height: 0.9em;
}

.legend .swatch.heavyUse {
  background: #cc0000;
}

table.list {
  width: 100%;
  line-height: 200%;
  border-collapse: collapse;
  font-size: 84%;
  table-layout: fixed;
}

table.list:not([class*='filtered']) tr:nth-child(odd) td {
  background: #eff3ff;
}

.hidden {
  display: none;
}

table.list th {
  padding: 0 0.5em;
  vertical-align: top;
  font-weight: bold;
  color: #315d94;
  color: black;
  white-space: nowrap;
}

table.list .firstRow th {
  text-align: left;
  line-height: 100%;
}

table.list .secondRow * {
  text-align: left;
  border-bottom: 1px solid #b5c6de;
}

table.list td {
  padding: 0 0.5em;
  vertical-align: top;
  line-height: 1.4em;
  padding-top: 0.35em;
}

table.list tr td:nth-last-child(1),
table.list tr th:nth-last-child(1) {
  padding-right: 1em;
}

table.list:not([class*='filtered']) .tab .name {
  padding-left: 1.5em;
}

table.list .name {
  width: 100%;
}

table.list .name div {
  height: 1.6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

table.list .pidDEC {
  width: 3em;
  text-align: right;
}
table.list .pidHEX {
  width: 3em;
  text-align: right;
}

table.list .pid .th {
  padding: 0;
}

table.list .type {
  width: 5em;
}

table.list .number {
  width: 7em;
  text-align: right;
}

table.list .total {
  font-weight: bold;
}

table.list .total .name {
  color: #315d94;
  text-align: right;
}

table.list .total td {
  border-top: 1px solid #b5c6de;
  background: white !important;
}

table.list .noResults {
  display: none;
}

table.list.noResults .noResults {
  display: table-row;
}

table.list .noResults td {
  text-align: center;
  padding: 3em 0;
  color: #3f3f3f;
}

.heavyUse {
  color: #cc0000;
  font-weight: bold;
}

table.list#browserComparison .name {
  padding-left: 25px;
  background-position: 5px center;
  background-repeat: no-repeat;
}

div.help {
  display: inline-block;
  width: 14px;
  margin: -1px 0;
  height: 14px;
  background: url("data:image/gif;base64,R0lGODlhDAAMAMQAAAAAAP////T4/ujx/ery/UKP7k6W71CX71KY71Sa8Gak8XGr8nWu83ev83qv83ux83yx832y85XA9aHH96rN+KvO+KzO+K3O+LnV+cTc+tDj+9Xm+////wAAAAAAAAAAACH5BAEAABwALAAAAAAMAAwAAAVKIMcRVoMgjUWI3BYVcOxs41tIGqbAEQkvgshkECv9XopAzBQrKASX2KmZyTRRzUYia2lqdkWCrbAwxHqtRxMGoYkIFcbhwKCsOCEAOw==") center bottom no-repeat;
  opacity: 0.33;
}

div.help:hover {
  opacity: 1;
}

div.help div {
  display: none;
}

#helpTooltip {
  z-index: 1000;
  position: absolute;
  background: #d6e8ff;
  padding: 0.3em 0.8em;
  max-width: 30em;
  -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.33);
  border: 1px solid #a8cfff;
  border-radius: 0;
  line-height: 140%;
  font-size: 92%;
}

#helpTooltip p {
  margin: 0.6em 0;
}

div.otherbrowsers {
  font-size: 84%;
  width: 100%;
  text-align: center;
}
</style>

<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(3),
table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(6),
table.list#memoryDetails tr.firstRow th:nth-child(2),
table.list#memoryDetails tr.firstRow th:nth-child(3),
table.list#memoryDetails tr.firstRow th:nth-child(4) {
  border-right: 1px solid #b5c6de;
}
</style>
<script>
function hexPID(value){
  return((value.toString(16)).toUpperCase());
}
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='pidDEC' />
 <col class='pidHEX' />
          <col class='name' />
          <col class='number' />
          <col class='number' />
          <col class='number' />
          <col class='number' />
          <col class='number' />
        </colgroup>
        <tr class='firstRow doNotFilter'>
          <th>
   PID
          </th>
          <th>
          </th>
 <th>
 </th>
          <th colspan='3'>
            Memory
          </th>
          <th colspan='2'>
            Virtual memory
          </th>

        </tr>
        <tr class='secondRow doNotFilter'>
          <th class='pidDEC'>
            Dec
          </th>
 <th class='pidHEX'>
            Hex
          </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='pidDEC'>
            <span class='th' jscontent="$this.pid"></span>
          </td>
 <td class='pidHEX'>
            <span class='th' jscontent="hexPID($this.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='pidDEC'>
            <span class='th' jscontent="$this.pid"></span>
          </td>
 <td class='pidHEX'>
            <span class='th' jscontent="hexPID($this.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='pidDEC'>
          </td>
 <td class='pidHEX'>
          </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>
Cool hack you got there.

I tried to go bookmarklet way, but for some reason it doesn't work:
Code: [Select]
javascript:Dec=prompt('Enter Decimal Value',0);Hex=Dec.toString(16);alert(Hex);It either shows the same result as the input or doesn't show the alert box at all.



I have gone to find myself. If I return before I get back, please hold me here until I arrive.
Quote from: "Creamy"
Cool hack you got there.

I tried to go bookmarklet way, but for some reason it doesn't work:
Code: [Select]
javascript:Dec=prompt('Enter Decimal Value',0);Hex=Dec.toString(16);alert(Hex);It either shows the same result as the input or doesn't show the alert box at all.

A prompt returns a string, so if you enter 100 in the prompt box, you get "100". Turning it to string is just saying "Turn the string 100 into the string 100."

A simple one liner:
Code: [Select]
alert(parseInt(prompt('Enter decimal value', 0)).toString(16))Or, if you rather go with variables and stuff:
Code: [Select]
var dec = prompt('Enter a decimal value', 0);

var hex = parseInt(dec).toString(16);
alert(hex);

//Parse int takes a String and parses the Integer out of it.

Enjoy.

Only after messing around with strictly-typed languages I started really appreciating loose typing.