[folding] highlight folded line

[mymage]

It would be useful if the collapsed lines were highlighted.

Actual code expanded:

Actual code collapsed:

Proposal for an highlight of collapsed code:

Perfect if with color highlight configurable on settings.

Thanks

[dbeigi]

Hi @aeschli, I would like to give this a shot.

[aeschli]

@dbeigi Great. Have a look at https://github.com/Microsoft/vscode/blob/master/src/vs/editor/contrib/folding/foldingModel.ts#L91
There we create a decoration that is used not only for the +/- action but alsofor the ...
Righ now it starts at the last character.
A simple fix might be to have it start at character 0, and give it a background color

[dbeigi]

@aeschli appreciate the direction

[dbeigi]

@aeschli do you have any suggestions on adding the background color?

[aeschli]

@mymage

vscode/src/vs/editor/contrib/folding/foldingDecorations.ts

Line 13 in 53210ed

private static readonly COLLAPSED_VISUAL_DECORATION = ModelDecorationOptions.register({

defines a decoration that you can use to also add a background color:

	private static readonly COLLAPSED_VISUAL_DECORATION = ModelDecorationOptions.register({
		stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
		afterContentClassName: 'inline-folded',
		className: 'folded-background',
		isWholeLine: true,
		linesDecorationsClassName: 'codicon codicon-chevron-right'
	});

And in folding.css:

.monaco-editor .folded-background {
	background-color: yellow;
}

Now the remaining work is to make the color configurable.

vscode/src/vs/editor/contrib/find/findOptionsWidget.ts

Line 197 in 4e8ef4c

registerThemingParticipant((theme, collector) => {

is an example on a css that is generated based on theme colors.

[mymage]

@aeschli , sorry I'm not very confident with these language: you intend that I can apply these code on my local files to try the feature?

[aeschli]

@mymage Sorry, no, this was just intended to help @dbeigi which offered to work on a PR implementing the feature.

[ianwesterfield]

Am I missing where this can be disabled in settings?
Just saw the comment from @aeschli on PR #84955. What was the reasoning behind not requiring this be controlled by a setting? It's the first place I looked to disable the highlighting.

[usernamehw]

You can use transparent color:

"workbench.colorCustomizations": {
	"editor.foldBackground": "#fff0",
}

The reason is probably because there's a lot of settings already.

[aeschli]

I added a setting editor.foldingHighlight

[aeschli]

To verify:

• configure folded region highlight color:

"workbench.colorCustomizations": {
	"editor.foldBackground": "#fff0",
}

• enable/disable feature:
  "editor.foldingHighlight": false