Allow the selection to be inverted

[Tyriar]

Since we can no longer use ::selection this is no longer possible as it is with the current version of VS Code.

There are a couple of challenges when approaching this problem:

• The selection is currently drawn underneath the text in the rows, which can also have a background color. This separation is good and it would be a good idea to keep the rendering of the selection completely separate to the rendering of the rows.
• Since not every element in .xterm-rows is not wrapped in its own element, the selection may start or end in the middle of an element, which restricts some of the solutions.

One idea:

• Leverage the idea that the selection is split into 3 chunks; top row, middle rows, bottom row (as in Use a single element for the middle of the selection #691)
• The middle row elements within .xterm-rows can be marked with xterm-invert-selection class which invert background and foreground colors via CSS.
• The top and bottom rows can be drawn above the rows using z-index: 1 and the actual content of the row is added to the selection. aria-hidden can then be added for good measure to ensure it's not read out twice.

Not sure if it's the right solution though, I don't really like the duplication of text in the above solution but at least it's just on 2 rows.

[mofux]

@Tyriar Giving this some thoughts, I'm afraid your idea above won't work once we ship the true-color support. I'm afraid we have to split background / selection / foreground into separate layers, and then manipulate the foreground and background cols that are within the selection. I'll have a go at splitting it into layers once we have truecolor merged.

[Tyriar]

This is more of a nice to have, I don't think we would want to compromise performance/architecture or anything to make this possible. #720 is much more important imo.

[mofux]

I have no time for a PR right now, but I discovered that we may use the css mix-blend-mode property to get this done with the renderer with very low effort:

.xterm-selection-layer {
    mix-blend-mode: exclusion;
}

Additionally, even with a non-opaque selection color, this will make the foreground, selection and background visible:

.xterm-selection-layer {
    mix-blend-mode: multiply;
}

Unfortunately, it doesn't seem to be supported by Edge atm.

[Tyriar]

Closing as this is much more complex than it would initially seem to do right and not one has voted for it. Plus it would be yet another option.