Bug 1143004 - markers from console.timeStamp() should be rendered in the performance tool's timeline. r=vp

browser/devtools/performance/test/browser.ini

@@ -13,6 +13,7 @@ support-files =
 [browser_perf-aaa-run-first-leaktest.js]
 [browser_markers-gc.js]
 [browser_markers-parse-html.js]
+[browser_markers-timestamp.js]
 [browser_perf-allocations-to-samples.js]
 [browser_perf-compatibility-01.js]
 [browser_perf-compatibility-02.js]

browser/devtools/performance/test/browser_markers-timestamp.js

@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that we get a "TimeStamp" marker.
+ */
+
+const TIME_CLOSE_TO = 10000;
+
+function* spawnTest () {
+  let { target, front } = yield initBackend(SIMPLE_URL);
+  loadFrameScripts();
+  let markers = [];
+
+  front.on("timeline-data", handler);
+  let model = yield front.startRecording({ withTicks: true });
+
+  consoleMethod("timeStamp");
+  consoleMethod("timeStamp", "myLabel");
+  yield waitUntil(() => { return markers.length === 2; }, 100);
+
+  front.off("timeline-data", handler);
+  yield front.stopRecording(model);
+
+  info(`Got ${markers.length} markers.`);
+
+  let maxMarkerTime = model._timelineStartTime + model.getDuration() + TIME_CLOSE_TO;
+
+  ok(markers.every(({name}) => name === "TimeStamp"), "All markers found are TimeStamp markers");
+  ok(markers.length === 2, "found 2 TimeStamp markers");
+  ok(markers.every(({start}) => typeof start === "number" && start > 0 && start < maxMarkerTime),
+    "All markers have a start time between the valid range.");
+  ok(markers.every(({end}) => typeof end === "number" && end > 0 && end < maxMarkerTime),
+    "All markers have an end time between the valid range.");
+  is(markers[0].causeName, void 0, "Unlabeled timestamps have an empty causeName");
+  is(markers[1].causeName, "myLabel", "Labeled timestamps have correct causeName");
+
+  yield removeTab(target.tab);
+  finish();
+
+  function handler (_, name, m) {
+    if (name === "markers") {
+      markers = markers.concat(m.filter(marker => marker.name === "TimeStamp"));
+    }
+  }
+}

browser/devtools/shared/timeline/global.js

@@ -64,15 +64,20 @@ const TIMELINE_BLUEPRINT = {
     colorName: "highlight-lightorange",
     label: L10N.getStr("timeline.label.parseXML")
   },
+  "GarbageCollection": {
+    group: 1,
+    colorName: "highlight-red",
+    label: L10N.getStr("timeline.label.garbageCollection")
+  },
   "ConsoleTime": {
     group: 2,
     colorName: "highlight-bluegrey",
     label: L10N.getStr("timeline.label.consoleTime")
   },
-  "GarbageCollection": {
-    group: 1,
-    colorName: "highlight-red",
-    label: L10N.getStr("timeline.label.garbageCollection")
+  "TimeStamp": {
+    group: 2,
+    colorName: "highlight-purple",
+    label: L10N.getStr("timeline.label.timestamp")
   },
 };
 

browser/locales/en-US/chrome/browser/devtools/timeline.properties

@@ -45,6 +45,7 @@ timeline.label.parseXML=Parse XML
 timeline.label.domevent=DOM Event
 timeline.label.consoleTime=Console
 timeline.label.garbageCollection=GC Event
+timeline.label.timestamp=Timestamp
 
 # LOCALIZATION NOTE (graphs.memory):
 # This string is displayed in the memory graph of the Performance tool,

browser/themes/shared/devtools/performance.inc.css

@@ -503,7 +503,12 @@
 .waterfall-marker-bullet.highlight-red {
   background-color: var(--theme-highlight-red);
 }
-
+#performance-filter-menupopup > menuitem.highlight-purple:before,
+.marker-details-bullet.highlight-purple,
+.waterfall-marker-bar.highlight-purple,
+.waterfall-marker-bullet.highlight-purple {
+  background-color: var(--theme-highlight-purple);
+}
 
 #waterfall-details > * {
   padding-top: 3px;