Xterm.js: Allow the selection to be inverted

Created on 10 Jun 2017  ·  4Comments  ·  Source: xtermjs/xterm.js

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

screen shot 2017-06-09 at 4 40 40 pm

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 https://github.com/sourcelair/xterm.js/pull/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.

areselection out-of-scope typenhancement
Source
picture Tyriar
👍1

Most helpful comment

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.

picture mofux on 5 Jan 2018
👍2

All 4 comments

@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.

mofux picture mofux on 25 Jul 2017

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. https://github.com/sourcelair/xterm.js/issues/720 is much more important imo.

Tyriar picture Tyriar on 28 Jul 2017
👍2

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.

mofux picture mofux on 5 Jan 2018
👍2

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.

Tyriar picture Tyriar on 7 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fabiospampinato picture fabiospampinato  ·  4Comments
kolbe picture kolbe  ·  3Comments
Tyriar picture Tyriar  ·  4Comments
albinekb picture albinekb  ·  4Comments
LB-J picture LB-J  ·  3Comments