DevTools: Add energy value under Timeline pie chart

Source/devtools/front_end/TimelineUIUtils.js

 /*
  * Copyright (C) 2013 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 25 matching lines @@
 WebInspector.TimelineUIUtils.categories = function()
 {
     if (WebInspector.TimelineUIUtils._categories)
         return WebInspector.TimelineUIUtils._categories;
     WebInspector.TimelineUIUtils._categories = {
         loading: new WebInspector.TimelineCategory("loading", WebInspector.UIString("Loading"), 0, "hsl(214, 53%, 58%)", "hsl(214, 67%, 90%)", "hsl(214, 67%, 74%)", "hsl(214, 67%, 66%)"),
         scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), 1, "hsl(43, 68%, 53%)", "hsl(43, 83%, 90%)", "hsl(43, 83%, 72%)", "hsl(43, 83%, 64%) "),
         rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), 2, "hsl(256, 50%, 60%)", "hsl(256, 67%, 90%)", "hsl(256, 67%, 76%)", "hsl(256, 67%, 70%)"),
         painting: new WebInspector.TimelineCategory("painting", WebInspector.UIString("Painting"), 2, "hsl(109, 33%, 47%)", "hsl(109, 33%, 90%)", "hsl(109, 33%, 64%)", "hsl(109, 33%, 55%)"),
         other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), -1, "hsl(0, 0%, 73%)", "hsl(0, 0%, 90%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 79%)"),
-        idle: new WebInspector.TimelineCategory("idle", WebInspector.UIString("Idle"), -1, "hsl(0, 0%, 87%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)")
+        idle: new WebInspector.TimelineCategory("idle", WebInspector.UIString("Idle"), -1, "hsl(0, 0%, 87%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)"),
+        power: new WebInspector.TimelineCategory("power", WebInspector.UIString("Power"), -1, "hsl(16, 100%, 50%)", "hsl(16, 100%, 70%)", "hsl(16, 100%, 60%)", "hsl(16, 100%, 60%)")
     };
     return WebInspector.TimelineUIUtils._categories;
 };
 
 /**
  * @return {!Object.<string, !{title: string, category: !WebInspector.TimelineCategory}>}
  */
 WebInspector.TimelineUIUtils._initRecordStyles = function()
 {
     if (WebInspector.TimelineUIUtils._recordStylesMap)
@@ skipping 231 matching lines @@
         text.textContent = Number.millisToString(aggregatedStats[index], true);
         cell.appendChild(text);
     }
     return cell;
 }
 
 /**
  * @param {!Object} aggregatedStats
  * @param {!WebInspector.TimelineCategory=} selfCategory
  * @param {number=} selfTime
+ * @param {number=} energy
  * @return {!Element}
  */
-WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCategory, selfTime)
+WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCategory, selfTime, energy)
 {
     var element = document.createElement("div");
     element.className = "timeline-aggregated-info";
 
     var total = 0;
     for (var categoryName in aggregatedStats)
         total += aggregatedStats[categoryName];
 
     function formatter(value)
     {
@@ skipping 28 matching lines @@
          if (category === selfCategory)
              continue;
          var value = aggregatedStats[category.name];
          if (!value)
              continue;
          pieChart.addSlice(value, category.fillColorStop0);
          var rowElement = footerElement.createChild("div");
          rowElement.createChild("div", "timeline-aggregated-category timeline-" + category.name);
          rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(value), category.title));
     }
+
+    if (energy) {
+        var rowElement = footerElement.createChild("div");
+        rowElement.createChild("div", "timeline-aggregated-category timeline-" + "power");

[alph, 2014/04/10 15:38:55]

nit: concatenate "timeline-" and "power"
I still don't understand why do you need an empty div?

[Pan, 2014/04/11 00:54:18]

Thanks a lot! this empty div is a colored rectangle, I intend to keep consistent
to other categories(Scripting, Idle, Paint etc).

+        rowElement.createTextChild(WebInspector.UIString("Energy: %.2f Joules", energy));
+    }
     return element;
 }
 
 WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frame)
 {
     var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector.UIString("Frame"));
     var durationInMillis = frame.endTime - frame.startTime;
     var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString(frame.endTime - frame.startTime, true),
         Number.millisToString(frame.startTimeOffset, true));
     contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText);
@@ skipping 619 matching lines @@
         for (var i = 0; i < stackTrace.length; ++i) {
             var stackFrame = stackTrace[i];
             var row = stackTraceElement.createChild("div");
             row.createTextChild(stackFrame.functionName || WebInspector.UIString("(anonymous function)"));
             row.createTextChild(" @ ");
             var urlElement = this._linkifier.linkifyLocation(this._target, stackFrame.url, stackFrame.lineNumber - 1);
             row.appendChild(urlElement);
         }
     }
 }