| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 |
| 3 <!-- |
| 4 about:memory template page |
| 5 --> |
| 6 <html id="t"> |
| 7 <head> |
| 8 <title>About Memory</title> |
| 9 |
| 10 <style> |
| 11 body { |
| 12 font-size: 84%; |
| 13 font-family: Helvetica, sans-serif; |
| 14 padding: 0.75em; |
| 15 margin: 0; |
| 16 min-width: 45em; |
| 17 } |
| 18 |
| 19 h1 { |
| 20 font-size: 110%; |
| 21 font-weight: bold; |
| 22 color: #4a8ee6; |
| 23 letter-spacing: -1px; |
| 24 padding: 0; |
| 25 margin: 0; |
| 26 } |
| 27 h2 { |
| 28 font-size: 110%; |
| 29 letter-spacing: -1px; |
| 30 font-weight: normal; |
| 31 color: #4a8ee6; |
| 32 padding: 0; |
| 33 margin: 0; |
| 34 padding: 0.5em 1em; |
| 35 color: #3a75bd; |
| 36 margin-left: -38px; |
| 37 padding-left: 38px; |
| 38 |
| 39 border-top: 1px solid #3a75bd; |
| 40 padding-top: 0.5em; |
| 41 |
| 42 } |
| 43 h2:first-child { |
| 44 border-top: 0; |
| 45 padding-top: 0; |
| 46 } |
| 47 span.th { |
| 48 padding-left: 0.35em; |
| 49 } |
| 50 a { |
| 51 color: black; |
| 52 } |
| 53 |
| 54 div#header { |
| 55 padding: 0.75em 1em; |
| 56 padding-top: 0.6em; |
| 57 padding-left: 0; |
| 58 margin-bottom: 0.75em; |
| 59 position: relative; |
| 60 overflow: hidden; |
| 61 background: #5296de; |
| 62 -webkit-background-size: 100%; |
| 63 border: 1px solid #3a75bd; |
| 64 -webkit-border-radius: 6px; |
| 65 color: white; |
| 66 text-shadow: 0 0 2px black; |
| 67 } |
| 68 div#header h1 { |
| 69 padding-left: 37px; |
| 70 margin: 0; |
| 71 display: inline; |
| 72 background: url('gear.png') 12px 60% no-repeat; |
| 73 color: white; |
| 74 } |
| 75 div#header p { |
| 76 font-size: 84%; |
| 77 font-style: italic; |
| 78 padding: 0; |
| 79 margin: 0; |
| 80 color: white; |
| 81 padding-left: 0.4em; |
| 82 display: inline; |
| 83 } |
| 84 div#header div.navigation { |
| 85 position: absolute; |
| 86 top: 0; |
| 87 right: 1em; |
| 88 line-height: 3.5em; |
| 89 font-size: 92%; |
| 90 } |
| 91 div#header select { |
| 92 font-size: 100%; |
| 93 font-family: Helvetica, sans-serif; |
| 94 border: 1px solid #3a75bd; |
| 95 line-height: 140%; |
| 96 color: #315d94; |
| 97 } |
| 98 div#header select option { |
| 99 padding: 0 0.2em; |
| 100 } |
| 101 |
| 102 div#sidebar { |
| 103 display: none; |
| 104 float: left; |
| 105 margin-left: 26px; |
| 106 width: 45em; |
| 107 min-height: 20em; |
| 108 padding: 0.75em; |
| 109 padding-top: 0; |
| 110 |
| 111 border-right: 1px solid #cfcfcf; |
| 112 } |
| 113 div#content { |
| 114 margin-left: 0px; |
| 115 } |
| 116 |
| 117 div.viewOptions { |
| 118 float: right; |
| 119 font-size: 92%; |
| 120 color: #5f5f5f; |
| 121 margin-top: 1em; |
| 122 } |
| 123 hr { |
| 124 visibility: hidden; |
| 125 display: inline; |
| 126 padding: 0 0.5em; |
| 127 } |
| 128 div.viewOptions input { |
| 129 font-family: Helvetica, sans-serif; |
| 130 font-size: 100%; |
| 131 border: 1px solid #b5b5b5; |
| 132 -webkit-border-radius: 6px; |
| 133 padding: 0.3em 0.4em; |
| 134 } |
| 135 div.viewOptions input:focus { |
| 136 border-color: white; |
| 137 } |
| 138 |
| 139 .k { |
| 140 opacity: 0.4; |
| 141 font-weight: normal; |
| 142 padding-left: 0.1em; |
| 143 } |
| 144 |
| 145 .legend { |
| 146 font-size: 84%; |
| 147 padding: 0; |
| 148 padding-top: 0.4em; |
| 149 margin-top: 2em; |
| 150 text-align: right; |
| 151 line-height: 140%; |
| 152 color: #7f7f7f; |
| 153 } |
| 154 .legend h3 { |
| 155 padding: 0; |
| 156 padding-right: 0.5em; |
| 157 margin: 0; |
| 158 font-weight: normal; |
| 159 color: black; |
| 160 display: inline; |
| 161 font-size: 100%; |
| 162 } |
| 163 .legend .swatch { |
| 164 opacity: 0.66; |
| 165 padding: 0 0.5em; |
| 166 display: inline-block; |
| 167 margin-right: 0.2em; |
| 168 height: 0.9em; |
| 169 } |
| 170 .legend .swatch.heavyUse { |
| 171 background: #cc0000; |
| 172 } |
| 173 |
| 174 table.list { |
| 175 width: 100%; |
| 176 line-height: 200%; |
| 177 border-collapse: collapse; |
| 178 font-size: 84%; |
| 179 table-layout: fixed; |
| 180 } |
| 181 table.list:not([class*='filtered']) tr:nth-child(odd) td { |
| 182 background: #eff3ff; |
| 183 } |
| 184 .hidden { |
| 185 display: none; |
| 186 } |
| 187 table.list th { |
| 188 padding: 0 0.5em; |
| 189 vertical-align: top; |
| 190 font-weight: bold; |
| 191 color: #315d94; |
| 192 color: black; |
| 193 white-space: nowrap; |
| 194 } |
| 195 table.list .firstRow th { |
| 196 text-align: left; |
| 197 line-height: 100%; |
| 198 } |
| 199 table.list .secondRow * { |
| 200 text-align: left; |
| 201 border-bottom: 1px solid #b5c6de; |
| 202 } |
| 203 table.list td { |
| 204 padding: 0 0.5em; |
| 205 vertical-align: top; |
| 206 line-height: 1.4em; |
| 207 padding-top: 0.35em; |
| 208 } |
| 209 table.list tr td:nth-last-child(1), |
| 210 table.list tr th:nth-last-child(1) { |
| 211 padding-right: 1em; |
| 212 } |
| 213 table.list:not([class*='filtered']) .tab .name { |
| 214 padding-left: 1.5em; |
| 215 } |
| 216 |
| 217 table.list .name { |
| 218 width: 100%; |
| 219 } |
| 220 |
| 221 table.list .name div { |
| 222 height: 1.6em; |
| 223 overflow: hidden; |
| 224 white-space: nowrap; |
| 225 text-overflow: ellipsis; |
| 226 } |
| 227 table.list .pid { |
| 228 width: 4em; |
| 229 text-align: right; |
| 230 } |
| 231 table.list .pid .th { |
| 232 padding: 0; |
| 233 } |
| 234 table.list .type { |
| 235 width: 5em; |
| 236 } |
| 237 table.list .number { |
| 238 width: 7em; |
| 239 text-align: right; |
| 240 } |
| 241 table.list .total { |
| 242 font-weight: bold; |
| 243 } |
| 244 table.list .total .name { |
| 245 color: #315d94; |
| 246 text-align: right; |
| 247 } |
| 248 table.list .total td { |
| 249 border-top: 1px solid #b5c6de; |
| 250 background: white !important; |
| 251 } |
| 252 table.list .noResults { |
| 253 display: none; |
| 254 } |
| 255 table.list.noResults .noResults { |
| 256 display: table-row; |
| 257 } |
| 258 table.list .noResults td { |
| 259 text-align: center; |
| 260 padding: 3em 0; |
| 261 color: #3f3f3f; |
| 262 } |
| 263 |
| 264 .heavyUse { |
| 265 color: #cc0000; |
| 266 font-weight: bold; |
| 267 } |
| 268 |
| 269 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(2), |
| 270 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(5), |
| 271 table.list#memoryDetails tr.firstRow th:nth-child(2) { |
| 272 border-right: 1px solid #b5c6de; |
| 273 } |
| 274 |
| 275 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(1), |
| 276 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(4), |
| 277 table.list#browserComparison tr.firstRow th:nth-child(1) { |
| 278 border-right: 1px solid #b5c6de; |
| 279 } |
| 280 table.list#browserComparison .name { |
| 281 padding-left: 25px; |
| 282 background-position: 5px center; |
| 283 background-repeat: no-repeat; |
| 284 } |
| 285 |
| 286 div.help { |
| 287 display: inline-block; |
| 288 width: 14px; |
| 289 margin: -1px 0; |
| 290 height: 14px; |
| 291 background: url('help.gif') center bottom no-repeat; |
| 292 opacity: 0.33; |
| 293 } |
| 294 div.help:hover { |
| 295 opacity: 1; |
| 296 } |
| 297 div.help div { |
| 298 display: none; |
| 299 } |
| 300 #helpTooltip { |
| 301 z-index: 1000; |
| 302 position: absolute; |
| 303 background: #d6e8ff; |
| 304 padding: 0.3em 0.8em; |
| 305 max-width: 30em; |
| 306 -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.33); |
| 307 border: 1px solid #a8cfff; |
| 308 -webkit-border-radius: 0; |
| 309 line-height: 140%; |
| 310 font-size: 92%; |
| 311 } |
| 312 #helpTooltip p { |
| 313 margin: 0.6em 0; |
| 314 } |
| 315 div.otherbrowsers { |
| 316 font-family: Helvetica, sans-serif; |
| 317 font-size: 84%; |
| 318 width: 100%; |
| 319 text-align: center; |
| 320 } |
| 321 </style> |
| 322 <script> |
| 323 function reload() { |
| 324 if (document.getElementById('helpTooltip')) |
| 325 return; |
| 326 history.go(0); |
| 327 } |
| 328 |
| 329 function formatNumber(str) { |
| 330 str += ''; |
| 331 if (str == '0') { |
| 332 return 'N/A '; |
| 333 } |
| 334 var x = str.split('.'); |
| 335 var x1 = x[0]; |
| 336 var x2 = x.length > 1 ? '.' + x[1] : ''; |
| 337 var regex = /(\d+)(\d{3})/; |
| 338 while (regex.test(x1)) { |
| 339 x1 = x1.replace(regex, '$1' + ',' + '$2'); |
| 340 } |
| 341 return x1; |
| 342 } |
| 343 |
| 344 function addToSum(id, value) { |
| 345 var target = document.getElementById(id); |
| 346 var sum = parseInt(target.innerHTML); |
| 347 sum += parseInt(value); |
| 348 target.innerHTML = sum; |
| 349 } |
| 350 |
| 351 function handleHelpTooltipMouseOver(event) { |
| 352 var el = document.createElement('div'); |
| 353 el.id = 'helpTooltip'; |
| 354 el.innerHTML = event.toElement.getElementsByTagName('div')[0].innerHTML; |
| 355 el.style.top = 0; |
| 356 el.style.left = 0; |
| 357 el.style.visibility = 'hidden'; |
| 358 document.body.appendChild(el); |
| 359 |
| 360 var width = el.offsetWidth; |
| 361 var height = el.offsetHeight; |
| 362 |
| 363 if (event.pageX - width - 50 + document.body.scrollLeft >= 0 ) { |
| 364 el.style.left = (event.pageX - width - 20) + 'px'; |
| 365 } else { |
| 366 el.style.left = (event.pageX + 20) + 'px'; |
| 367 } |
| 368 |
| 369 |
| 370 if (event.pageY - height - 50 + document.body.scrollTop >= 0) { |
| 371 el.style.top = (event.pageY - height - 20) + 'px'; |
| 372 } else { |
| 373 el.style.top = (event.pageY + 20) + 'px'; |
| 374 } |
| 375 |
| 376 el.style.visibility = 'visible'; |
| 377 } |
| 378 |
| 379 function handleHelpTooltipMouseOut(event) { |
| 380 var el = document.getElementById('helpTooltip'); |
| 381 el.parentNode.removeChild(el); |
| 382 } |
| 383 |
| 384 function enableHelpTooltips() { |
| 385 var helpEls = document.getElementsByClassName('help'); |
| 386 |
| 387 for (var i = 0, helpEl; helpEl = helpEls[i]; i++) { |
| 388 helpEl.onmouseover = handleHelpTooltipMouseOver; |
| 389 helpEl.onmouseout = handleHelpTooltipMouseOut; |
| 390 } |
| 391 } |
| 392 |
| 393 //setInterval("reload()", 10000); |
| 394 </script> |
| 395 </head> |
| 396 <body> |
| 397 <div id='header'> |
| 398 <h1> |
| 399 About memory |
| 400 </h1> |
| 401 <p> |
| 402 Measuring memory usage in a multi-process browser |
| 403 </p> |
| 404 </div> |
| 405 |
| 406 <div id='content'> |
| 407 <h2> |
| 408 Summary |
| 409 <div class='help'> |
| 410 <div> |
| 411 <p> |
| 412 Summary of memory used by currently active browsers.<p> |
| 413 For Chromium, processes used to to display diagnostics |
| 414 information (such as this "about:memory") are excluded. |
| 415 </p> |
| 416 </div> |
| 417 </div> |
| 418 </h2> |
| 419 |
| 420 <table class='list' id='browserComparison'> |
| 421 <colgroup> |
| 422 <col class='name' /> |
| 423 <col class='number' /> |
| 424 <col class='number' /> |
| 425 </colgroup> |
| 426 <tr class='firstRow doNotFilter'> |
| 427 <th> |
| 428 </th> |
| 429 <th colspan='2'> |
| 430 Memory |
| 431 <div class='help'> |
| 432 <div> |
| 433 <p> |
| 434 <strong>Memory</strong> |
| 435 </p> |
| 436 <p> |
| 437 <strong>Resident:</strong> |
| 438 Amount of memory that is present in physical RAM. |
| 439 This is the best indicator of browser memory resource usage. |
| 440 </p> |
| 441 <p> |
| 442 <strong>Virtual:</strong> |
| 443 Amount of address space allocated in virtual memory. |
| 444 </p> |
| 445 |
| 446 <p> |
| 447 <i>(Note that the memory for this tab is not included in the b
rowser totals.)</i> |
| 448 </p> |
| 449 </div> |
| 450 </div> |
| 451 </th> |
| 452 </tr> |
| 453 <tr class='secondRow doNotFilter'> |
| 454 <th class='name'> |
| 455 Browser |
| 456 </th> |
| 457 <th class='name'> |
| 458 Resident |
| 459 </th> |
| 460 <th class='number'> |
| 461 Virtual |
| 462 </th> |
| 463 </tr> |
| 464 <tr jsselect="browsers"> |
| 465 <td class='name'> |
| 466 <div> |
| 467 <strong jscontent="name"></strong> <span jscontent="version"></spa
n> |
| 468 </div> |
| 469 </td> |
| 470 <td class='number'> |
| 471 <span class='th' jscontent="formatNumber(ws_shareable)"></span><span
class='k'>k</span> |
| 472 </td> |
| 473 <td class='number'> |
| 474 <span class='th' jscontent="formatNumber(comm_priv)"></span><span cl
ass='k'>k</span> |
| 475 </td> |
| 476 </tr> |
| 477 </table> |
| 478 <div class=otherbrowsers jsdisplay="browsers.length == 1"> |
| 479 Note: If other browsers (e.g., Safari, Firefox, Camino) are running, I'l
l show their memory details here. |
| 480 </div> |
| 481 <div class="otherbrowsers"> |
| 482 (Bug: We seriously overcount our own memory usage: <a href="http://crbug
.com/25454">Issue 25454</a>.) |
| 483 </div> |
| 484 |
| 485 <br /><br /><br /> |
| 486 |
| 487 <h2> |
| 488 Processes |
| 489 <div class='help'> |
| 490 <div> |
| 491 <p> |
| 492 Details of memory usage for each of Chromium's processes. |
| 493 </p> |
| 494 </div> |
| 495 </div> |
| 496 </h2> |
| 497 |
| 498 <table class='list' id='memoryDetails'> |
| 499 <colgroup> |
| 500 <col class='pid' /> |
| 501 <col class='name' /> |
| 502 <col class='number' /> |
| 503 <col class='number' /> |
| 504 </colgroup> |
| 505 <tr class='firstRow doNotFilter'> |
| 506 <th> |
| 507 </th> |
| 508 <th> |
| 509 </th> |
| 510 <th colspan='2'> |
| 511 Memory |
| 512 </th> |
| 513 </tr> |
| 514 <tr class='secondRow doNotFilter'> |
| 515 <th class='pid'> |
| 516 PID |
| 517 </th> |
| 518 <th class='name'> |
| 519 Name |
| 520 </th> |
| 521 <th class='number'> |
| 522 Resident |
| 523 </th> |
| 524 <th class='number'> |
| 525 Virtual |
| 526 </th> |
| 527 </tr> |
| 528 |
| 529 <tr jsselect="browzr_data"> |
| 530 <td class='pid'> |
| 531 <span class='th' jscontent="pid"></span> |
| 532 </td> |
| 533 <td class='name'> |
| 534 <div> |
| 535 Browser |
| 536 </div> |
| 537 </td> |
| 538 <td class='number'> |
| 539 <span class='th' jscontent="formatNumber(ws_shareable)"></span><span
class='k'>k</span> |
| 540 </td> |
| 541 <td class='number'> |
| 542 <span class='th' jscontent="formatNumber(comm_priv)"></span><span cl
ass='k'>k</span> |
| 543 </td> |
| 544 </tr> |
| 545 <tr jsselect="child_data"> |
| 546 <td class='pid'> |
| 547 <span class='th' jscontent="pid"></span> |
| 548 </td> |
| 549 <td class='name'> |
| 550 <div jscontent="child_name"></div> |
| 551 <div jsselect="titles"> |
| 552 <span jscontent="$this"></span><br> |
| 553 </div> |
| 554 </td> |
| 555 <td class='number'> |
| 556 <span class='th' jscontent="formatNumber(ws_shareable)"></span><span
class='k'>k</span> |
| 557 </td> |
| 558 <td class='number'> |
| 559 <span class='th' jscontent="formatNumber(comm_priv)"></span><span cl
ass='k'>k</span> |
| 560 </td> |
| 561 </tr> |
| 562 |
| 563 <tr class='noResults'> |
| 564 <td colspan='99'> |
| 565 No results found. |
| 566 </td> |
| 567 </tr> |
| 568 </table> |
| 569 <div class="otherbrowsers"> |
| 570 (Note: Due to memory sharing between processes, summing memory usage doe
s not give total memory usage.) |
| 571 </div> |
| 572 </div> |
| 573 </body> |
| 574 <script> |
| 575 enableHelpTooltips(); |
| 576 </script> |
| 577 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 333008:
Mac: Implement about:memory. (Closed)
