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 26 matching lines @@
 importScript("TimelinePresentationModel.js");
 importScript("TimelineFrameModel.js");
 importScript("TimelineEventOverview.js");
 importScript("TimelineFrameOverview.js");
 importScript("TimelineMemoryOverview.js");
 importScript("TimelinePowerGraph.js");
 importScript("TimelinePowerOverview.js");
 importScript("TimelineFlameChart.js");
 importScript("TimelineUIUtils.js");
 importScript("TimelineView.js");
+importScript("TimelineTracingView.js");
 
 /**
  * @constructor
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.TimelineModeViewDelegate}
  * @implements {WebInspector.Searchable}
  */
 WebInspector.TimelinePanel = function()
 {
     WebInspector.Panel.call(this, "timeline");
@@ skipping 25 matching lines @@
 
     this._presentationModes = [
         WebInspector.TimelinePanel.Mode.Events,
         WebInspector.TimelinePanel.Mode.Frames,
         WebInspector.TimelinePanel.Mode.Memory
     ];
     if (WebInspector.experimentsSettings.timelineFlameChart.isEnabled())
         this._presentationModes.push(WebInspector.TimelinePanel.Mode.FlameChart);
     if (Capabilities.canProfilePower)
         this._presentationModes.push(WebInspector.TimelinePanel.Mode.Power);
+    if (WebInspector.experimentsSettings.timelineTracingMode.isEnabled())
+        this._presentationModes.push(WebInspector.TimelinePanel.Mode.Tracing);
 
     this._presentationModeSetting = WebInspector.settings.createSetting("timelineOverviewMode", WebInspector.TimelinePanel.Mode.Events);
 
     this._createStatusBarItems();
 
     this._topPane = new WebInspector.SplitView(true, false);
     this._topPane.element.id = "timeline-overview-panel";
     this._topPane.show(this.element);
     this._topPane.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
     this._topPane.setResizable(false);
@@ skipping 33 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.TimelineTracingView}
+     */
+    _tracingView: function()
+    {
+        if (!this._lazyTracingView)
+            this._lazyTracingView = new WebInspector.TimelineTracingView(this);
+        return this._lazyTracingView;
+    },
+
+    /**
      * @return {!WebInspector.TimelineView}
      */
     _timelineView: function()
     {
         if (!this._lazyTimelineView)
             this._lazyTimelineView = new WebInspector.TimelineView(this, this._model);
         return this._lazyTimelineView;
     },
 
     /**
@@ skipping 19 matching lines @@
                 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(), new WebInspector.TimelinePowerGraph(this, this._model)];
                 break;
+            case WebInspector.TimelinePanel.Mode.Tracing:
+                views.overviewView = new WebInspector.TimelineFrameOverview(this._model, this._frameModel());
+                views.mainViews = [this._tracingView()];
+                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);
         return views;
@@ skipping 265 matching lines @@
         this._updateSelectionDetails();
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
     {
         this._userInitiatedRecording = userInitiated;
         this._model.startRecording();
-        for (var i = 0; i < this._presentationModes.length; ++i)
-            this._viewsForMode(this._presentationModes[i]).overviewView.timelineStarted();
-
+        for (var i = 0; i < this._presentationModes.length; ++i) {
+            var views = this._viewsForMode(this._presentationModes[i]);
+            views.overviewView.timelineStarted();
+            for (var j = 0; j < views.mainViews.length; ++j)
+                views.mainViews[j].timelineStarted();
+        }
         if (userInitiated)
             WebInspector.userMetrics.TimelineStarted.record();
     },
 
     _stopRecording: function()
     {
         this._userInitiatedRecording = false;
         this._model.stopRecording();
-        for (var i = 0; i < this._presentationModes.length; ++i)
-            this._viewsForMode(this._presentationModes[i]).overviewView.timelineStopped();
+        for (var i = 0; i < this._presentationModes.length; ++i) {
+            var views = this._viewsForMode(this._presentationModes[i]);
+            views.overviewView.timelineStopped();
+            for (var j = 0; j < views.mainViews.length; ++j)
+                views.mainViews[j].timelineStopped();
+        }
     },
 
     /**
      * @return {boolean}
      */
     _toggleTimelineButtonClicked: function()
     {
         if (this._operationInProgress)
             return true;
         if (this._recordingInProgress())
@@ skipping 404 matching lines @@
     setWindowTimes: function(startTime, endTime) {},
 
     /**
      * @param {number} width
      */
     setSidebarSize: function(width) {},
 
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      */
-    setSelectedRecord: function(record) {}
+    setSelectedRecord: function(record) {},
+
+    timelineStarted: function() {},
+
+    timelineStopped: function() {},
 }
 
 /**
  * @interface
  */
 WebInspector.TimelineModeViewDelegate = function() {}
 
 WebInspector.TimelineModeViewDelegate.prototype = {
     /**
      * @param {number} startTime
@@ skipping 138 matching lines @@
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !this._hiddenRecords[record.type];
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }