Inspector Resources / Graphs should support filtering

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Tak]

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.

[Anthony Ricaud]

First part of this bug is actually bug 14353.

[Anthony Ricaud]

Created attachment 34481 [details]
Inspector Resources / Graphs should support filtering

https://bugs.webkit.org/show_bug.cgi?id=20629

Patch by Anthony Ricaud <[e-mail]> 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(-)

[Anthony Ricaud]

I'd like to land this bug if it is r+. Thanks.

[Anthony Ricaud]

Created attachment 34487 [details]
Inspector Resources / Graphs should support filtering

https://bugs.webkit.org/show_bug.cgi?id=20629

Patch by Anthony Ricaud <[e-mail]> 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(-)

[Anthony Ricaud]

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.

[Anthony Ricaud]

Created attachment 34502 [details]
Xhr -> XHR

[Timothy Hatcher]

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.

[Anthony Ricaud]

Created attachment 34508 [details]
Screenshot : All selected

[Anthony Ricaud]

Created attachment 34514 [details]
Review comments adressed

[Timothy Hatcher]

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.

[Anthony Ricaud]

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