Use setInterval over animation for cursor blink

Fixes #625

diff --git a/src/xterm.css b/src/xterm.css
index aac95444e06b989ecca02593dd54ba15e2ec51c7..a67485e5bb3f85d79e90c53fcb30b587be53a977 100644 (file)
--- a/src/xterm.css
+++ b/src/xterm.css
@@ -97,16 +97,9 @@
     background-color: transparent;
 }
 
-.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink .terminal-cursor {
-    animation: xterm-cursor-blink 1.2s infinite step-end;
-}
-
-@keyframes xterm-cursor-blink {
-    0% { }
-    50% {
-        background-color: transparent;
-        color: inherit;
-    }
+.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor {
+    background-color: transparent;
+    color: inherit;
 }
 
 .terminal.xterm-cursor-style-bar .terminal-cursor,
@@ -132,13 +125,13 @@
     right: 0;
     height: 1px;
 }
+.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before,
+.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before {
+    background-color: transparent;
+}
 .terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,
 .terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before {
-    animation: xterm-cursor-non-bar-blink 1.2s infinite step-end;
-}
-@keyframes xterm-cursor-non-bar-blink {
-    0% { background-color: #fff; }
-    50% { background-color: transparent; }
+    background-color: #fff;
 }
 
 .terminal .composition-view {

diff --git a/src/xterm.js b/src/xterm.js
index 830b8f846a0a2530c0e1290d22556de3fc772c8e..fb690bd468685e74ac8a5a196c5ea7cdbd7fe1d8 100644 (file)
--- a/src/xterm.js
+++ b/src/xterm.js
@@ -52,6 +52,13 @@ var WRITE_BUFFER_PAUSE_THRESHOLD = 5;
  */
 var WRITE_BATCH_SIZE = 300;
 
+/**
+ * The time between cursor blinks. This is driven by JS rather than a CSS
+ * animation due to a bug in Chromium that causes it to use excessive CPU time.
+ * See https://github.com/Microsoft/vscode/issues/22900
+ */
+var CURSOR_BLINK_INTERVAL = 600;
+
 /**
  * Terminal
  */
@@ -159,6 +166,7 @@ function Terminal(options) {
   this.scrollTop = 0;
   this.scrollBottom = this.rows - 1;
   this.customKeydownHandler = null;
+  this.cursorBlinkInterval = null;
 
   // modes
   this.applicationKeypad = false;
@@ -423,7 +431,7 @@ Terminal.prototype.setOption = function(key, value) {
   this[key] = value;
   this.options[key] = value;
   switch (key) {
-    case 'cursorBlink': this.element.classList.toggle('xterm-cursor-blink', value); break;
+    case 'cursorBlink': this.setCursorBlinking(value); break;
     case 'cursorStyle':
       // Style 'block' applies with no class
       this.element.classList.toggle(`xterm-cursor-style-underline`, value === 'underline');
@@ -433,6 +441,25 @@ Terminal.prototype.setOption = function(key, value) {
   }
 };
 
+Terminal.prototype.restartCursorBlinking = function () {
+  this.setCursorBlinking(this.options.cursorBlink);
+}
+
+Terminal.prototype.setCursorBlinking = function (enabled) {
+  this.element.classList.toggle('xterm-cursor-blink', enabled);
+  this.element.classList.remove('xterm-cursor-blink-on');
+  if (this.cursorBlinkInterval) {
+    clearInterval(this.cursorBlinkInterval);
+    this.cursorBlinkInterval = null;
+  }
+  if (enabled) {
+    var self = this;
+    this.cursorBlinkInterval = setInterval(function () {
+      self.element.classList.toggle('xterm-cursor-blink-on');
+    }, CURSOR_BLINK_INTERVAL);
+  }
+}
+
 /**
  * Binds the desired focus behavior on a given terminal object.
  *
@@ -445,6 +472,7 @@ Terminal.bindFocus = function (term) {
     }
     term.element.classList.add('focus');
     term.showCursor();
+    term.restartCursorBlinking.apply(term);
     Terminal.focus = term;
     term.emit('focus', {terminal: term});
   });
@@ -594,7 +622,7 @@ Terminal.prototype.open = function(parent) {
   this.element.classList.add('terminal');
   this.element.classList.add('xterm');
   this.element.classList.add('xterm-theme-' + this.theme);
-  this.element.classList.toggle('xterm-cursor-blink', this.options.cursorBlink);
+  this.setCursorBlinking(this.options.cursorBlink);
 
   this.element.style.height
   this.element.setAttribute('tabindex', 0);
@@ -1336,6 +1364,8 @@ Terminal.prototype.keyDown = function(ev) {
     return false;
   }
 
+  this.restartCursorBlinking();
+
   if (!this.compositionHelper.keydown.bind(this.compositionHelper)(ev)) {
     if (this.ybase !== this.ydisp) {
       this.scrollToBottom();