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

Source/devtools/front_end/timelinePanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 15 matching lines @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 #timeline-overview-panel {
     flex: 0 0 81px;
     position: relative;
     border-bottom: 1px solid rgb(140, 140, 140);
 }
 
+#timeline-overview-panel.with-power {
+    flex: 0 0 106px;
+    position: relative;
+    border-bottom: 1px solid rgb(140, 140, 140);
+}
+
 #timeline-overview-panel .timeline-graph-bar {
     pointer-events: none;
 }
 
 .timeline-records-title, .timeline-records-list {
     background-color: rgb(236, 236, 236);
 }
 
 .timeline-records-title {
     padding: 3px 3px 3px 5px;
@@ skipping 30 matching lines @@
 }
 
 #timeline-overview-grid #resources-graphs {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 80px;
 }
 
+#timeline-overview-grid.with-power #resources-graphs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 105px;
+}
+
 #timeline-container {
     border-right: 0 none transparent;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 
 .timeline-details-split {
     flex: auto;
 }
 
@@ skipping 146 matching lines @@
 .timeline-tree-item.selected .data.dimmed {
     color: rgba(255, 255, 255, 0.8);
     pointer-events: auto;
 }
 
 .timeline-tree-item.selected .timeline-tree-item-expand-arrow {
     background-color: white;
 }
 
 #timeline-overview-events,
-#timeline-overview-memory {
+#timeline-overview-memory,
+#timeline-overview-power {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 20px;
     z-index: 160;
 }
 
-#timeline-overview-memory  {
+#timeline-overview-memory,
+#timeline-overview-power {
     top: 25px;
 }
 
 #timeline-overview-container {
     flex: auto;
     position: relative;
 }
 
 #timeline-overview-container canvas {
     width: 100%;
@@ skipping 178 matching lines @@
 }
 
 .timeline-overview-sidebar-frames .icon {
     -webkit-mask-position: -160px -48px;
 }
 
 .timeline-overview-sidebar-memory .icon {
     -webkit-mask-position: -224px -48px;
 }
 
+.timeline-overview-sidebar-power .icon {
+    -webkit-mask-position: -291px -95px;

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

Note that this image has an svg source in Images/src. You should modify the
source with Inkscape, rasterise images and optimize them using
tools/resources/optimize-png-files.sh

[Pan, 2014/02/24 09:49:47]

done, thanks!

+}
+
 .memory-graph-label {
     position: absolute;
     left: 5px;
     font-size: 9px;
     color: rgb(50%, 50%, 50%);
     white-space: nowrap;
 }
 
 .max.memory-graph-label {
     top: 5px;
@@ skipping 329 matching lines @@
 
 .timeline-aggregated-info-legend > div {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
 .timeline-aggregated-info .pie-chart {
     margin-left: 20px;
 }