364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
|
/*
|
||
|
|
* Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
|
||
|
|
* Copyright (C) 2008, 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.
|
||
|
|
* 2. Redistributions in binary form must reproduce the above copyright
|
||
|
|
* notice, this list of conditions and the following disclaimer in the
|
||
|
|
* documentation and/or other materials provided with the distribution.
|
||
|
|
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
|
||
|
|
* its contributors may be used to endorse or promote products derived
|
||
|
|
* from this software without specific prior written permission.
|
||
|
|
*
|
||
|
|
* THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
|
||
|
|
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||
|
|
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||
|
|
* DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
|
||
|
|
* DIRECT, INDIRECT, INCIDENTAL, 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.
|
||
|
|
*/
|
||
|
|
|
||
|
|
WebInspector.SummaryBar = function(categories)
|
||
|
|
{
|
||
|
|
this.categories = categories;
|
||
|
|
|
||
|
|
this.element = document.createElement("div");
|
||
|
|
this.element.className = "summary-bar";
|
||
|
|
|
||
|
|
this.graphElement = document.createElement("canvas");
|
||
|
|
this.graphElement.setAttribute("width", "450");
|
||
|
|
this.graphElement.setAttribute("height", "38");
|
||
|
|
this.graphElement.className = "summary-graph";
|
||
|
|
this.element.appendChild(this.graphElement);
|
||
|
|
|
||
|
|
this.legendElement = document.createElement("div");
|
||
|
|
this.legendElement.className = "summary-graph-legend";
|
||
|
|
this.element.appendChild(this.legendElement);
|
||
|
|
}
|
||
|
|
|
||
|
|
WebInspector.SummaryBar.prototype = {
|
||
|
|
|
||
|
|
get calculator() {
|
||
|
|
return this._calculator;
|
||
|
|
},
|
||
|
|
|
||
|
|
set calculator(x) {
|
||
|
|
this._calculator = x;
|
||
|
|
},
|
||
|
|
|
||
|
|
reset: function()
|
||
|
|
{
|
||
|
|
this.legendElement.removeChildren();
|
||
|
|
this._drawSummaryGraph();
|
||
|
|
},
|
||
|
|
|
||
|
|
update: function(data)
|
||
|
|
{
|
||
|
|
var graphInfo = this.calculator.computeSummaryValues(data);
|
||
|
|
|
||
|
|
var fillSegments = [];
|
||
|
|
|
||
|
|
this.legendElement.removeChildren();
|
||
|
|
|
||
|
|
for (var category in this.categories) {
|
||
|
|
var size = graphInfo.categoryValues[category];
|
||
|
|
if (!size)
|
||
|
|
continue;
|
||
|
|
|
||
|
|
var colorString = this.categories[category].color;
|
||
|
|
|
||
|
|
var fillSegment = {color: colorString, value: size};
|
||
|
|
fillSegments.push(fillSegment);
|
||
|
|
|
||
|
|
var legendLabel = this._makeLegendElement(this.categories[category].title, this.calculator.formatValue(size), colorString);
|
||
|
|
this.legendElement.appendChild(legendLabel);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (graphInfo.total) {
|
||
|
|
var totalLegendLabel = this._makeLegendElement(WebInspector.UIString("Total"), this.calculator.formatValue(graphInfo.total));
|
||
|
|
totalLegendLabel.addStyleClass("total");
|
||
|
|
this.legendElement.appendChild(totalLegendLabel);
|
||
|
|
}
|
||
|
|
|
||
|
|
this._drawSummaryGraph(fillSegments);
|
||
|
|
},
|
||
|
|
|
||
|
|
_drawSwatch: function(canvas, color)
|
||
|
|
{
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
function drawSwatchSquare() {
|
||
|
|
ctx.fillStyle = color;
|
||
|
|
ctx.fillRect(0, 0, 13, 13);
|
||
|
|
|
||
|
|
var gradient = ctx.createLinearGradient(0, 0, 13, 13);
|
||
|
|
gradient.addColorStop(0.0, "rgba(255, 255, 255, 0.2)");
|
||
|
|
gradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)");
|
||
|
|
|
||
|
|
ctx.fillStyle = gradient;
|
||
|
|
ctx.fillRect(0, 0, 13, 13);
|
||
|
|
|
||
|
|
gradient = ctx.createLinearGradient(13, 13, 0, 0);
|
||
|
|
gradient.addColorStop(0.0, "rgba(0, 0, 0, 0.2)");
|
||
|
|
gradient.addColorStop(1.0, "rgba(0, 0, 0, 0.0)");
|
||
|
|
|
||
|
|
ctx.fillStyle = gradient;
|
||
|
|
ctx.fillRect(0, 0, 13, 13);
|
||
|
|
|
||
|
|
ctx.strokeStyle = "rgba(0, 0, 0, 0.6)";
|
||
|
|
ctx.strokeRect(0.5, 0.5, 12, 12);
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.clearRect(0, 0, 13, 24);
|
||
|
|
|
||
|
|
drawSwatchSquare();
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
ctx.translate(0, 25);
|
||
|
|
ctx.scale(1, -1);
|
||
|
|
|
||
|
|
drawSwatchSquare();
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
this._fadeOutRect(ctx, 0, 13, 13, 13, 0.5, 0.0);
|
||
|
|
},
|
||
|
|
|
||
|
|
_drawSummaryGraph: function(segments)
|
||
|
|
{
|
||
|
|
if (!segments || !segments.length) {
|
||
|
|
segments = [{color: "white", value: 1}];
|
||
|
|
this._showingEmptySummaryGraph = true;
|
||
|
|
} else
|
||
|
|
delete this._showingEmptySummaryGraph;
|
||
|
|
|
||
|
|
// Calculate the total of all segments.
|
||
|
|
var total = 0;
|
||
|
|
for (var i = 0; i < segments.length; ++i)
|
||
|
|
total += segments[i].value;
|
||
|
|
|
||
|
|
// Calculate the percentage of each segment, rounded to the nearest percent.
|
||
|
|
var percents = segments.map(function(s) { return Math.max(Math.round(100 * s.value / total), 1) });
|
||
|
|
|
||
|
|
// Calculate the total percentage.
|
||
|
|
var percentTotal = 0;
|
||
|
|
for (var i = 0; i < percents.length; ++i)
|
||
|
|
percentTotal += percents[i];
|
||
|
|
|
||
|
|
// Make sure our percentage total is not greater-than 100, it can be greater
|
||
|
|
// if we rounded up for a few segments.
|
||
|
|
while (percentTotal > 100) {
|
||
|
|
for (var i = 0; i < percents.length && percentTotal > 100; ++i) {
|
||
|
|
if (percents[i] > 1) {
|
||
|
|
--percents[i];
|
||
|
|
--percentTotal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Make sure our percentage total is not less-than 100, it can be less
|
||
|
|
// if we rounded down for a few segments.
|
||
|
|
while (percentTotal < 100) {
|
||
|
|
for (var i = 0; i < percents.length && percentTotal < 100; ++i) {
|
||
|
|
++percents[i];
|
||
|
|
++percentTotal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var ctx = this.graphElement.getContext("2d");
|
||
|
|
|
||
|
|
var x = 0;
|
||
|
|
var y = 0;
|
||
|
|
var w = 450;
|
||
|
|
var h = 19;
|
||
|
|
var r = (h / 2);
|
||
|
|
|
||
|
|
function drawPillShadow()
|
||
|
|
{
|
||
|
|
// This draws a line with a shadow that is offset away from the line. The line is stroked
|
||
|
|
// twice with different X shadow offsets to give more feathered edges. Later we erase the
|
||
|
|
// line with destination-out 100% transparent black, leaving only the shadow. This only
|
||
|
|
// works if nothing has been drawn into the canvas yet.
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + 4, y + h - 3 - 0.5);
|
||
|
|
ctx.lineTo(x + w - 4, y + h - 3 - 0.5);
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
ctx.shadowBlur = 2;
|
||
|
|
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
|
||
|
|
ctx.shadowOffsetX = 3;
|
||
|
|
ctx.shadowOffsetY = 5;
|
||
|
|
|
||
|
|
ctx.strokeStyle = "white";
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.shadowOffsetX = -3;
|
||
|
|
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
ctx.globalCompositeOperation = "destination-out";
|
||
|
|
ctx.strokeStyle = "rgba(0, 0, 0, 1)";
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawPill()
|
||
|
|
{
|
||
|
|
// Make a rounded rect path.
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x, y + r);
|
||
|
|
ctx.lineTo(x, y + h - r);
|
||
|
|
ctx.arc(x + r, y + h - r, r, Math.PI, Math.PI / 2, true);
|
||
|
|
ctx.lineTo(x + w - r, y + h);
|
||
|
|
ctx.arc(x + w - r, y + h - r, r, Math.PI / 2, 0, true);
|
||
|
|
ctx.lineTo(x + w, y + r);
|
||
|
|
ctx.arc(x + w - r, y + r, r, 0, 3 * Math.PI / 2, true);
|
||
|
|
ctx.lineTo(x + r, y);
|
||
|
|
ctx.arc(x + r, y + r, r, Math.PI / 2, Math.PI, true);
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
// Clip to the rounded rect path.
|
||
|
|
ctx.save();
|
||
|
|
ctx.clip();
|
||
|
|
|
||
|
|
// Fill the segments with the associated color.
|
||
|
|
var previousSegmentsWidth = 0;
|
||
|
|
for (var i = 0; i < segments.length; ++i) {
|
||
|
|
var segmentWidth = Math.round(w * percents[i] / 100);
|
||
|
|
ctx.fillStyle = segments[i].color;
|
||
|
|
ctx.fillRect(x + previousSegmentsWidth, y, segmentWidth, h);
|
||
|
|
previousSegmentsWidth += segmentWidth;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Draw the segment divider lines.
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
for (var i = 1; i < 20; ++i) {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + (i * Math.round(w / 20)) + 0.5, y);
|
||
|
|
ctx.lineTo(x + (i * Math.round(w / 20)) + 0.5, y + h);
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + (i * Math.round(w / 20)) + 1.5, y);
|
||
|
|
ctx.lineTo(x + (i * Math.round(w / 20)) + 1.5, y + h);
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Draw the pill shading.
|
||
|
|
var lightGradient = ctx.createLinearGradient(x, y, x, y + (h / 1.5));
|
||
|
|
lightGradient.addColorStop(0.0, "rgba(220, 220, 220, 0.6)");
|
||
|
|
lightGradient.addColorStop(0.4, "rgba(220, 220, 220, 0.2)");
|
||
|
|
lightGradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)");
|
||
|
|
|
||
|
|
var darkGradient = ctx.createLinearGradient(x, y + (h / 3), x, y + h);
|
||
|
|
darkGradient.addColorStop(0.0, "rgba(0, 0, 0, 0.0)");
|
||
|
|
darkGradient.addColorStop(0.8, "rgba(0, 0, 0, 0.2)");
|
||
|
|
darkGradient.addColorStop(1.0, "rgba(0, 0, 0, 0.5)");
|
||
|
|
|
||
|
|
ctx.fillStyle = darkGradient;
|
||
|
|
ctx.fillRect(x, y, w, h);
|
||
|
|
|
||
|
|
ctx.fillStyle = lightGradient;
|
||
|
|
ctx.fillRect(x, y, w, h);
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.clearRect(x, y, w, (h * 2));
|
||
|
|
|
||
|
|
drawPillShadow();
|
||
|
|
drawPill();
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
ctx.translate(0, (h * 2) + 1);
|
||
|
|
ctx.scale(1, -1);
|
||
|
|
|
||
|
|
drawPill();
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
this._fadeOutRect(ctx, x, y + h + 1, w, h, 0.5, 0.0);
|
||
|
|
},
|
||
|
|
|
||
|
|
_fadeOutRect: function(ctx, x, y, w, h, a1, a2)
|
||
|
|
{
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
var gradient = ctx.createLinearGradient(x, y, x, y + h);
|
||
|
|
gradient.addColorStop(0.0, "rgba(0, 0, 0, " + (1.0 - a1) + ")");
|
||
|
|
gradient.addColorStop(0.8, "rgba(0, 0, 0, " + (1.0 - a2) + ")");
|
||
|
|
gradient.addColorStop(1.0, "rgba(0, 0, 0, 1.0)");
|
||
|
|
|
||
|
|
ctx.globalCompositeOperation = "destination-out";
|
||
|
|
|
||
|
|
ctx.fillStyle = gradient;
|
||
|
|
ctx.fillRect(x, y, w, h);
|
||
|
|
|
||
|
|
ctx.restore();
|
||
|
|
},
|
||
|
|
|
||
|
|
_makeLegendElement: function(label, value, color)
|
||
|
|
{
|
||
|
|
var legendElement = document.createElement("label");
|
||
|
|
legendElement.className = "summary-graph-legend-item";
|
||
|
|
|
||
|
|
if (color) {
|
||
|
|
var swatch = document.createElement("canvas");
|
||
|
|
swatch.className = "summary-graph-legend-swatch";
|
||
|
|
swatch.setAttribute("width", "13");
|
||
|
|
swatch.setAttribute("height", "24");
|
||
|
|
|
||
|
|
legendElement.appendChild(swatch);
|
||
|
|
|
||
|
|
this._drawSwatch(swatch, color);
|
||
|
|
}
|
||
|
|
|
||
|
|
var labelElement = document.createElement("div");
|
||
|
|
labelElement.className = "summary-graph-legend-label";
|
||
|
|
legendElement.appendChild(labelElement);
|
||
|
|
|
||
|
|
var headerElement = document.createElement("div");
|
||
|
|
headerElement.className = "summary-graph-legend-header";
|
||
|
|
headerElement.textContent = label;
|
||
|
|
labelElement.appendChild(headerElement);
|
||
|
|
|
||
|
|
var valueElement = document.createElement("div");
|
||
|
|
valueElement.className = "summary-graph-legend-value";
|
||
|
|
valueElement.textContent = value;
|
||
|
|
labelElement.appendChild(valueElement);
|
||
|
|
|
||
|
|
return legendElement;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
WebInspector.SummaryBar.prototype.__proto__ = WebInspector.Object.prototype;
|