Deleted: trunk/Source/WebCore/inspector/front-end/SummaryBar.js (90995 => 90996)
--- trunk/Source/WebCore/inspector/front-end/SummaryBar.js 2011-07-14 13:36:12 UTC (rev 90995)
+++ trunk/Source/WebCore/inspector/front-end/SummaryBar.js 2011-07-14 13:36:29 UTC (rev 90996)
@@ -1,363 +0,0 @@
-/*
- * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
- * Copyright (C) 2008, 2009 Anthony Ricaud <r...@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;
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (90995 => 90996)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-07-14 13:36:12 UTC (rev 90995)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-07-14 13:36:29 UTC (rev 90996)
@@ -2940,64 +2940,6 @@
display: none;
}
-#resources-summary {
- position: absolute;
- padding-top: 20px;
- top: 0;
- left: 0;
- right: 0;
- height: 93px;
- margin-left: -1px;
- border-left: 1px solid rgb(102, 102, 102);
- background-color: rgb(101, 111, 130);
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
- background-repeat: repeat-x;
- background-position: bottom;
- text-align: center;
- text-shadow: black 0 1px 1px;
- white-space: nowrap;
- color: white;
- -webkit-background-size: 1px 6px;
- -webkit-background-origin: padding;
- -webkit-background-clip: padding;
- z-index: 400;
-}
-
-.summary-graph-legend {
- margin-top: -10px;
- padding-left: 15px;
-}
-
-.summary-graph-legend-item {
- display: inline-block;
- font-weight: bold;
- margin-right: 15px;
- vertical-align: top;
-}
-
-.summary-graph-legend-item.total {
- margin-left: 10px;
-}
-
-.summary-graph-legend-label {
- display: inline-block;
- text-align: left;
-}
-
-.summary-graph-legend-header {
- font-size: 12px;
-}
-
-.summary-graph-legend-value {
- font-size: 10px;
-}
-
-.summary-graph-legend-swatch {
- vertical-align: top;
- margin-top: 1px;
- margin-right: 3px;
-}
-
.resources-dividers {
position: absolute;
left: 0;
@@ -3091,78 +3033,6 @@
white-space: nowrap;
}
-.resources-graph-label {
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto -7px;
- height: 13px;
- line-height: 13px;
- font-size: 9px;
- color: rgba(0, 0, 0, 0.75);
- text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
- z-index: 150;
- overflow: hidden;
- text-align: center;
- font-weight: bold;
- opacity: 0;
- -webkit-transition: opacity 250ms ease-in-out;
-}
-
-.resources-graph-side:hover .resources-graph-label {
- opacity: 1;
-}
-
-.resources-graph-label:empty {
- display: none;
-}
-
-.resources-graph-label.waiting {
- margin-right: 5px;
-}
-
-.resources-graph-label.waiting-right {
- margin-left: 5px;
-}
-
-.resources-graph-label.before {
- color: rgba(0, 0, 0, 0.7);
- text-shadow: none;
- text-align: right;
- margin-right: 2px;
-}
-
-.resources-graph-label.before::after {
- padding-left: 2px;
- height: 6px;
- content: url(Images/graphLabelCalloutLeft.png);
-}
-
-.resources-graph-label.after {
- color: rgba(0, 0, 0, 0.7);
- text-shadow: none;
- text-align: left;
- margin-left: 2px;
-}
-
-.resources-graph-label.after::before {
- padding-right: 2px;
- height: 6px;
- content: url(Images/graphLabelCalloutRight.png);
-}
-
-.resources-graph-bar {
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto -7px;
- border-width: 6px 7px;
- height: 13px;
- min-width: 14px;
- opacity: 0.65;
- -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
-}
-
.resources-category-documents, .resources-category-stylesheets, .resources-category-images,
.resources-category-scripts, .resources-category-xhr, .resources-category-fonts,
.resources-category-websockets, .resources-category-other {
@@ -3551,14 +3421,6 @@
left: 9px;
}
-#resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) {
- background-color: rgba(0, 0, 0, 0.05);
-}
-
-#resources-container:not(.viewing-resource) .resources-graph-side:nth-of-type(2n) {
- background-color: rgba(0, 0, 0, 0.05);
-}
-
.resources-time-graph-sidebar-item .icon {
content: url(Images/resourcesTimeGraphIcon.png);
}
