From b67b65cd1e16e1f2b014e1b33bc9f2b4a4b6374f Mon Sep 17 00:00:00 2001
From: Marek Libra <mlibra@redhat.com>
Date: Fri, 16 Mar 2018 13:42:32 +0100
Subject: [PATCH] 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         | 4 ++--
 src/Terminal.ts          | 5 +----
 src/utils/CharMeasure.ts | 8 ++------
 src/xterm.css            | 8 +++++++-
 typings/xterm.d.ts       | 3 ++-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Linkifier.ts b/src/Linkifier.ts
index 8dc27cc2..93eb9063 100644
--- a/src/Linkifier.ts
+++ b/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();
         }
diff --git a/src/Terminal.ts b/src/Terminal.ts
index 924260ca..a0d6ed6f 100644
--- a/src/Terminal.ts
+++ b/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
diff --git a/src/utils/CharMeasure.ts b/src/utils/CharMeasure.ts
index b9f267e8..5ad1de76 100644
--- a/src/utils/CharMeasure.ts
+++ b/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.style.top = '0';
-    this._measureElement.style.left = '-9999em';
-    this._measureElement.style.lineHeight = 'normal';
+    this._measureElement.classList.add('xterm-char-measure-element');
     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');
     }
   }
-
 }
diff --git a/src/xterm.css b/src/xterm.css
index 3d2e9b62..eec41a05 100644
--- a/src/xterm.css
+++ b/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;
+}
diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts
index 0e8fdcc7..1e5999c9 100644
--- a/typings/xterm.d.ts
+++ b/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;