Allow us to change the font type and size of find-replace widget

[leo-carmo]

Hi, and please! It's unreadable for my limited eyes:

I know we are now able to resize the widget horizontally (like pointed out at issues #2657, #20447 and #2220), but that doesn't change the legibility of the inserted characters.

Look how easier it is on Sublime Text to read:

There should be a pair of settings like "editor.FindReplaceWidgetFontFace": "Consolas", and "editor.FindReplaceWidgetFontSize": "16", (the names are just examples).

[Lucasmateuseng]

Corcordo com o recurso acima, as letras maiores ajudaria bastante da ux da interface

[ssbarnea]

That is clearly a very important accessibility aspect even for English users, as long texts do not fit.

[ArturoDent]

@ssbarnea You can drag the left edge of the find widget to expand it. But it desperately needs a larger font size/letter spacing if you are working with regex's in particular.

[Plrrb]

And I think it needs Syntax Highlighting for Regex (Regular Expressions)

[sweettyler]

agree that find/replace box should use monospace font only!

[leo-carmo]

So, any updates or workarounds? :(

[agftrading]

@ssbarnea You can drag the left edge of the find widget to expand it. But it desperately needs a larger font size/letter spacing if you are working with regex's in particular.

Dragging the left edge to resize does not seem to be possible in my VS Code, is there a setting that I need to change or is this perhaps an insiders edition (that am not using yet) feature. Thanks for any replies.

[mike-clark-8192]

Here's a workaround until there's a setting for it. Use the Command Palette (Ctrl/⌘+Shift+P). Choose Developer: Toggle Developer Tools. In the JavaScript console, run something like this:

[...$$(".find-widget textarea")].forEach(x => {const s=x.style; s.fontFamily='monospace'; s.fontSize='15pt';});

NB: Never paste or run any JavaScript in the developer console that you don't understand what it does.

If you want to make it semi-permanent, you could try: be5invis.vscode-custom-css. This extension is not super user-friendly, but it does work, and if properly setup, would make the setting "stick" until the next VSCode update was applied.

[leo-carmo]

Here's a workaround until there's a setting for it. Use the Command Palette (Ctrl/⌘+Shift+P). Choose 'Developer: Open Webview Developer Tools'. In the JavaScript console, run something like this:

[...$$(".find-widget textarea")].forEach(x => {const s=x.style; s.fontFamily='monospace'; s.fontSize='15pt';});

NB: Never paste or run any JavaScript in the developer console that you don't understand what it does. If you want to make it semi-permanent, you could try: be5invis.vscode-custom-css

I tried, but then I came across this which indicates the Webview Developer Tools are...deprecated? I found that after my editor didn't open any new window after trying Developer: Open Webview Developer Tools in the command palette. But I could open the window under the command Developer: Toggle Developer Tools, and switched to the console tab and inserted your code. Didn't work.
What am I missing?

[starball5]

Related on Stack Overflow: How do I increase the font size in VS Code find widget?

[antonioscript]

I'm really looking forward to this feature. It's been getting in my way for a while, and accessibility like this would help a lot.

[mike-clark-8192]

I tried, but then I came across this which indicates the Webview Developer Tools are...deprecated? I found that after my editor didn't open any new window after trying Developer: Open Webview Developer Tools in the command palette. But I could open the window under the command Developer: Toggle Developer Tools, and switched to the console tab and inserted your code. Didn't work. What am I missing?

You're right, the Open Webview Developer Tools item in the command-palette no longer seems to work. However, the Developer: Toggle Developer Tools command palette does work for this workaround. The snippet of JavaScript code I provided does work for me, and has for many months across multiple updates. If you are not seeing a change in the font face and font size, we might be talking about a different Find Box. The Find Box that my JS snippet modifies is the (Ctrl+F) "inline" one that overlays your active editor, not the Ctrl+Shift+F (global find across files) box. If you are find box that my snippet tweaks, maybe do a test by increasing the font size in the JS snippet to make the size change dramatically obvious (the font size of 15 in my JS Snippet is not dramatically larger than the default font, just a little larger.) If it's still not working, perhaps attempt my workaround using a one-off "portable" installation of VSCode (Google for instructions.) A one-off portable configuration of VSCode is an easy way to get an "OEM" or "Stock" installation of VSCode side-by-side with your daily driver VSCode installation, as the two will not share any configuration settings. The reason I suggest this is that it's possible some extensions or themes you have installed into your regular VSCode are interfering with the workaround.

[leo-carmo]

That worked, mike-clark-8192! I used the Developer: Toggle Developer Tools instead of the Open Webview Developer Tools command. Awesome for readability!

[leo-carmo]

@mike-clark-8192 Turns out that js in the console works, but is not permanent. How to make the change persistent?