[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.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;
 }
 
 .timeline-records-title, .timeline-records-list {
     background-color: rgb(236, 236, 236);
 }
 
 .timeline-records-title {
     padding: 3px 3px 3px 5px;
@@ skipping 33 matching lines @@
 }
 
 #timeline-overview-grid #resources-graphs {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     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;
     overflow-x: hidden;
 }
 
 .timeline-records-view {
     overflow: hidden !important;
 }
 
@@ skipping 159 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-pane {
     flex: 0 0 80px;
     position: relative;
     overflow: hidden;
 }
 
 #timeline-overview-container {
@@ skipping 179 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: -64px -120px;
+}
+
 .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 310 matching lines @@
     display: none;
 }
 
 .timeline-flamechart-view .flame-chart-main-pane .resources-divider-label {
     text-align: center;
 }
 
 .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);
+}