Changeset 47822 in webkit
- Timestamp:
- Aug 27, 2009 9:09:54 AM (15 years ago)
- Location:
- trunk/WebCore
- Files:
-
- 7 edited
-
ChangeLog (modified) (1 diff)
-
WebCore.gypi (modified) (1 diff)
-
WebCore.vcproj/WebCore.vcproj (modified) (1 diff)
-
inspector/front-end/ResourcesPanel.js (modified) (8 diffs)
-
inspector/front-end/WebKit.qrc (modified) (1 diff)
-
inspector/front-end/inspector.css (modified) (2 diffs)
-
inspector/front-end/inspector.html (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
trunk/WebCore/ChangeLog
r47821 r47822 1 2009-08-27 Mikhail Naganov <mnaganov@chromium.org> 2 3 Reviewed by Timothy Hatcher. 4 5 Factor out Factor out summary bar from Resources panel. 6 7 https://bugs.webkit.org/show_bug.cgi?id=28740 8 9 * WebCore.gypi: 10 * WebCore.vcproj/WebCore.vcproj: 11 * inspector/front-end/ResourcesPanel.js: 12 (WebInspector.ResourcesPanel.prototype.reset): 13 (WebInspector.ResourcesPanel.prototype._updateSummaryGraph): 14 (WebInspector.ResourcesPanel.prototype._updateDividersLabelBarPosition): 15 (WebInspector.ResourcesPanel.prototype._changeSortingFunction): 16 * inspector/front-end/SummaryBar.js: Added. 17 (WebInspector.SummaryBar): 18 (WebInspector.SummaryBar.prototype.get calculator): 19 (WebInspector.SummaryBar.prototype.set calculator): 20 (WebInspector.SummaryBar.prototype.reset): 21 (WebInspector.SummaryBar.prototype.update): 22 (WebInspector.SummaryBar.prototype._drawSwatch.drawSwatchSquare): 23 (WebInspector.SummaryBar.prototype._drawSwatch): 24 (WebInspector.SummaryBar.prototype._drawSummaryGraph.var): 25 (WebInspector.SummaryBar.prototype._drawSummaryGraph): 26 (WebInspector.SummaryBar.prototype._drawSummaryGraph.drawPill): 27 (WebInspector.SummaryBar.prototype._fadeOutRect): 28 (WebInspector.SummaryBar.prototype._makeLegendElement): 29 * inspector/front-end/WebKit.qrc: 30 * inspector/front-end/inspector.css: 31 * inspector/front-end/inspector.html: 32 1 33 2009-08-26 Mikhail Naganov <mnaganov@chromium.org> 2 34 -
trunk/WebCore/WebCore.gypi
r47763 r47822 3494 3494 'inspector/front-end/StoragePanel.js', 3495 3495 'inspector/front-end/StylesSidebarPane.js', 3496 'inspector/front-end/SummaryBar.js', 3496 3497 'inspector/front-end/TextPrompt.js', 3497 3498 'inspector/front-end/TopDownProfileDataGridTree.js', -
trunk/WebCore/WebCore.vcproj/WebCore.vcproj
r47763 r47822 31356 31356 </File> 31357 31357 <File 31358 RelativePath="..\inspector\front-end\SummaryBar.js" 31359 > 31360 </File> 31361 <File 31358 31362 RelativePath="..\inspector\front-end\TextPrompt.js" 31359 31363 > -
trunk/WebCore/inspector/front-end/ResourcesPanel.js
r47703 r47822 61 61 this.containerElement.appendChild(this.containerContentElement); 62 62 63 this.summary Element = document.createElement("div");64 this.summary Element.id = "resources-summary";65 this.containerContentElement.appendChild(this.summary Element);63 this.summaryBar = new WebInspector.SummaryBar(this.categoryColors, this.categoryOrder); 64 this.summaryBar.element.id = "resources-summary"; 65 this.containerContentElement.appendChild(this.summaryBar.element); 66 66 67 67 this.resourcesGraphsElement = document.createElement("div"); … … 76 76 this.dividersLabelBarElement.id = "resources-dividers-label-bar"; 77 77 this.containerContentElement.appendChild(this.dividersLabelBarElement); 78 79 this.summaryGraphElement = document.createElement("canvas");80 this.summaryGraphElement.setAttribute("width", "450");81 this.summaryGraphElement.setAttribute("height", "38");82 this.summaryGraphElement.id = "resources-summary-graph";83 this.summaryElement.appendChild(this.summaryGraphElement);84 85 this.legendElement = document.createElement("div");86 this.legendElement.id = "resources-graph-legend";87 this.summaryElement.appendChild(this.legendElement);88 78 89 79 this.sidebarTreeElement = document.createElement("ol"); … … 177 167 toolbarItemClass: "resources", 178 168 169 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}}, 170 179 171 categoryOrder: ["documents", "stylesheets", "images", "scripts", "xhr", "fonts", "other"], 180 172 … … 457 449 this.viewsContainerElement.removeChildren(); 458 450 this.resourcesGraphsElement.removeChildren(); 459 this. legendElement.removeChildren();451 this.summaryBar.reset(); 460 452 461 453 this._updateGraphDividersIfNeeded(true); 462 463 this._drawSummaryGraph(); // draws an empty graph464 454 465 455 if (InspectorController.resourceTrackingEnabled()) { … … 663 653 }, 664 654 665 _makeLegendElement: function(label, value, color)666 {667 var legendElement = document.createElement("label");668 legendElement.className = "resources-graph-legend-item";669 670 if (color) {671 var swatch = document.createElement("canvas");672 swatch.className = "resources-graph-legend-swatch";673 swatch.setAttribute("width", "13");674 swatch.setAttribute("height", "24");675 676 legendElement.appendChild(swatch);677 678 this._drawSwatch(swatch, color);679 }680 681 var labelElement = document.createElement("div");682 labelElement.className = "resources-graph-legend-label";683 legendElement.appendChild(labelElement);684 685 var headerElement = document.createElement("div");686 var headerElement = document.createElement("div");687 headerElement.className = "resources-graph-legend-header";688 headerElement.textContent = label;689 labelElement.appendChild(headerElement);690 691 var valueElement = document.createElement("div");692 valueElement.className = "resources-graph-legend-value";693 valueElement.textContent = value;694 labelElement.appendChild(valueElement);695 696 return legendElement;697 },698 699 655 _sortResourcesIfNeeded: function() 700 656 { … … 761 717 }, 762 718 763 _fadeOutRect: function(ctx, x, y, w, h, a1, a2)764 {765 ctx.save();766 767 var gradient = ctx.createLinearGradient(x, y, x, y + h);768 gradient.addColorStop(0.0, "rgba(0, 0, 0, " + (1.0 - a1) + ")");769 gradient.addColorStop(0.8, "rgba(0, 0, 0, " + (1.0 - a2) + ")");770 gradient.addColorStop(1.0, "rgba(0, 0, 0, 1.0)");771 772 ctx.globalCompositeOperation = "destination-out";773 774 ctx.fillStyle = gradient;775 ctx.fillRect(x, y, w, h);776 777 ctx.restore();778 },779 780 _drawSwatch: function(canvas, color)781 {782 var ctx = canvas.getContext("2d");783 784 function drawSwatchSquare() {785 ctx.fillStyle = color;786 ctx.fillRect(0, 0, 13, 13);787 788 var gradient = ctx.createLinearGradient(0, 0, 13, 13);789 gradient.addColorStop(0.0, "rgba(255, 255, 255, 0.2)");790 gradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)");791 792 ctx.fillStyle = gradient;793 ctx.fillRect(0, 0, 13, 13);794 795 gradient = ctx.createLinearGradient(13, 13, 0, 0);796 gradient.addColorStop(0.0, "rgba(0, 0, 0, 0.2)");797 gradient.addColorStop(1.0, "rgba(0, 0, 0, 0.0)");798 799 ctx.fillStyle = gradient;800 ctx.fillRect(0, 0, 13, 13);801 802 ctx.strokeStyle = "rgba(0, 0, 0, 0.6)";803 ctx.strokeRect(0.5, 0.5, 12, 12);804 }805 806 ctx.clearRect(0, 0, 13, 24);807 808 drawSwatchSquare();809 810 ctx.save();811 812 ctx.translate(0, 25);813 ctx.scale(1, -1);814 815 drawSwatchSquare();816 817 ctx.restore();818 819 this._fadeOutRect(ctx, 0, 13, 13, 13, 0.5, 0.0);820 },821 822 _drawSummaryGraph: function(segments)823 {824 if (!this.summaryGraphElement)825 return;826 827 if (!segments || !segments.length) {828 segments = [{color: "white", value: 1}];829 this._showingEmptySummaryGraph = true;830 } else831 delete this._showingEmptySummaryGraph;832 833 // Calculate the total of all segments.834 var total = 0;835 for (var i = 0; i < segments.length; ++i)836 total += segments[i].value;837 838 // Calculate the percentage of each segment, rounded to the nearest percent.839 var percents = segments.map(function(s) { return Math.max(Math.round(100 * s.value / total), 1) });840 841 // Calculate the total percentage.842 var percentTotal = 0;843 for (var i = 0; i < percents.length; ++i)844 percentTotal += percents[i];845 846 // Make sure our percentage total is not greater-than 100, it can be greater847 // if we rounded up for a few segments.848 while (percentTotal > 100) {849 for (var i = 0; i < percents.length && percentTotal > 100; ++i) {850 if (percents[i] > 1) {851 --percents[i];852 --percentTotal;853 }854 }855 }856 857 // Make sure our percentage total is not less-than 100, it can be less858 // if we rounded down for a few segments.859 while (percentTotal < 100) {860 for (var i = 0; i < percents.length && percentTotal < 100; ++i) {861 ++percents[i];862 ++percentTotal;863 }864 }865 866 var ctx = this.summaryGraphElement.getContext("2d");867 868 var x = 0;869 var y = 0;870 var w = 450;871 var h = 19;872 var r = (h / 2);873 874 function drawPillShadow()875 {876 // This draws a line with a shadow that is offset away from the line. The line is stroked877 // twice with different X shadow offsets to give more feathered edges. Later we erase the878 // line with destination-out 100% transparent black, leaving only the shadow. This only879 // works if nothing has been drawn into the canvas yet.880 881 ctx.beginPath();882 ctx.moveTo(x + 4, y + h - 3 - 0.5);883 ctx.lineTo(x + w - 4, y + h - 3 - 0.5);884 ctx.closePath();885 886 ctx.save();887 888 ctx.shadowBlur = 2;889 ctx.shadowColor = "rgba(0, 0, 0, 0.5)";890 ctx.shadowOffsetX = 3;891 ctx.shadowOffsetY = 5;892 893 ctx.strokeStyle = "white";894 ctx.lineWidth = 1;895 896 ctx.stroke();897 898 ctx.shadowOffsetX = -3;899 900 ctx.stroke();901 902 ctx.restore();903 904 ctx.save();905 906 ctx.globalCompositeOperation = "destination-out";907 ctx.strokeStyle = "rgba(0, 0, 0, 1)";908 ctx.lineWidth = 1;909 910 ctx.stroke();911 912 ctx.restore();913 }914 915 function drawPill()916 {917 // Make a rounded rect path.918 ctx.beginPath();919 ctx.moveTo(x, y + r);920 ctx.lineTo(x, y + h - r);921 ctx.quadraticCurveTo(x, y + h, x + r, y + h);922 ctx.lineTo(x + w - r, y + h);923 ctx.quadraticCurveTo(x + w, y + h, x + w, y + h - r);924 ctx.lineTo(x + w, y + r);925 ctx.quadraticCurveTo(x + w, y, x + w - r, y);926 ctx.lineTo(x + r, y);927 ctx.quadraticCurveTo(x, y, x, y + r);928 ctx.closePath();929 930 // Clip to the rounded rect path.931 ctx.save();932 ctx.clip();933 934 // Fill the segments with the associated color.935 var previousSegmentsWidth = 0;936 for (var i = 0; i < segments.length; ++i) {937 var segmentWidth = Math.round(w * percents[i] / 100);938 ctx.fillStyle = segments[i].color;939 ctx.fillRect(x + previousSegmentsWidth, y, segmentWidth, h);940 previousSegmentsWidth += segmentWidth;941 }942 943 // Draw the segment divider lines.944 ctx.lineWidth = 1;945 for (var i = 1; i < 20; ++i) {946 ctx.beginPath();947 ctx.moveTo(x + (i * Math.round(w / 20)) + 0.5, y);948 ctx.lineTo(x + (i * Math.round(w / 20)) + 0.5, y + h);949 ctx.closePath();950 951 ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";952 ctx.stroke();953 954 ctx.beginPath();955 ctx.moveTo(x + (i * Math.round(w / 20)) + 1.5, y);956 ctx.lineTo(x + (i * Math.round(w / 20)) + 1.5, y + h);957 ctx.closePath();958 959 ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";960 ctx.stroke();961 }962 963 // Draw the pill shading.964 var lightGradient = ctx.createLinearGradient(x, y, x, y + (h / 1.5));965 lightGradient.addColorStop(0.0, "rgba(220, 220, 220, 0.6)");966 lightGradient.addColorStop(0.4, "rgba(220, 220, 220, 0.2)");967 lightGradient.addColorStop(1.0, "rgba(255, 255, 255, 0.0)");968 969 var darkGradient = ctx.createLinearGradient(x, y + (h / 3), x, y + h);970 darkGradient.addColorStop(0.0, "rgba(0, 0, 0, 0.0)");971 darkGradient.addColorStop(0.8, "rgba(0, 0, 0, 0.2)");972 darkGradient.addColorStop(1.0, "rgba(0, 0, 0, 0.5)");973 974 ctx.fillStyle = darkGradient;975 ctx.fillRect(x, y, w, h);976 977 ctx.fillStyle = lightGradient;978 ctx.fillRect(x, y, w, h);979 980 ctx.restore();981 }982 983 ctx.clearRect(x, y, w, (h * 2));984 985 drawPillShadow();986 drawPill();987 988 ctx.save();989 990 ctx.translate(0, (h * 2) + 1);991 ctx.scale(1, -1);992 993 drawPill();994 995 ctx.restore();996 997 this._fadeOutRect(ctx, x, y + h + 1, w, h, 0.5, 0.0);998 },999 1000 719 _updateSummaryGraph: function() 1001 720 { 1002 var graphInfo = this.calculator.computeSummaryValues(this._resources); 1003 1004 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}}; 1005 var fillSegments = []; 1006 1007 this.legendElement.removeChildren(); 1008 1009 for (var i = 0; i < this.categoryOrder.length; ++i) { 1010 var category = this.categoryOrder[i]; 1011 var size = graphInfo.categoryValues[category]; 1012 if (!size) 1013 continue; 1014 1015 var color = categoryColors[category]; 1016 var colorString = "rgb(" + color.r + ", " + color.g + ", " + color.b + ")"; 1017 1018 var fillSegment = {color: colorString, value: size}; 1019 fillSegments.push(fillSegment); 1020 1021 var legendLabel = this._makeLegendElement(WebInspector.resourceCategories[category].title, this.calculator.formatValue(size), colorString); 1022 this.legendElement.appendChild(legendLabel); 1023 } 1024 1025 if (graphInfo.total) { 1026 var totalLegendLabel = this._makeLegendElement(WebInspector.UIString("Total"), this.calculator.formatValue(graphInfo.total)); 1027 totalLegendLabel.addStyleClass("total"); 1028 this.legendElement.appendChild(totalLegendLabel); 1029 } 1030 1031 this._drawSummaryGraph(fillSegments); 721 this.summaryBar.update(this._resources); 1032 722 }, 1033 723 … … 1035 725 { 1036 726 var scrollTop = this.containerElement.scrollTop; 1037 var dividersTop = (scrollTop < this.summary Element.offsetHeight ? this.summaryElement.offsetHeight : scrollTop);727 var dividersTop = (scrollTop < this.summaryBar.element.offsetHeight ? this.summaryBar.element.offsetHeight : scrollTop); 1038 728 this.dividersElement.style.top = scrollTop + "px"; 1039 729 this.dividersLabelBarElement.style.top = dividersTop + "px"; … … 1094 784 var selectedOption = this.sortingSelectElement[this.sortingSelectElement.selectedIndex]; 1095 785 this.sortingFunction = selectedOption.sortingFunction; 1096 this.calculator = selectedOption.calculator;786 this.calculator = this.summaryBar.calculator = selectedOption.calculator; 1097 787 }, 1098 788 -
trunk/WebCore/inspector/front-end/WebKit.qrc
r47639 r47822 54 54 <file>StoragePanel.js</file> 55 55 <file>StylesSidebarPane.js</file> 56 <file>SummaryBar.js</file> 56 57 <file>TextPrompt.js</file> 57 58 <file>TopDownProfileDataGridTree.js</file> -
trunk/WebCore/inspector/front-end/inspector.css
r47821 r47822 2333 2333 } 2334 2334 2335 #resources-graph-legend {2335 .summary-graph-legend { 2336 2336 margin-top: -10px; 2337 2337 padding-left: 15px; 2338 2338 } 2339 2339 2340 . resources-graph-legend-item {2340 .summary-graph-legend-item { 2341 2341 display: inline-block; 2342 2342 font-weight: bold; … … 2345 2345 } 2346 2346 2347 . resources-graph-legend-item.total {2347 .summary-graph-legend-item.total { 2348 2348 margin-left: 10px; 2349 2349 } 2350 2350 2351 . resources-graph-legend-label {2351 .summary-graph-legend-label { 2352 2352 display: inline-block; 2353 2353 text-align: left; 2354 2354 } 2355 2355 2356 . resources-graph-legend-header {2356 .summary-graph-legend-header { 2357 2357 font-size: 12px; 2358 2358 } 2359 2359 2360 . resources-graph-legend-value {2360 .summary-graph-legend-value { 2361 2361 font-size: 10px; 2362 2362 } 2363 2363 2364 . resources-graph-legend-swatch {2364 .summary-graph-legend-swatch { 2365 2365 vertical-align: top; 2366 2366 margin-top: 1px; -
trunk/WebCore/inspector/front-end/inspector.html
r47639 r47822 69 69 <script type="text/javascript" src="PanelEnablerView.js"></script> 70 70 <script type="text/javascript" src="StatusBarButton.js"></script> 71 <script type="text/javascript" src="SummaryBar.js"></script> 71 72 <script type="text/javascript" src="ElementsPanel.js"></script> 72 73 <script type="text/javascript" src="ResourcesPanel.js"></script>
Note: See TracChangeset
for help on using the changeset viewer.
