request: ease-out transition for TextEditorDecorationType (extension API)

[kindohm]

Would like to be able to apply a transition on a TextEditorDecorationType . Something like this:

var flashDecorationType = vscode.window.createTextEditorDecorationType({
  backgroundColor: 'rgba(100,200,100,0.5)',
  transition: 'backgroundColor 1s ease-out'
});

[alexdima]

This request is problematic.

We only paint visible lines. So if you add a decoration on line 7, and scroll away from line 7 such that it goes outside the viewport, then the decoration is removed from the DOM. Moreover, changing other decorations on line 7 causes the decoration to be recreated as a new DOM element (as we write to DOM all the decorations in one step).

This constant in-DOM off-DOM rendering (which is a good thing considering we need to support tens of thousands of decorations) will cause all the animations to restart, most likely giving undesired effects.

[kindohm]

@alexandrudima understood.

Here is an exact example of the desired feature (used in the Atom editor):

Notice the block of code being highlighted (light/faint green) and "flashing" for about a second. Is there another way that this could be implemented?

[kindohm]

For the time being, I'm using the dispose() method on TextEditorDecorationType as a workaround:

var flashDecorationType = vscode.window.createTextEditorDecorationType({
    backgroundColor: 'rgba(100,250,100,0.5)'
});

editor.setDecorations(flashDecorationType, [range]);

setTimeout(function() {
    flashDecorationType.dispose();
}, 300);

It isn't a "fade", but it does remove the decoration after a short amount of time, which meets my needs.