terminal: use a completely transparent cursor accent color for xterm.js

Bug: b/236205389
Change-Id: I2ae676d380ade342eb49cf4de1592cb29301d3d5
Reviewed-on: https://chromium-review.googlesource.com/c/apps/libapps/+/3878147
Tested-by: kokoro <noreply+kokoro@google.com>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
diff --git a/terminal/js/terminal_emulator.js b/terminal/js/terminal_emulator.js
index 7a11072..a3e7c31 100644
--- a/terminal/js/terminal_emulator.js
+++ b/terminal/js/terminal_emulator.js
@@ -216,9 +216,13 @@
     this.copyNotice_ = null;
 
     this.term.options.theme = {
+      // The webgl cursor layer also paints the character under the cursor with
+      // this `cursorAccent` color. We use a completely transparent color here
+      // to effectively disable that.
+      cursorAccent: 'rgba(0, 0, 0, 0)',
+      customGlyphs: true,
       selection: 'rgba(174, 203, 250, .6)',
       selectionForeground: 'black',
-      customGlyphs: true,
     };
     this.observePrefs_();
   }
@@ -459,9 +463,7 @@
       },
       'font-family': (v) => this.updateFont_(v),
       'foreground-color': (v) => {
-        // TODO(lxj): setting the cursorAccent to the foreground color mimics
-        // what hterm does, but I think it is better to expose this option.
-        this.updateTheme_({foreground: v, cursorAccent: v});
+        this.updateTheme_({foreground: v});
         setHtermColorCSSVariable('foreground-color', v);
       },
     });