DevTools: Support drawing limit value on counters graph

Source/devtools/front_end/CountersGraph.js

 /*
  * Copyright (C) 2012 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 260 matching lines @@
         var ctx = canvas.getContext("2d");
         var width = canvas.width;
         var height = this._clippedHeight;
         var originY = this._originY;
         var counter = counterUI.counter;
         var values = counter.values;
 
         if (!values.length)
             return;
 
-        var maxValue;
-        var minValue;
-        for (var i = counter._minimumIndex; i <= counter._maximumIndex; i++) {
-            var value = values[i];
-            if (minValue === undefined || value < minValue)
-                minValue = value;
-            if (maxValue === undefined || value > maxValue)
-                maxValue = value;
-        }
-        minValue = minValue || 0;
-        maxValue = maxValue || 1;
+        var bounds = counter._calculateBounds();
+        var minValue = bounds.min;
+        var maxValue = bounds.max;
 
         counterUI.setRange(minValue, maxValue);
 
         if (!counterUI.visible())
             return;
 
         var yValues = counterUI.graphYValues;
         yValues.length = this._counters.length;
 
         var maxYRange = maxValue - minValue;
@@ skipping 12 matching lines @@
              if (typeof currentValue !== "undefined")
                 value = currentValue;
              currentY = Math.round(originY + height - (value - minValue) * yFactor);
              ctx.lineTo(x, currentY);
              yValues[i] = currentY;
         }
         ctx.lineTo(width, currentY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = counterUI.graphColor;
         ctx.stroke();
+        if (counter._limitValue) {
+            var limitLineY = Math.round(originY + height - (counter._limitValue - minValue) * yFactor);
+            ctx.moveTo(0, limitLineY);
+            ctx.lineTo(width, limitLineY);
+            ctx.strokeStyle = counterUI.limitColor;
+            ctx.stroke();
+        }
         ctx.closePath();
         ctx.restore();
     },
 
     __proto__: WebInspector.SplitView.prototype
 }
 
 /**
  * @constructor
  */
@@ skipping 16 matching lines @@
         this.values.push(value);
     },
 
     reset: function()
     {
         this.times = [];
         this.values = [];
     },
 
     /**
+     * @param {number} value
+     */
+    setLimit: function(value)
+    {
+        this._limitValue = value;
+    },
+
+    /**
+     * @return {!{min: number, max: number}}
+     */
+    _calculateBounds: function()
+    {
+        var maxValue;
+        var minValue;
+        for (var i = this._minimumIndex; i <= this._maximumIndex; i++) {
+            var value = this.values[i];
+            if (minValue === undefined || value < minValue)
+                minValue = value;
+            if (maxValue === undefined || value > maxValue)
+                maxValue = value;
+        }
+        minValue = minValue || 0;
+        maxValue = maxValue || 1;
+        if (this._limitValue) {
+            if (maxValue > this._limitValue * 0.5)
+                maxValue = Math.max(maxValue, this._limitValue);
+            minValue = Math.min(minValue, this._limitValue);
+        }
+        return { min: minValue, max: maxValue };
+    },
+
+    /**
      * @param {!WebInspector.TimelineCalculator} calculator
      */
     _calculateVisibleIndexes: function(calculator)
     {
         var start = calculator.minimumBoundary();
         var end = calculator.maximumBoundary();
 
         // Maximum index of element whose time <= start.
         this._minimumIndex = Number.constrain(this.times.upperBound(start) - 1, 0, this.times.length - 1);
 
@@ skipping 38 matching lines @@
     var container = memoryCountersPane.sidebarElement().createChild("div", "memory-counter-sidebar-info");
     var swatchColor = graphColor;
     this._swatch = new WebInspector.SwatchCheckbox(WebInspector.UIString(title), swatchColor);
     this._swatch.addEventListener(WebInspector.SwatchCheckbox.Events.Changed, this._toggleCounterGraph.bind(this));
     container.appendChild(this._swatch.element);
     this._range = this._swatch.element.createChild("span");
 
     this._value = memoryCountersPane._currentValuesBar.createChild("span", "memory-counter-value");
     this._value.style.color = graphColor;
     this.graphColor = graphColor;
-    this.strokeColor = graphColor;
+    this.limitColor = WebInspector.Color.parse(graphColor).setAlpha(0.3).toString(WebInspector.Color.Format.RGBA);
     this.graphYValues = [];
 
     this._currentValueLabel = currentValueLabel;
     this._marker = memoryCountersPane._canvasContainer.createChild("div", "memory-counter-marker");
     this._marker.style.backgroundColor = graphColor;
     this._clearCurrentValueAndMarker();
 }
 
 WebInspector.CountersGraph.CounterUI.prototype = {
     reset: function()
@@ skipping 91 matching lines @@
     },
 
     _toggleCheckbox: function(event)
     {
         this.checked = !this.checked;
         this.dispatchEventToListeners(WebInspector.SwatchCheckbox.Events.Changed);
     },
 
     __proto__: WebInspector.Object.prototype
 }