Fix fit() sizing and also support letterSpacing, enhanced (#1157)

Fixes #1081

* Make sure character dimensions are available right after calling term.open()
* Do not assume var assignments are global anymore, webpack will isolate them
* Use DocumentFragment to build Viewport and helpers before attaching them to the DOM
* Shield term.focus call from crashing when used before term.open

src/utils/CharMeasure.test.ts

@@ -25,41 +25,18 @@ describe('CharMeasure', () => {
   });
 
   describe('measure', () => {
-    it('should set _measureElement on first call', () => {
-      charMeasure.measure({});
-      assert.isDefined((<any>charMeasure)._measureElement, 'CharMeasure.measure should have created _measureElement');
+    it('should have _measureElement', () => {
+      assert.isDefined((<any>charMeasure)._measureElement, 'new CharMeasure() should have created _measureElement');
     });
 
-    it('should be performed async on first call', done => {
-      assert.equal(charMeasure.width, null);
-      charMeasure.measure({});
+    it('should be performed sync', () => {
       // Mock getBoundingClientRect since jsdom doesn't have a layout engine
       (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
         return { width: 1, height: 1 };
       };
-      assert.equal(charMeasure.width, null);
-      setTimeout(() => {
-        assert.equal(charMeasure.width, 1);
-        done();
-      }, 0);
-    });
-
-    it('should be performed sync on successive calls', done => {
       charMeasure.measure({});
-      // Mock getBoundingClientRect since jsdom doesn't have a layout engine
-      (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
-        return { width: 1, height: 1 };
-      };
-      setTimeout(() => {
-        const firstWidth = charMeasure.width;
-        // Mock getBoundingClientRect since jsdom doesn't have a layout engine
-        (<any>charMeasure)._measureElement.getBoundingClientRect = () => {
-          return { width: 2, height: 2 };
-        };
-        charMeasure.measure({});
-        assert.equal(charMeasure.width, firstWidth * 2);
-        done();
-      }, 0);
+      assert.equal(charMeasure.height, 1);
+      assert.equal(charMeasure.width, 1);
     });
 
     it('should NOT do a measure when the parent is hidden', done => {

src/utils/CharMeasure.ts

@@ -22,6 +22,14 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
     super();
     this._document = document;
     this._parentElement = parentElement;
+    this._measureElement = this._document.createElement('span');
+    this._measureElement.style.position = 'absolute';
+    this._measureElement.style.top = '0';
+    this._measureElement.style.left = '-9999em';
+    this._measureElement.style.lineHeight = 'normal';
+    this._measureElement.textContent = 'W';
+    this._measureElement.setAttribute('aria-hidden', 'true');
+    this._parentElement.appendChild(this._measureElement);
   }
 
   public get width(): number {
@@ -33,24 +41,6 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
   }
 
   public measure(options: ITerminalOptions): void {
-    if (!this._measureElement) {
-      this._measureElement = this._document.createElement('span');
-      this._measureElement.style.position = 'absolute';
-      this._measureElement.style.top = '0';
-      this._measureElement.style.left = '-9999em';
-      this._measureElement.style.lineHeight = 'normal';
-      this._measureElement.textContent = 'W';
-      this._measureElement.setAttribute('aria-hidden', 'true');
-      this._parentElement.appendChild(this._measureElement);
-      // Perform _doMeasure async if the element was just attached as sometimes
-      // getBoundingClientRect does not return accurate values without this.
-      setTimeout(() => this._doMeasure(options), 0);
-    } else {
-      this._doMeasure(options);
-    }
-  }
-
-  private _doMeasure(options: ITerminalOptions): void {
     this._measureElement.style.fontFamily = options.fontFamily;
     this._measureElement.style.fontSize = `${options.fontSize}px`;
     const geometry = this._measureElement.getBoundingClientRect();
@@ -65,4 +55,5 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
       this.emit('charsizechanged');
     }
   }
+
 }