Bug 136662 - Web Inspector: DOM Tree search highlights are not appearing
Summary: Web Inspector: DOM Tree search highlights are not appearing
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-09-08 20:26 PDT by Joseph Pecoraro
Modified: 2014-09-11 11:36 PDT (History)
4 users (show)

See Also:


Attachments
[PATCH] Proposed Fix (7.56 KB, patch)
2014-09-08 20:37 PDT, Joseph Pecoraro
timothy: review+
joepeck: commit-queue-
Details | Formatted Diff | Diff
[PATCH] Proposed Fix (13.87 KB, patch)
2014-09-10 22:52 PDT, Joseph Pecoraro
timothy: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2014-09-08 20:26:12 PDT
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!
Comment 1 Joseph Pecoraro 2014-09-08 20:37:28 PDT
Created attachment 237837 [details]
[PATCH] Proposed Fix

This fixes the issue. I have to work on the highlight colors a bit.
Comment 2 Timothy Hatcher 2014-09-10 08:22:41 PDT
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?
Comment 3 Joseph Pecoraro 2014-09-10 15:15:19 PDT
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.
Comment 4 Joseph Pecoraro 2014-09-10 22:52:35 PDT
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!
Comment 5 Timothy Hatcher 2014-09-11 00:07:09 PDT
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..)?
Comment 6 Joseph Pecoraro 2014-09-11 11:36:13 PDT
<http://trac.webkit.org/changeset/173522>