Bug 1211841 - Style off the main thread markers differently, r=jsantell

devtools/client/performance/modules/widgets/marker-view.js

@@ -110,6 +110,7 @@ MarkerView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
   _displaySelf: function(document, arrowNode) {
     let targetNode = document.createElement("hbox");
     targetNode.className = "waterfall-tree-item";
+    targetNode.setAttribute("otmt", this.marker.isOffMainThread);
 
     if (this == this.root) {
       // Bounds are needed for properly positioning and scaling markers in

devtools/client/performance/test/browser_timeline-waterfall-workers.js

@@ -7,7 +7,7 @@
 
 function* spawnTest() {
   let { panel } = yield initPerformance(WORKER_URL);
-  let { PerformanceController } = panel.panelWin;
+  let { $$, $, PerformanceController } = panel.panelWin;
 
   loadFrameScripts();
 
@@ -27,26 +27,43 @@ function* spawnTest() {
       return false;
     }
 
-    testWorkerMarker(markers.find(m => m.name == "Worker"));
+    testWorkerMarkerData(markers.find(m => m.name == "Worker"));
     return true;
   });
 
   yield stopRecording(panel);
   ok(true, "Recording has ended.");
 
+  for (let node of $$(".waterfall-marker-name[value=Worker")) {
+    testWorkerMarkerUI(node.parentNode.parentNode);
+  }
+
   yield teardown(panel);
   finish();
 }
 
-function testWorkerMarker(marker) {
+function testWorkerMarkerData(marker) {
   ok(true, "Found a worker marker.");
 
   ok("start" in marker,
     "The start time is specified in the worker marker.");
   ok("end" in marker,
     "The end time is specified in the worker marker.");
+
   ok("workerOperation" in marker,
     "The worker operation is specified in the worker marker.");
+
+  ok("processType" in marker,
+    "The process type is specified in the worker marker.");
+  ok("isOffMainThread" in marker,
+    "The thread origin is specified in the worker marker.");
+}
+
+function testWorkerMarkerUI(node) {
+  is(node.className, "waterfall-tree-item",
+    "The marker node has the correct class name.");
+  ok(node.hasAttribute("otmt"),
+    "The marker node specifies if it is off the main thread or not.");
 }
 
 /**

devtools/client/themes/performance.css

@@ -505,6 +505,17 @@
   -moz-margin-end: -14px;
 }
 
+/**
+ * OTMT markers
+ */
+
+.waterfall-tree-item[otmt=true] .waterfall-marker-bullet,
+.waterfall-tree-item[otmt=true] .waterfall-marker-bar {
+  background-color: transparent;
+  border-width: 1px;
+  border-style: solid;
+}
+
 /**
  * Marker details view
  */
@@ -552,43 +563,53 @@
 menuitem.marker-color-graphs-full-red:before,
 .marker-color-graphs-full-red {
   background-color: var(--theme-graphs-full-red);
+  border-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);
+  border-color: var(--theme-graphs-full-blue);
 }
 
 menuitem.marker-color-graphs-green:before,
 .marker-color-graphs-green {
   background-color: var(--theme-graphs-green);
+  border-color: var(--theme-graphs-green);
 }
 menuitem.marker-color-graphs-blue:before,
 .marker-color-graphs-blue {
   background-color: var(--theme-graphs-blue);
+  border-color: var(--theme-graphs-blue);
 }
 menuitem.marker-color-graphs-bluegrey:before,
 .marker-color-graphs-bluegrey {
   background-color: var(--theme-graphs-bluegrey);
+  border-color: var(--theme-graphs-bluegrey);
 }
 menuitem.marker-color-graphs-purple:before,
 .marker-color-graphs-purple {
   background-color: var(--theme-graphs-purple);
+  border-color: var(--theme-graphs-purple);
 }
 menuitem.marker-color-graphs-yellow:before,
 .marker-color-graphs-yellow {
   background-color: var(--theme-graphs-yellow);
+  border-color: var(--theme-graphs-yellow);
 }
 menuitem.marker-color-graphs-orange:before,
 .marker-color-graphs-orange {
   background-color: var(--theme-graphs-orange);
+  border-color: var(--theme-graphs-orange);
 }
 menuitem.marker-color-graphs-red:before,
 .marker-color-graphs-red {
   background-color: var(--theme-graphs-red);
+  border-color: var(--theme-graphs-red);
 }
 menuitem.marker-color-graphs-grey:before,
 .marker-color-graphs-grey{
   background-color: var(--theme-graphs-grey);
+  border-color: var(--theme-graphs-grey);
 }
 
 /**

docshell/base/timeline/AbstractTimelineMarker.cpp

@@ -75,4 +75,16 @@ AbstractTimelineMarker::SetCustomTime(DOMHighResTimeStamp aTime)
   mTime = aTime;
 }
 
+void
+AbstractTimelineMarker::SetProcessType(GeckoProcessType aProcessType)
+{
+  mProcessType = aProcessType;
+}
+
+void
+AbstractTimelineMarker::SetOffMainThread(bool aIsOffMainThread)
+{
+  mIsOffMainThread = aIsOffMainThread;
+}
+
 } // namespace mozilla

docshell/base/timeline/AbstractTimelineMarker.h

@@ -9,6 +9,7 @@
 
 #include "TimelineMarkerEnums.h" // for MarkerTracingType
 #include "nsDOMNavigationTiming.h" // for DOMHighResTimeStamp
+#include "nsXULAppAPI.h" // for GeckoProcessType
 #include "mozilla/UniquePtr.h"
 
 struct JSContext;
@@ -63,6 +64,8 @@ protected:
   void SetCurrentTime();
   void SetCustomTime(const TimeStamp& aTime);
   void SetCustomTime(DOMHighResTimeStamp aTime);
+  void SetProcessType(GeckoProcessType aProcessType);
+  void SetOffMainThread(bool aIsOffMainThread);
 };
 
 } // namespace mozilla

docshell/base/timeline/CompositeTimelineMarker.h

@@ -0,0 +1,33 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef mozilla_CompositeTimelineMarker_h_
+#define mozilla_CompositeTimelineMarker_h_
+
+#include "TimelineMarker.h"
+#include "mozilla/dom/ProfileTimelineMarkerBinding.h"
+
+namespace mozilla {
+
+class CompositeTimelineMarker : public TimelineMarker
+{
+public:
+  explicit CompositeTimelineMarker(const TimeStamp& aTime,
+                                   MarkerTracingType aTracingType)
+    : TimelineMarker("Composite", aTime, aTracingType)
+  {
+    // Even though these markers end up being created on the main thread in the
+    // content or chrome processes, they actually trace down code in the
+    // compositor parent process. All the information for creating these markers
+    // is sent along via IPC to an nsView when a composite finishes.
+    // Mark this as 'off the main thread' to style it differently in frontends.
+    SetOffMainThread(true);
+  }
+};
+
+} // namespace mozilla
+
+#endif // mozilla_CompositeTimelineMarker_h_

docshell/base/timeline/moz.build

@@ -8,6 +8,7 @@ EXPORTS.mozilla += [
     'AbstractTimelineMarker.h',
     'AutoGlobalTimelineMarker.h',
     'AutoTimelineMarker.h',
+    'CompositeTimelineMarker.h',
     'ConsoleTimelineMarker.h',
     'EventTimelineMarker.h',
     'JavascriptTimelineMarker.h',

view/nsView.cpp

@@ -19,6 +19,7 @@
 #include "nsIWidgetListener.h"
 #include "nsContentUtils.h" // for nsAutoScriptBlocker
 #include "mozilla/TimelineConsumers.h"
+#include "mozilla/CompositeTimelineMarker.h"
 
 using namespace mozilla;
 
@@ -1098,9 +1099,9 @@ nsView::DidCompositeWindow(const TimeStamp& aCompositeStart,
 
     if (timelines && timelines->HasConsumer(docShell)) {
       timelines->AddMarkerForDocShell(docShell,
-        "Composite", aCompositeStart, MarkerTracingType::START);
+        MakeUnique<CompositeTimelineMarker>(aCompositeStart, MarkerTracingType::START));
       timelines->AddMarkerForDocShell(docShell,
-        "Composite", aCompositeEnd, MarkerTracingType::END);
+        MakeUnique<CompositeTimelineMarker>(aCompositeEnd, MarkerTracingType::END));
     }
   }
 }