DevTools: Implement Styles search and Computed style filter

DevTools: Implement Styles search and Computed style filter

The user can search styles by property name, value, or rule selector.
Computed style properties are filtered, so that only matching ones are visible.

R=eustas, pfeldman, vsevik
BUG=278852
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=169860

[apavlov, 2014-02-12 15:25:48]

Screenshots: http://imgur.com/LoxOhHC,hG0M5SE,3fXycfT

[pfeldman, 2014-02-12 15:52:34]

Computed style should have similar bar.

[apavlov, 2014-02-13 08:58:19]

On 2014/02/12 15:52:34, pfeldman wrote:
> Computed style should have similar bar.

Oops, you are right. Updated filter screenshots:
http://imgur.com/PETqYrl,vXOyy6h

[pfeldman, 2014-03-13 05:33:53]

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
File Source/devtools/front_end/ElementsPanel.js (right):

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/ElementsPanel.js:1258:
splitView.mainElement().appendChild(matchedStylePanesWrapper);
Could you work on minimizing the diff - it seems like you are touching more code
than you are changing.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
File Source/devtools/front_end/StylesSidebarPane.js (right):

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:215: function tabHandler(event)
It seems like editingCommitted is already implementing this traversal. Lets
extract the code from there instead.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:895: input.className =
"filter-box toolbar-search-control search-replace";
You are using styles that can change independently from your code, please don't.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:914: if (event.keyIdentifier !==
"U+001B" || !input.value)
What is 1B?

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:1012:
element.appendChild(this._stylesSidebarPane._createPropertyFilterElement(true,
filterCallback.bind(this)));
This is a strange API. Why does computed style pane need to bother with the
filter component?

[apavlov, 2014-03-13 16:28:15]

PTAL

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
File Source/devtools/front_end/ElementsPanel.js (right):

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/ElementsPanel.js:1258:
splitView.mainElement().appendChild(matchedStylePanesWrapper);
On 2014/03/13 05:33:53, pfeldman wrote:
> Could you work on minimizing the diff - it seems like you are touching more
code
> than you are changing.

The issue is that I'm adding wrappers for contents of both panes. Since the
Metrics pane is displayed in different ways, depending on the layout, this
contributes to the number of changed lines, too :(

I have reverted unrelated line moves.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
File Source/devtools/front_end/StylesSidebarPane.js (right):

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:215: function tabHandler(event)
On 2014/03/13 05:33:53, pfeldman wrote:
> It seems like editingCommitted is already implementing this traversal. Lets
> extract the code from there instead.

Correct. Reused the logic.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:895: input.className =
"filter-box toolbar-search-control search-replace";
On 2014/03/13 05:33:53, pfeldman wrote:
> You are using styles that can change independently from your code, please
don't.

I'm sharing styles with other search controls, so that they always look the same
- is that forbidden? :)

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:914: if (event.keyIdentifier !==
"U+001B" || !input.value)
On 2014/03/13 05:33:53, pfeldman wrote:
> What is 1B?

It's "Esc". I'll create a separate var for this.

https://codereview.chromium.org/129793013/diff/90001/Source/devtools/front_en...
Source/devtools/front_end/StylesSidebarPane.js:1012:
element.appendChild(this._stylesSidebarPane._createPropertyFilterElement(true,
filterCallback.bind(this)));
On 2014/03/13 05:33:53, pfeldman wrote:
> This is a strange API. Why does computed style pane need to bother with the
> filter component?

The key point here is that the filters are uniformly created in
_createPropertyFilterElement(). They are also bound to the StylesSidebarPane
through the "input" event handler.

[pfeldman, 2014-03-24 15:18:53]

lgtm

https://codereview.chromium.org/129793013/diff/270001/Source/devtools/front_e...
File Source/devtools/front_end/ElementsPanel.js (right):

https://codereview.chromium.org/129793013/diff/270001/Source/devtools/front_e...
Source/devtools/front_end/ElementsPanel.js:97:
this._matchedStylesFilterBoxContainer = document.createElement("div");
Lets create them regardless.

[apavlov, 2014-03-24 15:50:42]

The CQ bit was checked by apavlov@chromium.org

[commit-bot: I haz the power, 2014-03-24 15:50:51]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/apavlov@chromium.org/129793013/290001

[commit-bot: I haz the power, 2014-03-24 15:54:09]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-03-24 15:54:10]

Try jobs failed on following builders:
  tryserver.blink on blink_presubmit

[apavlov, 2014-03-24 16:15:35]

The CQ bit was checked by apavlov@chromium.org

[commit-bot: I haz the power, 2014-03-24 16:15:43]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/apavlov@chromium.org/129793013/290001

[commit-bot: I haz the power, 2014-03-24 16:18:25]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-03-24 16:18:25]

Try jobs failed on following builders:
  tryserver.blink on blink_presubmit

[apavlov, 2014-03-24 16:28:47]

The CQ bit was checked by apavlov@chromium.org

[commit-bot: I haz the power, 2014-03-24 16:28:50]

CQ is trying da patch. Follow status at
https://chromium-status.appspot.com/cq/apavlov@chromium.org/129793013/290001

[commit-bot: I haz the power, 2014-03-24 16:53:28]

Change committed as 169860

[apavlov, 2014-03-25 11:32:30]

A revert of this CL has been created in
https://codereview.chromium.org/208503006/ by apavlov@chromium.org.

The reason for reverting is: Broke the Styles pane.

[lushnikov, 2015-03-10 20:49:27]

On 2014/03/25 11:32:30, apavlov wrote:
> A revert of this CL has been created in
> https://codereview.chromium.org/208503006/ by mailto:apavlov@chromium.org.
> 
> The reason for reverting is: Broke the Styles pane.

No test? :(