Timeline Trace viewer prototype

Source/devtools/front_end/TimelinePanel.js

Index: Source/devtools/front_end/TimelinePanel.js
diff --git a/Source/devtools/front_end/TimelinePanel.js b/Source/devtools/front_end/TimelinePanel.js
index ac004b53454ac763ecafb7303235b756d6a08c24..8da7e2a58d10c19f4f3862d2cf5871688844dfe7 100644
--- a/Source/devtools/front_end/TimelinePanel.js
+++ b/Source/devtools/front_end/TimelinePanel.js
@@ -43,6 +43,7 @@ importScript("TimelinePowerOverview.js");
 importScript("TimelineFlameChart.js");
 importScript("TimelineUIUtils.js");
 importScript("TimelineView.js");
+importScript("TimelineTraceView.js");
 
 /**
  * @constructor
@@ -130,7 +131,8 @@ WebInspector.TimelinePanel.Mode = {
     Frames: "Frames",
     Memory: "Memory",
     FlameChart: "FlameChart",
-    Power: "Power"
+    Power: "Power",
+    Tracing: "Tracing"
 };
 
 // Define row and header height, should be in sync with styles for timeline graphs.
@@ -231,6 +233,26 @@ WebInspector.TimelinePanel.prototype = {
     },
 
     /**
+     * @return {!WebInspector.TracingModel}
+     */
+    _tracingModel: function()
+    {
+        if (!this._lazyTracingModel)

[pfeldman, 2014/03/26 18:32:09]

We need to figure out the instrumentation vs current view problem. We might end
forcing user to stick with the view after recording.

+            this._lazyTracingModel = new WebInspector.TracingModel();
+        return this._lazyTracingModel;
+    },
+
+    /**
+     * @return {!WebInspector.TimelineTraceView}
+     */
+    _traceView: function()
+    {
+        if (!this._lazyTraceView)
+            this._lazyTraceView = new WebInspector.TimelineTraceView(this, this._tracingModel());
+        return this._lazyTraceView;
+    },
+
+    /**
      * @return {!WebInspector.TimelineView}
      */
     _timelineView: function()
@@ -269,6 +291,9 @@ WebInspector.TimelinePanel.prototype = {
             case WebInspector.TimelinePanel.Mode.Power:
                 views.overviewView = new WebInspector.TimelinePowerOverview(this._model);
                 views.mainViews = [this._timelineView()];
+            case WebInspector.TimelinePanel.Mode.Tracing:
+                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
+                views.mainViews = [this._traceView()];
                 break;
             default:
                 console.assert(false, "Unknown mode: " + mode);
@@ -567,6 +592,13 @@ WebInspector.TimelinePanel.prototype = {
 
         if (userInitiated)
             WebInspector.userMetrics.TimelineStarted.record();
+        if (this._presentationModeSetting.get() === WebInspector.TimelinePanel.Mode.Tracing) {
+            if (!this._boundTraceEventListener)
+                this._boundTraceEventListener = this._onTraceEventsCollected.bind(this);
+            this._recordingTrace = true;
+            WebInspector.tracingAgent.addEventListener(WebInspector.TracingAgent.Events.EventsCollected, this._boundTraceEventListener);
+            WebInspector.tracingAgent.start("", "");

[pfeldman, 2014/03/26 18:32:09]

For better modularity, you should introduce recordingStarted / Stopped on the
TimelineView or set a listener from your module.

[caseq, 2014/03/28 17:13:41]

Done, though I named it timelineStarted/Stopped sine we've already introduced
one for the overview.

+        }
     },
 
     _stopRecording: function()
@@ -575,6 +607,19 @@ WebInspector.TimelinePanel.prototype = {
         this._model.stopRecording();
         for (var mode in WebInspector.TimelinePanel.Mode)
             this._viewsForMode(mode).overviewView.timelineStopped();
+
+        /**
+         * @this {WebInspector.TimelinePanel}
+         */
+        function onTraceDataComplete()
+        {
+            WebInspector.tracingAgent.removeEventListener(WebInspector.TracingAgent.Events.EventsCollected, this._boundTraceEventListener);
+            this._traceView().refreshRecords(this._textFilter._regex);
+        }
+        if (this._recordingTrace) {
+            WebInspector.tracingAgent.stop(onTraceDataComplete.bind(this));
+            this._recordingTrace = false;
+        }
     },
 
     /**
@@ -607,6 +652,8 @@ WebInspector.TimelinePanel.prototype = {
         delete this._selectedRecord;
         if (this._lazyFrameModel)
             this._lazyFrameModel.reset();
+        if (this._lazyTraceModel)
+            this._lazyTraceModel.reset();
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].reset();
         this._overviewControl.reset();
@@ -649,6 +696,16 @@ WebInspector.TimelinePanel.prototype = {
     },
 
     /**
+      * @param {!WebInspector.Event} event
+     */
+    _onTraceEventsCollected: function(event)
+    {
+        var events = /** @type {!Array.<!WebInspector.TracingAgent.Event>} */ (event.data);
+        if (this._lazyTracingModel)
+            this._lazyTracingModel.addEvents(events);
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _willReloadPage: function(event)