Bug 798040 - Improve visual separation of processes in about:memory. r=njn

toolkit/components/aboutmemory/content/aboutMemory.css

@@ -2,13 +2,39 @@
  * 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.
+ */
 
-body.verbose {
-  /* override setting in about.css */
-  max-width: 100% !important;
+html {
+  background: -moz-Dialog;
+  font: message-box;
+}
+
+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 {
@@ -16,6 +42,11 @@ body.non-verbose pre.entries {
   text-overflow: ellipsis;
 }
 
+h1 {
+  padding: 0;
+  margin: 0;
+}
+
 h2 {
   background: #ddd;
   padding-left: .1em;

toolkit/components/aboutmemory/content/aboutMemory.js

@@ -97,12 +97,14 @@ function reportAssertionFailure(aMsg)
 
 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);
 }
 
 //---------------------------------------------------------------------------
@@ -219,7 +221,7 @@ function clearBody()
   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)
@@ -543,7 +545,10 @@ function appendAboutMemoryMain(aBody, aProcess, aHasMozMallocUsableSize,
   // 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);
@@ -558,7 +563,7 @@ function appendAboutMemoryMain(aBody, aProcess, aHasMozMallocUsableSize,
  */
 function appendAboutMemoryFooter(aBody)
 {
-  appendElement(aBody, "hr");
+  let section = appendElement(aBody, 'div', 'footer');
 
   // Memory-related actions.
   const UpDesc = "Re-measure.";
@@ -582,7 +587,7 @@ function appendAboutMemoryFooter(aBody)
     }
   }
 
-  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");
@@ -607,7 +612,7 @@ function appendAboutMemoryFooter(aBody)
   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";
@@ -616,7 +621,7 @@ function appendAboutMemoryFooter(aBody)
     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";
@@ -626,8 +631,8 @@ function appendAboutMemoryFooter(aBody)
   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);
 }
 
 //---------------------------------------------------------------------------

toolkit/components/aboutmemory/content/aboutMemory.xhtml

@@ -11,9 +11,8 @@
     <!-- 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>