mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
Merge pull request #626 from Tyriar/625_cursor_blink_perf
Use setInterval over animation for cursor blink
This commit is contained in:
+8
-15
@@ -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 {
|
||||
|
||||
+37
-2
@@ -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,29 @@ 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.clearCursorBlinkingInterval();
|
||||
if (enabled) {
|
||||
var self = this;
|
||||
this.cursorBlinkInterval = setInterval(function () {
|
||||
self.element.classList.toggle('xterm-cursor-blink-on');
|
||||
}, CURSOR_BLINK_INTERVAL);
|
||||
}
|
||||
};
|
||||
|
||||
Terminal.prototype.clearCursorBlinkingInterval = function () {
|
||||
this.element.classList.remove('xterm-cursor-blink-on');
|
||||
if (this.cursorBlinkInterval) {
|
||||
clearInterval(this.cursorBlinkInterval);
|
||||
this.cursorBlinkInterval = null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Binds the desired focus behavior on a given terminal object.
|
||||
*
|
||||
@@ -445,6 +476,7 @@ Terminal.bindFocus = function (term) {
|
||||
}
|
||||
term.element.classList.add('focus');
|
||||
term.showCursor();
|
||||
term.restartCursorBlinking.apply(term);
|
||||
Terminal.focus = term;
|
||||
term.emit('focus', {terminal: term});
|
||||
});
|
||||
@@ -469,6 +501,7 @@ Terminal.bindBlur = function (term) {
|
||||
term.send(C0.ESC + '[O');
|
||||
}
|
||||
term.element.classList.remove('focus');
|
||||
term.clearCursorBlinkingInterval.apply(term);
|
||||
Terminal.focus = null;
|
||||
term.emit('blur', {terminal: term});
|
||||
});
|
||||
@@ -594,7 +627,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 +1369,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();
|
||||
|
||||
Reference in New Issue
Block a user