diff options
Diffstat (limited to 'WebCore/inspector/front-end/ResourcesPanel.js')
| -rw-r--r-- | WebCore/inspector/front-end/ResourcesPanel.js | 1649 |
1 files changed, 0 insertions, 1649 deletions
diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js deleted file mode 100644 index e02baf3..0000000 --- a/WebCore/inspector/front-end/ResourcesPanel.js +++ /dev/null @@ -1,1649 +0,0 @@ -/* - * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. - * Copyright (C) 2008 Anthony Ricaud (rik24d@gmail.com) - * - * 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; - } -} |