hterm: implement blinking text
We need to use CSS animations to pull off blink support since Chrome
currently ignores "text-decoration: blink" attributes.
BUG=chromium:375863
TEST=`echo $'\e[5m'asdf$'\e[0m'foo` renders correctly (asdf blinks)
Change-Id: Ic5304e17ae8eff77cce21c68fdb85b6d9cb57821
Reviewed-on: https://chromium-review.googlesource.com/472106
Reviewed-by: Brandon Gilmore <varz@google.com>
Reviewed-by: Rob Ginda <rginda@chromium.org>
Tested-by: Mike Frysinger <vapier@chromium.org>
diff --git a/hterm/js/hterm_terminal.js b/hterm/js/hterm_terminal.js
index 08e3d42..a506dcd 100644
--- a/hterm/js/hterm_terminal.js
+++ b/hterm/js/hterm_terminal.js
@@ -384,6 +384,10 @@
terminal.alternateScreen_.textAttributes.enableBoldAsBright = !!v;
},
+ 'enable-blink': function(v) {
+ terminal.syncBlinkState();
+ },
+
'enable-clipboard-write': function(v) {
terminal.vt.enableClipboardWrite = !!v;
},
@@ -797,6 +801,15 @@
};
/**
+ * Enable or disable blink based on the enable-blink pref.
+ */
+hterm.Terminal.prototype.syncBlinkState = function() {
+ this.document_.documentElement.style.setProperty(
+ '--hterm-blink-node-duration',
+ this.prefs_.get('enable-blink') ? '0.7s' : '0');
+};
+
+/**
* Return a copy of the current cursor position.
*
* @return {hterm.RowCol} The RowCol object representing the current position.
@@ -1306,6 +1319,20 @@
' display: inline-block;' +
' text-align: center;' +
' width: ' + this.scrollPort_.characterSize.width * 2 + 'px;' +
+ '}' +
+ ':root {' +
+ ' --hterm-blink-node-duration: 0.7s;' +
+ '}' +
+ '@keyframes blink {' +
+ ' from { opacity: 1.0; }' +
+ ' to { opacity: 0.0; }' +
+ '}' +
+ '.blink-node {' +
+ ' animation-name: blink;' +
+ ' animation-duration: var(--hterm-blink-node-duration);' +
+ ' animation-iteration-count: infinite;' +
+ ' animation-timing-function: ease-in-out;' +
+ ' animation-direction: alternate;' +
'}');
this.document_.head.appendChild(style);