Bug 1516831 - Add a process index to about:memory r=njn
authorCameron McCormack <cam@mcc.id.au>
Mon, 07 Jan 2019 03:06:27 +0000
changeset 509771 029414a7448afe97b06f3f5a9c96ceaae93c44e3
parent 509770 a52b66841df98457965924c2810e2a6396df896d
child 509779 0dcf945b38719b8475b212acc59105c933067ca6
child 509780 79dfd716ddeb583bf14d27281e4531d976db3d3f
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnjn
bugs1516831
milestone66.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 1516831 - Add a process index to about:memory r=njn Differential Revision: https://phabricator.services.mozilla.com/D15495
mobile/android/themes/core/aboutMemory.css
toolkit/components/aboutmemory/content/aboutMemory.css
toolkit/components/aboutmemory/content/aboutMemory.js
--- a/mobile/android/themes/core/aboutMemory.css
+++ b/mobile/android/themes/core/aboutMemory.css
@@ -30,28 +30,67 @@ div.section {
   padding: 2em;
   margin: 1em 0em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
   color: -moz-FieldText;
 }
 
+div.outputContainer {
+  display: flex;
+}
+
+div.sections {
+  flex: 1;
+  min-width: 0;
+}
+
+div.sidebar {
+  flex: 0 0 max-content;
+  margin-left: 1em;
+}
+
+div.sidebarContents {
+  position: sticky;
+  top: 0.5em;
+}
+
+div.index {
+  padding: 0.5em;
+  margin: 1em 0em;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  background: -moz-Field;
+  color: -moz-FieldText;
+  -moz-user-select: none;  /* no need to include this when cutting+pasting */
+}
+
+ul.indexList {
+  list-style-position: inside;
+  margin: 0;
+  padding: 0;
+}
+
+ul.indexList > li {
+  padding-left: 0.5em;
+}
+
 div.opsRow {
   padding: 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
   color: -moz-FieldText;
   display: inline-block;
 }
 
-div.opsRowLabel {
+div.opsRowLabel, div.indexLabel {
   display: block;
   margin-bottom: 0.2em;
   font-weight: bold;
 }
 
 .opsRowLabel label {
   margin-left: 1em;
   font-weight: normal;
--- a/toolkit/components/aboutmemory/content/aboutMemory.css
+++ b/toolkit/components/aboutmemory/content/aboutMemory.css
@@ -30,28 +30,67 @@ div.section {
   padding: 2em;
   margin: 1em 0em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
   color: -moz-FieldText;
 }
 
+div.outputContainer {
+  display: flex;
+}
+
+div.sections {
+  flex: 1;
+  min-width: 0;
+}
+
+div.sidebar {
+  flex: 0 0 max-content;
+  margin-left: 1em;
+}
+
+div.sidebarContents {
+  position: sticky;
+  top: 0.5em;
+}
+
+div.index {
+  padding: 0.5em;
+  margin: 1em 0em;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  background: -moz-Field;
+  color: -moz-FieldText;
+  -moz-user-select: none;  /* no need to include this when cutting+pasting */
+}
+
+ul.indexList {
+  list-style-position: inside;
+  margin: 0;
+  padding: 0;
+}
+
+ul.indexList > li {
+  padding-left: 0.5em;
+}
+
 div.opsRow {
   padding: 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
   color: -moz-FieldText;
   display: inline-block;
 }
 
-div.opsRowLabel {
+div.opsRowLabel, div.indexLabel {
   display: block;
   margin-bottom: 0.2em;
   font-weight: bold;
 }
 
 .opsRowLabel label {
   margin-left: 1em;
   font-weight: normal;
--- a/toolkit/components/aboutmemory/content/aboutMemory.js
+++ b/toolkit/components/aboutmemory/content/aboutMemory.js
@@ -1039,25 +1039,40 @@ function appendAboutMemoryMain(aProcessR
       }
       if (aProcessA > aProcessB) {
         return 1;
       }
 
       return 0;
     });
 
-    // Generate output for each process.
+    // Set up a layout with a left (main) column to contain the process sections
+    // and a right (sidebar) column to contain the process index.
+    let outputContainer = appendElement(gMain, "div", "outputContainer");
+
+    let sections = appendElement(outputContainer, "div", "sections");
+    let sidebar = appendElement(outputContainer, "div", "sidebar");
+    let sidebarContents = appendElement(sidebar, "div", "sidebarContents");
+
+    let index = appendElement(sidebarContents, "div", "index");
+    appendElementWithText(index, "div", "indexLabel", "Process index");
+    let indexList = appendElement(index, "ul", "indexList");
+
+    // Generate output and an index link for each process.
     for (let [i, process] of processes.entries()) {
-      let section = appendElement(gMain, "div", "section");
-
+      let section = appendElement(sections, "div", "section");
       appendProcessAboutMemoryElements(section, i, process,
                                        pcollsByProcess[process]._trees,
                                        pcollsByProcess[process]._degenerates,
                                        pcollsByProcess[process]._heapTotal,
                                        aHasMozMallocUsableSize);
+
+      let indexListItem = appendElement(indexList, "li");
+      let indexLink = appendElementWithText(indexListItem, "a", "", process);
+      indexLink.href = "#start" + i;
     }
   }
 
   aProcessReports(handleReport, displayReports);
 }
 
 // ---------------------------------------------------------------------------