Bug 20629 - Inspector Resources / Graphs should support filtering
Summary: Inspector Resources / Graphs should support filtering
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 14353
  Show dependency treegraph
 
Reported: 2008-09-03 11:04 PDT by Tak
Modified: 2009-08-10 16:32 PDT (History)
3 users (show)

See Also:


Attachments
Inspector Resources / Graphs should support filtering (7.84 KB, patch)
2009-08-10 10:50 PDT, Anthony Ricaud
no flags Details | Formatted Diff | Diff
Inspector Resources / Graphs should support filtering (8.52 KB, patch)
2009-08-10 11:22 PDT, Anthony Ricaud
no flags Details | Formatted Diff | Diff
Screenshot (157.61 KB, image/png)
2009-08-10 11:24 PDT, Anthony Ricaud
no flags Details
Xhr -> XHR (10.85 KB, patch)
2009-08-10 13:07 PDT, Anthony Ricaud
no flags Details | Formatted Diff | Diff
Screenshot : All selected (212.85 KB, image/png)
2009-08-10 13:25 PDT, Anthony Ricaud
no flags Details
Review comments adressed (10.93 KB, patch)
2009-08-10 14:15 PDT, Anthony Ricaud
timothy: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Tak 2008-09-03 11:04:19 PDT
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.
Comment 1 Anthony Ricaud 2008-09-03 11:59:40 PDT
First part of this bug is actually bug 14353.
Comment 2 Anthony Ricaud 2009-08-10 10:50:52 PDT
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(-)
Comment 3 Anthony Ricaud 2009-08-10 10:52:27 PDT
I'd like to land this bug if it is r+. Thanks.
Comment 4 Anthony Ricaud 2009-08-10 11:22:05 PDT
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(-)
Comment 5 Anthony Ricaud 2009-08-10 11:24:12 PDT
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.
Comment 6 Anthony Ricaud 2009-08-10 13:07:06 PDT
Created attachment 34502 [details]
Xhr -> XHR
Comment 7 Timothy Hatcher 2009-08-10 13:21:50 PDT
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.
Comment 8 Anthony Ricaud 2009-08-10 13:25:46 PDT
Created attachment 34508 [details]
Screenshot : All selected
Comment 9 Anthony Ricaud 2009-08-10 14:15:59 PDT
Created attachment 34514 [details]
Review comments adressed
Comment 10 Timothy Hatcher 2009-08-10 14:22:30 PDT
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.
Comment 11 Anthony Ricaud 2009-08-10 16:32:29 PDT
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 :)