Implement a fallback DOM renderer #1432

Tyriar · 2018-05-04T16:35:49Z

This change is motivated in order to provide a fallback for environments that do not support or who have performance issues using GPU canvas acceleration.

Fixes #1360

Notes

A lot of the implementation is similar to the old renderer which can be viewed in Render using canvas #938
I explored making this an addon but it depends on too many internal objects like ColorManager, RenderDebouncer and EventEmitter. Once TS 3 is released we should refactor out a "platform"/"base" project which can be shared easily depended on by the core and addons (and speed up builds since it only need to be rebuilt if files within it changes), see Use project references coming in TypeScript v3 #1337. In the meantime I think keeping it in core as an option is the way to go

Even though Renderer just defers this to onResize, future IRenderer implementations may take advantage of onCharSizeChanged specifically.

mofux · 2018-05-07T13:32:32Z

src/renderer/dom/DomRenderer.ts

+          `.xterm .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
+    });
+
+    this._themeStyleElement.innerHTML = styles;


I'm not sure if it is wise to create these styles for every single terminal instance. It will put quite some load on the CSS rendering engine with every new instance of the terminal spawned (because the classes created are not scoped to the DOM tree the style element is attached to). Shadow DOM might solve this problem...?

This function is called sparingly though, only when the theme changes. I didn't want to spend too much time optimizing since this is just the fallback experience.

The way I was thinking we could fix this is by adding an ID (or a unique class) to the terminal element.

mofux · 2018-05-07T13:38:32Z

src/Terminal.ts

@@ -703,7 +705,11 @@ export class Terminal extends EventEmitter implements ITerminal, IDisposable, II
    // Performance: Add viewport and helper elements from the fragment
    this.element.appendChild(fragment);

-    this.renderer = new Renderer(this, this.options.theme);
+    if (this.options.rendererType === 'canvas') {


The only known renderer type seems to be 'canvas', any other string will use the dom renderer. Shouldn't we expect that 'dom' is passed if the DOM renderer should be used, and throw an exception if an unsupported renderer name gets passed?

👍 will fix this up

mofux · 2018-05-08T08:56:43Z

In general I'm not a big fan of the current renderer API because it is too closely coupled. I'd much rather have a layer in the middle that holds abstract cell decoration instructions (foreground, background, bold, italic, underline, link, selected, etc...). Things like the linkifier or the selection manager would provide cell decorations instead of drawing directly - and then it would be up to the renderer to support and draw these decoration types. It will probably involve a lot of refactoring, but would open up xterm.js to more advanced plugins that could influence rendering more easily. Maybe we should iterate on something like that in a separate issue, potentially for a v4?

Tyriar · 2018-05-08T16:28:13Z

In general I'm not a big fan of the current renderer API because it is too closely coupled. I'd much rather have a layer in the middle that holds abstract cell decoration instructions (foreground, background, bold, italic, underline, link, selected, etc...). Things like the linkifier or the selection manager would provide cell decorations instead of drawing directly - and then it would be up to the renderer to support and draw these decoration types. It will probably involve a lot of refactoring, but would open up xterm.js to more advanced plugins that could influence rendering more easily. Maybe we should iterate on something like that in a separate issue, potentially for a v4?

More targeted PRs against those components would be a good in the future. We can also tweak IRenderer in the future, just take the DOM renderer along with the ride. I think the refactors you're proposing would also better enable us to pull the dom renderer into an addon which is where it should go in the end.

Tyriar · 2018-05-15T17:19:04Z

@mofux feedback addressed, ready for another round

ghost · 2018-05-17T21:52:26Z

src/Terminal.ts

+    switch (this.options.rendererType) {
+      case 'canvas': this.renderer = new Renderer(this, this.options.theme); break;
+      case 'dom': this.renderer = new DomRenderer(this, this.options.theme); break;
+      default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);


maybe you can add an open option to provide custom renderers?

if (this.options.rendererType) { this.renderer = new this.options.rendererType(this, this.options.theme) }

@mofux and I will be improving how renderers attach soon, the DOM renderer will eventually be moved to an addon. Also I'm not sure about swapping out the renderer in its entirety in the API but I definitely want people to contribute layers that could sit on top.

vincentwoo · 2018-05-18T12:27:44Z

I'd like to submit a request for at least some (possibly undocumented way) to pull out a DOM render without necessarily attaching xterm to an open DOM element, etc.

Tyriar · 2018-05-18T17:03:11Z

@vincentwoo you could pull from Terminal._buffer? I think we talked about this in some issue?

See microsoft/vscode#50125

mofux · 2018-06-03T13:51:06Z

Just re-tested an I don't see any issues left. Good to merge from my side 👍

Tyriar · 2018-06-03T13:58:32Z

I'll do another check of it as well now

Tyriar added 10 commits May 2, 2018 13:32

Initial DOM renderer implementation

16393b2

Call IRenderer.onCharSizeChanged at right time

20ff107

Even though Renderer just defers this to onResize, future IRenderer implementations may take advantage of onCharSizeChanged specifically.

Only update dimensions when char size changes

58ce5e2

Merge branch 'oncharsizechanged' into 1360_dom_renderer

3cab8be

Fix row height, add cursor

418f2c6

Add a bunch of constants

1d2f356

Handle focus, emit refresh

d777513

Start on selection

e9f4d39

Support selection

e3e4dcb

Update after a options change

2c39493

Tyriar added the work-in-progress Do not merge label May 4, 2018

Tyriar self-assigned this May 4, 2018

Tyriar added 3 commits May 4, 2018 09:38

Resolve a bunch of TODOs

b14308f

Fill in documentation on new option

6cadd7c

Support italic

52e71a2

Tyriar added this to the 3.5.0 milestone May 4, 2018

Move standard width to style element

09624c1

Tyriar removed the work-in-progress Do not merge label May 4, 2018

Polish

5b5eb48

Tyriar force-pushed the 1360_dom_renderer branch from e154978 to 5b5eb48 Compare May 4, 2018 17:55

Improve typings

cd3eea5

Tyriar force-pushed the 1360_dom_renderer branch from a33e8ae to cd3eea5 Compare May 4, 2018 21:02

mofux reviewed May 7, 2018

View reviewed changes

Tyriar and others added 3 commits May 15, 2018 10:08

Merge branch 'master' into 1360_dom_renderer

2f618b3

Throw exception for unrecognized renderer type

f055e0e

Scope styles per terminal

aa1e1c5

Tyriar added 2 commits May 15, 2018 10:52

Size row container so scroll bar shows

6024e7c

Set font family and size

2b4c5ad

ghost reviewed May 17, 2018

View reviewed changes

Prevent outside line-height styles from affecting cursor

1736c1e

See microsoft/vscode#50125

Tyriar mentioned this pull request May 20, 2018

Add optional character joiner #1460

Merged

Tyriar added 4 commits May 21, 2018 09:41

Merge remote-tracking branch 'origin/master' into 1360_dom_renderer

85dada2

Merge remote-tracking branch 'ups/master' into 1360_dom_renderer

2097527

Refactor and add some tests to dom renderer

c2b5a24

Get DomRendererRowFactory test coverage to 100%

82fdcc0

Merge branch 'master' into 1360_dom_renderer

52be558

Fix lint

1ca6e51

Tyriar merged commit 1cccec6 into xtermjs:master Jun 3, 2018

Tyriar deleted the 1360_dom_renderer branch June 3, 2018 14:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement a fallback DOM renderer #1432

Implement a fallback DOM renderer #1432

Tyriar commented May 4, 2018 •

edited

Loading

mofux May 7, 2018

Tyriar May 8, 2018

mofux May 7, 2018

Tyriar May 8, 2018

mofux commented May 8, 2018

Tyriar commented May 8, 2018

Tyriar commented May 15, 2018

ghost May 17, 2018 •

edited by ghost

Loading

Tyriar May 18, 2018

vincentwoo commented May 18, 2018

Tyriar commented May 18, 2018

mofux commented Jun 3, 2018

Tyriar commented Jun 3, 2018

Implement a fallback DOM renderer #1432

Implement a fallback DOM renderer #1432

Conversation

Tyriar commented May 4, 2018 • edited Loading

Notes

mofux May 7, 2018

Choose a reason for hiding this comment

Tyriar May 8, 2018

Choose a reason for hiding this comment

mofux May 7, 2018

Choose a reason for hiding this comment

Tyriar May 8, 2018

Choose a reason for hiding this comment

mofux commented May 8, 2018

Tyriar commented May 8, 2018

Tyriar commented May 15, 2018

ghost May 17, 2018 • edited by ghost Loading

Choose a reason for hiding this comment

Tyriar May 18, 2018

Choose a reason for hiding this comment

vincentwoo commented May 18, 2018

Tyriar commented May 18, 2018

mofux commented Jun 3, 2018

Tyriar commented Jun 3, 2018

Tyriar commented May 4, 2018 •

edited

Loading

ghost May 17, 2018 •

edited by ghost

Loading