[DevTools] Add power profiler and power overview in timeline panel.

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 21 matching lines @@
 importScript("CountersGraph.js");
 importScript("DOMCountersGraph.js");
 importScript("PieChart.js");
 importScript("TimelineModel.js");
 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");
 
 /**
  * @constructor
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.TimelineModeViewDelegate}
  * @implements {WebInspector.Searchable}
  */
@@ skipping 69 matching lines @@
     this._dockSideChanged();
 
     this._selectPresentationMode(this._presentationModeSetting.get());
     this._detailsSplitView.show(this.element);
 }
 
 WebInspector.TimelinePanel.Mode = {
     Events: "Events",
     Frames: "Frames",
     Memory: "Memory",
-    FlameChart: "FlameChart"
+    FlameChart: "FlameChart",
+    Power: "Power"
 };
 
 // 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 115 matching lines @@
                 views.mainViews = [this._timelineView()];
                 break;
             case WebInspector.TimelinePanel.Mode.Memory:
                 views.overviewView = new WebInspector.TimelineMemoryOverview(this._model);
                 views.mainViews = [this._timelineView(), new WebInspector.DOMCountersGraph(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()];
+                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;
     },
 
     _createPresentationSelector: function()
     {
         this._viewsMap = {};
 
         var topPaneSidebarElement = this._topPane.sidebarElement();
         topPaneSidebarElement.id = "timeline-overview-sidebar";
 
         var overviewTreeElement = topPaneSidebarElement.createChild("ol", "sidebar-tree vbox");
         var topPaneSidebarTree = new TreeOutline(overviewTreeElement);
 
         this._overviewItems = {};
         for (var mode in WebInspector.TimelinePanel.Mode) {
-            if (mode === WebInspector.TimelinePanel.Mode.FlameChart && !WebInspector.experimentsSettings.timelineFlameChart.isEnabled())
+            if (mode === WebInspector.TimelinePanel.Mode.FlameChart && !WebInspector.experimentsSettings.timelineFlameChart.isEnabled() ||
+                mode === WebInspector.TimelinePanel.Mode.Power && !Capabilities.canProfilePower)
                 continue;
             this._overviewItems[mode] = new WebInspector.SidebarTreeElement("timeline-overview-sidebar-" + mode.toLowerCase(), WebInspector.UIString(mode));
             var item = this._overviewItems[mode];
             item.onselect = this._onModeChanged.bind(this, mode);
             topPaneSidebarTree.appendChild(item);
         }
     },
 
     _createStatusBarItems: function()
     {
@@ skipping 246 matching lines @@
         this._updateSelectionDetails();
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _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();
     },
 
     _stopRecording: function()
     {
         this._userInitiatedRecording = false;
         this._model.stopRecording();
+        for (var mode in WebInspector.TimelinePanel.Mode)
+            this._viewsForMode(mode).overviewView.timelineStopped();
     },
 
     /**
      * @return {boolean}
      */
     _toggleTimelineButtonClicked: function()
     {
         if (this._operationInProgress)
             return true;
         if (this._recordingInProgress())
@@ skipping 534 matching lines @@
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {boolean}
      */
     accept: function(record)
     {
         return !this._hiddenRecords[record.type];
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }