Draw marker events on Timeline flame chart

Source/devtools/front_end/timeline/TracingTimelineUIUtils.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineUIUtils}
  */
 WebInspector.TracingTimelineUIUtils = function()
 {
@@ skipping 194 matching lines @@
     eventStyles[recordTypes.RequestMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Request Main Thread Frame"), categories["rendering"], true);
     eventStyles[recordTypes.BeginFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start"), categories["rendering"], true);
     eventStyles[recordTypes.BeginMainThreadFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Frame Start (main thread)"), categories["rendering"], true);
     eventStyles[recordTypes.DrawFrame] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Draw Frame"), categories["rendering"], true);
     eventStyles[recordTypes.ScheduleStyleRecalculation] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Schedule Style Recalculation"), categories["rendering"], true);
     eventStyles[recordTypes.RecalculateStyles] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Recalculate Style"), categories["rendering"]);
     eventStyles[recordTypes.InvalidateLayout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Invalidate Layout"), categories["rendering"], true);
     eventStyles[recordTypes.Layout] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Layout"), categories["rendering"]);
     eventStyles[recordTypes.PaintSetup] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint Setup"), categories["painting"]);
     eventStyles[recordTypes.UpdateLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Update Layer"), categories["painting"], true);
-    eventStyles[recordTypes.UpdateLayerTree] = { title: WebInspector.UIString("Update Layer Tree"), category: categories["rendering"] };
+    eventStyles[recordTypes.UpdateLayerTree] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Update Layer Tree"), categories["rendering"], true);
     eventStyles[recordTypes.Paint] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.Rasterize] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.RasterTask] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Paint"), categories["painting"]);
     eventStyles[recordTypes.ScrollLayer] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Scroll"), categories["rendering"]);
     eventStyles[recordTypes.CompositeLayers] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Composite Layers"), categories["painting"]);
     eventStyles[recordTypes.ParseHTML] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Parse HTML"), categories["loading"]);
     eventStyles[recordTypes.TimerInstall] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Install Timer"), categories["scripting"]);
     eventStyles[recordTypes.TimerRemove] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Remove Timer"), categories["scripting"]);
     eventStyles[recordTypes.TimerFire] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Timer Fired"), categories["scripting"]);
     eventStyles[recordTypes.XHRReadyStateChange] = new WebInspector.TimelineRecordStyle(WebInspector.UIString("XHR Ready State Change"), categories["scripting"]);
@@ skipping 50 matching lines @@
     var eventStyles = WebInspector.TracingTimelineUIUtils._initEventStyles();
     var result = eventStyles[name];
     if (!result) {
         result = new WebInspector.TimelineRecordStyle(WebInspector.UIString("Unknown: %s", name),  WebInspector.TimelineUIUtils.categories()["other"]);
         eventStyles[name] = result;
     }
     return result;
 }
 
 /**
+ * @param {string} eventName
+ * @return {string}
+ */
+WebInspector.TimelineUIUtilsImpl.markerEventColor = function(eventName)
+{
+    var red = "rgb(255, 0, 0)";
+    var blue = "rgb(0, 0, 255)";
+    var orange = "rgb(255, 178, 23)";
+    var green = "rgb(0, 130, 0)";
+
+    var recordTypes = WebInspector.TracingTimelineModel.RecordType;
+    if (eventName === recordTypes.MarkDOMContent)

[alph, 2014/07/21 12:05:30]

switch?

[yurys, 2014/07/21 13:49:48]

Done.

+        return blue;
+    if (eventName === recordTypes.MarkLoad)
+        return red;
+    if (eventName === recordTypes.MarkFirstPaint)
+        return green;
+    if (eventName === recordTypes.TimeStamp)
+        return orange;
+    //else if (eventName === recordTypes.BeginFrame)

[alph, 2014/07/21 12:05:30]

nuke?

[yurys, 2014/07/21 13:49:48]

Done.

+    return green;
+}
+
+/**
  * @param {!WebInspector.TracingTimelineModel.TraceEventRecord} record
  * @return {string}
  */
 WebInspector.TracingTimelineUIUtils._recordTitle = function(record)
 {
     var event = record.traceEvent();
     if (event.name === WebInspector.TracingTimelineModel.RecordType.TimeStamp)
         return event.args.data["message"];
     var title = WebInspector.TracingTimelineUIUtils.eventStyle(event).title;
     if (WebInspector.TracingTimelineUIUtils.isEventDivider(record)) {
         var startTime = Number.millisToString(record.startTime() - record.timelineModel().minimumRecordTime());
         return WebInspector.UIString("%s at %s", title, startTime);
     }
     return title;
 }
 
 /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @param {!WebInspector.TracingTimelineModel} model
+ * @return {string}
+ */
+WebInspector.TracingTimelineUIUtils.eventTitle = function(event, model)
+{
+    if (event.name === WebInspector.TracingTimelineModel.RecordType.TimeStamp)
+        return event.args.data["message"];
+    var title = WebInspector.TracingTimelineUIUtils.eventStyle(event).title;
+    if (WebInspector.TracingTimelineUIUtils.isMarkerEvent(event)) {
+        var startTime = Number.millisToString(event.startTime - model.minimumRecordTime());
+        return WebInspector.UIString("%s at %s", title, startTime);
+    }
+    return title;
+}
+
+/**
  * @param {!WebInspector.TimelineModel.Record} record
  * @return {boolean}
  */
 WebInspector.TracingTimelineUIUtils.isEventDivider = function(record)
 {
     var recordTypes = WebInspector.TracingTimelineModel.RecordType;
     if (record.type() === recordTypes.TimeStamp)
         return true;
     if (record.type() === recordTypes.MarkFirstPaint)
         return true;
     if (record.type() === recordTypes.MarkDOMContent || record.type() === recordTypes.MarkLoad)
         return record.data()["isMainFrame"];
     return false;
 }
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
+ * @return {boolean}
+ */
+WebInspector.TracingTimelineUIUtils.isMarkerEvent = function(event)
+{
+    var recordTypes = WebInspector.TracingTimelineModel.RecordType;
+    var name = event.name;
+    if (name === recordTypes.TimeStamp)
+        return true;
+    if (name === recordTypes.MarkFirstPaint)
+        return true;
+    if (name === recordTypes.MarkDOMContent || name === recordTypes.MarkLoad)
+        return event.args.data["isMainFrame"];
+    return false;
+}
+
+/**
+ * @param {!WebInspector.TracingModel.Event} event
  * @param {!WebInspector.Linkifier} linkifier
  * @return {?Node}
  */
 WebInspector.TracingTimelineUIUtils.buildDetailsNodeForTraceEvent = function(event, linkifier)
 {
     var recordType = WebInspector.TracingTimelineModel.RecordType;
     var target = event.thread.target();
     var details;
     var detailsText;
     var eventData = event.args.data;
@@ skipping 454 matching lines @@
     return result;
 }
 
 /**
  * @return {!WebInspector.TracingTimelineModel.Filter}
  */
 WebInspector.TracingTimelineUIUtils.hiddenEventsFilter = function()
 {
     return new WebInspector.TracingTimelineModel.InclusiveEventNameFilter(WebInspector.TracingTimelineUIUtils._visibleTypes());
 }