| /* |
| * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
| * Copyright (C) 2008 Anthony Ricaud ([email protected]) |
| * |
| * 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.ResourcesPanel = function() |
| { |
| WebInspector.Panel.call(this); |
| |
| this.element.addStyleClass("resources"); |
| |
| this.viewsContainerElement = document.createElement("div"); |
| this.viewsContainerElement.id = "resource-views"; |
| this.element.appendChild(this.viewsContainerElement); |
| |
| this.containerElement = document.createElement("div"); |
| this.containerElement.id = "resources-container"; |
| this.containerElement.addEventListener("scroll", this._updateDividersLabelBarPosition.bind(this), false); |
| this.element.appendChild(this.containerElement); |
| |
| this.sidebarElement = document.createElement("div"); |
| this.sidebarElement.id = "resources-sidebar"; |
| this.sidebarElement.className = "sidebar"; |
| this.containerElement.appendChild(this.sidebarElement); |
| |
| this.sidebarResizeElement = document.createElement("div"); |
| this.sidebarResizeElement.className = "sidebar-resizer-vertical"; |
| this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarDragging.bind(this), false); |
| this.element.appendChild(this.sidebarResizeElement); |
| |
| this.containerContentElement = document.createElement("div"); |
| this.containerContentElement.id = "resources-container-content"; |
| this.containerElement.appendChild(this.containerContentElement); |
| |
| this.summaryElement = document.createElement("div"); |
| this.summaryElement.id = "resources-summary"; |
| this.containerContentElement.appendChild(this.summaryElement); |
| |
| this.resourcesGraphsElement = document.createElement("div"); |
| this.resourcesGraphsElement.id = "resources-graphs"; |
| this.containerContentElement.appendChild(this.resourcesGraphsElement); |
| |
| this.dividersElement = document.createElement("div"); |
| this.dividersElement.id = "resources-dividers"; |
| this.containerContentElement.appendChild(this.dividersElement); |
| |
| this.dividersLabelBarElement = document.createElement("div"); |
| this.dividersLabelBarElement.id = "resources-dividers-label-bar"; |
| this.containerContentElement.appendChild(this.dividersLabelBarElement); |
| |
| this.summaryGraphElement = document.createElement("canvas"); |
| this.summaryGraphElement.setAttribute("width", "450"); |
| this.summaryGraphElement.setAttribute("height", "38"); |
| this.summaryGraphElement.id = "resources-summary-graph"; |
| this.summaryElement.appendChild(this.summaryGraphElement); |
| |
| this.legendElement = document.createElement("div"); |
| this.legendElement.id = "resources-graph-legend"; |
| this.summaryElement.appendChild(this.legendElement); |
| |
| this.sidebarTreeElement = document.createElement("ol"); |
| this.sidebarTreeElement.className = "sidebar-tree"; |
| this.sidebarElement.appendChild(this.sidebarTreeElement); |
| |
| this.sidebarTree = new TreeOutline(this.sidebarTreeElement); |
| |
| var timeGraphItem = new WebInspector.SidebarTreeElement("resources-time-graph-sidebar-item", WebInspector.UIString("Time")); |
| timeGraphItem.onselect = this._graphSelected.bind(this); |
| |
| var transferTimeCalculator = new WebInspector.ResourceTransferTimeCalculator(); |
| var transferDurationCalculator = new WebInspector.ResourceTransferDurationCalculator(); |
| |
| timeGraphItem.sortingOptions = [ |
| { name: WebInspector.UIString("Sort by Start Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingStartTime, calculator: transferTimeCalculator }, |
| { name: WebInspector.UIString("Sort by Response Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingResponseReceivedTime, calculator: transferTimeCalculator }, |
| { name: WebInspector.UIString("Sort by End Time"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByAscendingEndTime, calculator: transferTimeCalculator }, |
| { name: WebInspector.UIString("Sort by Duration"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingDuration, calculator: transferDurationCalculator }, |
| { name: WebInspector.UIString("Sort by Latency"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingLatency, calculator: transferDurationCalculator }, |
| ]; |
| |
| timeGraphItem.selectedSortingOptionIndex = 1; |
| |
| var sizeGraphItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Size")); |
| sizeGraphItem.onselect = this._graphSelected.bind(this); |
| |
| var transferSizeCalculator = new WebInspector.ResourceTransferSizeCalculator(); |
| sizeGraphItem.sortingOptions = [ |
| { name: WebInspector.UIString("Sort by Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize, calculator: transferSizeCalculator }, |
| ]; |
| |
| sizeGraphItem.selectedSortingOptionIndex = 0; |
| |
| this.graphsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("GRAPHS"), {}, true); |
| this.sidebarTree.appendChild(this.graphsTreeElement); |
| |
| this.graphsTreeElement.appendChild(timeGraphItem); |
| this.graphsTreeElement.appendChild(sizeGraphItem); |
| this.graphsTreeElement.expand(); |
| |
| this.resourcesTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RESOURCES"), {}, true); |
| this.sidebarTree.appendChild(this.resourcesTreeElement); |
| |
| this.resourcesTreeElement.expand(); |
| |
| this.largerResourcesButton = document.createElement("button"); |
| this.largerResourcesButton.id = "resources-larger-resources-status-bar-item"; |
| this.largerResourcesButton.className = "status-bar-item toggled-on"; |
| this.largerResourcesButton.title = WebInspector.UIString("Use small resource rows."); |
| this.largerResourcesButton.addEventListener("click", this._toggleLargerResources.bind(this), false); |
| |
| this.sortingSelectElement = document.createElement("select"); |
| this.sortingSelectElement.className = "status-bar-item"; |
| this.sortingSelectElement.addEventListener("change", this._changeSortingFunction.bind(this), false); |
| |
| this.reset(); |
| |
| timeGraphItem.select(); |
| } |
| |
| WebInspector.ResourcesPanel.prototype = { |
| toolbarItemClass: "resources", |
| |
| get toolbarItemLabel() |
| { |
| return WebInspector.UIString("Resources"); |
| }, |
| |
| get statusBarItems() |
| { |
| return [this.largerResourcesButton, this.sortingSelectElement]; |
| }, |
| |
| show: function() |
| { |
| WebInspector.Panel.prototype.show.call(this); |
| |
| this._updateDividersLabelBarPosition(); |
| this._updateSidebarWidth(); |
| this.refreshIfNeeded(); |
| |
| var visibleView = this.visibleView; |
| if (visibleView) { |
| visibleView.headersVisible = true; |
| visibleView.show(this.viewsContainerElement); |
| } |
| |
| // Hide any views that are visible that are not this panel's current visible view. |
| // This can happen when a ResourceView is visible in the Scripts panel then switched |
| // to the this panel. |
| var resourcesLength = this._resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = this._resources[i]; |
| var view = resource._resourcesView; |
| if (!view || view === visibleView) |
| continue; |
| view.visible = false; |
| } |
| }, |
| |
| resize: function() |
| { |
| this._updateGraphDividersIfNeeded(); |
| |
| var visibleView = this.visibleView; |
| if (visibleView && "resize" in visibleView) |
| visibleView.resize(); |
| }, |
| |
| get searchableViews() |
| { |
| var views = []; |
| |
| const visibleView = this.visibleView; |
| if (visibleView && visibleView.performSearch) |
| views.push(visibleView); |
| |
| var resourcesLength = this._resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = this._resources[i]; |
| if (!resource._resourcesTreeElement) |
| continue; |
| var resourceView = this.resourceViewForResource(resource); |
| if (!resourceView.performSearch || resourceView === visibleView) |
| continue; |
| views.push(resourceView); |
| } |
| |
| return views; |
| }, |
| |
| get searchResultsSortFunction() |
| { |
| const resourceTreeElementSortFunction = this.sortingFunction; |
| |
| function sortFuction(a, b) |
| { |
| return resourceTreeElementSortFunction(a.resource._resourcesTreeElement, b.resource._resourcesTreeElement); |
| } |
| |
| return sortFuction; |
| }, |
| |
| searchMatchFound: function(view, matches) |
| { |
| view.resource._resourcesTreeElement.searchMatches = matches; |
| }, |
| |
| searchCanceled: function(startingNewSearch) |
| { |
| WebInspector.Panel.prototype.searchCanceled.call(this, startingNewSearch); |
| |
| if (startingNewSearch || !this._resources) |
| return; |
| |
| for (var i = 0; i < this._resources.length; ++i) { |
| var resource = this._resources[i]; |
| if (resource._resourcesTreeElement) |
| resource._resourcesTreeElement.updateErrorsAndWarnings(); |
| } |
| }, |
| |
| performSearch: function(query) |
| { |
| for (var i = 0; i < this._resources.length; ++i) { |
| var resource = this._resources[i]; |
| if (resource._resourcesTreeElement) |
| resource._resourcesTreeElement.resetBubble(); |
| } |
| |
| WebInspector.Panel.prototype.performSearch.call(this, query); |
| }, |
| |
| get visibleView() |
| { |
| if (this.visibleResource) |
| return this.visibleResource._resourcesView; |
| return null; |
| }, |
| |
| get calculator() |
| { |
| return this._calculator; |
| }, |
| |
| set calculator(x) |
| { |
| if (!x || this._calculator === x) |
| return; |
| |
| this._calculator = x; |
| this._calculator.reset(); |
| |
| this._staleResources = this._resources; |
| this.refresh(); |
| }, |
| |
| get sortingFunction() |
| { |
| return this._sortingFunction; |
| }, |
| |
| set sortingFunction(x) |
| { |
| this._sortingFunction = x; |
| this._sortResourcesIfNeeded(); |
| }, |
| |
| get needsRefresh() |
| { |
| return this._needsRefresh; |
| }, |
| |
| set needsRefresh(x) |
| { |
| if (this._needsRefresh === x) |
| return; |
| |
| this._needsRefresh = x; |
| |
| if (x) { |
| if (this.visible && !("_refreshTimeout" in this)) |
| this._refreshTimeout = setTimeout(this.refresh.bind(this), 500); |
| } else { |
| if ("_refreshTimeout" in this) { |
| clearTimeout(this._refreshTimeout); |
| delete this._refreshTimeout; |
| } |
| } |
| }, |
| |
| refreshIfNeeded: function() |
| { |
| if (this.needsRefresh) |
| this.refresh(); |
| }, |
| |
| refresh: function() |
| { |
| this.needsRefresh = false; |
| |
| var staleResourcesLength = this._staleResources.length; |
| var boundariesChanged = false; |
| |
| for (var i = 0; i < staleResourcesLength; ++i) { |
| var resource = this._staleResources[i]; |
| if (!resource._resourcesTreeElement) { |
| // Create the resource tree element and graph. |
| resource._resourcesTreeElement = new WebInspector.ResourceSidebarTreeElement(resource); |
| resource._resourcesTreeElement._resourceGraph = new WebInspector.ResourceGraph(resource); |
| |
| this.resourcesTreeElement.appendChild(resource._resourcesTreeElement); |
| this.resourcesGraphsElement.appendChild(resource._resourcesTreeElement._resourceGraph.graphElement); |
| } |
| |
| resource._resourcesTreeElement.refresh(); |
| |
| if (this.calculator.updateBoundaries(resource)) |
| boundariesChanged = true; |
| } |
| |
| if (boundariesChanged) { |
| // The boundaries changed, so all resource graphs are stale. |
| this._staleResources = this._resources; |
| staleResourcesLength = this._staleResources.length; |
| } |
| |
| for (var i = 0; i < staleResourcesLength; ++i) |
| this._staleResources[i]._resourcesTreeElement._resourceGraph.refresh(this.calculator); |
| |
| this._staleResources = []; |
| |
| this._updateGraphDividersIfNeeded(); |
| this._sortResourcesIfNeeded(); |
| this._updateSummaryGraph(); |
| }, |
| |
| reset: function() |
| { |
| this.closeVisibleResource(); |
| |
| this.containerElement.scrollTop = 0; |
| |
| delete this.currentQuery; |
| this.searchCanceled(); |
| |
| if (this._calculator) |
| this._calculator.reset(); |
| |
| if (this._resources) { |
| var resourcesLength = this._resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = this._resources[i]; |
| |
| resource.warnings = 0; |
| resource.errors = 0; |
| |
| delete resource._resourcesTreeElement; |
| delete resource._resourcesView; |
| } |
| } |
| |
| this._resources = []; |
| this._staleResources = []; |
| |
| this.resourcesTreeElement.removeChildren(); |
| this.viewsContainerElement.removeChildren(); |
| this.resourcesGraphsElement.removeChildren(); |
| this.legendElement.removeChildren(); |
| |
| this._updateGraphDividersIfNeeded(true); |
| |
| this._drawSummaryGraph(); // draws an empty graph |
| }, |
| |
| addResource: function(resource) |
| { |
| this._resources.push(resource); |
| this.refreshResource(resource); |
| }, |
| |
| removeResource: function(resource) |
| { |
| if (this.visibleView === resource._resourcesView) |
| this.closeVisibleResource(); |
| |
| this._resources.remove(resource, true); |
| |
| if (resource._resourcesTreeElement) { |
| this.resourcesTreeElement.removeChild(resource._resourcesTreeElement); |
| this.resourcesGraphsElement.removeChild(resource._resourcesTreeElement._resourceGraph.graphElement); |
| } |
| |
| resource.warnings = 0; |
| resource.errors = 0; |
| |
| delete resource._resourcesTreeElement; |
| delete resource._resourcesView; |
| |
| this._adjustScrollPosition(); |
| }, |
| |
| addMessageToResource: function(resource, msg) |
| { |
| if (!resource) |
| return; |
| |
| switch (msg.level) { |
| case WebInspector.ConsoleMessage.MessageLevel.Warning: |
| resource.warnings += msg.repeatDelta; |
| break; |
| case WebInspector.ConsoleMessage.MessageLevel.Error: |
| resource.errors += msg.repeatDelta; |
| break; |
| } |
| |
| if (!this.currentQuery && resource._resourcesTreeElement) |
| resource._resourcesTreeElement.updateErrorsAndWarnings(); |
| |
| var view = this.resourceViewForResource(resource); |
| if (view.addMessage) |
| view.addMessage(msg); |
| }, |
| |
| clearMessages: function() |
| { |
| var resourcesLength = this._resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = this._resources[i]; |
| resource.warnings = 0; |
| resource.errors = 0; |
| |
| if (!this.currentQuery && resource._resourcesTreeElement) |
| resource._resourcesTreeElement.updateErrorsAndWarnings(); |
| |
| var view = resource._resourcesView; |
| if (!view || !view.clearMessages) |
| continue; |
| view.clearMessages(); |
| } |
| }, |
| |
| refreshResource: function(resource) |
| { |
| this._staleResources.push(resource); |
| this.needsRefresh = true; |
| }, |
| |
| recreateViewForResourceIfNeeded: function(resource) |
| { |
| if (!resource || !resource._resourcesView) |
| return; |
| |
| var newView = this._createResourceView(resource); |
| if (newView.prototype === resource._resourcesView.prototype) |
| return; |
| |
| resource.warnings = 0; |
| resource.errors = 0; |
| |
| if (!this.currentQuery && resource._resourcesTreeElement) |
| resource._resourcesTreeElement.updateErrorsAndWarnings(); |
| |
| var oldView = resource._resourcesView; |
| |
| resource._resourcesView.detach(); |
| delete resource._resourcesView; |
| |
| resource._resourcesView = newView; |
| |
| newView.headersVisible = oldView.headersVisible; |
| |
| if (oldView.visible && oldView.element.parentNode) |
| newView.show(oldView.element.parentNode); |
| }, |
| |
| showResource: function(resource, line) |
| { |
| if (!resource) |
| return; |
| |
| this.containerElement.addStyleClass("viewing-resource"); |
| |
| if (this.visibleResource && this.visibleResource._resourcesView) |
| this.visibleResource._resourcesView.hide(); |
| |
| var view = this.resourceViewForResource(resource); |
| view.headersVisible = true; |
| view.show(this.viewsContainerElement); |
| |
| if (line) { |
| if (view.revealLine) |
| view.revealLine(line); |
| if (view.highlightLine) |
| view.highlightLine(line); |
| } |
| |
| if (resource._resourcesTreeElement) { |
| resource._resourcesTreeElement.reveal(); |
| resource._resourcesTreeElement.select(true); |
| } |
| |
| this.visibleResource = resource; |
| |
| this._updateSidebarWidth(); |
| }, |
| |
| showView: function(view) |
| { |
| if (!view) |
| return; |
| this.showResource(view.resource); |
| }, |
| |
| closeVisibleResource: function() |
| { |
| this.containerElement.removeStyleClass("viewing-resource"); |
| this._updateDividersLabelBarPosition(); |
| |
| if (this.visibleResource && this.visibleResource._resourcesView) |
| this.visibleResource._resourcesView.hide(); |
| delete this.visibleResource; |
| |
| if (this._lastSelectedGraphTreeElement) |
| this._lastSelectedGraphTreeElement.select(true); |
| |
| this._updateSidebarWidth(); |
| }, |
| |
| resourceViewForResource: function(resource) |
| { |
| if (!resource) |
| return null; |
| if (!resource._resourcesView) |
| resource._resourcesView = this._createResourceView(resource); |
| return resource._resourcesView; |
| }, |
| |
| sourceFrameForResource: function(resource) |
| { |
| var view = this.resourceViewForResource(resource); |
| if (!view) |
| return null; |
| |
| if (!view.setupSourceFrameIfNeeded) |
| return null; |
| |
| // Setting up the source frame requires that we be attached. |
| if (!this.element.parentNode) |
| this.attach(); |
| |
| view.setupSourceFrameIfNeeded(); |
| return view.sourceFrame; |
| }, |
| |
| handleKeyEvent: function(event) |
| { |
| this.sidebarTree.handleKeyEvent(event); |
| }, |
| |
| _makeLegendElement: function(label, value, color) |
| { |
| var legendElement = document.createElement("label"); |
| legendElement.className = "resources-graph-legend-item"; |
| |
| if (color) { |
| var swatch = document.createElement("canvas"); |
| swatch.className = "resources-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 = "resources-graph-legend-label"; |
| legendElement.appendChild(labelElement); |
| |
| var headerElement = document.createElement("div"); |
| var headerElement = document.createElement("div"); |
| headerElement.className = "resources-graph-legend-header"; |
| headerElement.textContent = label; |
| labelElement.appendChild(headerElement); |
| |
| var valueElement = document.createElement("div"); |
| valueElement.className = "resources-graph-legend-value"; |
| valueElement.textContent = value; |
| labelElement.appendChild(valueElement); |
| |
| return legendElement; |
| }, |
| |
| _sortResourcesIfNeeded: function() |
| { |
| var sortedElements = [].concat(this.resourcesTreeElement.children); |
| sortedElements.sort(this.sortingFunction); |
| |
| var sortedElementsLength = sortedElements.length; |
| for (var i = 0; i < sortedElementsLength; ++i) { |
| var treeElement = sortedElements[i]; |
| if (treeElement === this.resourcesTreeElement.children[i]) |
| continue; |
| |
| var wasSelected = treeElement.selected; |
| this.resourcesTreeElement.removeChild(treeElement); |
| this.resourcesTreeElement.insertChild(treeElement, i); |
| if (wasSelected) |
| treeElement.select(true); |
| |
| var graphElement = treeElement._resourceGraph.graphElement; |
| this.resourcesGraphsElement.insertBefore(graphElement, this.resourcesGraphsElement.children[i]); |
| } |
| }, |
| |
| _updateGraphDividersIfNeeded: function(force) |
| { |
| if (!this.visible) { |
| this.needsRefresh = true; |
| return; |
| } |
| |
| if (document.body.offsetWidth <= 0) { |
| // The stylesheet hasn't loaded yet or the window is closed, |
| // so we can't calculate what is need. Return early. |
| return; |
| } |
| |
| var dividerCount = Math.round(this.dividersElement.offsetWidth / 64); |
| var slice = this.calculator.boundarySpan / dividerCount; |
| if (!force && this._currentDividerSlice === slice) |
| return; |
| |
| this._currentDividerSlice = slice; |
| |
| this.dividersElement.removeChildren(); |
| this.dividersLabelBarElement.removeChildren(); |
| |
| for (var i = 1; i <= dividerCount; ++i) { |
| var divider = document.createElement("div"); |
| divider.className = "resources-divider"; |
| if (i === dividerCount) |
| divider.addStyleClass("last"); |
| divider.style.left = ((i / dividerCount) * 100) + "%"; |
| |
| this.dividersElement.appendChild(divider.cloneNode()); |
| |
| var label = document.createElement("div"); |
| label.className = "resources-divider-label"; |
| if (!isNaN(slice)) |
| label.textContent = this.calculator.formatValue(slice * i); |
| divider.appendChild(label); |
| |
| this.dividersLabelBarElement.appendChild(divider); |
| } |
| }, |
| |
| _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}]; |
| 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.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); |
| }, |
| |
| _updateSummaryGraph: function() |
| { |
| var graphInfo = this.calculator.computeSummaryValues(this._resources); |
| |
| var categoryOrder = ["documents", "stylesheets", "images", "scripts", "xhr", "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}, xhr: {r: 231, g: 231, b: 10}, fonts: {r: 255, g: 82, b: 62}, other: {r: 186, g: 186, b: 186}}; |
| var fillSegments = []; |
| |
| this.legendElement.removeChildren(); |
| |
| 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); |
| } |
| |
| 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); |
| }, |
| |
| _updateDividersLabelBarPosition: function() |
| { |
| var scrollTop = this.containerElement.scrollTop; |
| var dividersTop = (scrollTop < this.summaryElement.offsetHeight ? this.summaryElement.offsetHeight : scrollTop); |
| this.dividersElement.style.top = scrollTop + "px"; |
| this.dividersLabelBarElement.style.top = dividersTop + "px"; |
| }, |
| |
| _graphSelected: function(treeElement) |
| { |
| if (this._lastSelectedGraphTreeElement) |
| this._lastSelectedGraphTreeElement.selectedSortingOptionIndex = this.sortingSelectElement.selectedIndex; |
| |
| this._lastSelectedGraphTreeElement = treeElement; |
| |
| this.sortingSelectElement.removeChildren(); |
| for (var i = 0; i < treeElement.sortingOptions.length; ++i) { |
| var sortingOption = treeElement.sortingOptions[i]; |
| var option = document.createElement("option"); |
| option.label = sortingOption.name; |
| option.sortingFunction = sortingOption.sortingFunction; |
| option.calculator = sortingOption.calculator; |
| this.sortingSelectElement.appendChild(option); |
| } |
| |
| this.sortingSelectElement.selectedIndex = treeElement.selectedSortingOptionIndex; |
| this._changeSortingFunction(); |
| |
| this.closeVisibleResource(); |
| this.containerElement.scrollTop = 0; |
| }, |
| |
| _toggleLargerResources: function() |
| { |
| if (!this.resourcesTreeElement._childrenListNode) |
| return; |
| |
| this.resourcesTreeElement.smallChildren = !this.resourcesTreeElement.smallChildren; |
| |
| if (this.resourcesTreeElement.smallChildren) { |
| this.resourcesGraphsElement.addStyleClass("small"); |
| this.largerResourcesButton.title = WebInspector.UIString("Use large resource rows."); |
| this.largerResourcesButton.removeStyleClass("toggled-on"); |
| this._adjustScrollPosition(); |
| } else { |
| this.resourcesGraphsElement.removeStyleClass("small"); |
| this.largerResourcesButton.title = WebInspector.UIString("Use small resource rows."); |
| this.largerResourcesButton.addStyleClass("toggled-on"); |
| } |
| }, |
| |
| _adjustScrollPosition: function() |
| { |
| // Prevent the container from being scrolled off the end. |
| if ((this.containerElement.scrollTop + this.containerElement.offsetHeight) > this.sidebarElement.offsetHeight) |
| this.containerElement.scrollTop = (this.sidebarElement.offsetHeight - this.containerElement.offsetHeight); |
| }, |
| |
| _changeSortingFunction: function() |
| { |
| var selectedOption = this.sortingSelectElement[this.sortingSelectElement.selectedIndex]; |
| this.sortingFunction = selectedOption.sortingFunction; |
| this.calculator = selectedOption.calculator; |
| }, |
| |
| _createResourceView: function(resource) |
| { |
| switch (resource.category) { |
| case WebInspector.resourceCategories.documents: |
| case WebInspector.resourceCategories.stylesheets: |
| case WebInspector.resourceCategories.scripts: |
| case WebInspector.resourceCategories.xhr: |
| return new WebInspector.SourceView(resource); |
| case WebInspector.resourceCategories.images: |
| return new WebInspector.ImageView(resource); |
| case WebInspector.resourceCategories.fonts: |
| return new WebInspector.FontView(resource); |
| default: |
| return new WebInspector.ResourceView(resource); |
| } |
| }, |
| |
| _startSidebarDragging: function(event) |
| { |
| WebInspector.elementDragStart(this.sidebarResizeElement, this._sidebarDragging.bind(this), this._endSidebarDragging.bind(this), event, "col-resize"); |
| }, |
| |
| _sidebarDragging: function(event) |
| { |
| this._updateSidebarWidth(event.pageX); |
| |
| event.preventDefault(); |
| }, |
| |
| _endSidebarDragging: function(event) |
| { |
| WebInspector.elementDragEnd(event); |
| }, |
| |
| _updateSidebarWidth: function(width) |
| { |
| if (this.sidebarElement.offsetWidth <= 0) { |
| // The stylesheet hasn't loaded yet or the window is closed, |
| // so we can't calculate what is need. Return early. |
| return; |
| } |
| |
| if (!("_currentSidebarWidth" in this)) |
| this._currentSidebarWidth = this.sidebarElement.offsetWidth; |
| |
| if (typeof width === "undefined") |
| width = this._currentSidebarWidth; |
| |
| width = Number.constrain(width, Preferences.minSidebarWidth, window.innerWidth / 2); |
| |
| this._currentSidebarWidth = width; |
| |
| if (this.visibleResource) { |
| this.containerElement.style.width = width + "px"; |
| this.sidebarElement.style.removeProperty("width"); |
| } else { |
| this.sidebarElement.style.width = width + "px"; |
| this.containerElement.style.removeProperty("width"); |
| } |
| |
| this.containerContentElement.style.left = width + "px"; |
| this.viewsContainerElement.style.left = width + "px"; |
| this.sidebarResizeElement.style.left = (width - 3) + "px"; |
| |
| this._updateGraphDividersIfNeeded(); |
| |
| var visibleView = this.visibleView; |
| if (visibleView && "resize" in visibleView) |
| visibleView.resize(); |
| } |
| } |
| |
| WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype; |
| |
| WebInspector.ResourceCalculator = function() |
| { |
| } |
| |
| WebInspector.ResourceCalculator.prototype = { |
| computeSummaryValues: function(resources) |
| { |
| var total = 0; |
| var categoryValues = {}; |
| |
| var resourcesLength = resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = resources[i]; |
| var value = this._value(resource); |
| if (typeof value === "undefined") |
| continue; |
| if (!(resource.category.name in categoryValues)) |
| categoryValues[resource.category.name] = 0; |
| categoryValues[resource.category.name] += value; |
| total += value; |
| } |
| |
| return {categoryValues: categoryValues, total: total}; |
| }, |
| |
| computeBarGraphPercentages: function(resource) |
| { |
| return {start: 0, middle: 0, end: (this._value(resource) / this.boundarySpan) * 100}; |
| }, |
| |
| computeBarGraphLabels: function(resource) |
| { |
| const label = this.formatValue(this._value(resource)); |
| var tooltip = label; |
| if (resource.cached) |
| tooltip = WebInspector.UIString("%s (from cache)", tooltip); |
| return {left: label, right: label, tooltip: tooltip}; |
| }, |
| |
| get boundarySpan() |
| { |
| return this.maximumBoundary - this.minimumBoundary; |
| }, |
| |
| updateBoundaries: function(resource) |
| { |
| this.minimumBoundary = 0; |
| |
| var value = this._value(resource); |
| if (typeof this.maximumBoundary === "undefined" || value > this.maximumBoundary) { |
| this.maximumBoundary = value; |
| return true; |
| } |
| |
| return false; |
| }, |
| |
| reset: function() |
| { |
| delete this.minimumBoundary; |
| delete this.maximumBoundary; |
| }, |
| |
| _value: function(resource) |
| { |
| return 0; |
| }, |
| |
| formatValue: function(value) |
| { |
| return value.toString(); |
| } |
| } |
| |
| WebInspector.ResourceTimeCalculator = function(startAtZero) |
| { |
| WebInspector.ResourceCalculator.call(this); |
| this.startAtZero = startAtZero; |
| } |
| |
| WebInspector.ResourceTimeCalculator.prototype = { |
| computeSummaryValues: function(resources) |
| { |
| var resourcesByCategory = {}; |
| var resourcesLength = resources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = resources[i]; |
| if (!(resource.category.name in resourcesByCategory)) |
| resourcesByCategory[resource.category.name] = []; |
| resourcesByCategory[resource.category.name].push(resource); |
| } |
| |
| var earliestStart; |
| var latestEnd; |
| var categoryValues = {}; |
| for (var category in resourcesByCategory) { |
| resourcesByCategory[category].sort(WebInspector.Resource.CompareByTime); |
| categoryValues[category] = 0; |
| |
| var segment = {start: -1, end: -1}; |
| |
| var categoryResources = resourcesByCategory[category]; |
| var resourcesLength = categoryResources.length; |
| for (var i = 0; i < resourcesLength; ++i) { |
| var resource = categoryResources[i]; |
| if (resource.startTime === -1 || resource.endTime === -1) |
| continue; |
| |
| if (typeof earliestStart === "undefined") |
| earliestStart = resource.startTime; |
| else |
| earliestStart = Math.min(earliestStart, resource.startTime); |
| |
| if (typeof latestEnd === "undefined") |
| latestEnd = resource.endTime; |
| else |
| latestEnd = Math.max(latestEnd, resource.endTime); |
| |
| if (resource.startTime <= segment.end) { |
| segment.end = Math.max(segment.end, resource.endTime); |
| continue; |
| } |
| |
| categoryValues[category] += segment.end - segment.start; |
| |
| segment.start = resource.startTime; |
| segment.end = resource.endTime; |
| } |
| |
| // Add the last segment |
| categoryValues[category] += segment.end - segment.start; |
| } |
| |
| return {categoryValues: categoryValues, total: latestEnd - earliestStart}; |
| }, |
| |
| computeBarGraphPercentages: function(resource) |
| { |
| if (resource.startTime !== -1) |
| var start = ((resource.startTime - this.minimumBoundary) / this.boundarySpan) * 100; |
| else |
| var start = 0; |
| |
| if (resource.responseReceivedTime !== -1) |
| var middle = ((resource.responseReceivedTime - this.minimumBoundary) / this.boundarySpan) * 100; |
| else |
| var middle = (this.startAtZero ? start : 100); |
| |
| if (resource.endTime !== -1) |
| var end = ((resource.endTime - this.minimumBoundary) / this.boundarySpan) * 100; |
| else |
| var end = (this.startAtZero ? middle : 100); |
| |
| if (this.startAtZero) { |
| end -= start; |
| middle -= start; |
| start = 0; |
| } |
| |
| return {start: start, middle: middle, end: end}; |
| }, |
| |
| computeBarGraphLabels: function(resource) |
| { |
| var leftLabel = ""; |
| if (resource.latency > 0) |
| leftLabel = this.formatValue(resource.latency); |
| |
| var rightLabel = ""; |
| if (resource.responseReceivedTime !== -1 && resource.endTime !== -1) |
| rightLabel = this.formatValue(resource.endTime - resource.responseReceivedTime); |
| |
| if (leftLabel && rightLabel) { |
| var total = this.formatValue(resource.duration); |
| var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total); |
| } else if (leftLabel) |
| var tooltip = WebInspector.UIString("%s latency", leftLabel); |
| else if (rightLabel) |
| var tooltip = WebInspector.UIString("%s download", rightLabel); |
| |
| if (resource.cached) |
| tooltip = WebInspector.UIString("%s (from cache)", tooltip); |
| |
| return {left: leftLabel, right: rightLabel, tooltip: tooltip}; |
| }, |
| |
| updateBoundaries: function(resource) |
| { |
| var didChange = false; |
| |
| var lowerBound; |
| if (this.startAtZero) |
| lowerBound = 0; |
| else |
| lowerBound = this._lowerBound(resource); |
| |
| if (lowerBound !== -1 && (typeof this.minimumBoundary === "undefined" || lowerBound < this.minimumBoundary)) { |
| this.minimumBoundary = lowerBound; |
| didChange = true; |
| } |
| |
| var upperBound = this._upperBound(resource); |
| if (upperBound !== -1 && (typeof this.maximumBoundary === "undefined" || upperBound > this.maximumBoundary)) { |
| this.maximumBoundary = upperBound; |
| didChange = true; |
| } |
| |
| return didChange; |
| }, |
| |
| formatValue: function(value) |
| { |
| return Number.secondsToString(value, WebInspector.UIString.bind(WebInspector)); |
| }, |
| |
| _lowerBound: function(resource) |
| { |
| return 0; |
| }, |
| |
| _upperBound: function(resource) |
| { |
| return 0; |
| }, |
| } |
| |
| WebInspector.ResourceTimeCalculator.prototype.__proto__ = WebInspector.ResourceCalculator.prototype; |
| |
| WebInspector.ResourceTransferTimeCalculator = function() |
| { |
| WebInspector.ResourceTimeCalculator.call(this, false); |
| } |
| |
| WebInspector.ResourceTransferTimeCalculator.prototype = { |
| formatValue: function(value) |
| { |
| return Number.secondsToString(value, WebInspector.UIString.bind(WebInspector)); |
| }, |
| |
| _lowerBound: function(resource) |
| { |
| return resource.startTime; |
| }, |
| |
| _upperBound: function(resource) |
| { |
| return resource.endTime; |
| } |
| } |
| |
| WebInspector.ResourceTransferTimeCalculator.prototype.__proto__ = WebInspector.ResourceTimeCalculator.prototype; |
| |
| WebInspector.ResourceTransferDurationCalculator = function() |
| { |
| WebInspector.ResourceTimeCalculator.call(this, true); |
| } |
| |
| WebInspector.ResourceTransferDurationCalculator.prototype = { |
| formatValue: function(value) |
| { |
| return Number.secondsToString(value, WebInspector.UIString.bind(WebInspector)); |
| }, |
| |
| _upperBound: function(resource) |
| { |
| return resource.duration; |
| } |
| } |
| |
| WebInspector.ResourceTransferDurationCalculator.prototype.__proto__ = WebInspector.ResourceTimeCalculator.prototype; |
| |
| WebInspector.ResourceTransferSizeCalculator = function() |
| { |
| WebInspector.ResourceCalculator.call(this); |
| } |
| |
| WebInspector.ResourceTransferSizeCalculator.prototype = { |
| _value: function(resource) |
| { |
| return resource.contentLength; |
| }, |
| |
| formatValue: function(value) |
| { |
| return Number.bytesToString(value, WebInspector.UIString.bind(WebInspector)); |
| } |
| } |
| |
| WebInspector.ResourceTransferSizeCalculator.prototype.__proto__ = WebInspector.ResourceCalculator.prototype; |
| |
| WebInspector.ResourceSidebarTreeElement = function(resource) |
| { |
| this.resource = resource; |
| |
| this.createIconElement(); |
| |
| WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "", "", resource); |
| |
| this.refreshTitles(); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.prototype = { |
| onattach: function() |
| { |
| WebInspector.SidebarTreeElement.prototype.onattach.call(this); |
| |
| this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name); |
| }, |
| |
| onselect: function() |
| { |
| WebInspector.panels.resources.showResource(this.resource); |
| }, |
| |
| get mainTitle() |
| { |
| return this.resource.displayName; |
| }, |
| |
| set mainTitle(x) |
| { |
| // Do nothing. |
| }, |
| |
| get subtitle() |
| { |
| var subtitle = this.resource.displayDomain; |
| |
| if (this.resource.path && this.resource.lastPathComponent) { |
| var lastPathComponentIndex = this.resource.path.lastIndexOf("/" + this.resource.lastPathComponent); |
| if (lastPathComponentIndex != -1) |
| subtitle += this.resource.path.substring(0, lastPathComponentIndex); |
| } |
| |
| return subtitle; |
| }, |
| |
| set subtitle(x) |
| { |
| // Do nothing. |
| }, |
| |
| createIconElement: function() |
| { |
| var previousIconElement = this.iconElement; |
| |
| if (this.resource.category === WebInspector.resourceCategories.images) { |
| var previewImage = document.createElement("img"); |
| previewImage.className = "image-resource-icon-preview"; |
| previewImage.src = this.resource.url; |
| |
| this.iconElement = document.createElement("div"); |
| this.iconElement.className = "icon"; |
| this.iconElement.appendChild(previewImage); |
| } else { |
| this.iconElement = document.createElement("img"); |
| this.iconElement.className = "icon"; |
| } |
| |
| if (previousIconElement) |
| previousIconElement.parentNode.replaceChild(this.iconElement, previousIconElement); |
| }, |
| |
| refresh: function() |
| { |
| this.refreshTitles(); |
| |
| if (!this._listItemNode.hasStyleClass("resources-category-" + this.resource.category.name)) { |
| this._listItemNode.removeMatchingStyleClasses("resources-category-\\w+"); |
| this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name); |
| |
| this.createIconElement(); |
| } |
| }, |
| |
| resetBubble: function() |
| { |
| this.bubbleText = ""; |
| this.bubbleElement.removeStyleClass("search-matches"); |
| this.bubbleElement.removeStyleClass("warning"); |
| this.bubbleElement.removeStyleClass("error"); |
| }, |
| |
| set searchMatches(matches) |
| { |
| this.resetBubble(); |
| |
| if (!matches) |
| return; |
| |
| this.bubbleText = matches; |
| this.bubbleElement.addStyleClass("search-matches"); |
| }, |
| |
| updateErrorsAndWarnings: function() |
| { |
| this.resetBubble(); |
| |
| if (this.resource.warnings || this.resource.errors) |
| this.bubbleText = (this.resource.warnings + this.resource.errors); |
| |
| if (this.resource.warnings) |
| this.bubbleElement.addStyleClass("warning"); |
| |
| if (this.resource.errors) |
| this.bubbleElement.addStyleClass("error"); |
| } |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByAscendingStartTime = function(a, b) |
| { |
| return WebInspector.Resource.CompareByStartTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByEndTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByAscendingResponseReceivedTime = function(a, b) |
| { |
| return WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByStartTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByEndTime(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByAscendingEndTime = function(a, b) |
| { |
| return WebInspector.Resource.CompareByEndTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByStartTime(a.resource, b.resource) |
| || WebInspector.Resource.CompareByResponseReceivedTime(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByDescendingDuration = function(a, b) |
| { |
| return -1 * WebInspector.Resource.CompareByDuration(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByDescendingLatency = function(a, b) |
| { |
| return -1 * WebInspector.Resource.CompareByLatency(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize = function(a, b) |
| { |
| return -1 * WebInspector.Resource.CompareBySize(a.resource, b.resource); |
| } |
| |
| WebInspector.ResourceSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype; |
| |
| WebInspector.ResourceGraph = function(resource) |
| { |
| this.resource = resource; |
| |
| this._graphElement = document.createElement("div"); |
| this._graphElement.className = "resources-graph-side"; |
| this._graphElement.addEventListener("mouseover", this.refreshLabelPositions.bind(this), false); |
| |
| if (resource.cached) |
| this._graphElement.addStyleClass("resource-cached"); |
| |
| this._barAreaElement = document.createElement("div"); |
| this._barAreaElement.className = "resources-graph-bar-area hidden"; |
| this._graphElement.appendChild(this._barAreaElement); |
| |
| this._barLeftElement = document.createElement("div"); |
| this._barLeftElement.className = "resources-graph-bar waiting"; |
| this._barAreaElement.appendChild(this._barLeftElement); |
| |
| this._barRightElement = document.createElement("div"); |
| this._barRightElement.className = "resources-graph-bar"; |
| this._barAreaElement.appendChild(this._barRightElement); |
| |
| this._labelLeftElement = document.createElement("div"); |
| this._labelLeftElement.className = "resources-graph-label waiting"; |
| this._barAreaElement.appendChild(this._labelLeftElement); |
| |
| this._labelRightElement = document.createElement("div"); |
| this._labelRightElement.className = "resources-graph-label"; |
| this._barAreaElement.appendChild(this._labelRightElement); |
| |
| this._graphElement.addStyleClass("resources-category-" + resource.category.name); |
| } |
| |
| WebInspector.ResourceGraph.prototype = { |
| get graphElement() |
| { |
| return this._graphElement; |
| }, |
| |
| refreshLabelPositions: function() |
| { |
| this._labelLeftElement.style.removeProperty("left"); |
| this._labelLeftElement.style.removeProperty("right"); |
| this._labelLeftElement.removeStyleClass("before"); |
| this._labelLeftElement.removeStyleClass("hidden"); |
| |
| this._labelRightElement.style.removeProperty("left"); |
| this._labelRightElement.style.removeProperty("right"); |
| this._labelRightElement.removeStyleClass("after"); |
| this._labelRightElement.removeStyleClass("hidden"); |
| |
| const labelPadding = 10; |
| const rightBarWidth = (this._barRightElement.offsetWidth - labelPadding); |
| const leftBarWidth = ((this._barLeftElement.offsetWidth - this._barRightElement.offsetWidth) - labelPadding); |
| |
| var labelBefore = (this._labelLeftElement.offsetWidth > leftBarWidth); |
| var labelAfter = (this._labelRightElement.offsetWidth > rightBarWidth); |
| |
| if (labelBefore) { |
| if ((this._graphElement.offsetWidth * (this._percentages.start / 100)) < (this._labelLeftElement.offsetWidth + 10)) |
| this._labelLeftElement.addStyleClass("hidden"); |
| this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%"); |
| this._labelLeftElement.addStyleClass("before"); |
| } else { |
| this._labelLeftElement.style.setProperty("left", this._percentages.start + "%"); |
| this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%"); |
| } |
| |
| if (labelAfter) { |
| if ((this._graphElement.offsetWidth * ((100 - this._percentages.end) / 100)) < (this._labelRightElement.offsetWidth + 10)) |
| this._labelRightElement.addStyleClass("hidden"); |
| this._labelRightElement.style.setProperty("left", this._percentages.end + "%"); |
| this._labelRightElement.addStyleClass("after"); |
| } else { |
| this._labelRightElement.style.setProperty("left", this._percentages.middle + "%"); |
| this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%"); |
| } |
| }, |
| |
| refresh: function(calculator) |
| { |
| var percentages = calculator.computeBarGraphPercentages(this.resource); |
| var labels = calculator.computeBarGraphLabels(this.resource); |
| |
| this._percentages = percentages; |
| |
| this._barAreaElement.removeStyleClass("hidden"); |
| |
| if (!this._graphElement.hasStyleClass("resources-category-" + this.resource.category.name)) { |
| this._graphElement.removeMatchingStyleClasses("resources-category-\\w+"); |
| this._graphElement.addStyleClass("resources-category-" + this.resource.category.name); |
| } |
| |
| this._barLeftElement.style.setProperty("left", percentages.start + "%"); |
| this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%"); |
| |
| this._barRightElement.style.setProperty("left", percentages.middle + "%"); |
| this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%"); |
| |
| this._labelLeftElement.textContent = labels.left; |
| this._labelRightElement.textContent = labels.right; |
| |
| var tooltip = (labels.tooltip || ""); |
| this._barLeftElement.title = tooltip; |
| this._labelLeftElement.title = tooltip; |
| this._labelRightElement.title = tooltip; |
| this._barRightElement.title = tooltip; |
| } |
| } |
