Bug 929826 - Improve about:memory's UI for the multi-process case. r=johns.

--HG--
extra : rebase_source : c248a0127c7d160fc0016dabca1f3561233a577c

toolkit/components/aboutmemory/content/aboutMemory.css

@@ -62,6 +62,7 @@ div.non-verbose pre.entries {
 h1 {
   padding: 0;
   margin: 0;
+  display: inline;  /* allow subsequent text to the right of the heading */
 }
 
 h2 {
@@ -69,6 +70,16 @@ h2 {
   padding-left: .1em;
 }
 
+h3 {
+  display: inline;  /* allow subsequent text to the right of the heading */
+}
+
+a.upDownArrow {
+  font-size: 130%;
+  text-decoration: none;
+  -moz-user-select: none;  /* no need to include this when cutting+pasting */
+}
+
 .accuracyWarning {
   color: #d22;
 }

toolkit/components/aboutmemory/content/aboutMemory.js

@@ -885,7 +885,7 @@ function appendAboutMemoryMain(aProcessReports, aHasMozMallocUsableSize)
     let process = processes[i];
     let section = appendElement(gMain, 'div', 'section');
 
-    appendProcessAboutMemoryElements(section, process,
+    appendProcessAboutMemoryElements(section, i, process,
                                      pcollsByProcess[process]._trees,
                                      pcollsByProcess[process]._degenerates,
                                      pcollsByProcess[process]._heapTotal,
@@ -1308,6 +1308,8 @@ function appendWarningElements(aP, aHasKnownHeapAllocated,
  *
  * @param aP
  *        The parent DOM node.
+ * @param aN
+ *        The number of the process, starting at 0.
  * @param aProcess
  *        The name of the process.
  * @param aTrees
@@ -1318,10 +1320,34 @@ function appendWarningElements(aP, aHasKnownHeapAllocated,
  *        Boolean indicating if moz_malloc_usable_size works.
  * @return The generated text.
  */
-function appendProcessAboutMemoryElements(aP, aProcess, aTrees, aDegenerates,
-                                          aHeapTotal, aHasMozMallocUsableSize)
+function appendProcessAboutMemoryElements(aP, aN, aProcess, aTrees,
+                                          aDegenerates, aHeapTotal,
+                                          aHasMozMallocUsableSize)
 {
-  appendElementWithText(aP, "h1", "", aProcess + "\n\n");
+  const kUpwardsArrow   = "\u2191",
+        kDownwardsArrow = "\u2193";
+
+  let appendLink = function(aHere, aThere, aArrow) {
+    let link = appendElementWithText(aP, "a", "upDownArrow", aArrow);
+    link.href = "#" + aThere + aN;
+    link.id = aHere + aN;
+    link.title = "Go to the " + aThere + " of " + aProcess;
+    link.style = "text-decoration: none";
+
+    // This jumps to the anchor without the page location getting the anchor
+    // name tacked onto its end, which is what happens with a vanilla link.
+    link.addEventListener("click", function(event) {
+      document.documentElement.scrollTop =
+        document.querySelector(event.target.href).offsetTop;
+      event.preventDefault();
+    }, false);
+
+    // This gives nice spacing when we copy and paste.
+    appendElementWithText(aP, "span", "", "\n");
+  }
+
+  appendElementWithText(aP, "h1", "", aProcess);
+  appendLink("start", "end", kDownwardsArrow);
 
   // We'll fill this in later.
   let warningsDiv = appendElement(aP, "div", "accuracyWarning");
@@ -1347,7 +1373,7 @@ function appendProcessAboutMemoryElements(aP, aProcess, aTrees, aDegenerates,
       appendTreeElements(pre, t, aProcess, "");
       delete aTrees[treeName];
     }
-    appendTextNode(aP, "\n");  // gives nice spacing when we cut and paste
+    appendTextNode(aP, "\n");  // gives nice spacing when we copy and paste
   }
 
   // Fill in and sort all the non-degenerate other trees.
@@ -1388,13 +1414,16 @@ function appendProcessAboutMemoryElements(aP, aProcess, aTrees, aDegenerates,
     let padText = pad("", maxStringLength - t.toString().length, ' ');
     appendTreeElements(pre, t, aProcess, padText);
   }
-  appendTextNode(aP, "\n");  // gives nice spacing when we cut and paste
+  appendTextNode(aP, "\n");  // gives nice spacing when we copy and paste
 
   // Add any warnings about inaccuracies due to platform limitations.
   // These must be computed after generating all the text.  The newlines give
-  // nice spacing if we cut+paste into a text buffer.
+  // nice spacing if we copy+paste into a text buffer.
   appendWarningElements(warningsDiv, hasKnownHeapAllocated,
                         aHasMozMallocUsableSize);
+
+  appendElementWithText(aP, "h3", "", "End of " + aProcess);
+  appendLink("end", "start", kUpwardsArrow);
 }
 
 /**
@@ -1517,7 +1546,7 @@ function pad(aS, aN, aC)
 
 // There's a subset of the Unicode "light" box-drawing chars that is widely
 // implemented in terminals, and this code sticks to that subset to maximize
-// the chance that cutting and pasting about:memory output to a terminal will
+// the chance that copying and pasting about:memory output to a terminal will
 // work correctly.
 const kHorizontal                   = "\u2500",
       kVertical                     = "\u2502",

toolkit/components/aboutmemory/tests/test_aboutmemory.xul

@@ -279,6 +279,7 @@ Other Measurements\n\
    45.67% ── perc1\n\
   100.00% ── perc2\n\
 \n\
+End of Main Process\n\
 4th\n\
 \n\
 WARNING: the following values are negative or unreasonably large.\n\
@@ -314,6 +315,7 @@ Other Measurements\n\
    666.66% ── other6\n\
  200.00 MB ── resident\n\
 \n\
+End of 4th\n\
 3rd\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -329,6 +331,7 @@ Other Measurements\n\
   1.00 MB ── other1\n\
 100.00 MB ── resident\n\
 \n\
+End of 3rd\n\
 2nd\n\
 Explicit Allocations\n\
 \n\
@@ -345,6 +348,7 @@ Other Measurements\n\
   666.00 MB ── other0\n\
   111.00 MB ── other1\n\
 \n\
+End of 2nd\n\
 5th\n\
 \n\
 WARNING: the following values are negative or unreasonably large.\n\
@@ -377,6 +381,7 @@ Other Measurements\n\
 \n\
 100.00 MB ── heap-allocated\n\
 \n\
+End of 5th\n\
 ";
 
   let amvExpectedText =
@@ -446,6 +451,7 @@ Other Measurements\n\
        45.67% ── perc1\n\
       100.00% ── perc2\n\
 \n\
+End of Main Process\n\
 4th\n\
 \n\
 WARNING: the following values are negative or unreasonably large.\n\
@@ -479,6 +485,7 @@ Other Measurements\n\
        666.66% ── other6\n\
  209,715,200 B ── resident\n\
 \n\
+End of 4th\n\
 3rd\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -494,6 +501,7 @@ Other Measurements\n\
   1,048,576 B ── other1\n\
 104,857,600 B ── resident\n\
 \n\
+End of 3rd\n\
 2nd\n\
 Explicit Allocations\n\
 \n\
@@ -510,6 +518,7 @@ Other Measurements\n\
   698,351,616 B ── other0\n\
   116,391,936 B ── other1\n\
 \n\
+End of 2nd\n\
 5th\n\
 \n\
 WARNING: the following values are negative or unreasonably large.\n\
@@ -541,7 +550,8 @@ Other Measurements\n\
 \n\
 104,857,600 B ── heap-allocated\n\
 \n\
-"
+End of 5th\n\
+";
 
   function finish()
   {
@@ -567,7 +577,7 @@ Other Measurements\n\
       let mostRecentActual;
       let frame = document.getElementById(aFrameId);
       frame.focus();
-        
+
       // Set the verbose checkbox value and click the go button.
       let doc = frame.contentWindow.document;
       let measureButton = doc.getElementById("measureButton");
@@ -588,9 +598,9 @@ Other Measurements\n\
         function() {
           ok(false, "pasted text doesn't match for " + aFrameId);
           dump("******EXPECTED******\n");
-          dump(aExpected);
+          dump("<<<" + aExpected + ">>>\n");
           dump("*******ACTUAL*******\n");
-          dump(mostRecentActual);
+          dump("<<<" + mostRecentActual + ">>>\n");
           dump("********************\n");
           finish();
         }

toolkit/components/aboutmemory/tests/test_aboutmemory2.xul

@@ -177,6 +177,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let acCollapsedExpected =
@@ -201,6 +202,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let alExpandedExpected =
@@ -227,6 +229,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let aCollapsedExpected =
@@ -247,6 +250,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let hCollapsedExpected =
@@ -265,6 +269,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let jExpandedExpected =
@@ -285,6 +290,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   // The important thing here is that two values have been swapped.
@@ -308,6 +314,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let aExpandedExpected =
@@ -334,6 +341,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let acExpandedExpected =
@@ -362,6 +370,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   let alCollapsedExpected =
@@ -388,6 +397,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process\n\
 ";
 
   // Test the following cases:

toolkit/components/aboutmemory/tests/test_aboutmemory3.xul

@@ -159,7 +159,7 @@
       synthesizeKey("A", {accelKey: true});
       synthesizeKey("C", {accelKey: true});
       let actual = SpecialPowers.getClipboardData("text/unicode");
-      actual = actual.replace(/\(pid \d+\)/, "(pid NNN)");
+      actual = actual.replace(/\(pid \d+\)/g, "(pid NNN)");
 
       if (actual === aExpected) {
         SimpleTest.ok(true, "Clipboard has the expected contents");
@@ -204,6 +204,7 @@ Explicit Allocations\n\
 \n\
 Other Measurements\n\
 \n\
+End of Explicit-only process\n\
 Main Process (pid NNN)\n\
 Explicit Allocations\n\
 \n\
@@ -237,6 +238,7 @@ Other Measurements\n\
 \n\
 262,144,000 B ── heap-allocated\n\
 \n\
+End of Main Process (pid NNN)\n\
 Other-only process\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -250,6 +252,7 @@ Other Measurements\n\
 \n\
 500,000 B ── heap-allocated\n\
 \n\
+End of Other-only process\n\
 ";
 
   let expectedGood2 =
@@ -269,12 +272,14 @@ Other Measurements\n\
 \n\
 262,144,000 B ── heap-allocated\n\
 \n\
+End of Main Process (pid NNN)\n\
 ";
 
   // This is the output for a malformed data file.
   let expectedBad =
 "\
-Invalid memory report(s): missing 'hasMozMallocUsableSize' property";
+Invalid memory report(s): missing 'hasMozMallocUsableSize' property\
+";
 
   // This is the output for a diff.
   let expectedDiff =
@@ -294,6 +299,7 @@ Other Measurements\n\
 3,000 B ── canvas-2d-pixel-bytes [2] [+]\n\
  -100 B ── foobar [-]\n\
 \n\
+End of P\n\
 P2 (pid NNN)\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -303,6 +309,7 @@ Other Measurements\n\
 \n\
 11 B ── z 0xNNN\n\
 \n\
+End of P2 (pid NNN)\n\
 P3\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -312,6 +319,7 @@ Other Measurements\n\
 \n\
 -55 B ── p3 [-]\n\
 \n\
+End of P3\n\
 P4\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -321,6 +329,7 @@ Other Measurements\n\
 \n\
 66 B ── p4 [+]\n\
 \n\
+End of P4\n\
 ";
 
   let frames = [

toolkit/components/aboutmemory/tests/test_aboutmemory4.xul

@@ -99,6 +99,7 @@ Explicit Allocations\n\
 \n\
 Other Measurements\n\
 \n\
+End of Explicit-only process\n\
 Main Process (pid NNN)\n\
 Explicit Allocations\n\
 \n\
@@ -132,6 +133,7 @@ Other Measurements\n\
 \n\
 250.00 MB ── heap-allocated\n\
 \n\
+End of Main Process (pid NNN)\n\
 Other-only process\n\
 \n\
 WARNING: the 'heap-allocated' memory reporter does not work for this platform and/or configuration. This means that 'heap-unclassified' is not shown and the 'explicit' tree shows less memory than it should.\n\
@@ -145,6 +147,7 @@ Other Measurements\n\
 \n\
 0.48 MB ── heap-allocated\n\
 \n\
+End of Other-only process\n\
 ";
 
   // This is the output for a malformed data file.