diff options
Diffstat (limited to 'WebCore/page/inspector/NetworkPanel.js')
| -rw-r--r-- | WebCore/page/inspector/NetworkPanel.js | 1036 |
1 files changed, 0 insertions, 1036 deletions
diff --git a/WebCore/page/inspector/NetworkPanel.js b/WebCore/page/inspector/NetworkPanel.js deleted file mode 100644 index 2f000ee..0000000 --- a/WebCore/page/inspector/NetworkPanel.js +++ /dev/null @@ -1,1036 +0,0 @@ -/* - * Copyright (C) 2007 Apple 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: - * - * 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.NetworkPanel = function() -{ - WebInspector.Panel.call(this); - - this.timelineEntries = []; - - this.timelineElement = document.createElement("div"); - this.timelineElement.className = "network-timeline"; - this.element.appendChild(this.timelineElement); - - this.summaryElement = document.createElement("div"); - this.summaryElement.className = "network-summary"; - this.element.appendChild(this.summaryElement); - - this.dividersElement = document.createElement("div"); - this.dividersElement.className = "network-dividers"; - this.timelineElement.appendChild(this.dividersElement); - - this.resourcesElement = document.createElement("div"); - this.resourcesElement.className = "network-resources"; - this.resourcesElement.addEventListener("click", this.resourcesClicked.bind(this), false); - this.timelineElement.appendChild(this.resourcesElement); - - var graphArea = document.createElement("div"); - graphArea.className = "network-graph-area"; - this.summaryElement.appendChild(graphArea); - - this.graphLabelElement = document.createElement("div"); - this.graphLabelElement.className = "network-graph-label"; - graphArea.appendChild(this.graphLabelElement); - - this.graphModeSelectElement = document.createElement("select"); - this.graphModeSelectElement.className = "network-graph-mode"; - this.graphModeSelectElement.addEventListener("change", this.changeGraphMode.bind(this), false); - this.graphLabelElement.appendChild(this.graphModeSelectElement); - this.graphLabelElement.appendChild(document.createElement("br")); - - var sizeOptionElement = document.createElement("option"); - sizeOptionElement.calculator = new WebInspector.TransferSizeCalculator(); - sizeOptionElement.textContent = sizeOptionElement.calculator.title; - this.graphModeSelectElement.appendChild(sizeOptionElement); - - var timeOptionElement = document.createElement("option"); - timeOptionElement.calculator = new WebInspector.TransferTimeCalculator(); - timeOptionElement.textContent = timeOptionElement.calculator.title; - this.graphModeSelectElement.appendChild(timeOptionElement); - - var graphSideElement = document.createElement("div"); - graphSideElement.className = "network-graph-side"; - graphArea.appendChild(graphSideElement); - - this.summaryGraphElement = document.createElement("canvas"); - this.summaryGraphElement.setAttribute("width", "450"); - this.summaryGraphElement.setAttribute("height", "38"); - this.summaryGraphElement.className = "network-summary-graph"; - graphSideElement.appendChild(this.summaryGraphElement); - - this.legendElement = document.createElement("div"); - this.legendElement.className = "network-graph-legend"; - graphSideElement.appendChild(this.legendElement); - - this.drawSummaryGraph(); // draws an empty graph - - this.needsRefresh = true; -} - -WebInspector.NetworkPanel.prototype = { - show: function() - { - WebInspector.Panel.prototype.show.call(this); - WebInspector.networkListItem.select(); - this.refreshIfNeeded(); - }, - - hide: function() - { - WebInspector.Panel.prototype.hide.call(this); - WebInspector.networkListItem.deselect(); - }, - - resize: function() - { - this.updateTimelineDividersIfNeeded(); - }, - - resourcesClicked: function(event) - { - // If the click wasn't inside a network resource row, ignore it. - var resourceElement = event.target.firstParentOrSelfWithClass("network-resource"); - if (!resourceElement) - return; - - // If the click was within the network info element, ignore it. - var networkInfo = event.target.firstParentOrSelfWithClass("network-info"); - if (networkInfo) - return; - - // If the click was within the tip balloon element, hide it. - var balloon = event.target.firstParentOrSelfWithClass("tip-balloon"); - if (balloon) { - resourceElement.timelineEntry.showingTipBalloon = false; - return; - } - - resourceElement.timelineEntry.toggleShowingInfo(); - }, - - changeGraphMode: function(event) - { - this.updateSummaryGraph(); - }, - - get calculator() - { - return this.graphModeSelectElement.options[this.graphModeSelectElement.selectedIndex].calculator; - }, - - get totalDuration() - { - return this.latestEndTime - this.earliestStartTime; - }, - - get needsRefresh() - { - return this._needsRefresh; - }, - - set needsRefresh(x) - { - if (this._needsRefresh === x) - return; - this._needsRefresh = x; - if (x && this.visible) - this.refresh(); - }, - - refreshIfNeeded: function() - { - if (this.needsRefresh) - this.refresh(); - }, - - refresh: function() - { - this.needsRefresh = false; - - // calling refresh will call updateTimelineBoundriesIfNeeded, which can clear needsRefresh for future entries, - // so find all the entries that needs refresh first, then loop back trough them to call refresh - var entriesNeedingRefresh = []; - var entriesLength = this.timelineEntries.length; - for (var i = 0; i < entriesLength; ++i) { - var entry = this.timelineEntries[i]; - if (entry.needsRefresh || entry.infoNeedsRefresh) - entriesNeedingRefresh.push(entry); - } - - entriesLength = entriesNeedingRefresh.length; - for (var i = 0; i < entriesLength; ++i) - entriesNeedingRefresh[i].refresh(false, true, true); - - this.updateTimelineDividersIfNeeded(); - this.sortTimelineEntriesIfNeeded(); - this.updateSummaryGraph(); - }, - - makeLegendElement: function(label, value, color) - { - var legendElement = document.createElement("label"); - legendElement.className = "network-graph-legend-item"; - - if (color) { - var swatch = document.createElement("canvas"); - swatch.className = "network-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 = "network-graph-legend-label"; - legendElement.appendChild(labelElement); - - var headerElement = document.createElement("div"); - var headerElement = document.createElement("div"); - headerElement.className = "network-graph-legend-header"; - headerElement.textContent = label; - labelElement.appendChild(headerElement); - - var valueElement = document.createElement("div"); - valueElement.className = "network-graph-legend-value"; - valueElement.textContent = value; - labelElement.appendChild(valueElement); - - return legendElement; - }, - - sortTimelineEntriesSoonIfNeeded: function() - { - if ("sortTimelineEntriesTimeout" in this) - return; - this.sortTimelineEntriesTimeout = setTimeout(this.sortTimelineEntriesIfNeeded.bind(this), 500); - }, - - sortTimelineEntriesIfNeeded: function() - { - if ("sortTimelineEntriesTimeout" in this) { - clearTimeout(this.sortTimelineEntriesTimeout); - delete this.sortTimelineEntriesTimeout; - } - - this.timelineEntries.sort(WebInspector.NetworkPanel.timelineEntryCompare); - - var nextSibling = null; - for (var i = (this.timelineEntries.length - 1); i >= 0; --i) { - var entry = this.timelineEntries[i]; - if (entry.resourceElement.nextSibling !== nextSibling) - this.resourcesElement.insertBefore(entry.resourceElement, nextSibling); - nextSibling = entry.resourceElement; - } - }, - - updateTimelineBoundriesIfNeeded: function(resource, immediate) - { - var didUpdate = false; - if (resource.startTime !== -1 && (this.earliestStartTime === undefined || resource.startTime < this.earliestStartTime)) { - this.earliestStartTime = resource.startTime; - didUpdate = true; - } - - if (resource.endTime !== -1 && (this.latestEndTime === undefined || resource.endTime > this.latestEndTime)) { - this.latestEndTime = resource.endTime; - didUpdate = true; - } - - if (didUpdate) { - if (immediate) { - this.refreshAllTimelineEntries(true, true, immediate); - this.updateTimelineDividersIfNeeded(); - } else { - this.refreshAllTimelineEntriesSoon(true, true, immediate); - this.updateTimelineDividersSoonIfNeeded(); - } - } - - return didUpdate; - }, - - updateTimelineDividersSoonIfNeeded: function() - { - if ("updateTimelineDividersTimeout" in this) - return; - this.updateTimelineDividersTimeout = setTimeout(this.updateTimelineDividersIfNeeded.bind(this), 500); - }, - - updateTimelineDividersIfNeeded: function() - { - if ("updateTimelineDividersTimeout" in this) { - clearTimeout(this.updateTimelineDividersTimeout); - delete this.updateTimelineDividersTimeout; - } - - if (!this.visible) { - this.needsRefresh = true; - return; - } - - if (document.body.offsetWidth <= 0) { - // The stylesheet hasn't loaded yet, so we need to update later. - setTimeout(this.updateTimelineDividersIfNeeded.bind(this), 0); - return; - } - - var dividerCount = Math.round(this.dividersElement.offsetWidth / 64); - var timeSlice = this.totalDuration / dividerCount; - - if (this.lastDividerTimeSlice === timeSlice) - return; - - this.lastDividerTimeSlice = timeSlice; - - this.dividersElement.removeChildren(); - - for (var i = 1; i <= dividerCount; ++i) { - var divider = document.createElement("div"); - divider.className = "network-divider"; - if (i === dividerCount) - divider.addStyleClass("last"); - divider.style.left = ((i / dividerCount) * 100) + "%"; - - var label = document.createElement("div"); - label.className = "network-divider-label"; - label.textContent = Number.secondsToString(timeSlice * i); - divider.appendChild(label); - - this.dividersElement.appendChild(divider); - } - }, - - refreshAllTimelineEntriesSoon: function(skipBoundryUpdate, skipTimelineSort, immediate) - { - if ("refreshAllTimelineEntriesTimeout" in this) - return; - this.refreshAllTimelineEntriesTimeout = setTimeout(this.refreshAllTimelineEntries.bind(this), 500, skipBoundryUpdate, skipTimelineSort, immediate); - }, - - refreshAllTimelineEntries: function(skipBoundryUpdate, skipTimelineSort, immediate) - { - if ("refreshAllTimelineEntriesTimeout" in this) { - clearTimeout(this.refreshAllTimelineEntriesTimeout); - delete this.refreshAllTimelineEntriesTimeout; - } - - var entriesLength = this.timelineEntries.length; - for (var i = 0; i < entriesLength; ++i) - this.timelineEntries[i].refresh(skipBoundryUpdate, skipTimelineSort, immediate); - }, - - 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(); - }, - - 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 (!this.summaryGraphElement) - return; - - if (!segments || !segments.length) - segments = [{color: "white", value: 1}]; - - // 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.summaryGraphElement.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.quadraticCurveTo(x, y + h, x + r, y + h); - ctx.lineTo(x + w - r, y + h); - ctx.quadraticCurveTo(x + w, y + h, x + w, y + h - r); - ctx.lineTo(x + w, y + r); - ctx.quadraticCurveTo(x + w, y, x + w - r, y); - ctx.lineTo(x + r, y); - ctx.quadraticCurveTo(x, y, x, y + r); - 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); - }, - - updateSummaryGraphSoon: function() - { - if ("updateSummaryGraphTimeout" in this) - return; - this.updateSummaryGraphTimeout = setTimeout(this.updateSummaryGraph.bind(this), 500); - }, - - updateSummaryGraph: function() - { - if ("updateSummaryGraphTimeout" in this) { - clearTimeout(this.updateSummaryGraphTimeout); - delete this.updateSummaryGraphTimeout; - } - - var graphInfo = this.calculator.computeValues(this.timelineEntries); - - var categoryOrder = ["documents", "stylesheets", "images", "scripts", "fonts", "other"]; - var categoryColors = {documents: {r: 47, g: 102, b: 236}, stylesheets: {r: 157, g: 231, b: 119}, images: {r: 164, g: 60, b: 255}, scripts: {r: 255, g: 121, b: 0}, fonts: {r: 231, g: 231, b: 10}, other: {r: 186, g: 186, b: 186}}; - var fillSegments = []; - - this.legendElement.removeChildren(); - - if (this.totalLegendLabel) - this.totalLegendLabel.parentNode.removeChild(this.totalLegendLabel); - - this.totalLegendLabel = this.makeLegendElement(this.calculator.totalTitle, this.calculator.formatValue(graphInfo.total)); - this.totalLegendLabel.addStyleClass("network-graph-legend-total"); - this.graphLabelElement.appendChild(this.totalLegendLabel); - - for (var i = 0; i < categoryOrder.length; ++i) { - var category = categoryOrder[i]; - var size = graphInfo.categoryValues[category]; - if (!size) - continue; - - var color = categoryColors[category]; - var colorString = "rgb(" + color.r + ", " + color.g + ", " + color.b + ")"; - - var fillSegment = {color: colorString, value: size}; - fillSegments.push(fillSegment); - - var legendLabel = this.makeLegendElement(WebInspector.resourceCategories[category].title, this.calculator.formatValue(size), colorString); - this.legendElement.appendChild(legendLabel); - } - - this.drawSummaryGraph(fillSegments); - }, - - clearTimeline: function() - { - delete this.earliestStartTime; - delete this.latestEndTime; - - var entriesLength = this.timelineEntries.length; - for (var i = 0; i < entriesLength; ++i) - delete this.timelineEntries[i].resource.networkTimelineEntry; - - this.timelineEntries = []; - this.resourcesElement.removeChildren(); - - this.drawSummaryGraph(); // draws an empty graph - }, - - addResourceToTimeline: function(resource) - { - var timelineEntry = new WebInspector.NetworkTimelineEntry(this, resource); - this.timelineEntries.push(timelineEntry); - this.resourcesElement.appendChild(timelineEntry.resourceElement); - - timelineEntry.refresh(); - this.updateSummaryGraphSoon(); - } -} - -WebInspector.NetworkPanel.prototype.__proto__ = WebInspector.Panel.prototype; - -WebInspector.NetworkPanel.timelineEntryCompare = function(a, b) -{ - if (a.resource.startTime < b.resource.startTime) - return -1; - if (a.resource.startTime > b.resource.startTime) - return 1; - if (a.resource.endTime < b.resource.endTime) - return -1; - if (a.resource.endTime > b.resource.endTime) - return 1; - return 0; -} - -WebInspector.NetworkTimelineEntry = function(panel, resource) -{ - this.panel = panel; - this.resource = resource; - resource.networkTimelineEntry = this; - - this.resourceElement = document.createElement("div"); - this.resourceElement.className = "network-resource"; - this.resourceElement.timelineEntry = this; - - this.titleElement = document.createElement("div"); - this.titleElement.className = "network-title"; - this.resourceElement.appendChild(this.titleElement); - - this.fileElement = document.createElement("div"); - this.fileElement.className = "network-file"; - this.fileElement.innerHTML = WebInspector.linkifyURL(resource.url, resource.displayName); - this.titleElement.appendChild(this.fileElement); - - this.tipButtonElement = document.createElement("button"); - this.tipButtonElement.className = "tip-button"; - this.showingTipButton = this.resource.tips.length; - this.fileElement.insertBefore(this.tipButtonElement, this.fileElement.firstChild); - - this.tipButtonElement.addEventListener("click", this.toggleTipBalloon.bind(this), false ); - - this.areaElement = document.createElement("div"); - this.areaElement.className = "network-area"; - this.titleElement.appendChild(this.areaElement); - - this.barElement = document.createElement("div"); - this.areaElement.appendChild(this.barElement); - - this.infoElement = document.createElement("div"); - this.infoElement.className = "network-info hidden"; - this.resourceElement.appendChild(this.infoElement); -} - -WebInspector.NetworkTimelineEntry.prototype = { - refresh: function(skipBoundryUpdate, skipTimelineSort, immediate) - { - if (!this.panel.visible) { - this.needsRefresh = true; - this.panel.needsRefresh = true; - return; - } - - delete this.needsRefresh; - - if (!skipBoundryUpdate) { - if (this.panel.updateTimelineBoundriesIfNeeded(this.resource, immediate)) - return; // updateTimelineBoundriesIfNeeded calls refresh() on all entries, so we can just return - } - - if (!skipTimelineSort) { - if (immediate) - this.panel.sortTimelineEntriesIfNeeded(); - else - this.panel.sortTimelineEntriesSoonIfNeeded(); - } - - if (this.resource.startTime !== -1) { - var percentStart = ((this.resource.startTime - this.panel.earliestStartTime) / this.panel.totalDuration) * 100; - this.barElement.style.left = percentStart + "%"; - } else { - this.barElement.style.left = null; - } - - if (this.resource.endTime !== -1) { - var percentEnd = ((this.panel.latestEndTime - this.resource.endTime) / this.panel.totalDuration) * 100; - this.barElement.style.right = percentEnd + "%"; - } else { - this.barElement.style.right = "0px"; - } - - this.barElement.className = "network-bar network-category-" + this.resource.category.name; - - if (this.infoNeedsRefresh) - this.refreshInfo(); - }, - - refreshInfo: function() - { - if (!this.showingInfo) { - this.infoNeedsRefresh = true; - return; - } - - if (!this.panel.visible) { - this.panel.needsRefresh = true; - this.infoNeedsRefresh = true; - return; - } - - this.infoNeedsRefresh = false; - - this.infoElement.removeChildren(); - - var sections = [ - {title: WebInspector.UIString("Request"), info: this.resource.sortedRequestHeaders}, - {title: WebInspector.UIString("Response"), info: this.resource.sortedResponseHeaders} - ]; - - function createSectionTable(section) - { - if (!section.info.length) - return; - - var table = document.createElement("table"); - this.infoElement.appendChild(table); - - var heading = document.createElement("th"); - heading.textContent = section.title; - - var row = table.createTHead().insertRow(-1).appendChild(heading); - var body = document.createElement("tbody"); - table.appendChild(body); - - section.info.forEach(function(header) { - var row = body.insertRow(-1); - var th = document.createElement("th"); - th.textContent = header.header; - row.appendChild(th); - row.insertCell(-1).textContent = header.value; - }); - } - - sections.forEach(createSectionTable, this); - }, - - refreshInfoIfNeeded: function() - { - if (this.infoNeedsRefresh === false) - return; - - this.refreshInfo(); - }, - - toggleShowingInfo: function() - { - this.showingInfo = !this.showingInfo; - }, - - get showingInfo() - { - return this._showingInfo; - }, - - set showingInfo(x) - { - if (this._showingInfo === x) - return; - - this._showingInfo = x; - - var element = this.infoElement; - if (x) { - element.removeStyleClass("hidden"); - element.style.setProperty("overflow", "hidden"); - this.refreshInfoIfNeeded(); - WebInspector.animateStyle([{element: element, start: {height: 0}, end: {height: element.offsetHeight}}], 250, function() { element.style.removeProperty("height"); element.style.removeProperty("overflow") }); - } else { - element.style.setProperty("overflow", "hidden"); - WebInspector.animateStyle([{element: element, end: {height: 0}}], 250, function() { element.addStyleClass("hidden"); element.style.removeProperty("height") }); - } - }, - - get showingTipButton() - { - return !this.tipButtonElement.hasStyleClass("hidden"); - }, - - set showingTipButton(x) - { - if (x) - this.tipButtonElement.removeStyleClass("hidden"); - else - this.tipButtonElement.addStyleClass("hidden"); - }, - - toggleTipBalloon: function(event) - { - this.showingTipBalloon = !this.showingTipBalloon; - event.stopPropagation(); - }, - - get showingTipBalloon() - { - return this._showingTipBalloon; - }, - - set showingTipBalloon(x) - { - if (this._showingTipBalloon === x) - return; - - this._showingTipBalloon = x; - - if (x) { - if (!this.tipBalloonElement) { - this.tipBalloonElement = document.createElement("div"); - this.tipBalloonElement.className = "tip-balloon"; - this.titleElement.appendChild(this.tipBalloonElement); - - this.tipBalloonContentElement = document.createElement("div"); - this.tipBalloonContentElement.className = "tip-balloon-content"; - this.tipBalloonElement.appendChild(this.tipBalloonContentElement); - var tipText = ""; - for (var id in this.resource.tips) - tipText += this.resource.tips[id].message + "\n"; - this.tipBalloonContentElement.textContent = tipText; - } - - this.tipBalloonElement.removeStyleClass("hidden"); - WebInspector.animateStyle([{element: this.tipBalloonElement, start: {left: 160, opacity: 0}, end: {left: 145, opacity: 1}}], 250); - } else { - var element = this.tipBalloonElement; - WebInspector.animateStyle([{element: this.tipBalloonElement, start: {left: 145, opacity: 1}, end: {left: 160, opacity: 0}}], 250, function() { element.addStyleClass("hidden") }); - } - } -} - -WebInspector.TimelineValueCalculator = function() -{ -} - -WebInspector.TimelineValueCalculator.prototype = { - computeValues: function(entries) - { - var total = 0; - var categoryValues = {}; - - function compute(entry) - { - var value = this._value(entry); - if (value === undefined) - return; - - if (!(entry.resource.category.name in categoryValues)) - categoryValues[entry.resource.category.name] = 0; - categoryValues[entry.resource.category.name] += value; - total += value; - } - entries.forEach(compute, this); - - return {categoryValues: categoryValues, total: total}; - }, - - _value: function(entry) - { - return 0; - }, - - get title() - { - return ""; - }, - - formatValue: function(value) - { - return value.toString(); - } -} - -WebInspector.TransferTimeCalculator = function() -{ - WebInspector.TimelineValueCalculator.call(this); -} - -WebInspector.TransferTimeCalculator.prototype = { - computeValues: function(entries) - { - var entriesByCategory = {}; - entries.forEach(function(entry) { - if (!(entry.resource.category.name in entriesByCategory)) - entriesByCategory[entry.resource.category.name] = []; - entriesByCategory[entry.resource.category.name].push(entry); - }); - - var earliestStart; - var latestEnd; - var categoryValues = {}; - for (var category in entriesByCategory) { - entriesByCategory[category].sort(WebInspector.NetworkPanel.timelineEntryCompare); - categoryValues[category] = 0; - - var segment = {start: -1, end: -1}; - entriesByCategory[category].forEach(function(entry) { - if (entry.resource.startTime == -1 || entry.resource.endTime == -1) - return; - - if (earliestStart === undefined) - earliestStart = entry.resource.startTime; - else - earliestStart = Math.min(earliestStart, entry.resource.startTime); - - if (latestEnd === undefined) - latestEnd = entry.resource.endTime; - else - latestEnd = Math.max(latestEnd, entry.resource.endTime); - - if (entry.resource.startTime <= segment.end) { - segment.end = Math.max(segment.end, entry.resource.endTime); - return; - } - - categoryValues[category] += segment.end - segment.start; - - segment.start = entry.resource.startTime; - segment.end = entry.resource.endTime; - }); - - // Add the last segment - categoryValues[category] += segment.end - segment.start; - } - - return {categoryValues: categoryValues, total: latestEnd - earliestStart}; - }, - - get title() - { - return WebInspector.UIString("Transfer Time"); - }, - - get totalTitle() - { - return WebInspector.UIString("Total Time"); - }, - - formatValue: function(value) - { - return Number.secondsToString(value); - } -} - -WebInspector.TransferTimeCalculator.prototype.__proto__ = WebInspector.TimelineValueCalculator.prototype; - -WebInspector.TransferSizeCalculator = function() -{ - WebInspector.TimelineValueCalculator.call(this); -} - -WebInspector.TransferSizeCalculator.prototype = { - _value: function(entry) - { - return entry.resource.contentLength; - }, - - get title() - { - return WebInspector.UIString("Transfer Size"); - }, - - get totalTitle() - { - return WebInspector.UIString("Total Size"); - }, - - formatValue: function(value) - { - return Number.bytesToString(value); - } -} - -WebInspector.TransferSizeCalculator.prototype.__proto__ = WebInspector.TimelineValueCalculator.prototype; |