DevTools: add pie chart to the paint profiler overview.

Source/devtools/front_end/ui/PieChart.js

 /*
  * Copyright (C) 2013 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 12 matching lines @@
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
- * @param {number=} totalValue
+ * @param {number} size
  * @param {function(number):string=} formatter
  */
-WebInspector.PieChart = function(totalValue, formatter)
+WebInspector.PieChart = function(size, formatter)
 {
     var shadowSize = WebInspector.PieChart._ShadowSizePercent;
     this.element = document.createElementWithClass("div", "pie-chart");
     var svg = this._createSVGChild(this.element, "svg");
     svg.setAttribute("width", (100 * (1 + 2 * shadowSize)) + "%");
     svg.setAttribute("height", (100 * (1 + 2 * shadowSize)) + "%");
     this._group = this._createSVGChild(svg, "g");
     var shadow = this._createSVGChild(this._group, "circle");
     shadow.setAttribute("r", 1 + shadowSize);
     shadow.setAttribute("cy", shadowSize);
     shadow.setAttribute("fill", "hsl(0,0%,70%)");
     var background = this._createSVGChild(this._group, "circle");
     background.setAttribute("r", 1);
     background.setAttribute("fill", "hsl(0,0%,92%)");
-    if (totalValue) {
-        var totalString = formatter ? formatter(totalValue) : totalValue;
-        this._totalElement = this.element.createChild("div", "pie-chart-foreground");
-        this._totalElement.textContent = totalString;
-        this._totalValue = totalValue;
-    }
+    this._totalElement = this.element.createChild("div", "pie-chart-foreground");
+    this._formatter = formatter;
+    this._slices = [];
     this._lastAngle = -Math.PI/2;
-    this.setSize(100);
+    this._setSize(size);
 }
 
 WebInspector.PieChart._ShadowSizePercent = 0.02;
 
 WebInspector.PieChart.prototype = {
     /**
-     * @param {number} value
+     * @param {number} totalValue
      */
-    setTotal: function(value)
+    setTotal: function(totalValue)
     {
-        this._totalValue = value;
+        for (var i = 0; i < this._slices.length; ++i)
+            this._slices[i].remove();
+        this._slices = [];
+        this._totalValue = totalValue;
+        var totalString;
+        if (totalValue)
+            totalString = this._formatter ? this._formatter(totalValue) : totalValue;
+        else
+            totalString = "";
+        this._totalElement.textContent = totalString;
     },
 
     /**
      * @param {number} value
      */
-    setSize: function(value)
+    _setSize: function(value)
     {
         this._group.setAttribute("transform", "scale(" + (value / 2) + ") translate(" + (1 + WebInspector.PieChart._ShadowSizePercent) + ",1)");
         var size = value + "px";
         this.element.style.width = size;
         this.element.style.height = size;
         if (this._totalElement)
             this._totalElement.style.lineHeight = size;
     },
 
     /**
      * @param {number} value
      * @param {string} color
      */
     addSlice: function(value, color)
     {
         var sliceAngle = value / this._totalValue * 2 * Math.PI;
         if (!isFinite(sliceAngle))
             return;
         sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999);
         var path = this._createSVGChild(this._group, "path");
         var x1 = Math.cos(this._lastAngle);
         var y1 = Math.sin(this._lastAngle);
         this._lastAngle += sliceAngle;
         var x2 = Math.cos(this._lastAngle);
         var y2 = Math.sin(this._lastAngle);
         var largeArc = sliceAngle > Math.PI ? 1 : 0;
         path.setAttribute("d", "M0,0 L" + x1 + "," + y1 + " A1,1,0," + largeArc + ",1," + x2 + "," + y2 + " Z");
         path.setAttribute("fill", color);
+        this._slices.push(path);
     },
 
     /**
      * @param {!Element} parent
      * @param {string} childType
      * @return {!Element}
      */
     _createSVGChild: function(parent, childType)
     {
         var child = document.createElementNS("http://www.w3.org/2000/svg", childType);
         parent.appendChild(child);
         return child;
     }
 }