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

Source/devtools/front_end/timelinePanel.css

Index: Source/devtools/front_end/timelinePanel.css
diff --git a/Source/devtools/front_end/timelinePanel.css b/Source/devtools/front_end/timelinePanel.css
old mode 100644
new mode 100755
index 478b84eec569d294031187b3af66d9fba10c2627..17d83953647052fad610e420fee92b8374e903b3
--- a/Source/devtools/front_end/timelinePanel.css
+++ b/Source/devtools/front_end/timelinePanel.css
@@ -33,6 +33,12 @@
     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;
 }
@@ -83,6 +89,14 @@
     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;
@@ -249,7 +263,8 @@
 }
 
 #timeline-overview-events,
-#timeline-overview-memory {
+#timeline-overview-memory,
+#timeline-overview-power {
     position: absolute;
     left: 0;
     right: 0;
@@ -258,7 +273,8 @@
     z-index: 160;
 }
 
-#timeline-overview-memory  {
+#timeline-overview-memory,
+#timeline-overview-power {
     top: 25px;
 }
 
@@ -457,6 +473,10 @@
     -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;