Merge remote-tracking branch 'origin/v3' into 731_screen_reader

src/Terminal.ts

@@ -319,7 +319,9 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * Focus the terminal. Delegates focus handling to the terminal's DOM element.
    */
   public focus(): void {
-    this.textarea.focus();
+    if (this.textarea) {
+      this.textarea.focus();
+    }
   }
 
   public get isFocused(): boolean {
@@ -588,19 +590,19 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this.element = this.document.createElement('div');
     this.element.classList.add('terminal');
     this.element.classList.add('xterm');
-
     this.element.setAttribute('tabindex', '0');
+    this.parent.appendChild(this.element);
 
+    // Performance: Use a document fragment to build the terminal
+    // viewport and helper elements detached from the DOM
+    const fragment = document.createDocumentFragment();
     this.viewportElement = document.createElement('div');
     this.viewportElement.classList.add('xterm-viewport');
-    this.element.appendChild(this.viewportElement);
+    fragment.appendChild(this.viewportElement);
     this.viewportScrollArea = document.createElement('div');
     this.viewportScrollArea.classList.add('xterm-scroll-area');
     this.viewportElement.appendChild(this.viewportScrollArea);
 
-    // preload audio
-    this.syncBellSound();
-
     this._mouseZoneManager = new MouseZoneManager(this);
     this.on('scroll', () => this._mouseZoneManager.clearAll());
     this.linkifier.attachToDom(this._mouseZoneManager);
@@ -609,8 +611,8 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     // capturing DOM Events. Then produce the helpers.
     this.helperContainer = document.createElement('div');
     this.helperContainer.classList.add('xterm-helpers');
-    // TODO: This should probably be inserted once it's filled to prevent an additional layout
-    this.element.appendChild(this.helperContainer);
+    fragment.appendChild(this.helperContainer);
+
     this.textarea = document.createElement('textarea');
     this.textarea.classList.add('xterm-helper-textarea');
     this.textarea.setAttribute('autocorrect', 'off');
@@ -628,11 +630,14 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
 
     this.charSizeStyleElement = document.createElement('style');
     this.helperContainer.appendChild(this.charSizeStyleElement);
-
-    this.parent.appendChild(this.element);
-
     this.charMeasure = new CharMeasure(document, this.helperContainer);
 
+    // Preload audio, this relied on helperContainer
+    this.syncBellSound();
+
+    // Performance: Add viewport and helper elements from the fragment
+    this.element.appendChild(fragment);
+
     this.renderer = new Renderer(this, this.options.theme);
     this.options.theme = null;
     this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure);
@@ -681,6 +686,7 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     // Listen for mouse events and translate
     // them into terminal mouse protocols.
     this.bindMouse();
+
   }
 
   /**
@@ -2124,6 +2130,11 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
   }
 
   private syncBellSound(): void {
+    // Don't update anything if the terminal has not been opened yet
+    if (!this.element) {
+      return;
+    }
+
     if (this.soundBell() && this.bellAudioElement) {
       this.bellAudioElement.setAttribute('src', this.options.bellSound);
     } else if (this.soundBell()) {