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

Source/devtools/front_end/TimelineOverviewPane.js

 /*
  * Copyright (C) 2013 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 20 matching lines @@
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineOverviewPane = function(model)
 {
     WebInspector.View.call(this);
     this.element.id = "timeline-overview-pane";
 
+    if (WebInspector.experimentsSettings.powerProfiler.isEnabled() && Capabilities.canProfilePower)
+        this.element.classList.add("power-overview");

[pfeldman, 2014/03/24 13:41:25]

You should not modify the overview, not even when the power profiler is there.

[Pan, 2014/03/25 12:30:20]

removed.

+
     this._eventDividers = [];
 
     this._model = model;
 
     this._overviewGrid = new WebInspector.OverviewGrid("timeline");
     this.element.appendChild(this._overviewGrid.element);
 
     this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
 
     model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._reset, this);
@@ skipping 94 matching lines @@
         this._update();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onWindowChanged: function(event)
     {
         if (this._muteOnWindowChanged)
             return;
+
         var windowTimes = this._overviewControl.windowTimes(this._overviewGrid.windowLeft(), this._overviewGrid.windowRight());
+        this._overviewControl.windowChanged(windowTimes.startTime, windowTimes.endTime);

[pfeldman, 2014/03/24 13:41:25]

Overview control should not be concerned about the time range selected.

[Pan, 2014/03/25 12:30:20]

Done.

         this._windowStartTime = windowTimes.startTime;
         this._windowEndTime = windowTimes.endTime;
         this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.WindowChanged, windowTimes);
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     requestWindowTimes: function(startTime, endTime)
@@ skipping 142 matching lines @@
 
     this._model = model;
     this._canvas = this.element.createChild("canvas", "fill");
     this._context = this._canvas.getContext("2d");
 }
 
 WebInspector.TimelineOverviewBase.prototype = {
     update: function() { },
     reset: function() { },
 
+    startTimeline: function() { },

[pfeldman, 2014/03/24 13:41:25]

These should be called timelineStarted and timelineStopped

[Pan, 2014/03/25 12:30:20]

Done.

+    stopTimeline: function() { },
+
+    windowChanged: function(timeLeft, timeRight) { },

[pfeldman, 2014/03/24 13:41:25]

Overview should not be concerned with the selected range change.

[Pan, 2014/03/25 06:12:31]

The intention is, I'd like to draw the energy consumption on the panel when
users choose a time window in the PowerOverviewPane. is there other approach to
achieve that?

[Pan, 2014/03/25 12:30:20]

Done.

+
     /**
      * @param {number} windowLeft
      * @param {number} windowRight
      * @return {!{startTime: number, endTime: number}}
      */
     windowTimes: function(windowLeft, windowRight)
     {
         var absoluteMin = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - absoluteMin;
         return {
@@ skipping 19 matching lines @@
     },
 
     resetCanvas: function()
     {
         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
     },
 
     __proto__: WebInspector.View.prototype
 }