Render the cursor in the webgl canvas

[Tyriar]

This was always a todo with the webgl renderer. Currently it's rendered using a cursor render layer like the canvas renderer, this means more code, an extra canvas/texture and potentially inconsistent rendering. The below is showing the selection (right) next to the cursor (left):

[Tyriar]

This could be bad for battery when cursor blinking is enabled?

[jerch]

Would applying {powerPreference: 'low-power'} to getContext help to reduce power drainage? Though I am not sure, how support state for that flag among browsers is.

[Tyriar]

Huh, I didn't know that existed. The extra cost would mainly be when the cursor is blinking, if that could move into the shader so it didn't need buffer updates that would be best.

[xzfc]

The extra cost would mainly be when the cursor is blinking, if that could move into the shader so it didn't need buffer updates that would be best.

To use a shader, we still need to perform a render (i.e. call WebglRenderer.render() and GlyphRenderer.render()) on cursor change. If we are doing render anyways, we could just introduce WebglRenderer.renderCursor() (like in PR #4568) instead of using a shader.

[Tyriar]

To solve the power problem, maybe we should just detect when the terminal is focused and idle as that's the main case I'm concerned about. Something like a setTimeout(2 * 60 * 1000) which clears on focus out and resets on any input. Let's tackle that separately to https://github.com/xtermjs/xterm.js/pull/4568 though