Bug 136662 – Web Inspector: DOM Tree search highlights are not appearing

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

When performing a search in the DOM Tree, we should see the results highlighted immediately. However, the highlights were not showing and the related code was unused and stale (would have thrown exceptions). Hook up the code and make it work!

[Joseph Pecoraro]

Created attachment 237837 [details]
[PATCH] Proposed Fix

This fixes the issue. I have to work on the highlight colors a bit.

[Timothy Hatcher]

Comment on attachment 237837 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=237837&action=review

> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js:472
> +            if (error)
> +                return;
> +            if (this._searchIdentifier !== searchIdentifier)
> +                return;

Combine? Otherwise I'd throw a newline between these.

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:179
> +.dom-tree-outline .highlighted {
> +    color: black;
> +    background-color: rgba(235, 215, 38, 0.2);
> +    border-bottom: 1px solid rgb(237, 202, 71);
> +}
> +
> +.dom-tree-outline li.selected .highlighted,
> +.dom-tree-outline:focus li.selected .highlighted {
> +    background-color: rgba(235, 215, 38, 0.7);
> +    border-bottom: 1px solid rgb(237, 202, 31);
> +}
> +
> +.dom-tree-outline .highlighted .highlight {
> +    background-color: rgb(255, 230, 179);
> +    border-radius: 4px;
> +    padding-bottom: 2px;
> +    margin-bottom: -2px;
> +}

Screenshot?

[Joseph Pecoraro]

Comment on attachment 237837 [details]
[PATCH] Proposed Fix

I want to tweak the styles to look like the sidebar. I'll show You in person.

[Joseph Pecoraro]

Created attachment 237932 [details]
[PATCH] Proposed Fix

This patch is much better. It is cleaner, matches the style of highlights in the sidebar (though they could still be tweaked, it is hard to see in the a selected but non-:focus row), and it adds a bouncy-highlight when moving between DOMTreeContentView search results!

[Timothy Hatcher]

Comment on attachment 237932 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=237932&action=review

> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js:506
> +        this._searchResultNodes.forEach(function(domNode) {
> +            var treeElement = this._domTreeOutline.findTreeElement(domNode);
> +            if (treeElement)
> +                treeElement.hideSearchHighlights();
> +        }, this);

for(..of..)?

[Joseph Pecoraro]

<http://trac.webkit.org/changeset/173522>