Replace inline-styles by external CSS

Selected inline-styles were externalized to xterm.css.

The `Terminal._charSizeStyleElement` is removed since it
was not used anymore.

Fixes: https://github.com/xtermjs/xterm.js/issues/1335

src/Linkifier.ts

@@ -230,7 +230,7 @@ export class Linkifier extends EventEmitter implements ILinkifier {
       },
       e => {
         this.emit(LinkHoverEventTypes.HOVER, <ILinkHoverEvent>{ x, y, length: uri.length});
-        this._terminal.element.style.cursor = 'pointer';
+        this._terminal.element.classList.add('xterm-cursor-pointer');
       },
       e => {
         this.emit(LinkHoverEventTypes.TOOLTIP, <ILinkHoverEvent>{ x, y, length: uri.length});
@@ -240,7 +240,7 @@ export class Linkifier extends EventEmitter implements ILinkifier {
       },
       () => {
         this.emit(LinkHoverEventTypes.LEAVE, <ILinkHoverEvent>{ x, y, length: uri.length});
-        this._terminal.element.style.cursor = '';
+        this._terminal.element.classList.remove('xterm-cursor-pointer');
         if (matcher.hoverLeaveCallback) {
           matcher.hoverLeaveCallback();
         }

src/Terminal.ts

@@ -118,7 +118,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   allowTransparency: false,
   tabStopWidth: 8,
   theme: null,
-  rightClickSelectsWord: Browser.isMac
+  rightClickSelectsWord: Browser.isMac,
   // programFeatures: false,
   // focusKeys: false,
 };
@@ -138,7 +138,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
   private _viewportElement: HTMLElement;
   private _helperContainer: HTMLElement;
   private _compositionView: HTMLElement;
-  private _charSizeStyleElement: HTMLStyleElement;
 
   private _visualBellTimer: number;
 
@@ -668,8 +667,6 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
     this._compositionHelper = new CompositionHelper(this.textarea, this._compositionView, this);
     this._helperContainer.appendChild(this._compositionView);
 
-    this._charSizeStyleElement = document.createElement('style');
-    this._helperContainer.appendChild(this._charSizeStyleElement);
     this.charMeasure = new CharMeasure(document, this._helperContainer);
 
     // Performance: Add viewport and helper elements from the fragment

src/utils/CharMeasure.ts

@@ -23,10 +23,7 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
     this._document = document;
     this._parentElement = parentElement;
     this._measureElement = this._document.createElement('span');
-    this._measureElement.style.position = 'absolute';
+    this._measureElement.classList.add('xterm-char-measure-element');
-    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);
@@ -41,7 +38,7 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
   }
 
   public measure(options: ITerminalOptions): void {
-    this._measureElement.style.fontFamily = options.fontFamily;
+  this._measureElement.style.fontFamily = options.fontFamily;
     this._measureElement.style.fontSize = `${options.fontSize}px`;
     const geometry = this._measureElement.getBoundingClientRect();
     // The element is likely currently display:none, we should retain the
@@ -55,5 +52,4 @@ export class CharMeasure extends EventEmitter implements ICharMeasure {
       this.emit('charsizechanged');
     }
   }
-
 }

src/xterm.css

@@ -117,11 +117,13 @@
     visibility: hidden;
 }
 
-.xterm .xterm-char-measure-element {
+.xterm-char-measure-element {
     display: inline-block;
     visibility: hidden;
     position: absolute;
+    top: 0;
     left: -9999em;
+    line-height: normal;
 }
 
 .xterm.enable-mouse-events {
@@ -151,3 +153,7 @@
     height: 1px;
     overflow: hidden;
 }
+
+.xterm-cursor-pointer {
+    cursor: pointer;
+}

typings/xterm.d.ts

@@ -23,6 +23,7 @@ declare module 'xterm' {
      * Warning: Enabling this option can reduce performances somewhat.
      */
     allowTransparency?: boolean;
+
     /**
      * A data uri of the sound to use for the bell (needs bellStyle = 'sound').
      */
@@ -55,7 +56,7 @@ declare module 'xterm' {
 
     /**
      * Whether to enable the rendering of bold text.
-     * 
+     *
      * @deprecated Use fontWeight and fontWeightBold instead.
      */
     enableBold?: boolean;