Replace mode needs more UX affordance

[isidorn]

#8184

Currently the search / replace widget behaves quite differently if the replace box is visible or not. The differences are what results are outlined in the viewlet (searched or replaced) and what file is opened when you click on a result.
There is a large difference in behavior and the only way a user can see in what mode he is is whether a replace box is visible. I propose to add some more UX affordance - maybe updating the title of SEARCH to SEARCH / REPLACE. Or some more styling with colors.
This might get fixed by addressing #8286

ping @stevencl, @bpasero for opinions

[bpasero]

I also find this problematic and filed #8332

[bpasero]

After discussion with @isidorn and @sandy081 suggest to do the following:

• replace action is disabled if there are no search results or the search criteria changed (maybe we give a hint how to enable it in the tooltip of the action or the backgroung text of the replace box)
• if replace is visible and something is typed we show a preview of the diff in the same colors as the diff editor (green, red) and probably also with strikethrough for people that cannot read colors
• we do not show such a preview if replace is empty (but you can still trigger the replace action to replace with empty string)
• if you had something in replace and remove the text in replace we switch back to showing the search results (but replace action is still enabled)
• we no more do anything if focus moves between search and replace, all is dependent on having a value in the replace box

[sandy081]

Here is the replace preview in different themes.

In Replace preview I used same color as in Search results for search string but with strike through.

[bpasero]

@sandy081 nice, can you also attach when using same as diff colors?

[isidorn]

@sandy081 I would use the same color we use in the diff editor. The impression I got from looking at these images is that it is a different one (might be due ot the gray background)

[sandy081]

Reason being, there will be more color changes user has to adopt to..

Search - 1 color
Replace - 2 colors

If we use single color for Search results, then only difference user will see is Replace color

[isidorn]

I do not think it is bad that we use 2 completly different colors than regular search results as that address my concern that the replace mode needs more ux affordance. So the colors could differntiate it.

Only if it turns into the disco mode I would go back to your suggestion

[sandy081]

Attaching pictures using Diff editor color

[isidorn]

I like this more, though it is just my personal preference (due to the reasons specified above).

[sandy081]

Thanks @isidorn @bpasero

I will go with this and we can always change with feedback.

[bpasero]

Love it!