It'd be nice for the Inspector | Resources Graph panel to support filtering by various things. It'd be nice to see some parity with Firebug's Net tab canned filters: ALL HTML XHR CSS IMAGE JAVASCRIPT FLASH Additionally, I'd always thought a free-format input filed that accepted a simple substring/regex might be useful. eg: "filter: php" might show/exclude any URL with the string "php" in it.
First part of this bug is actually bug 14353.
Created attachment 34481 [details] Inspector Resources / Graphs should support filtering https://bugs.webkit.org/show_bug.cgi?id=20629 Patch by Anthony Ricaud <rik@webkit.org> on 2009-08-10 Reviewed by NOBODY (OOPS!). Introduces a filter bar for resources. * inspector/front-end/ResourcesPanel.js: (WebInspector.ResourcesPanel.createFilterElement): (WebInspector.ResourcesPanel): (WebInspector.ResourcesPanel.prototype.toolbarItemClass.categoryOrder.get filterItem): (WebInspector.ResourcesPanel.prototype.set filterItem): (WebInspector.ResourcesPanel.prototype._updateFilterItem): (WebInspector.ResourcesPanel.prototype._updateSummaryGraph): * inspector/front-end/inspector.css: --- 3 files changed, 131 insertions(+), 5 deletions(-)
I'd like to land this bug if it is r+. Thanks.
Created attachment 34487 [details] Inspector Resources / Graphs should support filtering https://bugs.webkit.org/show_bug.cgi?id=20629 Patch by Anthony Ricaud <rik@webkit.org> on 2009-08-10 Reviewed by NOBODY (OOPS!). Introduces a filter bar for resources. Thanks to Matt Lilek for the CSS scope bar. * inspector/front-end/ResourcesPanel.js: (WebInspector.ResourcesPanel.createFilterElement): (WebInspector.ResourcesPanel): (WebInspector.ResourcesPanel.prototype.toolbarItemClass.categoryOrder.get filterItem): (WebInspector.ResourcesPanel.prototype.set filterItem): (WebInspector.ResourcesPanel.prototype._updateFilterItem): (WebInspector.ResourcesPanel.prototype._updateSummaryGraph): * inspector/front-end/inspector.css: --- 3 files changed, 135 insertions(+), 6 deletions(-)
Created attachment 34489 [details] Screenshot This screenshot shows the HTML document because it was previously selected. Once you select another item, only stylesheets are listed.
Created attachment 34502 [details] Xhr -> XHR
Comment on attachment 34502 [details] Xhr -> XHR > diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog > + for (var i = 0; i < this.categoryOrder.length; i++) { > + createFilterElement.bind(this)(this.categoryOrder[i]); > + } No need for the curly braces here. Also no need for bind, you can just do: createFilterElement.call(this, this.categoryOrder[i]); > + get filterItem() > + { > + return this._filterItem; > + }, > + > + set filterItem(x) > + { > + if (!x || this._filterItem === x) > + return; > + > + if (this._filterItem) { > + this._filterItem.removeStyleClass("selected"); > + var oldClass = "filter-" + this._filterItem.firstChild.data.toLowerCase(); > + this.resourcesTreeElement.childrenListElement.removeStyleClass(oldClass); > + this.resourcesGraphsElement.removeStyleClass(oldClass); > + } > + this._filterItem = x; > + this._filterItem.addStyleClass("selected"); > + var newClass = "filter-" + this._filterItem.firstChild.data.toLowerCase(); > + this.resourcesTreeElement.childrenListElement.addStyleClass(newClass); > + this.resourcesGraphsElement.addStyleClass(newClass); > + }, It seems odd to need a getter and a setter for filterItem that takes a DOM element, and you only ever set it. A function called "filter" would be more targeted. The function could take a category identifier string and update the selected DOM node. (You can use getElementsByClassName to find them.) You would want to store the current filter category string, so you can unselect it, and maybe prevent doing more work if the same one is filtered the next time. It is a little fragile as-is since it uses .firstChild.data. You could use the string passed into the function for making the class name. And you can store the category name on the DOM element when you make the scope buttons. So _updateFilterItem would look like: _updateFilterItem: function (e) { this.filter(e.target.category); } Then you have an API that can be called by anyone, not just someone that has a DOM element. > + console.log(this.categoryOrder); Remove the console.log.
Created attachment 34508 [details] Screenshot : All selected
Created attachment 34514 [details] Review comments adressed
Comment on attachment 34514 [details] Review comments adressed > diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog > + var label = "All"; Sorry I missed this earlier, but this needs localied. So WebInspector.UIString("All"). And add "All" to the localiedString.sjs file. r+ if you do that before landing it.
Committed r47011 M WebCore/ChangeLog M WebCore/inspector/front-end/inspector.js M WebCore/inspector/front-end/ResourcesPanel.js M WebCore/inspector/front-end/inspector.css M WebCore/English.lproj/localizedStrings.js Thank you, my first commit ever :)