Timeline Trace viewer prototype

Source/devtools/front_end/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 25 matching lines @@
 importScript("TimelineOverviewPane.js");
 importScript("TimelinePresentationModel.js");
 importScript("TimelineFrameModel.js");
 importScript("TimelineEventOverview.js");
 importScript("TimelineFrameOverview.js");
 importScript("TimelineMemoryOverview.js");
 importScript("TimelinePowerOverview.js");
 importScript("TimelineFlameChart.js");
 importScript("TimelineUIUtils.js");
 importScript("TimelineView.js");
+importScript("TimelineTraceView.js");
 
 /**
  * @constructor
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.TimelineModeViewDelegate}
  * @implements {WebInspector.Searchable}
  */
 WebInspector.TimelinePanel = function()
 {
     WebInspector.Panel.call(this, "timeline");
@@ skipping 67 matching lines @@
 
     this._selectPresentationMode(this._presentationModeSetting.get());
     this._detailsSplitView.show(this.element);
 }
 
 WebInspector.TimelinePanel.Mode = {
     Events: "Events",
     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.
 WebInspector.TimelinePanel.rowHeight = 18;
 WebInspector.TimelinePanel.headerHeight = 20;
 
 WebInspector.TimelinePanel.durationFilterPresetsMs = [0, 1, 15];
 
 WebInspector.TimelinePanel.prototype = {
     wasShown: function()
@@ skipping 80 matching lines @@
      * @return {!WebInspector.TimelineFrameModel}
      */
     _frameModel: function()
     {
         if (!this._lazyFrameModel)
             this._lazyFrameModel = new WebInspector.TimelineFrameModel(this._model);
         return this._lazyFrameModel;
     },
 
     /**
+     * @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()
     {
         if (!this._lazyTimelineView)
             this._lazyTimelineView = new WebInspector.TimelineView(this, this._model);
         return this._lazyTimelineView;
     },
 
     /**
@@ skipping 18 matching lines @@
                 views.overviewView = new WebInspector.TimelineMemoryOverview(this._model);
                 views.mainViews = [this._timelineView(), new WebInspector.MemoryCountersGraph(this, this._model)];
                 break;
             case WebInspector.TimelinePanel.Mode.FlameChart:
                 views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
                 views.mainViews = [new WebInspector.TimelineFlameChart(this, this._model, this._frameModel())];
                 break;
             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);
             }
             for (var i = 0; i < views.mainViews.length; ++i)
                 views.mainViews[i].addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
             this._viewsMap[mode] = views;
         }
 
         this._timelineView().setFrameModel(mode === WebInspector.TimelinePanel.Mode.Frames ? this._frameModel() : null);
@@ skipping 278 matching lines @@
      */
     _startRecording: function(userInitiated)
     {
         this._userInitiatedRecording = userInitiated;
         this._model.startRecording(true);
         for (var mode in WebInspector.TimelinePanel.Mode)
             this._viewsForMode(mode).overviewView.timelineStarted();
 
         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()
     {
         this._userInitiatedRecording = false;
         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;
+        }
     },
 
     /**
      * @return {boolean}
      */
     _toggleTimelineButtonClicked: function()
     {
         if (this._operationInProgress)
             return true;
         if (this._recordingInProgress())
@@ skipping 12 matching lines @@
     {
         this._model.reset();
     },
 
     _onRecordsCleared: function()
     {
         this.requestWindowTimes(0, Infinity);
         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();
         this._updateSelectionDetails();
     },
 
     _onRecordingStarted: function()
     {
         this.toggleTimelineButton.title = WebInspector.UIString("Stop");
         this.toggleTimelineButton.toggled = true;
@@ skipping 22 matching lines @@
     {
         if (this._lazyFrameModel)
             this._lazyFrameModel.addRecord(record);
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].addRecord(record);
         this._overviewPane.addRecord(record);
         this._updateSearchHighlight(false, true);
     },
 
     /**
+      * @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)
     {
         if (this._operationInProgress || this._userInitiatedRecording || !this.isShowing())
             return;
         this._startRecording(false);
     },
 
     /**
@@ skipping 460 matching lines @@
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !this._hiddenRecords[record.type];
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }