Remove Unnecessary Horizontal Scroll with Word Wrap

[karlhorky]

When the error lens first appears, it creates a horizontal scroll, also if the user has word wrap set.

This problem alone is annoying, but potentially not currently fixable (I'm not sure if there are APIs for this in VS Code). I guess it's also tracked in #12 and microsoft/vscode#32856.

However, after the error lens is gone, it would be nice to at least remove the scrollbar again. If you look carefully in the gif above, changing tabs triggers this.

Can you think of any way to trigger a re-layout to remove the scrollbar again?

[karlhorky]

Actually, would it be possible to completely disable the scroll like the gitlens.currentLine.scrollable option implemented at the link below?

https://github.com/eamodio/vscode-gitlens/blob/30e1d290e8f337d56596a030ff097eeabdd98eb7/src/annotations/annotations.ts#L355-L356

[karlhorky]

I can confirm that the textDecoration: 'none;position: absolute;' hack works to disable the scrollbars (although the lens text will not be wrapped - it will be cut off).

To be clear, the change would be to this code here:

vscode-error-lens/src/decorations.ts

Lines 214 to 220 in 4af019f

	const decInstanceRenderOptions: vscode.DecorationInstanceRenderOptions = {
	...decorationRenderOptions,
	after: {
	...decorationRenderOptions.after || {},
	contentText: truncateString(messagePrefix + diagnostic.message),
	},
	};

Diff:

 const decInstanceRenderOptions: vscode.DecorationInstanceRenderOptions = { 
 	...decorationRenderOptions, 
 	after: { 
 		...decorationRenderOptions.after || {}, 
+ 		textDecoration: 'none;position: absolute;',
 		contentText: truncateString(messagePrefix + diagnostic.message), 
 	}, 
 }; 

Maybe a setting for this?

[usernamehw]

From the next version (not sure when it will be published yet):

"errorLens.scrollbarHackEnabled": true,

[karlhorky]

Great, thanks!

[Tizoner]

It's not working.

[usernamehw]

@Tizoner If you are using my extension (not the one that was forked) and on the latest version 3.2.4 it should work.

[Tizoner]

Is this forked one?

[usernamehw]

Any more details? What's not working? A .gif demonstrating the problem? Steps to reproduce?

[Tizoner]

Horizontal scroll appears even with word wrap enabled.
On image below you can see both word wrap, error message that does not wrap, and resulting horizontal scroll bar.

This option doesn't change anything.

[usernamehw]

Do you have other extensions that create inline decorations (insert text)? This hack only prevents showing scrollbar from this extension, not all extensions.

[Tizoner]

No, I don't have other extensions that create inline decorations.
I've tested this by disabling error lens extension and doing the same steps as above without seeing appearance of the horizontal scroll bar.

[usernamehw]

Well, I have no idea why it doesn't work. You are welcome to investigate.

[karlhorky]

@Tizoner hmm, strange. What version of VS Code? Still working for me with Version: 1.51.1.

Maybe try disabling all other extensions?

[Tizoner]

Disabling of other extensions didn't help.
Here is my version of VS Code:

[karlhorky]

@Tizoner looks pretty much the same as my version (except you're on Windows - I guess this is not an issue though).

I guess you've additionally already tried:

1. Completely closing all VS Code windows and restarting
2. Trying VS Code Insiders Edition

What are the settings when you ctrl-shift-P and select "Preferences: Open Settings (JSON)"? I'm guessing you have word wrap enabled...?

Can you record a gif of the behavior (eg. with ScreenToGif) and upload it here?