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 => {