Bug 798040 - Improve visual separation of processes in about:memory. r=njn
authorJustin Lebar <justin.lebar@gmail.com>
Fri, 05 Oct 2012 08:26:00 -0400
changeset 109569 8ccf1936752305b956c2751291b37ce69e998f9d
parent 109568 12067455cc2384b78bb24ca3af832139185fe081
child 109570 83d38854c21e05cfd06d68b21cf836aa32fd5632
push id23632
push userphilringnalda@gmail.com
push dateSun, 07 Oct 2012 19:14:37 +0000
treeherdermozilla-central@83d38854c21e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnjn
bugs798040
milestone18.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 798040 - Improve visual separation of processes in about:memory. r=njn
toolkit/components/aboutmemory/content/aboutMemory.css
toolkit/components/aboutmemory/content/aboutMemory.js
toolkit/components/aboutmemory/content/aboutMemory.xhtml
--- a/toolkit/components/aboutmemory/content/aboutMemory.css
+++ b/toolkit/components/aboutmemory/content/aboutMemory.css
@@ -1,26 +1,57 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* This file is used for both about:memory and about:compartments. A
- * version used for mobile is located at 
- * mobile/android/themes/core/aboutMemory.css. */
+/*
+ * This file is used for both about:memory and about:compartments.
+ *
+ * Portions of this file are based on
+ * toolkit/themes/winstripe/global/about.css.
+ *
+ * A version used for mobile is located at
+ * mobile/android/themes/core/aboutMemory.css.
+ */
+
+html {
+  background: -moz-Dialog;
+  font: message-box;
+}
 
-body.verbose {
-  /* override setting in about.css */
-  max-width: 100% !important;
+body {
+  padding: 0 2em;
+  margin: 0;
+  min-width: 45em;
+  margin: auto;
+}
+
+div.section, div.footer {
+  margin: 2em 0;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+div.section {
+  padding: 3em;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  background: -moz-Field;
 }
 
 body.non-verbose pre.entries {
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
+h1 {
+  padding: 0;
+  margin: 0;
+}
+
 h2 {
   background: #ddd;
   padding-left: .1em;
 }
 
 .accuracyWarning {
   color: #d22;
 }
--- a/toolkit/components/aboutmemory/content/aboutMemory.js
+++ b/toolkit/components/aboutmemory/content/aboutMemory.js
@@ -92,22 +92,24 @@ function reportAssertionFailure(aMsg)
   let debug = Cc["@mozilla.org/xpcom/debug;1"].getService(Ci.nsIDebug2);
   if (debug.isDebugBuild) {
     debug.assertion(aMsg, "false", "aboutMemory.js", 0);
   }
 }
 
 function debug(x)
 {
-  appendElementWithText(document.body, "div", "debug", JSON.stringify(x));
+  let section = appendElement(document.body, 'div', 'section');
+  appendElementWithText(section, "div", "debug", JSON.stringify(x));
 }
 
 function badInput(x)
 {
-  appendElementWithText(document.body, "div", "badInputWarning", x);
+  let section = appendElement(document.body, 'div', 'section');
+  appendElementWithText(section, "div", "badInputWarning", x);
 }
 
 //---------------------------------------------------------------------------
 
 function addChildObserversAndUpdate(aUpdateFn)
 {
   let os = Cc["@mozilla.org/observer-service;1"].
       getService(Ci.nsIObserverService);
@@ -214,17 +216,17 @@ function processMemoryReportsFromFile(aR
 //---------------------------------------------------------------------------
 
 function clearBody()
 {
   let oldBody = document.body;
   let body = oldBody.cloneNode(false);
   oldBody.parentNode.replaceChild(body, oldBody);
   body.classList.add(gVerbose ? 'verbose' : 'non-verbose');
-  return body;
+  return body
 }
 
 function appendTextNode(aP, aText)
 {
   let e = document.createTextNode(aText);
   aP.appendChild(e);
   return e;
 }
@@ -538,32 +540,35 @@ function appendAboutMemoryMain(aBody, aP
     }
 
     return 0;
   });
 
   // Generate output for each process.
   for (let i = 0; i < processes.length; i++) {
     let process = processes[i];
-    appendProcessAboutMemoryElements(aBody, process, treesByProcess[process],
+    let section = appendElement(aBody, 'div', 'section');
+
+    appendProcessAboutMemoryElements(section, process,
+                                     treesByProcess[process],
                                      degeneratesByProcess[process],
                                      heapTotalByProcess[process],
                                      aHasMozMallocUsableSize);
   }
 }
 
 /**
  * Appends the page footer.
  *
  * @param aBody
  *        The DOM body element.
  */
 function appendAboutMemoryFooter(aBody)
 {
-  appendElement(aBody, "hr");
+  let section = appendElement(aBody, 'div', 'footer');
 
   // Memory-related actions.
   const UpDesc = "Re-measure.";
   const GCDesc = "Do a global garbage collection.";
   const CCDesc = "Do a cycle collection.";
   const MPDesc = "Send three \"heap-minimize\" notifications in a " +
                  "row.  Each notification triggers a global garbage " +
                  "collection followed by a cycle collection, and causes the " +
@@ -577,17 +582,17 @@ function appendAboutMemoryFooter(aBody)
     let b = appendElementWithText(aP, "button", "", aText);
     b.title = aTitle;
     b.onclick = aOnClick
     if (aId) {
       b.id = aId;
     }
   }
 
-  let div1 = appendElement(aBody, "div");
+  let div1 = appendElement(section, "div");
 
   // The "Update" button has an id so it can be clicked in a test.
   appendButton(div1, UpDesc, updateAboutMemory, "Update", "updateButton");
   appendButton(div1, GCDesc, doGlobalGC,        "GC");
   appendButton(div1, CCDesc, doCC,              "CC");
   appendButton(div1, MPDesc,
                function() { gMgr.minimizeMemoryUsage(updateAboutMemory); },
                "Minimize memory usage");
@@ -602,37 +607,37 @@ function appendAboutMemoryFooter(aBody)
     updateAboutMemoryFromFile(file);
   }); 
   appendButton(div1, RdDesc, function() { input.click() },
                "Read reports from a file", "readReportsFromFileButton");
 
   appendButton(div1, CbDesc, updateAboutMemoryFromClipboard,
                "Read reports from clipboard", "readReportsFromClipboardButton");
 
-  let div2 = appendElement(aBody, "div");
+  let div2 = appendElement(section, "div");
   if (gVerbose) {
     let a = appendElementWithText(div2, "a", "option", "Less verbose");
     a.href = "about:memory";
   } else {
     let a = appendElementWithText(div2, "a", "option", "More verbose");
     a.href = "about:memory?verbose";
   }
 
-  let div3 = appendElement(aBody, "div");
+  let div3 = appendElement(section, "div");
   let a = appendElementWithText(div3, "a", "option",
                                 "Troubleshooting information");
   a.href = "about:support";
 
   let legendText1 = "Click on a non-leaf node in a tree to expand ('++') " +
                     "or collapse ('--') its children.";
   let legendText2 = "Hover the pointer over the name of a memory report " +
                     "to see a description of what it measures.";
 
-  appendElementWithText(aBody, "div", "legend", legendText1);
-  appendElementWithText(aBody, "div", "legend hiddenOnMobile", legendText2);
+  appendElementWithText(section, "div", "legend", legendText1);
+  appendElementWithText(section, "div", "legend hiddenOnMobile", legendText2);
 }
 
 //---------------------------------------------------------------------------
 
 // This regexp matches sentences and sentence fragments, i.e. strings that
 // start with a capital letter and ends with a '.'.  (The final sentence may be
 // in parentheses, so a ')' might appear after the '.'.)
 const gSentenceRegExp = /^[A-Z].*\.\)?$/m;
--- a/toolkit/components/aboutmemory/content/aboutMemory.xhtml
+++ b/toolkit/components/aboutmemory/content/aboutMemory.xhtml
@@ -6,14 +6,13 @@
 
 <!-- This file is used for both about:memory and about:compartments. -->
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <!-- the <title> is filled in by aboutMemory.js -->
     <meta name="viewport" content="width=device-width"/>
     <link rel="stylesheet" href="chrome://global/skin/aboutMemory.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://global/skin/about.css" type="text/css"/>
     <script type="text/javascript;version=1.8" src="chrome://global/content/aboutMemory.js"/>
   </head>
 
-  <body onload="onLoad()" onunload="onUnload()" class="aboutPageWideContainer"></body>
+  <body onload="onLoad()" onunload="onUnload()"></body>
 </html>