chrome/tools/test/reference_build/chrome_linux/resources/inspector/ResourcesPanel.js - Issue 177049: On Linux, move the passing of filedescriptors to a dedicated socketpair().

Unified Diff: chrome/tools/test/reference_build/chrome_linux/resources/inspector/ResourcesPanel.js

Issue 177049: On Linux, move the passing of filedescriptors to a dedicated socketpair(). (Closed)

Patch Set: Removed *.d files from reference build Created 11 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « chrome/tools/test/reference_build/chrome_linux/resources/inspector/Resource.js ('k') | chrome/tools/test/reference_build/chrome_linux/resources/inspector/ScopeChainSidebarPane.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

diff --git a/chrome/tools/test/reference_build/chrome_linux/resources/inspector/ResourcesPanel.js b/chrome/tools/test/reference_build/chrome_linux/resources/inspector/ResourcesPanel.js

index e02baf35cd3407f88f7ac705721a30712b01afe2..6e4e6d2048ac0d3e458f47c41220966e83dda225 100644

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

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

@@ -1,6 +1,6 @@

* Redistribution and use in source and binary forms, with or without

* modification, are permitted provided that the following conditions

@@ -33,6 +33,10 @@ WebInspector.ResourcesPanel = function()

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);

@@ -56,9 +60,9 @@ WebInspector.ResourcesPanel = function()

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";

@@ -72,16 +76,6 @@ WebInspector.ResourcesPanel = function()

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);

@@ -126,16 +120,44 @@ WebInspector.ResourcesPanel = function()

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();

@@ -144,6 +166,40 @@ WebInspector.ResourcesPanel = function()

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");

@@ -151,7 +207,7 @@ WebInspector.ResourcesPanel.prototype = {

get statusBarItems()

{

- return [this.largerResourcesButton, this.sortingSelectElement];

+ return [this.enableToggleButton.element, this.largerResourcesButton.element, this.sortingSelectElement];

show: function()

@@ -358,6 +414,16 @@ WebInspector.ResourcesPanel.prototype = {

this._updateSummaryGraph();

+ resourceTrackingWasEnabled: function()

+ {

+ this.reset();

+ },

+ resourceTrackingWasDisabled: function()

+ {

+ this.reset();

+ },

reset: function()

{

this.closeVisibleResource();

@@ -389,11 +455,23 @@ WebInspector.ResourcesPanel.prototype = {

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)

@@ -581,40 +659,6 @@ WebInspector.ResourcesPanel.prototype = {

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");

- 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);

@@ -679,282 +723,15 @@ WebInspector.ResourcesPanel.prototype = {

}

- _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";

@@ -993,12 +770,12 @@ WebInspector.ResourcesPanel.prototype = {

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;

}

@@ -1013,7 +790,7 @@ WebInspector.ResourcesPanel.prototype = {

{

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)

@@ -1085,6 +862,26 @@ WebInspector.ResourcesPanel.prototype = {

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);

+ }

}

@@ -1396,6 +1193,12 @@ WebInspector.ResourceSidebarTreeElement.prototype = {

{

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);

@@ -1403,6 +1206,11 @@ WebInspector.ResourceSidebarTreeElement.prototype = {

{

WebInspector.panels.resources.showResource(this.resource);

+ ondblclick: function(treeElement, event)

+ {

+ InspectorController.openInInspectedWindow(this.resource.url);

+ },

get mainTitle()

{

@@ -1432,6 +1240,11 @@ WebInspector.ResourceSidebarTreeElement.prototype = {

// Do nothing.

+ get selectable()

+ {

+ return WebInspector.panels.resources._filterCategory == "all" || WebInspector.panels.resources._filterCategory == this.resource.category.name;

+ },

createIconElement: function()

{

var previousIconElement = this.iconElement;