On Linux, move the passing of filedescriptors to a dedicated socketpair().

chrome/tools/test/reference_build/chrome_linux/resources/inspector/ResourcesPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
- * Copyright (C) 2008 Anthony Ricaud (rik24d@gmail.com)
+ * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  *
  * 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. 
@@ skipping 12 matching lines @@
  * (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.filterBarElement = document.createElement("div");
+    this.filterBarElement.id = "resources-filter";
+    this.element.appendChild(this.filterBarElement);
+
     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.summaryBar = new WebInspector.SummaryBar(this.categories);
+    this.summaryBar.element.id = "resources-summary";
+    this.containerContentElement.appendChild(this.summaryBar.element);
 
     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();
@@ skipping 24 matching lines @@
 
     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.");
+    var panelEnablerHeading = WebInspector.UIString("You need to enable resource tracking to use this panel.");
+    var panelEnablerDisclaimer = WebInspector.UIString("Enabling resource tracking will reload the page and make page loading slower.");
+    var panelEnablerButton = WebInspector.UIString("Enable resource tracking");
+
+    this.panelEnablerView = new WebInspector.PanelEnablerView("resources", panelEnablerHeading, panelEnablerDisclaimer, panelEnablerButton);
+    this.panelEnablerView.addEventListener("enable clicked", this._enableResourceTracking, this);
+
+    this.element.appendChild(this.panelEnablerView.element);
+
+    this.enableToggleButton = new WebInspector.StatusBarButton("", "enable-toggle-status-bar-item");
+    this.enableToggleButton.addEventListener("click", this._toggleResourceTracking.bind(this), false);
+
+    this.largerResourcesButton = new WebInspector.StatusBarButton(WebInspector.UIString("Use small resource rows."), "resources-larger-resources-status-bar-item");
+    this.largerResourcesButton.toggled = true;
     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);
 
+    var createFilterElement = function (category) {
+        var categoryElement = document.createElement("li");
+        categoryElement.category = category;
+        categoryElement.addStyleClass(category);
+        var label = WebInspector.UIString("All");
+        if (WebInspector.resourceCategories[category])
+            label = WebInspector.resourceCategories[category].title;
+        categoryElement.appendChild(document.createTextNode(label));
+        categoryElement.addEventListener("click", this._updateFilter.bind(this), false);
+        this.filterBarElement.appendChild(categoryElement);
+        return categoryElement;
+    };
+
+    var allElement = createFilterElement.call(this, "all");
+    this.filter(allElement.category);
+    for (var category in this.categories)
+        createFilterElement.call(this, category);
+
     this.reset();
 
     timeGraphItem.select();
 }
 
 WebInspector.ResourcesPanel.prototype = {
     toolbarItemClass: "resources",
 
+    get categories()
+    {
+        if (!this._categories) {
+            this._categories = {documents: {color: {r: 47, g: 102, b: 236}}, stylesheets: {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}}};
+            for (var category in this._categories) {
+                this._categories[category].title = WebInspector.resourceCategories[category].title;
+            }
+        }
+        return this._categories; 
+    },
+
+    filter: function (category) {
+        if (this._filterCategory && this._filterCategory === category)
+            return;
+
+        if (this._filterCategory) {
+            var filterElement = this.filterBarElement.getElementsByClassName(this._filterCategory)[0];
+            filterElement.removeStyleClass("selected");
+            var oldClass = "filter-" + this._filterCategory;
+            this.resourcesTreeElement.childrenListElement.removeStyleClass(oldClass);
+            this.resourcesGraphsElement.removeStyleClass(oldClass);
+        }
+        this._filterCategory = category;
+        var filterElement = this.filterBarElement.getElementsByClassName(this._filterCategory)[0];
+        filterElement.addStyleClass("selected");
+        var newClass = "filter-" + this._filterCategory;
+        this.resourcesTreeElement.childrenListElement.addStyleClass(newClass);
+        this.resourcesGraphsElement.addStyleClass(newClass);
+    },
+
+    _updateFilter: function (e) {
+        this.filter(e.target.category);
+    },
+
     get toolbarItemLabel()
     {
         return WebInspector.UIString("Resources");
     },
 
     get statusBarItems()
     {
-        return [this.largerResourcesButton, this.sortingSelectElement];
+        return [this.enableToggleButton.element, this.largerResourcesButton.element, this.sortingSelectElement];
     },
 
     show: function()
     {
         WebInspector.Panel.prototype.show.call(this);
 
         this._updateDividersLabelBarPosition();
         this._updateSidebarWidth();
         this.refreshIfNeeded();
 
@@ skipping 186 matching lines @@
         for (var i = 0; i < staleResourcesLength; ++i)
             this._staleResources[i]._resourcesTreeElement._resourceGraph.refresh(this.calculator);
 
         this._staleResources = [];
 
         this._updateGraphDividersIfNeeded();
         this._sortResourcesIfNeeded();
         this._updateSummaryGraph();
     },
 
+    resourceTrackingWasEnabled: function()
+    {
+        this.reset();
+    },
+
+    resourceTrackingWasDisabled: function()
+    {
+        this.reset();
+    },
+
     reset: function()
     {
         this.closeVisibleResource();
 
         this.containerElement.scrollTop = 0;
 
         delete this.currentQuery;
         this.searchCanceled();
 
         if (this._calculator)
@@ skipping 11 matching lines @@
                 delete resource._resourcesView;
             }
         }
 
         this._resources = [];
         this._staleResources = [];
 
         this.resourcesTreeElement.removeChildren();
         this.viewsContainerElement.removeChildren();
         this.resourcesGraphsElement.removeChildren();
-        this.legendElement.removeChildren();
+        this.summaryBar.reset();
 
         this._updateGraphDividersIfNeeded(true);
 
-        this._drawSummaryGraph(); // draws an empty graph
+        if (InspectorController.resourceTrackingEnabled()) {
+            this.enableToggleButton.title = WebInspector.UIString("Resource tracking enabled. Click to disable.");
+            this.enableToggleButton.toggled = true;
+            this.largerResourcesButton.visible = true;
+            this.sortingSelectElement.removeStyleClass("hidden");
+            this.panelEnablerView.visible = false;
+        } else {
+            this.enableToggleButton.title = WebInspector.UIString("Resource tracking disabled. Click to enable.");
+            this.enableToggleButton.toggled = false;
+            this.largerResourcesButton.visible = false;
+            this.sortingSelectElement.addStyleClass("hidden");
+            this.panelEnablerView.visible = true;
+        }
     },
 
     addResource: function(resource)
     {
         this._resources.push(resource);
         this.refreshResource(resource);
     },
 
     removeResource: function(resource)
     {
@@ skipping 167 matching lines @@
 
         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;
@@ skipping 44 matching lines @@
             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);
+        this.summaryBar.update(this._resources);
     },
 
     _updateDividersLabelBarPosition: function()
     {
         var scrollTop = this.containerElement.scrollTop;
-        var dividersTop = (scrollTop < this.summaryElement.offsetHeight ? this.summaryElement.offsetHeight : scrollTop);
+        var dividersTop = (scrollTop < this.summaryBar.element.offsetHeight ? this.summaryBar.element.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;
@@ skipping 18 matching lines @@
     _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.largerResourcesButton.toggled = false;
             this._adjustScrollPosition();
         } else {
             this.resourcesGraphsElement.removeStyleClass("small");
             this.largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
-            this.largerResourcesButton.addStyleClass("toggled-on");
+            this.largerResourcesButton.toggled = true;
         }
     },
 
     _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;
+        this.calculator = this.summaryBar.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);
@@ skipping 51 matching lines @@
 
         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();
+    },
+
+    _enableResourceTracking: function()
+    {
+        if (InspectorController.resourceTrackingEnabled())
+            return;
+        this._toggleResourceTracking(this.panelEnablerView.alwaysEnabled);
+    },
+
+    _toggleResourceTracking: function(optionalAlways)
+    {
+        if (InspectorController.resourceTrackingEnabled()) {
+            this.largerResourcesButton.visible = false;
+            this.sortingSelectElement.visible = false;
+            InspectorController.disableResourceTracking(true);
+        } else {
+            this.largerResourcesButton.visible = true;
+            this.sortingSelectElement.visible = true;
+            InspectorController.enableResourceTracking(!!optionalAlways);
+        }
     }
 }
 
 WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.Panel.prototype;
 
 WebInspector.ResourceCalculator = function()
 {
 }
 
 WebInspector.ResourceCalculator.prototype = {
@@ skipping 291 matching lines @@
     WebInspector.SidebarTreeElement.call(this, "resource-sidebar-tree-item", "", "", resource);
 
     this.refreshTitles();
 }
 
 WebInspector.ResourceSidebarTreeElement.prototype = {
     onattach: function()
     {
         WebInspector.SidebarTreeElement.prototype.onattach.call(this);
 
+        var link = document.createElement("a");
+        link.href = this.resource.url;
+        link.className = "invisible";
+        while (this._listItemNode.firstChild)
+            link.appendChild(this._listItemNode.firstChild);
+        this._listItemNode.appendChild(link);
         this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name);
     },
 
     onselect: function()
     {
         WebInspector.panels.resources.showResource(this.resource);
     },
+    
+    ondblclick: function(treeElement, event)
+    {
+        InspectorController.openInInspectedWindow(this.resource.url);
+    },
 
     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.
     },
 
+    get selectable()
+    {
+        return WebInspector.panels.resources._filterCategory == "all" || WebInspector.panels.resources._filterCategory == this.resource.category.name;
+    },
+
     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");
@@ skipping 195 matching lines @@
         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;
     }
 }