Wasted space in the multiline search input

[alexdima]

Testing #64270

[roblourens]

How do you think we should use it, wrap text around the query options? I think it would look weird and be hard to implement with a textarea. Or move those switches somewhere else, I don't know where.

[alexdima]

When the viewlet is to the side, and there is a multiline input, perhaps the switches could move to under the input (under the red highlight above). I'm not sure how well that would look...

@misolori do you have any thoughts?

[miguelsolorio]

We could try to add padding to the top of the text area in this scenario so that the actions stay in the same place?

[roblourens]

So the search input is always 2 lines tall? Not a fan of that eiter

[miguelsolorio]

No, only when it needs to wrap would it do that.

I also don't think any of our solutions are really going to work well, maybe it's worth exploring alternatives? Could result in this:

[miguelsolorio]

Per internal discussions, @roblourens suggested that we should move the actions below the text when it wraps (actions always being on a separate line), which looks better than our other suggestions:

[connor4312]

That is difficult to do in a consistent way. We'd want to add a new line in the search box just before the first line becomes long enough that it would overflow onto the controls, but measuring the text in this way is difficult to do. Can be done approximately with a canvas or extra element at a performance cost, however I'm not sure if the tradeoff is there.

[roblourens]

I think the inspiration for this was Facebook:

which I really like, but they probably have multiple engineering teams on that text input

[miguelsolorio]

I was just playing around in devtools, but i think that's what we had in mind for this:

I have no idea what else this does to the search input:

/* src/vs/workbench/contrib/search/browser/media/searchview.css */
.search-view .search-widget .monaco-inputbox > .wrapper > textarea.input {
    padding-right: 0 !important;
}

.search-view .search-container .monaco-findInput > .controls {
    top: auto;
    bottom: 3px;
}

[roblourens]

So we are already measuring the text so we can set the height (?) and this change works because it leaves the measurement mirror div at 66px narrower. But now the real div and the mirror div are out of sync so if you type a lot you will get the wrong height at some point.

I guess what we want to do is say measure the first line at -66px, and after it wraps, measure at the full width and add a line. Facebook doesn't put the controls on the same line as the text after the first line, which I think is what we want.

That actually doesn't sound hard.

[connor4312]

Yea I think Miguel's thing work because the padding in the textarea and in the 'mirror' element are different, and the mirror element is what's used to drive sizing. The downside is that thereafter the textarea height increases faster than the lines are added (which you can see the third line most visibly)

[andreamah]

Something interesting (that might not affect anything) is that facebook messenger now has a different layout

I wonder if that's a more modern take on how to approach this? Just allowing the space to be there? Not too sure if actually using the space will make it look too crowded.

cc: @daviddossett