Bug 1171539 - ConsoleTime markers should render endStacks. r=vp

browser/devtools/performance/modules/logic/marker-utils.js

@@ -175,6 +175,7 @@ const DOM = {
    */
   buildNameValueLabel: function (doc, field, value) {
     let hbox = doc.createElement("hbox");
+    hbox.className = "marker-details-labelcontainer";
     let labelName = doc.createElement("label");
     let labelValue = doc.createElement("label");
     labelName.className = "plain marker-details-labelname";
@@ -201,6 +202,8 @@ const DOM = {
     let labelName = doc.createElement("label");
     labelName.className = "plain marker-details-labelname";
     labelName.setAttribute("value", L10N.getStr(`timeline.markerDetail.${type}`));
+    container.setAttribute("type", type);
+    container.className = "marker-details-stack";
     container.appendChild(labelName);
 
     let wasAsyncParent = false;

browser/devtools/performance/modules/widgets/marker-details.js

@@ -88,6 +88,12 @@ MarkerDetails.prototype = {
         frameIndex: marker.stack, frames, type
       }));
     }
+    if (marker.endStack) {
+      let type = "endStack";
+      elements.push(MarkerUtils.DOM.buildStackTrace(this._document, {
+        frameIndex: marker.endStack, frames, type
+      }));
+    }
 
     elements.forEach(el => this._parent.appendChild(el));
   },

browser/devtools/performance/test/browser.ini

@@ -4,6 +4,7 @@ subsuite = devtools
 support-files =
   doc_force_gc.html
   doc_innerHTML.html
+  doc_markers.html
   doc_simple-test.html
   head.js
 
@@ -69,6 +70,7 @@ support-files =
 [browser_perf-jit-model-02.js]
 [browser_perf-loading-01.js]
 [browser_perf-loading-02.js]
+[browser_perf-marker-details-01.js]
 [browser_perf-options-01.js]
 [browser_perf-options-02.js]
 [browser_perf-options-03.js]

browser/devtools/performance/test/browser_perf-marker-details-01.js

@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the Marker Details view renders all properties expected
+ * for each marker.
+ */
+
+function* spawnTest() {
+  let { target, panel } = yield initPerformance(MARKERS_URL);
+  let { $, $$, EVENTS, PerformanceController, OverviewView, WaterfallView } = panel.panelWin;
+  let { L10N } = devtools.require("devtools/performance/global");
+
+  // Hijack the markers massaging part of creating the waterfall view,
+  // to prevent collapsing markers and allowing this test to verify
+  // everything individually. A better solution would be to just expand
+  // all markers first and then skip the meta nodes, but I'm lazy.
+  WaterfallView._prepareWaterfallTree = markers => {
+    return { submarkers: markers };
+  };
+
+  const MARKER_TYPES = [
+    "Styles", "Reflow", "Paint", "ConsoleTime", "TimeStamp"
+  ];
+
+  yield startRecording(panel);
+  yield waitUntil(() => {
+    // Wait until we get 3 different markers.
+    let markers = PerformanceController.getCurrentRecording().getMarkers();
+    return MARKER_TYPES.every(type => markers.some(m => m.name === type));
+  });
+  yield stopRecording(panel);
+
+  // Select everything
+  let timeline = OverviewView.graphs.get("timeline");
+  let rerendered = WaterfallView.once(EVENTS.WATERFALL_RENDERED);
+  timeline.setSelection({ start: 0, end: timeline.width });
+  yield rerendered;
+
+  let bars = $$(".waterfall-marker-bar");
+  let markers = PerformanceController.getCurrentRecording().getMarkers();
+
+  ok(bars.length >= MARKER_TYPES.length, `Got at least ${MARKER_TYPES.length} markers (1)`);
+  ok(markers.length >= MARKER_TYPES.length, `Got at least ${MARKER_TYPES.length} markers (2)`);
+
+  const tests = {
+    ConsoleTime: function (marker) {
+      shouldHaveLabel($, L10N.getStr("timeline.markerDetail.consoleTimerName"), "!!!", marker);
+      shouldHaveStack($, "startStack", marker);
+      shouldHaveStack($, "endStack", marker);
+      return true;
+    },
+    TimeStamp: function (marker) {
+      shouldHaveLabel($, "Label:", "go", marker);
+      shouldHaveStack($, "stack", marker);
+      return true;
+    },
+    Styles: function (marker) {
+      if (marker.restyleHint) {
+        shouldHaveLabel($, "Restyle Hint:", marker.restyleHint.replace(/eRestyle_/g, ""), marker);
+      }
+      if (marker.stack) {
+        shouldHaveStack($, "stack", marker);
+        return true;
+      }
+    },
+    Reflow: function (marker) {
+      if (marker.stack) {
+        shouldHaveStack($, "stack", marker);
+        return true;
+      }
+    }
+  };
+
+  // Keep track of all marker tests that are finished so we only
+  // run through each marker test once, so we don't spam 500 redundant
+  // tests.
+  let testsDone = [];
+  let TOTAL_TESTS = 4;
+
+  for (let i = 0; i < bars.length; i++) {
+    let bar = bars[i];
+    let m = markers[i];
+    EventUtils.sendMouseEvent({ type: "mousedown" }, bar);
+
+    if (testsDone.indexOf(m.name) === -1 && tests[m.name]) {
+      let fullTestComplete = tests[m.name](m);
+      if (fullTestComplete) {
+        testsDone.push(m.name);
+      }
+    } else {
+      info(`TODO: Need to add marker details tests for ${m.name}`);
+    }
+
+    if (testsDone.length === TOTAL_TESTS) {
+      break;
+    }
+  }
+
+  yield teardown(panel);
+  finish();
+}
+
+function shouldHaveStack ($, type, marker) {
+  ok($(`#waterfall-details .marker-details-stack[type=${type}]`), `${marker.name} has a stack: ${type}`);
+}
+
+function shouldHaveLabel ($, name, value, marker) {
+  info(name);
+  let $name = $(`#waterfall-details .marker-details-labelcontainer .marker-details-labelname[value="${name}"]`);
+  let $value = $name.parentNode.querySelector(".marker-details-labelvalue");
+  is($value.getAttribute("value"), value, `${marker.name} has correct label for ${name}:${value}`);
+}

browser/devtools/performance/test/doc_markers.html

@@ -0,0 +1,35 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Performance tool marker generation</title>
+  </head>
+
+  <body>
+    <script type="text/javascript">
+      var x = 1;
+      function test() {
+        var i = 10;
+        // generate sync styles and reflows
+        while (--i) {
+            var h = document.body.clientHeight;
+            document.body.style.height = (200 + i) + "px";
+            document.body.style.borderTop = i + "px solid red"; // paint
+        }
+        console.time("!!!");
+        test2();
+      }
+      function test2() {
+        console.timeStamp("go");
+        console.timeEnd("!!!");
+      }
+
+      // Prevent this script from being garbage collected.
+      window.setInterval(test, 1);
+    </script>
+  </body>
+
+</html>

browser/devtools/performance/test/head.js

@@ -22,6 +22,7 @@ let mm = null;
 const FRAME_SCRIPT_UTILS_URL = "chrome://browser/content/devtools/frame-script-utils.js"
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/performance/test/";
 const SIMPLE_URL = EXAMPLE_URL + "doc_simple-test.html";
+const MARKERS_URL = EXAMPLE_URL + "doc_markers.html";
 
 const MEMORY_SAMPLE_PROB_PREF = "devtools.performance.memory.sample-probability";
 const MEMORY_MAX_LOG_LEN_PREF = "devtools.performance.memory.max-log-length";