Bug 838164 - Add a pretty headers to late write stacks. r=vladan.

toolkit/content/aboutTelemetry.css

@@ -63,7 +63,7 @@ h2 {
   font-style: italic;
 }
 
-.hang-title {
+.stack-title {
   font-size: medium;
   font-weight: bold;
   text-decoration: underline;

toolkit/content/aboutTelemetry.js

@@ -286,6 +286,26 @@ let StackRenderer = {
       this.renderStack(div, stack)
     }
   },
+
+  /**
+   * Renders the title of the stack: e.g. "Late Write #1" or
+   * "Hang Report #1 (6 seconds)".
+   *
+   * @param aFormatArgs formating args to be passed to formatStringFromName.
+   */
+  renderHeader: function StackRenderer_renderHeader(aPrefix, aFormatArgs) {
+    let div = document.getElementById(aPrefix + "-data");
+
+    let titleElement = document.createElement("span");
+    titleElement.className = "stack-title";
+
+    let titleText = bundle.formatStringFromName(
+      aPrefix + "-title", aFormatArgs, aFormatArgs.length);
+    titleElement.appendChild(document.createTextNode(titleText));
+
+    div.appendChild(titleElement);
+    div.appendChild(document.createElement("br"));
+  }
 };
 
 function SymbolicationRequest(aPrefix, aRenderHeader, aMemoryMap, aStacks) {
@@ -372,26 +392,9 @@ let ChromeHangs = {
 			       this.renderHangHeader);
   },
 
-  /**
-   * Renders the title of the hang: e.g. "Hang Report #1 (6 seconds)"
-   *
-   * @param aDiv Output div
-   * @param aIndex The number of the hang
-   * @param aDuration The duration of the hang
-   */
   renderHangHeader: function ChromeHangs_renderHangHeader(aIndex) {
-    let div = document.getElementById("chrome-hangs-data");
-
-    let titleElement = document.createElement("span");
-    titleElement.className = "hang-title";
-
     let durations = Telemetry.chromeHangs.durations;
-    let titleText = bundle.formatStringFromName(
-      "hangTitle", [aIndex + 1, durations[aIndex]], 2);
-    titleElement.appendChild(document.createTextNode(titleText));
-
-    div.appendChild(titleElement);
-    div.appendChild(document.createElement("br"));
+    StackRenderer.renderHeader("chrome-hangs", [aIndex + 1, durations[aIndex]]);
   }
 };
 
@@ -676,7 +679,8 @@ function setupListeners() {
   document.getElementById("late-writes-fetch-symbols").addEventListener("click",
     function () {
       let lateWrites = TelemetryPing.getPayload().lateWrites;
-      let req = new SymbolicationRequest("late-writes", function() {},
+      let req = new SymbolicationRequest("late-writes",
+                                         LateWritesSingleton.renderHeader,
                                          lateWrites.memoryMap,
                                          lateWrites.stacks);
       req.fetchSymbols();
@@ -748,11 +752,15 @@ function onLoad() {
 };
 
 let LateWritesSingleton = {
+  renderHeader: function LateWritesSingleton_renderHeader(aIndex) {
+    StackRenderer.renderHeader("late-writes", [aIndex + 1]);
+  },
+
   renderLateWrites: function LateWritesSingleton_renderLateWrites(lateWrites) {
     let stacks = lateWrites.stacks;
     let memoryMap = lateWrites.memoryMap;
-    function f() {}
-    StackRenderer.renderStacks('late-writes', stacks, memoryMap, f);
+    StackRenderer.renderStacks('late-writes', stacks, memoryMap,
+                               LateWritesSingleton.renderHeader);
   }
 };
 

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

@@ -20,7 +20,11 @@ slowSqlStatement = Statement
 # Note to translators:
 # - The %1$S will be replaced with the number of the hang
 # - The %2$S will be replaced with the duration of the hang
-hangTitle = Hang Report #%1$S (%2$S seconds)
+chrome-hangs-title = Hang Report #%1$S (%2$S seconds)
+
+# Note to translators:
+# - The %1$S will be replaced with the number of the hang
+late-writes-title = Late Write #%1$S
 
 stackTitle = Stack: