[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
index 91e432b308d2e0f38023f7755b28417f63032c6a..0c5a5bb266e455e0b8736604572ef41c7c61f650 100644
--- 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.power-overview {

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

You should not adjust timeline styles.

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

removed

+    flex: 0 0 106px;
+    position: relative;
+    border-bottom: 1px solid rgb(140, 140, 140);
+}
+
 #timeline-overview-panel .timeline-graph-bar {
     pointer-events: none;
 }
@@ -86,6 +92,15 @@
     height: 80px;
 }
 
+
+#timeline-overview-grid.power-overview #resources-graphs {

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

ditto

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

removed

+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 105px;
+}
+
 #timeline-container {
     border-right: 0 none transparent;
     overflow-y: scroll;
@@ -265,7 +280,8 @@
 }
 
 #timeline-overview-events,
-#timeline-overview-memory {
+#timeline-overview-memory,
+#timeline-overview-power {
     position: absolute;
     left: 0;
     right: 0;
@@ -274,7 +290,8 @@
     z-index: 160;
 }
 
-#timeline-overview-memory  {
+#timeline-overview-memory,
+#timeline-overview-power  {
     top: 25px;
 }
 
@@ -474,6 +491,10 @@
     -webkit-mask-position: -224px -48px;
 }
 
+.timeline-overview-sidebar-power .icon {
+    -webkit-mask-position: -64px -120px;
+}
+
 .memory-graph-label {
     position: absolute;
     left: 5px;
@@ -804,3 +825,21 @@
 .timeline-flamechart {
     overflow: hidden;
 }
+
+.timeline-power-marker {

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

ditto

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

removed

+    position: absolute;
+    border-radius: 3px;
+    width: 4px;
+    height: 4px;
+    margin-left: -3px;
+    margin-top: -2px;
+    background-color: rgb(255, 0, 0);
+}
+
+.timeline-power-text {
+    position: absolute;
+    width: 60px;
+    height: 16px;
+    margin-top: -8px;
+    color: rgb(0, 0, 0);
+}