Bug 951435 - Add thread hang stats to about:telemetry; r=vladan

toolkit/content/aboutTelemetry.css

@@ -94,7 +94,7 @@ h2 {
   text-decoration: underline;
 }
 
-#histograms, #addon-histograms {
+#histograms, #addon-histograms, #thread-hang-stats>div {
   overflow: hidden;
 }
 

toolkit/content/aboutTelemetry.js

@@ -410,6 +410,55 @@ let ChromeHangs = {
   }
 };
 
+let ThreadHangStats = {
+
+  /**
+   * Renders raw thread hang stats data
+   */
+  render: function() {
+    let div = document.getElementById("thread-hang-stats");
+    clearDivData(div);
+
+    let stats = Telemetry.threadHangStats;
+    stats.forEach((thread) => {
+      div.appendChild(this.renderThread(thread));
+    });
+    if (stats.length) {
+      setHasData("thread-hang-stats-section", true);
+    }
+  },
+
+  /**
+   * Creates and fills data corresponding to a thread
+   */
+  renderThread: function(aThread) {
+    let div = document.createElement("div");
+
+    let title = document.createElement("h2");
+    title.textContent = aThread.name;
+    div.appendChild(title);
+
+    // Don't localize the histogram name, because the
+    // name is also used as the div element's ID
+    Histogram.render(div, aThread.name + "-Activity",
+                     aThread.activity, {exponential: true});
+    aThread.hangs.forEach((hang, index) => {
+      let hangName = aThread.name + "-Hang-" + (index + 1);
+      let hangDiv = Histogram.render(
+        div, hangName, hang.histogram, {exponential: true});
+      let stackDiv = document.createElement("div");
+      hang.stack.forEach((frame) => {
+        stackDiv.appendChild(document.createTextNode(frame));
+        // Leave an extra <br> at the end of the stack listing
+        stackDiv.appendChild(document.createElement("br"));
+      });
+      // Insert stack after the histogram title
+      hangDiv.insertBefore(stackDiv, hangDiv.childNodes[1]);
+    });
+    return div;
+  },
+};
+
 let Histogram = {
 
   hgramSamplesCaption: bundle.GetStringFromName("histogramSamples"),
@@ -468,6 +517,7 @@ let Histogram = {
     outerDiv.appendChild(copyButton);
 
     aParent.appendChild(outerDiv);
+    return outerDiv;
   },
 
   /**
@@ -884,6 +934,9 @@ function onLoad() {
   // Show chrome hang stacks
   ChromeHangs.render();
 
+  // Show thread hang stats
+  ThreadHangStats.render();
+
   // Show histogram data
   let histograms = Telemetry.histogramSnapshots;
   if (Object.keys(histograms).length) {

toolkit/content/aboutTelemetry.xhtml

@@ -60,6 +60,15 @@
       </div>
     </section>
 
+    <section id="thread-hang-stats-section" class="data-section">
+      <input type="checkbox" class="statebox"/>
+      <h1 class="section-name">&aboutTelemetry.threadHangStatsSection;</h1>
+      <span class="toggle-caption">&aboutTelemetry.toggle;</span>
+      <span class="empty-caption">&aboutTelemetry.emptySection;</span>
+      <div id="thread-hang-stats" class="data">
+      </div>
+    </section>
+
     <section id="histograms-section" class="data-section">
       <input type="checkbox" class="statebox"/>
       <h1 class="section-name">&aboutTelemetry.histogramsSection;</h1>

toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd

@@ -20,6 +20,10 @@
   Browser Hangs
 ">
 
+<!ENTITY aboutTelemetry.threadHangStatsSection "
+  Thread Hangs
+">
+
 <!ENTITY aboutTelemetry.histogramsSection "
   Histograms
 ">