Adjust how XTermjs addon is loaded

ui/widgets/screen_console.vue

@@ -109,6 +109,7 @@
 import FontFaceObserver from "fontfaceobserver";
 import { Terminal } from "xterm";
 import { WebLinksAddon } from "xterm-addon-web-links";
+import { WebglAddon } from "xterm-addon-webgl";
 import { FitAddon } from "xterm-addon-fit";
 import { isNumber } from "../commands/common.js";
 import { consoleScreenKeys } from "./screen_console_keys.js";
@@ -146,12 +147,9 @@ class Term {
     });
     this.fit = new FitAddon();
 
-    this.term.loadAddon(this.fit);
-    this.term.loadAddon(new WebLinksAddon());
-
-    this.term.setOption("theme", {
+    this.term.options.theme = {
       background: this.control.activeColor(),
-    });
+    };
 
     this.term.onData((data) => {
       if (this.closed) {
@@ -290,6 +288,21 @@ class Term {
     }
 
     this.term.open(root);
+    this.term.loadAddon(this.fit);
+    this.term.loadAddon(new WebLinksAddon());
+    // TODO: Uncomment this after WebGL render is tested working and could
+    //       improve the performance, which is not yet the case during my last
+    //       revisit.
+    // if (() => {
+    //   try {
+    //     return !!window.WebGLRenderingContext && 
+    //       document.createElement('canvas').getContext('webgl');
+    //   } catch(e) {
+    //      return false;
+    //   }
+    // }) {
+    //   this.term.loadAddon(new WebglAddon());
+    // }
 
     this.term.textarea.addEventListener("focus", callbacks.focus);
     this.term.textarea.addEventListener("blur", callbacks.blur);
@@ -391,6 +404,7 @@ class Term {
 
     try {
       this.term.focus();
+      this.refit();
     } catch (e) {
       process.env.NODE_ENV === "development" && console.trace(e);
     }