Bug 164047 – Web Inspector: console search bar jumps, behaves poorly at narrow widths

• Component: Web Inspector
• Status: RESOLVED FIXED

[Blaze Burg]

Created attachment 292977 [details]
narrow-console-sad.mov

See the video.

- The find field should not move around while typing. This is really jarring.
- If there are results, the "NN results" text will push the text field to the right, making trash can and chevron to be hidden.
- If the window is quite narrow, the "NN results" text will take up too much space and cause the filter bar to be hidden.

If anything, we should consider moving the find banner to resemble find-in-page, to show up below the console bar. There's really no good way to make the text bar not jump around when it's in the middle of a flexbox context.

[Radar WebKit Bug Importer]

<rdar://problem/29055582>

[Matt Baker]

If the find banner is made to resemble find-in-page, would this also apply to the Console tab where horizontal space isn't as limited?

[Matt Baker]

Created attachment 297220 [details]
[Video] New find banner behavior

[Nikita Vasilyev]

(In reply to comment #3)
> Created attachment 297220 [details]
> [Video] New find banner behavior

Is there a new keyboard shortcut to search in the split console?

Does this resolve "Bug 164847 - Web Inspector: Provide search for Console, not just filtering"?

[Matt Baker]

(In reply to comment #4)
> (In reply to comment #3)
> > Created attachment 297220 [details]
> > [Video] New find banner behavior
> 
> Is there a new keyboard shortcut to search in the split console?

Its also Command-F, it just depends on the focus. If the quick console or the log content area has the focus, the find banner appears in the console drawer.

> Does this resolve "Bug 164847 - Web Inspector: Provide search for Console,
> not just filtering"?

It does not.

[Nikita Vasilyev]

(In reply to comment #5)
> (In reply to comment #4)
> > (In reply to comment #3)
> > > Created attachment 297220 [details]
> > > [Video] New find banner behavior
> > 
> > Is there a new keyboard shortcut to search in the split console?
> 
> Its also Command-F, it just depends on the focus. If the quick console or
> the log content area has the focus, the find banner appears in the console
> drawer.

I like it. I wonder if there's a reason we didn't do this before.

[Matt Baker]

Created attachment 297225 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 297225 [details]
Patch

Clearing flags on attachment: 297225

Committed r209882: <http://trac.webkit.org/changeset/209882>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Nikita Vasilyev]

Comment on attachment 297225 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:-941
> -        this._findBanner.numberOfResults = numberOfResults;

Removing this caused Bug 170556 - REGRESSION (r209882): Web Inspector: Console's filter bar has text search field, but the next/previous buttons don't do anything.

Matt, could you explain why this change was needed?

[Matt Baker]

Comment on attachment 297225 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:-941
>> -        this._findBanner.numberOfResults = numberOfResults;
> 
> Removing this caused Bug 170556 - REGRESSION (r209882): Web Inspector: Console's filter bar has text search field, but the next/previous buttons don't do anything.
> 
> Matt, could you explain why this change was needed?

I looked over my patch, and don't see any reason for it. Looks like a mistake. Adding it back fixes https://bugs.webkit.org/show_bug.cgi?id=170556.

[Nikita Vasilyev]

Comment on attachment 297225 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:-233
> -        this.highlightNextSearchMatch();
> -    }
> -
> -    highlightNextSearchMatch()
> -    {

Removing highlightNextSearchMatch method caused:
Bug 170555 - Uncaught Exception: TypeError: this.delegate.highlightNextSearchMatch is not a function. (In 'this.delegate.highlightNextSearchMatch()', 'this.delegate.highlightNextSearchMatch' is undefined)

highlightNextSearchMatch is used by JavaScriptLogViewController.