Bug 859042 - Show onload and DOMContentLoaded markers in the timeline, r=smaug, jsantell

devtools/client/performance/docs/markers.md

@@ -141,6 +141,14 @@ A marker generated via `console.timeStamp(label)`.
 * DOMString causeName - the label passed into `console.timeStamp(label)`
   if passed in.
 
+## document::DOMContentLoaded
+
+A marker generated when the DOMContentLoaded event is fired.
+
+## document::Load
+
+A marker generated when the document's "load" event is fired.
+
 ## Parse HTML
 
 ## Parse XML

devtools/client/performance/modules/markers.js

@@ -91,6 +91,16 @@ const TIMELINE_BLUEPRINT = {
     label: L10N.getStr("marker.label.domevent"),
     fields: Formatters.DOMEventFields,
   },
+  "document::DOMContentLoaded": {
+    group: 1,
+    colorName: "graphs-full-red",
+    label: "DOMContentLoaded"
+  },
+  "document::Load": {
+    group: 1,
+    colorName: "graphs-full-blue",
+    label: "Load"
+  },
   "Javascript": {
     group: 1,
     colorName: "graphs-yellow",

devtools/client/performance/test/browser.ini

@@ -56,6 +56,7 @@ skip-if = true # Bug 1161817
 [browser_perf-loading-02.js]
 [browser_perf-marker-details-01.js]
 skip-if = os == 'linux' # Bug 1172120
+[browser_perf-markers-docload.js]
 [browser_perf-options-01.js]
 [browser_perf-options-02.js]
 [browser_perf-options-03.js]

devtools/client/performance/test/browser_perf-markers-docload.js

@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the sidebar is updated with "DOMContentLoaded" and "load" markers.
+ */
+
+function* spawnTest() {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { PerformanceController } = panel.panelWin;
+
+  loadFrameScripts();
+
+  yield startRecording(panel);
+  ok(true, "Recording has started.");
+
+  evalInDebuggee("document.location.reload()");
+
+  yield waitUntil(() => {
+    // Wait until we get the necessary markers.
+    let markers = PerformanceController.getCurrentRecording().getMarkers();
+    if (!markers.some(m => m.name == "document::DOMContentLoaded") ||
+        !markers.some(m => m.name == "document::Load")) {
+      return false;
+    }
+
+    ok(markers.filter(m => m.name == "document::DOMContentLoaded").length == 1,
+      "There should only be one `DOMContentLoaded` marker.");
+    ok(markers.filter(m => m.name == "document::Load").length == 1,
+      "There should only be one `load` marker.");
+
+    return true;
+  });
+
+  yield stopRecording(panel);
+  ok(true, "Recording has ended.");
+
+  yield teardown(panel);
+  finish();
+}
+
+/**
+ * Takes a string `script` and evaluates it directly in the content
+ * in potentially a different process.
+ */
+function evalInDebuggee (script) {
+  let { generateUUID } = Cc['@mozilla.org/uuid-generator;1'].getService(Ci.nsIUUIDGenerator);
+  let deferred = Promise.defer();
+
+  if (!mm) {
+    throw new Error("`loadFrameScripts()` must be called when using MessageManager.");
+  }
+
+  let id = generateUUID().toString();
+  mm.sendAsyncMessage("devtools:test:eval", { script: script, id: id });
+  mm.addMessageListener("devtools:test:eval:response", handler);
+
+  function handler ({ data }) {
+    if (id !== data.id) {
+      return;
+    }
+
+    mm.removeMessageListener("devtools:test:eval:response", handler);
+    deferred.resolve(data.value);
+  }
+
+  return deferred.promise;
+}

devtools/client/themes/performance.css

@@ -549,6 +549,15 @@
  * Marker colors
  */
 
+menuitem.marker-color-graphs-full-red:before,
+.marker-color-graphs-full-red {
+  background-color: var(--theme-graphs-full-red);
+}
+menuitem.marker-color-graphs-full-blue:before,
+.marker-color-graphs-full-blue {
+  background-color: var(--theme-graphs-full-blue);
+}
+
 menuitem.marker-color-graphs-green:before,
 .marker-color-graphs-green {
   background-color: var(--theme-graphs-green);

devtools/client/themes/variables.css

@@ -51,6 +51,8 @@
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
 }
 
 :root.theme-dark {
@@ -90,4 +92,6 @@
   --theme-graphs-orange: #d96629;
   --theme-graphs-red: #eb5368;
   --theme-graphs-grey: #757873;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
 }

dom/base/nsDocument.cpp

@@ -5109,6 +5109,14 @@ nsDocument::DispatchContentLoadedEvents()
                                        NS_LITERAL_STRING("DOMContentLoaded"),
                                        true, false);
 
+  RefPtr<TimelineConsumers> timelines = TimelineConsumers::Get();
+  nsIDocShell* docShell = this->GetDocShell();
+
+  if (timelines && timelines->HasConsumer(docShell)) {
+    timelines->AddMarkerForDocShell(
+      docShell, "document::DOMContentLoaded", MarkerTracingType::TIMESTAMP);
+  }
+
   if (mTiming) {
     mTiming->NotifyDOMContentLoadedEnd(nsIDocument::GetDocumentURI());
   }

layout/base/nsDocumentViewer.cpp

@@ -990,6 +990,14 @@ nsDocumentViewer::LoadComplete(nsresult aStatus)
                           "content-document-loaded",
                           nullptr);
 
+      // Notify any devtools about the load.
+      RefPtr<TimelineConsumers> timelines = TimelineConsumers::Get();
+
+      if (timelines && timelines->HasConsumer(docShell)) {
+        timelines->AddMarkerForDocShell(
+          docShell, "document::Load", MarkerTracingType::TIMESTAMP);
+      }
+
       EventDispatcher::Dispatch(window, mPresContext, &event, nullptr, &status);
       if (timing) {
         timing->NotifyLoadEventEnd();