Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5105)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/about_memory_mac.html

Issue 173261: (Mac) Implement about:memory. (Closed)
Patch Set: Fixed per jrg's (re)review. Created 11 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/process_info_snapshot_mac_unittest.cc ('k') | chrome/chrome.gyp » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/about_memory_mac.html
diff --git a/chrome/browser/resources/about_memory_mac.html b/chrome/browser/resources/about_memory_mac.html
new file mode 100644
index 0000000000000000000000000000000000000000..406878f3548f349de5cd6fa757a16e5dda3fea68
--- /dev/null
+++ b/chrome/browser/resources/about_memory_mac.html
@@ -0,0 +1,577 @@
+<!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) {
+ 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) {
+ 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.<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' />
+ </colgroup>
+ <tr class='firstRow doNotFilter'>
+ <th>
+ </th>
+ <th colspan='2'>
+ Memory
+ <div class='help'>
+ <div>
+ <p>
+ <strong>Memory</strong>
+ </p>
+ <p>
+ <strong>Resident:</strong>
+ Amount of memory that is present in physical RAM.
+ This is the best indicator of browser memory resource usage.
+ </p>
+ <p>
+ <strong>Virtual:</strong>
+ Amount of address space allocated in virtual memory.
+ </p>
+
+ <p>
+ <i>(Note that the memory for this tab is not included in the browser totals.)</i>
+ </p>
+ </div>
+ </div>
+ </th>
+ </tr>
+ <tr class='secondRow doNotFilter'>
+ <th class='name'>
+ Browser
+ </th>
+ <th class='name'>
+ Resident
+ </th>
+ <th class='number'>
+ Virtual
+ </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(comm_priv)"></span><span class='k'>k</span>
+ </td>
+ <td class='number'>
+ <span class='th' jscontent="formatNumber(ws_shareable)"></span><span class='k'>k</span>
+ </td>
+ </tr>
+ </table>
+ <div class=otherbrowsers jsdisplay="browsers.length == 1">
+ Note: If other browsers (e.g., Safari, Firefox, Camino) are running, I'll show their memory details here.
+ </div>
+ <div class="otherbrowsers">
+ (Bug: We seriously overcount our own memory usage: <a href="http://crbug.com/25454">Issue 25454</a>.)
+ </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' />
+ </colgroup>
+ <tr class='firstRow doNotFilter'>
+ <th>
+ </th>
+ <th>
+ </th>
+ <th colspan='2'>
+ Memory
+ </th>
+ </tr>
+ <tr class='secondRow doNotFilter'>
+ <th class='pid'>
+ PID
+ </th>
+ <th class='name'>
+ Name
+ </th>
+ <th class='number'>
+ Resident
+ </th>
+ <th class='number'>
+ Virtual
+ </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' jscontent="formatNumber(comm_priv)"></span><span class='k'>k</span>
+ </td>
+ <td class='number'>
+ <span class='th' jscontent="formatNumber(ws_shareable)"></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' jscontent="formatNumber(comm_priv)"></span><span class='k'>k</span>
+ </td>
+ <td class='number'>
+ <span class='th' jscontent="formatNumber(ws_shareable)"></span><span class='k'>k</span>
+ </td>
+ </tr>
+
+ <tr class='noResults'>
+ <td colspan='99'>
+ No results found.
+ </td>
+ </tr>
+ </table>
+ <div class="otherbrowsers">
+ (Note: Due to memory sharing between processes, summing memory usage does not give total memory usage.)
+ </div>
+ </div>
+</body>
+<script>
+ enableHelpTooltips();
+</script>
+</html>
« no previous file with comments | « chrome/browser/process_info_snapshot_mac_unittest.cc ('k') | chrome/chrome.gyp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698