[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 134 matching lines @@
     // Create grid in the records main area.
     this._gridContainer = new WebInspector.ViewWithResizeCallback(this._onViewportResize.bind(this));
     this._gridContainer.element.addStyleClass("fill");
     this._gridContainer.element.id = "resources-container-content";
     this._gridContainer.show(this._sidebarView.mainElement);
     this._timelineGrid = new WebInspector.TimelineGrid();
     this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
     this._itemsGraphsElement.id = "timeline-graphs";
     this._gridContainer.element.appendChild(this._timelineGrid.element);
     this._timelineGrid.gridHeaderElement.id = "timeline-grid-header";
+    if (this._powerProfileEnabled)
+        this._timelineGrid.gridHeaderElement.addStyleClass("with-power");

[pfeldman, 2014/01/09 11:38:52]

No hacks like this please.

+
     this._timelineGrid.gridHeaderElement.addStyleClass("fill");
     this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
     this._timelineMemorySplitter.mainElement.appendChild(this._timelineGrid.gridHeaderElement);
 
     // Create gap elements
     this._topGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
     this._graphRowsElement = this._itemsGraphsElement.createChild("div");
     this._bottomGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
     this._expandElements = this._itemsGraphsElement.createChild("div");
     this._expandElements.id = "orphan-expand-elements";
@@ skipping 376 matching lines @@
         var frameMode = mode === WebInspector.TimelineOverviewPane.Mode.Frames;
         this._overviewModeSetting.set(mode);
         if (frameMode !== this._frameMode) {
             this._frameMode = frameMode;
             this._glueParentButton.setEnabled(!frameMode);
             this._presentationModel.setGlueRecords(this._glueParentButton.toggled && !frameMode);
             this._repopulateRecords();
 
             if (frameMode) {
                 this.element.addStyleClass("timeline-frame-overview");
+                if (this._powerProfileEnabled)
+                    this.element.addStyleClass("with-power");
                 this.recordsCounter.element.addStyleClass("hidden");
                 this._frameController = new WebInspector.TimelineFrameController(this._model, this._overviewPane, this._presentationModel);
             } else {
                 this._frameController.dispose();
                 this._frameController = null;
                 this.element.removeStyleClass("timeline-frame-overview");
+                if (this._powerProfileEnabled)
+                    this.element.removeStyleClass("with-power");
                 this.recordsCounter.element.removeStyleClass("hidden");
             }
         }
 
         if (shouldShowMemory)
             this._timelineMemorySplitter.showBoth();
         else
             this._timelineMemorySplitter.showOnlyFirst();
         this.onResize();
         this._updateSelectionDetails();
@@ skipping 1405 matching lines @@
      * @param {boolean} vertical
      */
     setVertical: function(vertical)
     {
         this._contentElement.enableStyleClass("hbox", !vertical);
         this._contentElement.enableStyleClass("vbox", vertical);
     },
 
     __proto__: WebInspector.View.prototype
 }