OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
3 * Copyright (C) 2008 Anthony Ricaud (rik24d@gmail.com) | 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * | 8 * |
9 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
11 * 2. Redistributions in binary form must reproduce the above copyright | 11 * 2. Redistributions in binary form must reproduce the above copyright |
12 * notice, this list of conditions and the following disclaimer in the | 12 * notice, this list of conditions and the following disclaimer in the |
13 * documentation and/or other materials provided with the distribution. | 13 * documentation and/or other materials provided with the distribution. |
(...skipping 12 matching lines...) Expand all Loading... |
26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | 26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
28 */ | 28 */ |
29 | 29 |
30 WebInspector.ResourcesPanel = function() | 30 WebInspector.ResourcesPanel = function() |
31 { | 31 { |
32 WebInspector.Panel.call(this); | 32 WebInspector.Panel.call(this); |
33 | 33 |
34 this.element.addStyleClass("resources"); | 34 this.element.addStyleClass("resources"); |
35 | 35 |
| 36 this.filterBarElement = document.createElement("div"); |
| 37 this.filterBarElement.id = "resources-filter"; |
| 38 this.element.appendChild(this.filterBarElement); |
| 39 |
36 this.viewsContainerElement = document.createElement("div"); | 40 this.viewsContainerElement = document.createElement("div"); |
37 this.viewsContainerElement.id = "resource-views"; | 41 this.viewsContainerElement.id = "resource-views"; |
38 this.element.appendChild(this.viewsContainerElement); | 42 this.element.appendChild(this.viewsContainerElement); |
39 | 43 |
40 this.containerElement = document.createElement("div"); | 44 this.containerElement = document.createElement("div"); |
41 this.containerElement.id = "resources-container"; | 45 this.containerElement.id = "resources-container"; |
42 this.containerElement.addEventListener("scroll", this._updateDividersLabelBa
rPosition.bind(this), false); | 46 this.containerElement.addEventListener("scroll", this._updateDividersLabelBa
rPosition.bind(this), false); |
43 this.element.appendChild(this.containerElement); | 47 this.element.appendChild(this.containerElement); |
44 | 48 |
45 this.sidebarElement = document.createElement("div"); | 49 this.sidebarElement = document.createElement("div"); |
46 this.sidebarElement.id = "resources-sidebar"; | 50 this.sidebarElement.id = "resources-sidebar"; |
47 this.sidebarElement.className = "sidebar"; | 51 this.sidebarElement.className = "sidebar"; |
48 this.containerElement.appendChild(this.sidebarElement); | 52 this.containerElement.appendChild(this.sidebarElement); |
49 | 53 |
50 this.sidebarResizeElement = document.createElement("div"); | 54 this.sidebarResizeElement = document.createElement("div"); |
51 this.sidebarResizeElement.className = "sidebar-resizer-vertical"; | 55 this.sidebarResizeElement.className = "sidebar-resizer-vertical"; |
52 this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarDr
agging.bind(this), false); | 56 this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarDr
agging.bind(this), false); |
53 this.element.appendChild(this.sidebarResizeElement); | 57 this.element.appendChild(this.sidebarResizeElement); |
54 | 58 |
55 this.containerContentElement = document.createElement("div"); | 59 this.containerContentElement = document.createElement("div"); |
56 this.containerContentElement.id = "resources-container-content"; | 60 this.containerContentElement.id = "resources-container-content"; |
57 this.containerElement.appendChild(this.containerContentElement); | 61 this.containerElement.appendChild(this.containerContentElement); |
58 | 62 |
59 this.summaryElement = document.createElement("div"); | 63 this.summaryBar = new WebInspector.SummaryBar(this.categories); |
60 this.summaryElement.id = "resources-summary"; | 64 this.summaryBar.element.id = "resources-summary"; |
61 this.containerContentElement.appendChild(this.summaryElement); | 65 this.containerContentElement.appendChild(this.summaryBar.element); |
62 | 66 |
63 this.resourcesGraphsElement = document.createElement("div"); | 67 this.resourcesGraphsElement = document.createElement("div"); |
64 this.resourcesGraphsElement.id = "resources-graphs"; | 68 this.resourcesGraphsElement.id = "resources-graphs"; |
65 this.containerContentElement.appendChild(this.resourcesGraphsElement); | 69 this.containerContentElement.appendChild(this.resourcesGraphsElement); |
66 | 70 |
67 this.dividersElement = document.createElement("div"); | 71 this.dividersElement = document.createElement("div"); |
68 this.dividersElement.id = "resources-dividers"; | 72 this.dividersElement.id = "resources-dividers"; |
69 this.containerContentElement.appendChild(this.dividersElement); | 73 this.containerContentElement.appendChild(this.dividersElement); |
70 | 74 |
71 this.dividersLabelBarElement = document.createElement("div"); | 75 this.dividersLabelBarElement = document.createElement("div"); |
72 this.dividersLabelBarElement.id = "resources-dividers-label-bar"; | 76 this.dividersLabelBarElement.id = "resources-dividers-label-bar"; |
73 this.containerContentElement.appendChild(this.dividersLabelBarElement); | 77 this.containerContentElement.appendChild(this.dividersLabelBarElement); |
74 | 78 |
75 this.summaryGraphElement = document.createElement("canvas"); | |
76 this.summaryGraphElement.setAttribute("width", "450"); | |
77 this.summaryGraphElement.setAttribute("height", "38"); | |
78 this.summaryGraphElement.id = "resources-summary-graph"; | |
79 this.summaryElement.appendChild(this.summaryGraphElement); | |
80 | |
81 this.legendElement = document.createElement("div"); | |
82 this.legendElement.id = "resources-graph-legend"; | |
83 this.summaryElement.appendChild(this.legendElement); | |
84 | |
85 this.sidebarTreeElement = document.createElement("ol"); | 79 this.sidebarTreeElement = document.createElement("ol"); |
86 this.sidebarTreeElement.className = "sidebar-tree"; | 80 this.sidebarTreeElement.className = "sidebar-tree"; |
87 this.sidebarElement.appendChild(this.sidebarTreeElement); | 81 this.sidebarElement.appendChild(this.sidebarTreeElement); |
88 | 82 |
89 this.sidebarTree = new TreeOutline(this.sidebarTreeElement); | 83 this.sidebarTree = new TreeOutline(this.sidebarTreeElement); |
90 | 84 |
91 var timeGraphItem = new WebInspector.SidebarTreeElement("resources-time-grap
h-sidebar-item", WebInspector.UIString("Time")); | 85 var timeGraphItem = new WebInspector.SidebarTreeElement("resources-time-grap
h-sidebar-item", WebInspector.UIString("Time")); |
92 timeGraphItem.onselect = this._graphSelected.bind(this); | 86 timeGraphItem.onselect = this._graphSelected.bind(this); |
93 | 87 |
94 var transferTimeCalculator = new WebInspector.ResourceTransferTimeCalculator
(); | 88 var transferTimeCalculator = new WebInspector.ResourceTransferTimeCalculator
(); |
(...skipping 24 matching lines...) Expand all Loading... |
119 | 113 |
120 this.graphsTreeElement.appendChild(timeGraphItem); | 114 this.graphsTreeElement.appendChild(timeGraphItem); |
121 this.graphsTreeElement.appendChild(sizeGraphItem); | 115 this.graphsTreeElement.appendChild(sizeGraphItem); |
122 this.graphsTreeElement.expand(); | 116 this.graphsTreeElement.expand(); |
123 | 117 |
124 this.resourcesTreeElement = new WebInspector.SidebarSectionTreeElement(WebIn
spector.UIString("RESOURCES"), {}, true); | 118 this.resourcesTreeElement = new WebInspector.SidebarSectionTreeElement(WebIn
spector.UIString("RESOURCES"), {}, true); |
125 this.sidebarTree.appendChild(this.resourcesTreeElement); | 119 this.sidebarTree.appendChild(this.resourcesTreeElement); |
126 | 120 |
127 this.resourcesTreeElement.expand(); | 121 this.resourcesTreeElement.expand(); |
128 | 122 |
129 this.largerResourcesButton = document.createElement("button"); | 123 var panelEnablerHeading = WebInspector.UIString("You need to enable resource
tracking to use this panel."); |
130 this.largerResourcesButton.id = "resources-larger-resources-status-bar-item"
; | 124 var panelEnablerDisclaimer = WebInspector.UIString("Enabling resource tracki
ng will reload the page and make page loading slower."); |
131 this.largerResourcesButton.className = "status-bar-item toggled-on"; | 125 var panelEnablerButton = WebInspector.UIString("Enable resource tracking"); |
132 this.largerResourcesButton.title = WebInspector.UIString("Use small resource
rows."); | 126 |
| 127 this.panelEnablerView = new WebInspector.PanelEnablerView("resources", panel
EnablerHeading, panelEnablerDisclaimer, panelEnablerButton); |
| 128 this.panelEnablerView.addEventListener("enable clicked", this._enableResourc
eTracking, this); |
| 129 |
| 130 this.element.appendChild(this.panelEnablerView.element); |
| 131 |
| 132 this.enableToggleButton = new WebInspector.StatusBarButton("", "enable-toggl
e-status-bar-item"); |
| 133 this.enableToggleButton.addEventListener("click", this._toggleResourceTracki
ng.bind(this), false); |
| 134 |
| 135 this.largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.U
IString("Use small resource rows."), "resources-larger-resources-status-bar-item
"); |
| 136 this.largerResourcesButton.toggled = true; |
133 this.largerResourcesButton.addEventListener("click", this._toggleLargerResou
rces.bind(this), false); | 137 this.largerResourcesButton.addEventListener("click", this._toggleLargerResou
rces.bind(this), false); |
134 | 138 |
135 this.sortingSelectElement = document.createElement("select"); | 139 this.sortingSelectElement = document.createElement("select"); |
136 this.sortingSelectElement.className = "status-bar-item"; | 140 this.sortingSelectElement.className = "status-bar-item"; |
137 this.sortingSelectElement.addEventListener("change", this._changeSortingFunc
tion.bind(this), false); | 141 this.sortingSelectElement.addEventListener("change", this._changeSortingFunc
tion.bind(this), false); |
138 | 142 |
| 143 var createFilterElement = function (category) { |
| 144 var categoryElement = document.createElement("li"); |
| 145 categoryElement.category = category; |
| 146 categoryElement.addStyleClass(category); |
| 147 var label = WebInspector.UIString("All"); |
| 148 if (WebInspector.resourceCategories[category]) |
| 149 label = WebInspector.resourceCategories[category].title; |
| 150 categoryElement.appendChild(document.createTextNode(label)); |
| 151 categoryElement.addEventListener("click", this._updateFilter.bind(this),
false); |
| 152 this.filterBarElement.appendChild(categoryElement); |
| 153 return categoryElement; |
| 154 }; |
| 155 |
| 156 var allElement = createFilterElement.call(this, "all"); |
| 157 this.filter(allElement.category); |
| 158 for (var category in this.categories) |
| 159 createFilterElement.call(this, category); |
| 160 |
139 this.reset(); | 161 this.reset(); |
140 | 162 |
141 timeGraphItem.select(); | 163 timeGraphItem.select(); |
142 } | 164 } |
143 | 165 |
144 WebInspector.ResourcesPanel.prototype = { | 166 WebInspector.ResourcesPanel.prototype = { |
145 toolbarItemClass: "resources", | 167 toolbarItemClass: "resources", |
146 | 168 |
| 169 get categories() |
| 170 { |
| 171 if (!this._categories) { |
| 172 this._categories = {documents: {color: {r: 47, g: 102, b: 236}}, sty
lesheets: {color: {r: 157, g: 231, b: 119}}, images: {color: {r: 164, g: 60, b:
255}}, scripts: {color: {r: 255, g: 121, b: 0}}, xhr: {color: {r: 231, g: 231, b
: 10}}, fonts: {color: {r: 255, g: 82, b: 62}}, other: {color: {r: 186, g: 186,
b: 186}}}; |
| 173 for (var category in this._categories) { |
| 174 this._categories[category].title = WebInspector.resourceCategori
es[category].title; |
| 175 } |
| 176 } |
| 177 return this._categories; |
| 178 }, |
| 179 |
| 180 filter: function (category) { |
| 181 if (this._filterCategory && this._filterCategory === category) |
| 182 return; |
| 183 |
| 184 if (this._filterCategory) { |
| 185 var filterElement = this.filterBarElement.getElementsByClassName(thi
s._filterCategory)[0]; |
| 186 filterElement.removeStyleClass("selected"); |
| 187 var oldClass = "filter-" + this._filterCategory; |
| 188 this.resourcesTreeElement.childrenListElement.removeStyleClass(oldCl
ass); |
| 189 this.resourcesGraphsElement.removeStyleClass(oldClass); |
| 190 } |
| 191 this._filterCategory = category; |
| 192 var filterElement = this.filterBarElement.getElementsByClassName(this._f
ilterCategory)[0]; |
| 193 filterElement.addStyleClass("selected"); |
| 194 var newClass = "filter-" + this._filterCategory; |
| 195 this.resourcesTreeElement.childrenListElement.addStyleClass(newClass); |
| 196 this.resourcesGraphsElement.addStyleClass(newClass); |
| 197 }, |
| 198 |
| 199 _updateFilter: function (e) { |
| 200 this.filter(e.target.category); |
| 201 }, |
| 202 |
147 get toolbarItemLabel() | 203 get toolbarItemLabel() |
148 { | 204 { |
149 return WebInspector.UIString("Resources"); | 205 return WebInspector.UIString("Resources"); |
150 }, | 206 }, |
151 | 207 |
152 get statusBarItems() | 208 get statusBarItems() |
153 { | 209 { |
154 return [this.largerResourcesButton, this.sortingSelectElement]; | 210 return [this.enableToggleButton.element, this.largerResourcesButton.elem
ent, this.sortingSelectElement]; |
155 }, | 211 }, |
156 | 212 |
157 show: function() | 213 show: function() |
158 { | 214 { |
159 WebInspector.Panel.prototype.show.call(this); | 215 WebInspector.Panel.prototype.show.call(this); |
160 | 216 |
161 this._updateDividersLabelBarPosition(); | 217 this._updateDividersLabelBarPosition(); |
162 this._updateSidebarWidth(); | 218 this._updateSidebarWidth(); |
163 this.refreshIfNeeded(); | 219 this.refreshIfNeeded(); |
164 | 220 |
(...skipping 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
351 for (var i = 0; i < staleResourcesLength; ++i) | 407 for (var i = 0; i < staleResourcesLength; ++i) |
352 this._staleResources[i]._resourcesTreeElement._resourceGraph.refresh
(this.calculator); | 408 this._staleResources[i]._resourcesTreeElement._resourceGraph.refresh
(this.calculator); |
353 | 409 |
354 this._staleResources = []; | 410 this._staleResources = []; |
355 | 411 |
356 this._updateGraphDividersIfNeeded(); | 412 this._updateGraphDividersIfNeeded(); |
357 this._sortResourcesIfNeeded(); | 413 this._sortResourcesIfNeeded(); |
358 this._updateSummaryGraph(); | 414 this._updateSummaryGraph(); |
359 }, | 415 }, |
360 | 416 |
| 417 resourceTrackingWasEnabled: function() |
| 418 { |
| 419 this.reset(); |
| 420 }, |
| 421 |
| 422 resourceTrackingWasDisabled: function() |
| 423 { |
| 424 this.reset(); |
| 425 }, |
| 426 |
361 reset: function() | 427 reset: function() |
362 { | 428 { |
363 this.closeVisibleResource(); | 429 this.closeVisibleResource(); |
364 | 430 |
365 this.containerElement.scrollTop = 0; | 431 this.containerElement.scrollTop = 0; |
366 | 432 |
367 delete this.currentQuery; | 433 delete this.currentQuery; |
368 this.searchCanceled(); | 434 this.searchCanceled(); |
369 | 435 |
370 if (this._calculator) | 436 if (this._calculator) |
(...skipping 11 matching lines...) Expand all Loading... |
382 delete resource._resourcesView; | 448 delete resource._resourcesView; |
383 } | 449 } |
384 } | 450 } |
385 | 451 |
386 this._resources = []; | 452 this._resources = []; |
387 this._staleResources = []; | 453 this._staleResources = []; |
388 | 454 |
389 this.resourcesTreeElement.removeChildren(); | 455 this.resourcesTreeElement.removeChildren(); |
390 this.viewsContainerElement.removeChildren(); | 456 this.viewsContainerElement.removeChildren(); |
391 this.resourcesGraphsElement.removeChildren(); | 457 this.resourcesGraphsElement.removeChildren(); |
392 this.legendElement.removeChildren(); | 458 this.summaryBar.reset(); |
393 | 459 |
394 this._updateGraphDividersIfNeeded(true); | 460 this._updateGraphDividersIfNeeded(true); |
395 | 461 |
396 this._drawSummaryGraph(); // draws an empty graph | 462 if (InspectorController.resourceTrackingEnabled()) { |
| 463 this.enableToggleButton.title = WebInspector.UIString("Resource trac
king enabled. Click to disable."); |
| 464 this.enableToggleButton.toggled = true; |
| 465 this.largerResourcesButton.visible = true; |
| 466 this.sortingSelectElement.removeStyleClass("hidden"); |
| 467 this.panelEnablerView.visible = false; |
| 468 } else { |
| 469 this.enableToggleButton.title = WebInspector.UIString("Resource trac
king disabled. Click to enable."); |
| 470 this.enableToggleButton.toggled = false; |
| 471 this.largerResourcesButton.visible = false; |
| 472 this.sortingSelectElement.addStyleClass("hidden"); |
| 473 this.panelEnablerView.visible = true; |
| 474 } |
397 }, | 475 }, |
398 | 476 |
399 addResource: function(resource) | 477 addResource: function(resource) |
400 { | 478 { |
401 this._resources.push(resource); | 479 this._resources.push(resource); |
402 this.refreshResource(resource); | 480 this.refreshResource(resource); |
403 }, | 481 }, |
404 | 482 |
405 removeResource: function(resource) | 483 removeResource: function(resource) |
406 { | 484 { |
(...skipping 167 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
574 | 652 |
575 view.setupSourceFrameIfNeeded(); | 653 view.setupSourceFrameIfNeeded(); |
576 return view.sourceFrame; | 654 return view.sourceFrame; |
577 }, | 655 }, |
578 | 656 |
579 handleKeyEvent: function(event) | 657 handleKeyEvent: function(event) |
580 { | 658 { |
581 this.sidebarTree.handleKeyEvent(event); | 659 this.sidebarTree.handleKeyEvent(event); |
582 }, | 660 }, |
583 | 661 |
584 _makeLegendElement: function(label, value, color) | |
585 { | |
586 var legendElement = document.createElement("label"); | |
587 legendElement.className = "resources-graph-legend-item"; | |
588 | |
589 if (color) { | |
590 var swatch = document.createElement("canvas"); | |
591 swatch.className = "resources-graph-legend-swatch"; | |
592 swatch.setAttribute("width", "13"); | |
593 swatch.setAttribute("height", "24"); | |
594 | |
595 legendElement.appendChild(swatch); | |
596 | |
597 this._drawSwatch(swatch, color); | |
598 } | |
599 | |
600 var labelElement = document.createElement("div"); | |
601 labelElement.className = "resources-graph-legend-label"; | |
602 legendElement.appendChild(labelElement); | |
603 | |
604 var headerElement = document.createElement("div"); | |
605 var headerElement = document.createElement("div"); | |
606 headerElement.className = "resources-graph-legend-header"; | |
607 headerElement.textContent = label; | |
608 labelElement.appendChild(headerElement); | |
609 | |
610 var valueElement = document.createElement("div"); | |
611 valueElement.className = "resources-graph-legend-value"; | |
612 valueElement.textContent = value; | |
613 labelElement.appendChild(valueElement); | |
614 | |
615 return legendElement; | |
616 }, | |
617 | |
618 _sortResourcesIfNeeded: function() | 662 _sortResourcesIfNeeded: function() |
619 { | 663 { |
620 var sortedElements = [].concat(this.resourcesTreeElement.children); | 664 var sortedElements = [].concat(this.resourcesTreeElement.children); |
621 sortedElements.sort(this.sortingFunction); | 665 sortedElements.sort(this.sortingFunction); |
622 | 666 |
623 var sortedElementsLength = sortedElements.length; | 667 var sortedElementsLength = sortedElements.length; |
624 for (var i = 0; i < sortedElementsLength; ++i) { | 668 for (var i = 0; i < sortedElementsLength; ++i) { |
625 var treeElement = sortedElements[i]; | 669 var treeElement = sortedElements[i]; |
626 if (treeElement === this.resourcesTreeElement.children[i]) | 670 if (treeElement === this.resourcesTreeElement.children[i]) |
627 continue; | 671 continue; |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
672 var label = document.createElement("div"); | 716 var label = document.createElement("div"); |
673 label.className = "resources-divider-label"; | 717 label.className = "resources-divider-label"; |
674 if (!isNaN(slice)) | 718 if (!isNaN(slice)) |
675 label.textContent = this.calculator.formatValue(slice * i); | 719 label.textContent = this.calculator.formatValue(slice * i); |
676 divider.appendChild(label); | 720 divider.appendChild(label); |
677 | 721 |
678 this.dividersLabelBarElement.appendChild(divider); | 722 this.dividersLabelBarElement.appendChild(divider); |
679 } | 723 } |
680 }, | 724 }, |
681 | 725 |
682 _fadeOutRect: function(ctx, x, y, w, h, a1, a2) | |
683 { | |
684 ctx.save(); | |
685 | |
686 var gradient = ctx.createLinearGradient(x, y, x, y + h); | |
687 gradient.addColorStop(0.0, "rgba(0, 0, 0, " + (1.0 - a1) + ")"); | |
688 gradient.addColorStop(0.8, "rgba(0, 0, 0, " + (1.0 - a2) + ")"); | |
689 gradient.addColorStop(1.0, "rgba(0, 0, 0, 1.0)"); | |
690 | |
691 ctx.globalCompositeOperation = "destination-out"; | |
692 | |
693 ctx.fillStyle = gradient; | |
694 ctx.fillRect(x, y, w, h); | |
695 | |
696 ctx.restore(); | |
697 }, | |
698 | |
699 _drawSwatch: function(canvas, color) | |
700 { | |
701 var ctx = canvas.getContext("2d"); | |
702 | |
703 function drawSwatchSquare() { | |
704 ctx.fillStyle = color; | |
705 ctx.fillRect(0, 0, 13, 13); | |
706 | |
707 var gradient = ctx.createLinearGradient(0, 0, 13, 13); | |
708 gradient.addColorStop(0.0, "rgba(255, 255, 255, 0.2)"); | |
709 gradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)"); | |
710 | |
711 ctx.fillStyle = gradient; | |
712 ctx.fillRect(0, 0, 13, 13); | |
713 | |
714 gradient = ctx.createLinearGradient(13, 13, 0, 0); | |
715 gradient.addColorStop(0.0, "rgba(0, 0, 0, 0.2)"); | |
716 gradient.addColorStop(1.0, "rgba(0, 0, 0, 0.0)"); | |
717 | |
718 ctx.fillStyle = gradient; | |
719 ctx.fillRect(0, 0, 13, 13); | |
720 | |
721 ctx.strokeStyle = "rgba(0, 0, 0, 0.6)"; | |
722 ctx.strokeRect(0.5, 0.5, 12, 12); | |
723 } | |
724 | |
725 ctx.clearRect(0, 0, 13, 24); | |
726 | |
727 drawSwatchSquare(); | |
728 | |
729 ctx.save(); | |
730 | |
731 ctx.translate(0, 25); | |
732 ctx.scale(1, -1); | |
733 | |
734 drawSwatchSquare(); | |
735 | |
736 ctx.restore(); | |
737 | |
738 this._fadeOutRect(ctx, 0, 13, 13, 13, 0.5, 0.0); | |
739 }, | |
740 | |
741 _drawSummaryGraph: function(segments) | |
742 { | |
743 if (!this.summaryGraphElement) | |
744 return; | |
745 | |
746 if (!segments || !segments.length) { | |
747 segments = [{color: "white", value: 1}]; | |
748 this._showingEmptySummaryGraph = true; | |
749 } else | |
750 delete this._showingEmptySummaryGraph; | |
751 | |
752 // Calculate the total of all segments. | |
753 var total = 0; | |
754 for (var i = 0; i < segments.length; ++i) | |
755 total += segments[i].value; | |
756 | |
757 // Calculate the percentage of each segment, rounded to the nearest perc
ent. | |
758 var percents = segments.map(function(s) { return Math.max(Math.round(100
* s.value / total), 1) }); | |
759 | |
760 // Calculate the total percentage. | |
761 var percentTotal = 0; | |
762 for (var i = 0; i < percents.length; ++i) | |
763 percentTotal += percents[i]; | |
764 | |
765 // Make sure our percentage total is not greater-than 100, it can be gre
ater | |
766 // if we rounded up for a few segments. | |
767 while (percentTotal > 100) { | |
768 for (var i = 0; i < percents.length && percentTotal > 100; ++i) { | |
769 if (percents[i] > 1) { | |
770 --percents[i]; | |
771 --percentTotal; | |
772 } | |
773 } | |
774 } | |
775 | |
776 // Make sure our percentage total is not less-than 100, it can be less | |
777 // if we rounded down for a few segments. | |
778 while (percentTotal < 100) { | |
779 for (var i = 0; i < percents.length && percentTotal < 100; ++i) { | |
780 ++percents[i]; | |
781 ++percentTotal; | |
782 } | |
783 } | |
784 | |
785 var ctx = this.summaryGraphElement.getContext("2d"); | |
786 | |
787 var x = 0; | |
788 var y = 0; | |
789 var w = 450; | |
790 var h = 19; | |
791 var r = (h / 2); | |
792 | |
793 function drawPillShadow() | |
794 { | |
795 // This draws a line with a shadow that is offset away from the line
. The line is stroked | |
796 // twice with different X shadow offsets to give more feathered edge
s. Later we erase the | |
797 // line with destination-out 100% transparent black, leaving only th
e shadow. This only | |
798 // works if nothing has been drawn into the canvas yet. | |
799 | |
800 ctx.beginPath(); | |
801 ctx.moveTo(x + 4, y + h - 3 - 0.5); | |
802 ctx.lineTo(x + w - 4, y + h - 3 - 0.5); | |
803 ctx.closePath(); | |
804 | |
805 ctx.save(); | |
806 | |
807 ctx.shadowBlur = 2; | |
808 ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; | |
809 ctx.shadowOffsetX = 3; | |
810 ctx.shadowOffsetY = 5; | |
811 | |
812 ctx.strokeStyle = "white"; | |
813 ctx.lineWidth = 1; | |
814 | |
815 ctx.stroke(); | |
816 | |
817 ctx.shadowOffsetX = -3; | |
818 | |
819 ctx.stroke(); | |
820 | |
821 ctx.restore(); | |
822 | |
823 ctx.save(); | |
824 | |
825 ctx.globalCompositeOperation = "destination-out"; | |
826 ctx.strokeStyle = "rgba(0, 0, 0, 1)"; | |
827 ctx.lineWidth = 1; | |
828 | |
829 ctx.stroke(); | |
830 | |
831 ctx.restore(); | |
832 } | |
833 | |
834 function drawPill() | |
835 { | |
836 // Make a rounded rect path. | |
837 ctx.beginPath(); | |
838 ctx.moveTo(x, y + r); | |
839 ctx.lineTo(x, y + h - r); | |
840 ctx.quadraticCurveTo(x, y + h, x + r, y + h); | |
841 ctx.lineTo(x + w - r, y + h); | |
842 ctx.quadraticCurveTo(x + w, y + h, x + w, y + h - r); | |
843 ctx.lineTo(x + w, y + r); | |
844 ctx.quadraticCurveTo(x + w, y, x + w - r, y); | |
845 ctx.lineTo(x + r, y); | |
846 ctx.quadraticCurveTo(x, y, x, y + r); | |
847 ctx.closePath(); | |
848 | |
849 // Clip to the rounded rect path. | |
850 ctx.save(); | |
851 ctx.clip(); | |
852 | |
853 // Fill the segments with the associated color. | |
854 var previousSegmentsWidth = 0; | |
855 for (var i = 0; i < segments.length; ++i) { | |
856 var segmentWidth = Math.round(w * percents[i] / 100); | |
857 ctx.fillStyle = segments[i].color; | |
858 ctx.fillRect(x + previousSegmentsWidth, y, segmentWidth, h); | |
859 previousSegmentsWidth += segmentWidth; | |
860 } | |
861 | |
862 // Draw the segment divider lines. | |
863 ctx.lineWidth = 1; | |
864 for (var i = 1; i < 20; ++i) { | |
865 ctx.beginPath(); | |
866 ctx.moveTo(x + (i * Math.round(w / 20)) + 0.5, y); | |
867 ctx.lineTo(x + (i * Math.round(w / 20)) + 0.5, y + h); | |
868 ctx.closePath(); | |
869 | |
870 ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"; | |
871 ctx.stroke(); | |
872 | |
873 ctx.beginPath(); | |
874 ctx.moveTo(x + (i * Math.round(w / 20)) + 1.5, y); | |
875 ctx.lineTo(x + (i * Math.round(w / 20)) + 1.5, y + h); | |
876 ctx.closePath(); | |
877 | |
878 ctx.strokeStyle = "rgba(255, 255, 255, 0.2)"; | |
879 ctx.stroke(); | |
880 } | |
881 | |
882 // Draw the pill shading. | |
883 var lightGradient = ctx.createLinearGradient(x, y, x, y + (h / 1.5))
; | |
884 lightGradient.addColorStop(0.0, "rgba(220, 220, 220, 0.6)"); | |
885 lightGradient.addColorStop(0.4, "rgba(220, 220, 220, 0.2)"); | |
886 lightGradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)"); | |
887 | |
888 var darkGradient = ctx.createLinearGradient(x, y + (h / 3), x, y + h
); | |
889 darkGradient.addColorStop(0.0, "rgba(0, 0, 0, 0.0)"); | |
890 darkGradient.addColorStop(0.8, "rgba(0, 0, 0, 0.2)"); | |
891 darkGradient.addColorStop(1.0, "rgba(0, 0, 0, 0.5)"); | |
892 | |
893 ctx.fillStyle = darkGradient; | |
894 ctx.fillRect(x, y, w, h); | |
895 | |
896 ctx.fillStyle = lightGradient; | |
897 ctx.fillRect(x, y, w, h); | |
898 | |
899 ctx.restore(); | |
900 } | |
901 | |
902 ctx.clearRect(x, y, w, (h * 2)); | |
903 | |
904 drawPillShadow(); | |
905 drawPill(); | |
906 | |
907 ctx.save(); | |
908 | |
909 ctx.translate(0, (h * 2) + 1); | |
910 ctx.scale(1, -1); | |
911 | |
912 drawPill(); | |
913 | |
914 ctx.restore(); | |
915 | |
916 this._fadeOutRect(ctx, x, y + h + 1, w, h, 0.5, 0.0); | |
917 }, | |
918 | |
919 _updateSummaryGraph: function() | 726 _updateSummaryGraph: function() |
920 { | 727 { |
921 var graphInfo = this.calculator.computeSummaryValues(this._resources); | 728 this.summaryBar.update(this._resources); |
922 | |
923 var categoryOrder = ["documents", "stylesheets", "images", "scripts", "x
hr", "fonts", "other"]; | |
924 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: 1
21, b: 0}, xhr: {r: 231, g: 231, b: 10}, fonts: {r: 255, g: 82, b: 62}, other: {
r: 186, g: 186, b: 186}}; | |
925 var fillSegments = []; | |
926 | |
927 this.legendElement.removeChildren(); | |
928 | |
929 for (var i = 0; i < categoryOrder.length; ++i) { | |
930 var category = categoryOrder[i]; | |
931 var size = graphInfo.categoryValues[category]; | |
932 if (!size) | |
933 continue; | |
934 | |
935 var color = categoryColors[category]; | |
936 var colorString = "rgb(" + color.r + ", " + color.g + ", " + color.b
+ ")"; | |
937 | |
938 var fillSegment = {color: colorString, value: size}; | |
939 fillSegments.push(fillSegment); | |
940 | |
941 var legendLabel = this._makeLegendElement(WebInspector.resourceCateg
ories[category].title, this.calculator.formatValue(size), colorString); | |
942 this.legendElement.appendChild(legendLabel); | |
943 } | |
944 | |
945 if (graphInfo.total) { | |
946 var totalLegendLabel = this._makeLegendElement(WebInspector.UIString
("Total"), this.calculator.formatValue(graphInfo.total)); | |
947 totalLegendLabel.addStyleClass("total"); | |
948 this.legendElement.appendChild(totalLegendLabel); | |
949 } | |
950 | |
951 this._drawSummaryGraph(fillSegments); | |
952 }, | 729 }, |
953 | 730 |
954 _updateDividersLabelBarPosition: function() | 731 _updateDividersLabelBarPosition: function() |
955 { | 732 { |
956 var scrollTop = this.containerElement.scrollTop; | 733 var scrollTop = this.containerElement.scrollTop; |
957 var dividersTop = (scrollTop < this.summaryElement.offsetHeight ? this.s
ummaryElement.offsetHeight : scrollTop); | 734 var dividersTop = (scrollTop < this.summaryBar.element.offsetHeight ? th
is.summaryBar.element.offsetHeight : scrollTop); |
958 this.dividersElement.style.top = scrollTop + "px"; | 735 this.dividersElement.style.top = scrollTop + "px"; |
959 this.dividersLabelBarElement.style.top = dividersTop + "px"; | 736 this.dividersLabelBarElement.style.top = dividersTop + "px"; |
960 }, | 737 }, |
961 | 738 |
962 _graphSelected: function(treeElement) | 739 _graphSelected: function(treeElement) |
963 { | 740 { |
964 if (this._lastSelectedGraphTreeElement) | 741 if (this._lastSelectedGraphTreeElement) |
965 this._lastSelectedGraphTreeElement.selectedSortingOptionIndex = this
.sortingSelectElement.selectedIndex; | 742 this._lastSelectedGraphTreeElement.selectedSortingOptionIndex = this
.sortingSelectElement.selectedIndex; |
966 | 743 |
967 this._lastSelectedGraphTreeElement = treeElement; | 744 this._lastSelectedGraphTreeElement = treeElement; |
(...skipping 18 matching lines...) Expand all Loading... |
986 _toggleLargerResources: function() | 763 _toggleLargerResources: function() |
987 { | 764 { |
988 if (!this.resourcesTreeElement._childrenListNode) | 765 if (!this.resourcesTreeElement._childrenListNode) |
989 return; | 766 return; |
990 | 767 |
991 this.resourcesTreeElement.smallChildren = !this.resourcesTreeElement.sma
llChildren; | 768 this.resourcesTreeElement.smallChildren = !this.resourcesTreeElement.sma
llChildren; |
992 | 769 |
993 if (this.resourcesTreeElement.smallChildren) { | 770 if (this.resourcesTreeElement.smallChildren) { |
994 this.resourcesGraphsElement.addStyleClass("small"); | 771 this.resourcesGraphsElement.addStyleClass("small"); |
995 this.largerResourcesButton.title = WebInspector.UIString("Use large
resource rows."); | 772 this.largerResourcesButton.title = WebInspector.UIString("Use large
resource rows."); |
996 this.largerResourcesButton.removeStyleClass("toggled-on"); | 773 this.largerResourcesButton.toggled = false; |
997 this._adjustScrollPosition(); | 774 this._adjustScrollPosition(); |
998 } else { | 775 } else { |
999 this.resourcesGraphsElement.removeStyleClass("small"); | 776 this.resourcesGraphsElement.removeStyleClass("small"); |
1000 this.largerResourcesButton.title = WebInspector.UIString("Use small
resource rows."); | 777 this.largerResourcesButton.title = WebInspector.UIString("Use small
resource rows."); |
1001 this.largerResourcesButton.addStyleClass("toggled-on"); | 778 this.largerResourcesButton.toggled = true; |
1002 } | 779 } |
1003 }, | 780 }, |
1004 | 781 |
1005 _adjustScrollPosition: function() | 782 _adjustScrollPosition: function() |
1006 { | 783 { |
1007 // Prevent the container from being scrolled off the end. | 784 // Prevent the container from being scrolled off the end. |
1008 if ((this.containerElement.scrollTop + this.containerElement.offsetHeigh
t) > this.sidebarElement.offsetHeight) | 785 if ((this.containerElement.scrollTop + this.containerElement.offsetHeigh
t) > this.sidebarElement.offsetHeight) |
1009 this.containerElement.scrollTop = (this.sidebarElement.offsetHeight
- this.containerElement.offsetHeight); | 786 this.containerElement.scrollTop = (this.sidebarElement.offsetHeight
- this.containerElement.offsetHeight); |
1010 }, | 787 }, |
1011 | 788 |
1012 _changeSortingFunction: function() | 789 _changeSortingFunction: function() |
1013 { | 790 { |
1014 var selectedOption = this.sortingSelectElement[this.sortingSelectElement
.selectedIndex]; | 791 var selectedOption = this.sortingSelectElement[this.sortingSelectElement
.selectedIndex]; |
1015 this.sortingFunction = selectedOption.sortingFunction; | 792 this.sortingFunction = selectedOption.sortingFunction; |
1016 this.calculator = selectedOption.calculator; | 793 this.calculator = this.summaryBar.calculator = selectedOption.calculator
; |
1017 }, | 794 }, |
1018 | 795 |
1019 _createResourceView: function(resource) | 796 _createResourceView: function(resource) |
1020 { | 797 { |
1021 switch (resource.category) { | 798 switch (resource.category) { |
1022 case WebInspector.resourceCategories.documents: | 799 case WebInspector.resourceCategories.documents: |
1023 case WebInspector.resourceCategories.stylesheets: | 800 case WebInspector.resourceCategories.stylesheets: |
1024 case WebInspector.resourceCategories.scripts: | 801 case WebInspector.resourceCategories.scripts: |
1025 case WebInspector.resourceCategories.xhr: | 802 case WebInspector.resourceCategories.xhr: |
1026 return new WebInspector.SourceView(resource); | 803 return new WebInspector.SourceView(resource); |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1078 | 855 |
1079 this.containerContentElement.style.left = width + "px"; | 856 this.containerContentElement.style.left = width + "px"; |
1080 this.viewsContainerElement.style.left = width + "px"; | 857 this.viewsContainerElement.style.left = width + "px"; |
1081 this.sidebarResizeElement.style.left = (width - 3) + "px"; | 858 this.sidebarResizeElement.style.left = (width - 3) + "px"; |
1082 | 859 |
1083 this._updateGraphDividersIfNeeded(); | 860 this._updateGraphDividersIfNeeded(); |
1084 | 861 |
1085 var visibleView = this.visibleView; | 862 var visibleView = this.visibleView; |
1086 if (visibleView && "resize" in visibleView) | 863 if (visibleView && "resize" in visibleView) |
1087 visibleView.resize(); | 864 visibleView.resize(); |
| 865 }, |
| 866 |
| 867 _enableResourceTracking: function() |
| 868 { |
| 869 if (InspectorController.resourceTrackingEnabled()) |
| 870 return; |
| 871 this._toggleResourceTracking(this.panelEnablerView.alwaysEnabled); |
| 872 }, |
| 873 |
| 874 _toggleResourceTracking: function(optionalAlways) |
| 875 { |
| 876 if (InspectorController.resourceTrackingEnabled()) { |
| 877 this.largerResourcesButton.visible = false; |
| 878 this.sortingSelectElement.visible = false; |
| 879 InspectorController.disableResourceTracking(true); |
| 880 } else { |
| 881 this.largerResourcesButton.visible = true; |
| 882 this.sortingSelectElement.visible = true; |
| 883 InspectorController.enableResourceTracking(!!optionalAlways); |
| 884 } |
1088 } | 885 } |
1089 } | 886 } |
1090 | 887 |
1091 WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype; | 888 WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype; |
1092 | 889 |
1093 WebInspector.ResourceCalculator = function() | 890 WebInspector.ResourceCalculator = function() |
1094 { | 891 { |
1095 } | 892 } |
1096 | 893 |
1097 WebInspector.ResourceCalculator.prototype = { | 894 WebInspector.ResourceCalculator.prototype = { |
(...skipping 291 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1389 WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "",
"", resource); | 1186 WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "",
"", resource); |
1390 | 1187 |
1391 this.refreshTitles(); | 1188 this.refreshTitles(); |
1392 } | 1189 } |
1393 | 1190 |
1394 WebInspector.ResourceSidebarTreeElement.prototype = { | 1191 WebInspector.ResourceSidebarTreeElement.prototype = { |
1395 onattach: function() | 1192 onattach: function() |
1396 { | 1193 { |
1397 WebInspector.SidebarTreeElement.prototype.onattach.call(this); | 1194 WebInspector.SidebarTreeElement.prototype.onattach.call(this); |
1398 | 1195 |
| 1196 var link = document.createElement("a"); |
| 1197 link.href = this.resource.url; |
| 1198 link.className = "invisible"; |
| 1199 while (this._listItemNode.firstChild) |
| 1200 link.appendChild(this._listItemNode.firstChild); |
| 1201 this._listItemNode.appendChild(link); |
1399 this._listItemNode.addStyleClass("resources-category-" + this.resource.c
ategory.name); | 1202 this._listItemNode.addStyleClass("resources-category-" + this.resource.c
ategory.name); |
1400 }, | 1203 }, |
1401 | 1204 |
1402 onselect: function() | 1205 onselect: function() |
1403 { | 1206 { |
1404 WebInspector.panels.resources.showResource(this.resource); | 1207 WebInspector.panels.resources.showResource(this.resource); |
1405 }, | 1208 }, |
| 1209 |
| 1210 ondblclick: function(treeElement, event) |
| 1211 { |
| 1212 InspectorController.openInInspectedWindow(this.resource.url); |
| 1213 }, |
1406 | 1214 |
1407 get mainTitle() | 1215 get mainTitle() |
1408 { | 1216 { |
1409 return this.resource.displayName; | 1217 return this.resource.displayName; |
1410 }, | 1218 }, |
1411 | 1219 |
1412 set mainTitle(x) | 1220 set mainTitle(x) |
1413 { | 1221 { |
1414 // Do nothing. | 1222 // Do nothing. |
1415 }, | 1223 }, |
1416 | 1224 |
1417 get subtitle() | 1225 get subtitle() |
1418 { | 1226 { |
1419 var subtitle = this.resource.displayDomain; | 1227 var subtitle = this.resource.displayDomain; |
1420 | 1228 |
1421 if (this.resource.path && this.resource.lastPathComponent) { | 1229 if (this.resource.path && this.resource.lastPathComponent) { |
1422 var lastPathComponentIndex = this.resource.path.lastIndexOf("/" + th
is.resource.lastPathComponent); | 1230 var lastPathComponentIndex = this.resource.path.lastIndexOf("/" + th
is.resource.lastPathComponent); |
1423 if (lastPathComponentIndex != -1) | 1231 if (lastPathComponentIndex != -1) |
1424 subtitle += this.resource.path.substring(0, lastPathComponentInd
ex); | 1232 subtitle += this.resource.path.substring(0, lastPathComponentInd
ex); |
1425 } | 1233 } |
1426 | 1234 |
1427 return subtitle; | 1235 return subtitle; |
1428 }, | 1236 }, |
1429 | 1237 |
1430 set subtitle(x) | 1238 set subtitle(x) |
1431 { | 1239 { |
1432 // Do nothing. | 1240 // Do nothing. |
1433 }, | 1241 }, |
1434 | 1242 |
| 1243 get selectable() |
| 1244 { |
| 1245 return WebInspector.panels.resources._filterCategory == "all" || WebInsp
ector.panels.resources._filterCategory == this.resource.category.name; |
| 1246 }, |
| 1247 |
1435 createIconElement: function() | 1248 createIconElement: function() |
1436 { | 1249 { |
1437 var previousIconElement = this.iconElement; | 1250 var previousIconElement = this.iconElement; |
1438 | 1251 |
1439 if (this.resource.category === WebInspector.resourceCategories.images) { | 1252 if (this.resource.category === WebInspector.resourceCategories.images) { |
1440 var previewImage = document.createElement("img"); | 1253 var previewImage = document.createElement("img"); |
1441 previewImage.className = "image-resource-icon-preview"; | 1254 previewImage.className = "image-resource-icon-preview"; |
1442 previewImage.src = this.resource.url; | 1255 previewImage.src = this.resource.url; |
1443 | 1256 |
1444 this.iconElement = document.createElement("div"); | 1257 this.iconElement = document.createElement("div"); |
(...skipping 195 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1640 this._labelLeftElement.textContent = labels.left; | 1453 this._labelLeftElement.textContent = labels.left; |
1641 this._labelRightElement.textContent = labels.right; | 1454 this._labelRightElement.textContent = labels.right; |
1642 | 1455 |
1643 var tooltip = (labels.tooltip || ""); | 1456 var tooltip = (labels.tooltip || ""); |
1644 this._barLeftElement.title = tooltip; | 1457 this._barLeftElement.title = tooltip; |
1645 this._labelLeftElement.title = tooltip; | 1458 this._labelLeftElement.title = tooltip; |
1646 this._labelRightElement.title = tooltip; | 1459 this._labelRightElement.title = tooltip; |
1647 this._barRightElement.title = tooltip; | 1460 this._barRightElement.title = tooltip; |
1648 } | 1461 } |
1649 } | 1462 } |
OLD | NEW |