Skip to content

Find Widget UI enhancement #26498

@rebornix

Description

@rebornix

Ref Find Widget issues

  • Make it resizeable: #2657, #2220
  • Bug, Replace Box in Current File Truncated #5861
  • Cover search result: #5525

We have a bunch of issues talking about the size or position of Find Widget as it sometimes gets in the way. The root cause is that our single line input box can't handle long text sometimes however the find widget itself sometimes covers the result or text (of course as it's absolute positioned Overlay). There are three ways to mitigate this issue

  • Make it resizable. It consists of two dimensions. The first one is resizing the Find Widget horizontally so the find and replace input boxes can be large enough. The second one is resizing it vertically to make it a multiline textarea, this way we can support multiline find and replace.
  • Dock the Find Widget the same way as the query box in Settings page.
  • Change the position of Find Widget if it's covering the search result. Either take Chromium's solution (only reposition horizontally) or Daniel's proposal (the widget can move both vertically and horizontally).

Resize

The major problem is users find the input box is not wide enough to see all typed in query keywords. We can have two way to mitigate this issue.

1. Horizontal resize

Allow users to resize the find widget horizontally (the same way as Visual Studio). The drawback is editor width is your limit.

resize-horizontal

2. Use textarea when the content is long

Instead of a single line input box, we use textarea to support long text and multi line content (this requires other work though #15727)
textarea-find-widget

Re-Position

Right now the Find Widget is an absolute positioned overlay so it sometimes covers the search result. We have several different solutions to solve or mitigate this problem as below

1. Move Find Widget horizontally when it's covering the search result

moving-find-widget

This is the way how Chrome handles this issue but it's not a perfect solution as when the editor width is small or not large enough, it still covers the result.

2. Move Find Widget both horizontally and vertically

This is suggested by @Tyriar, moving the find widget downwards when the window is not wide enough, especially when we split the window

moving-find-widget-2

Metadata

Metadata

Labels

editor-findEditor find operationsunder-discussionIssue is under discussion for relevance, priority, approach

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions