Theia: [tree][navigator]Tree search

[kittaakos]

Must:

• [x] It should be possible to quickly navigate to an expanded node using fuzzy text search.
• [x] Occurrences in matching and already expanded nodes should be highlighted.
• [x] It should be activated whenever a user starts typing in a focused tree widget.
• [x] It should not take invisible nodes into account.

Also:

• [x] Investigate other IDEs. WebStorm, Eclipse, etc.
• [x] Maybe, a search box should be overlayed while typing the search term.
  
  
  
  • [x] When do we hide this search box.
  
  
  • [x] What should be the delay, if any before executing the filter and typing.
  
  
  • [x] Can the user continue the filtering? For instance type exp -> then continue lor -> Then, do we search for lor or explor.
  
  
  • [x] Do we hide it on Esc?
  
  
• [x] Can we reuse the decorators for that?
• [x] Does it make sense to support it to all tree widgets in general?

Update:
Make sure, the following issues are also resolved as part of this task.

• [x] [The font decoration is completely broken in the tree](https://github.com/theia-ide/theia/issues/1493#issue-304900290)

Update2:
Q: _Does it make sense to support it to all tree widgets in general?_
A: It is possible. If we need it we can do this later.

[akosyakov]

I've seen this feature only in IntelliJ and like how it works there.

[kittaakos]

Did not try it in IntelliJ, isn't it the same as in WebStorm? If no, I will try IntelliJ too. By the way, we are trying to mimic that behavior for sure.

[akosyakov]

Yes, it is the same.

[kittaakos]

Eclipse:

• Jumps to the next node that matches the pattern.
• No highlighting.
• No way to navigate back to previous matches.

WebStorm does the following:

• After a successful search (and some delay), they jump to the first match.
• They hide the search widget when one starts navigating with the cursor keys.
• Cursor navigation => jumps only to selected nodes.
• Where there are no matches, they leave it on the UI. One can close it with Esc.

I think the WebStorm approach is a good initial pattern to mimic.

[akosyakov]

How do they navigate between matches?

[kittaakos]

With the Up and Down cursor keys.

[svenefftinge]

I think the WebStorm approach is a good initial pattern to mimic.

+1 it feels nice and simple.

[kittaakos]

I just do not know yet, where to overlay the widget for the search term. Any suggestions?

[kittaakos]

Depends on #1450. I cannot traverse the tree unless I can use the fixed tree iterators.

[kittaakos]

I just do not know yet, where to overlay the widget for the search term. Any suggestions?

CC: @AlexTugarev

I am open to any ideas about the search box and its position. We have this so far, but this can be improved for sure:

[AlexTugarev]

What about increasing the contrast of this overlay? Maybe add a drop shadow to indicate overlay, as I assume it should stay fixed while scrolling.

Another option could be to place is half outside the top border, which would keep the functionality of the main menu. The position on the left hand side would keep the "Search for:" prefix at a fixed position. Shifting that prefix back and forth seems a bit noisy.

[lmcbout]

AS Alex mentioned, I find it noisy when you type and see the text moving to the left. I think having it on the left side and half way as Alex mentioned seems a good place to be

[kittaakos]

@AlexTugarev, @lmcbout, thanks for the feedback.

Shifting that prefix back and forth seems a bit noisy.

Sorry for the confusion, I would go with a minimum width, then it could grow. The probability you would like to search for more than 8-10 characters is quite low.

Maybe add a drop shadow to indicate overlay, as I assume it should stay fixed while scrolling.

I like this.

Another option could be to place is half outside the top border

That is good unless you move the navigator to the right, or to the bottom, etc. I have no objections against moving this outside but +1 for keeping this inside. Otherwise, it would look alien compared to other UI elements, isn't it?

increasing the contrast

Initially, I liked the idea. Now I would say; it's too much.

[AlexTugarev]

I would go with a minimum width, then it could grow. The probability you would like to search for more than 8-10 characters is quite low.

sounds good, if it starts with a width which doesn't need to be increased for ~10 chars.

one more option:

[kittaakos]

That is nice; I am not sure if we want to show the hit count.

[AlexTugarev]

It was more about the drop down effect.

[kittaakos]

Yeah, I got it. There is one problem with drop-down effect; when you do this in the browser (I assume, you got the idea from there), you trigger the search with Ctrl/Cmd+F. In our case it should instantly filter whenever you type something, so we cannot have that delay. It should be way faster.

[kittaakos]

We have this so far; I have overlayed the root node:

[lmcbout]

Another suggestion,
If you do a search (CTRL+ F ) in Firefox, it open a dialog over the status bar at the bottom with some extra search options, (Highligh All, Match Case, Whole Worlds) , should we implement something similar !

[kittaakos]

Not in the context of this task. Please reference the Must list in the task description. But feel free to open a follow-up.

[kittaakos]

Depends on https://github.com/theia-ide/theia/issues/1517.

[akosyakov]

I like it without icons and outside otherwise the navigator looks stuffy and one cannot see all files. IntelliJ also allows drag and drop views to sidebars and they keep the search just above always. I know that it will overlay the menu in our case, but it should be fine since one wants to find something in the navigator not to use menus. Could we try it like that?

[akosyakov]

Regarding style cannot it be aligned with the quick search widget?

[kittaakos]

Regarding style cannot it be aligned with the quick search widget?

Let's try that.

cannot see all files.

Exactly one file is overlayed.

Could we try it like that?

I do not like that approach but we can try. If it is easy you can decide which one to have. +1 to have it inside.

[kittaakos]

Or we can go back to the initial idea and have it after the root node with a min length of 10. So it will not overlay tree nodes still remains inside.

[kittaakos]

quick search widget?

@akosyakov What styles you mean? I cannot find anything special.

[kittaakos]

If you meant setting the font weight to bold, that is so bad. I have not even noticed it so far :)

[akosyakov]

I meant if a search box is the overlay widget similar to the quick command widget it would be nice if they look alike. I did not mean any concrete styles.