diff options
author | agl@chromium.org <agl@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-08-28 17:59:50 +0000 |
---|---|---|
committer | agl@chromium.org <agl@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-08-28 17:59:50 +0000 |
commit | 5b43a76ae2ceb056c32f208035cf61a1426836b3 (patch) | |
tree | b085b46864bceca8ac6238dfa90601d725ab13bb /chrome/browser/resources | |
parent | 632c5a0357ce2a8f47d7606ce05e17dda356b27a (diff) | |
download | chromium_src-5b43a76ae2ceb056c32f208035cf61a1426836b3.zip chromium_src-5b43a76ae2ceb056c32f208035cf61a1426836b3.tar.gz chromium_src-5b43a76ae2ceb056c32f208035cf61a1426836b3.tar.bz2 |
Duplicate about_memory.html to create a Linux version.
This is in preparation for adding about:memory support for Linux, but
the change is otherwise too large to be considered the same file
without this trick.
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@24750 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser/resources')
-rw-r--r-- | chrome/browser/resources/about_memory_linux.html | 690 |
1 files changed, 690 insertions, 0 deletions
diff --git a/chrome/browser/resources/about_memory_linux.html b/chrome/browser/resources/about_memory_linux.html new file mode 100644 index 0000000..a06002f --- /dev/null +++ b/chrome/browser/resources/about_memory_linux.html @@ -0,0 +1,690 @@ +<!DOCTYPE HTML> + +<!-- +about:memory template page +--> +<html id="t"> + <head> + <title>About Memory</title> + +<style> +body { + font-size: 84%; + font-family: Arial, Helvetica, 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; + -webkit-background-size: 100%; + border: 1px solid #3a75bd; + -webkit-border-radius: 6px; + color: white; + text-shadow: 0 0 2px black; +} +div#header h1 { + padding-left: 37px; + margin: 0; + display: inline; + background: url('gear.png') 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: Arial, Helvetica, 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: Arial, Helvetica, sans-serif; + font-size: 100%; + border: 1px solid #b5b5b5; + -webkit-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: 4em; + 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('help.gif') 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; + -webkit-border-radius: 0; + line-height: 140%; + font-size: 92%; +} +#helpTooltip p { + margin: 0.6em 0; +} +div.otherbrowsers { + font-family: Arial, Helvetica, sans-serif; + font-size: 84%; + width: 100%; + text-align: center; +} +</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> + For Chromium, 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> + <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 Chromium'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 Chromium + 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> |