Child hangs

data/panel.html

@@ -10,6 +10,9 @@
       font-family: monospace;
       font-size: 12px;
     }
+    h1 {
+      margin: 0;
+    }
     a {
       color: inherit;
     }
@@ -47,17 +50,20 @@
     }
     .controls {
       display: table-cell;
-      width: 150px;
+      width: 130px;
       padding: 5px 10px;
       text-align: right;
       background: #888;
       color: white;
       z-index: 1;
     }
+    .childHang .controls {
+      background: #5555AA;
+    }
     .controls .duration {
       font-size: 12px;
     }
-    .controls .time, .controls .uptime {
+    .controls .time {
       margin-top: 5px;
     }
     .controls .copyButton {
@@ -86,10 +92,12 @@
   <h1>STATUSER SETTINGS</h1>
   <p class="description">The icon is a red square when the user is active, a blue circle when the user is inactive, and turns into a yellow square when there is a page loading in any tab.</p>
   <div>
-    <label><input type="radio" name="mode" id="countThreadHangs" /> Count thread hangs</label><br>
+    <label><input type="radio" name="mode" id="countThreadHangsParentOnly" /> Count parent process Gecko thread hangs</label><br>
+    <label><input type="radio" name="mode" id="countThreadHangsChildOnly" /> Count child process Gecko thread hangs</label><br>
+    <label><input type="radio" name="mode" id="countThreadHangs" /> Count Gecko thread hangs</label><br>
     <label><input type="radio" name="mode" id="countEventLoopLags" /> Count event loop lags</label><br>
     <label><input type="radio" name="mode" id="countInputEventResponseLags" /> Count input event response time lags</label>
-    <p class="description">Statuser can count hangs on the main thread, lags on the event loop, or spikes in input event response time. Changing this setting will reset the hang counter.</p>
+    <p class="description">Statuser can count Gecko thread hangs for the parent process/child process/both, lags on the event loop, or spikes in input event response time. Changing this setting will reset the hang counter.</p>
   </div>
   <hr>
   <div>
@@ -108,7 +116,6 @@ <h1>STATUSER SETTINGS</h1>
   <p class="note">On E10S builds, Statuser will <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228437" target="_blank">only measure main thread hangs</a>.</p>
   <hr>
   <h1>MOST RECENT HANGS</h1>
-  <p class="note">The stack traces displayed here are are Background Hang Reporter pseudo-stacks. Only the 10 most recent stack traces are shown. Stack traces are only captured for hangs of 128ms or greater.</p>
   <div id="hangStacks">
     <!-- hang stack entries are added here by `data/panel.js`, and have the following structure: -->
     <!--<div>
@@ -123,10 +130,11 @@ <h1>MOST RECENT HANGS</h1>
           <img src="copy-icon.svg" />
         </button>
         <div class="time">1/19/2016, 1:09:51 PM</div>
-        <div class="uptime">912923ms uptime</div>
+        <div class="time">912523ms to 912923ms uptime</div>
       </div>
     </div>-->
   </div>
-  <p class="note">Hang uptimes correspond to the X axis in the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" target="_blank">Gecko Profiler addon</a> timeline.</p>
+  <p class="note">The stack traces displayed here are are Background Hang Reporter pseudo-stacks. Only the 10 most recent stack traces are shown. Stack traces are only captured for hangs of 128ms or greater.</p>
+  <p class="note">Entries with a grey sidebar are parent process hangs, while entries with a blue sidebar are child process hangs. Hang uptimes correspond to the X axis in the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler" target="_blank">Gecko Profiler addon</a> timeline.</p>
 </body>
 </html>

data/panel.js

@@ -1,7 +1,15 @@
 // emit events on the panel's port for corresponding actions
+var countThreadHangsParentOnly = document.getElementById("countThreadHangsParentOnly");
+var countThreadHangsChildOnly = document.getElementById("countThreadHangsChildOnly");
 var countThreadHangs = document.getElementById("countThreadHangs");
 var countEventLoopLags = document.getElementById("countEventLoopLags");
 var countInputEventResponseLags = document.getElementById("countInputEventResponseLags");
+countThreadHangsParentOnly.addEventListener("click", function() {
+  self.port.emit("mode-changed", "threadHangsParentOnly");
+});
+countThreadHangsChildOnly.addEventListener("click", function() {
+  self.port.emit("mode-changed", "threadHangsChildOnly");
+});
 countThreadHangs.addEventListener("click", function() {
   self.port.emit("mode-changed", "threadHangs");
 });
@@ -32,6 +40,12 @@ self.port.on("show", function(currentSettings) {
   playSound.checked = currentSettings.playSound;
   hangThreshold.value = currentSettings.hangThreshold;
   switch (currentSettings.mode) {
+    case "threadHangsParentOnly":
+      document.getElementById("countThreadHangsParentOnly").checked = true;
+      break;
+    case "threadHangsChildOnly":
+      document.getElementById("countThreadHangsChildOnly").checked = true;
+      break;
     case "threadHangs":
       document.getElementById("countThreadHangs").checked = true;
       break;
@@ -53,16 +67,20 @@ self.port.on("warning", function(warningType) {
     case null:
       banner.style.display = "none";
       break;
+    case "unavailableChildBHR":
+      banner.innerHTML = "CHILD PROCESS BACKGROUND HANG REPORTING <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION, ENABLE BHR, AND RESTART FIREFOX";
+      banner.style.display = "block";
+      break;
     case "unavailableBHR":
-      banner.innerHTML = "BACKGROUND HANG REPORTING <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; ENABLE BHR AND RESTART FIREFOX";
+      banner.innerHTML = "BACKGROUND HANG REPORTING <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION, ENABLE BHR, AND RESTART FIREFOX";
       banner.style.display = "block";
       break;
     case "unavailableEventLoopLags":
-      banner.innerHTML = "EVENTLOOP_UI_ACTIVITY_EXP_MS HISTOGRAM <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION";
+      banner.innerHTML = "EVENTLOOP_UI_ACTIVITY_EXP_MS HISTOGRAM <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION AND ENABLE TELEMETRY";
       banner.style.display = "block";
       break;
     case "unavailableInputEventResponseLags":
-      banner.innerHTML = "INPUT_EVENT_RESPONSE_MS HISTOGRAM <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION";
+      banner.innerHTML = "INPUT_EVENT_RESPONSE_MS HISTOGRAM <a href=\"about:telemetry\" target=\"_blank\">UNAVAILABLE</a>; CHECK FIREFOX VERSION AND ENABLE TELEMETRY";
       banner.style.display = "block";
       break;
     default:
@@ -78,6 +96,9 @@ function setHangs(hangs) {
   hangs.reverse().forEach(hang => {
     // create an entry for the hang
     var entry = document.createElement("div");
+    if (hang.isChild) {
+      entry.className = "childHang";
+    }
       var contents = document.createElement("pre");
       contents.className = "stack";
       contents.appendChild(document.createTextNode(hang.stack));