feature: use constructed style sheets for dom render so that it works with csp style-src 'self'

[SimonSiefke]

Fixes #4445

This changes the dom renderer to use constructed stylesheets instead of html style elements when available. Constructed stylesheets don't require a style-src 'unsafe-inline' Content Security Policy

test the change locally

1. In demo/client.ts comment out the webgl addon so that the dom renderer is used

 // if (addons.webgl.instance) {
  //   try {
  //     typedTerm.loadAddon(addons.webgl.instance);
  //     term.open(terminalContainer);
  //     setTextureAtlas(addons.webgl.instance.textureAtlas);
  //     addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
  //     addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
  //     addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
  //   } catch (e) {
  //     console.warn('error during loading webgl addon:', e);
  //     addons.webgl.instance.dispose();
  //     addons.webgl.instance = undefined;
  //   }
  // }

2. In demo/server.js, add a content security policy header when serving index.html:

app.get("/", (req, res) => {
    res.setHeader(
      "Content-Security-Policy",
      `default-src 'none'; style-src 'self'; img-src 'self'; script-src 'self'; connect-src 'self'`
    );
    res.sendFile(__dirname + "/index.html");
  });

Demo with CSP enabled

[Tyriar]

I updated the branch

[Tyriar]

This seems to make the Linux/Firefox integration tests consistently fail. You can run these with npm run test-api-firefox

[SimonSiefke]

Fixed! :)

[jerch]

@SimonSiefke Can you plz also check, that replaceSync does not create another forced layouting step, the last thing we need in the DOM renderer is additional render engine work. So the question here is, if that sync in the name means sync to DOM render state.

[Tyriar]

@jerch I get the impression replaceSync is doing what we used to do and replace would batch it for later if it isn't needed immediately like in our tests. But regardless, even slightly slower here shouldn't matter as it's only on dimensions change (not resize) and changing theme which seldom happens. I double checked the time by resizing a few times on my macbook:

[SimonSiefke]

@jerch As far as I understand, there is no extra synchronization in replaceSync, it is just the synchronous version of replace

Can you plz also check, that replaceSync does not create another forced layouting step

As @Tyriar said, it is basically the same, both methods are dom writes, there are no extra forced layouts with this method.

Perhaps performance might even be slightly better because there are two less dom elements now, which is also something but I doubt it would make a huge difference.

[Tyriar]

@SimonSiefke thanks again, this was a great change as I know several people have hit the CSP issue

[jerch]

I stumbled over one aspect in this PR when merging the DOM renderer PR with master - in StyleSheet.ts the global document is accessed. In an older PR we abstracted document into a terminal setting to make popouts into other documents working, as some functionality is bound to the real underlying document.

Question - should the code in StyleSheet.ts also refer to our document variable or does it not matter here? Note I had a similar case with cross document canvas painting, but it just works for those across documents.

[Tyriar]

@jerch good find, I'll fix it up