Add ability to have a visual bell

demo/main.js

@@ -70,7 +70,8 @@ function createTerminal() {
   term = new Terminal({
     cursorBlink: optionElements.cursorBlink.checked,
     scrollback: parseInt(optionElements.scrollback.value, 10),
-    tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10)
+    tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10),
+    bellStyles: [1, 2]
   });
   term.on('resize', function (size) {
     if (!pid) {

src/Interfaces.ts

@@ -3,7 +3,7 @@
  */
 
 import { ILinkMatcherOptions } from './Interfaces';
-import { LinkMatcherHandler, LinkMatcherValidationCallback, Charset, LineData } from './Types';
+import { LinkMatcherHandler, LinkMatcherValidationCallback, Charset, LineData, BellStylesEnum } from './Types';
 
 export interface IBrowser {
   isNode: boolean;
@@ -113,6 +113,8 @@ export interface IInputHandlingTerminal extends IEventEmitter {
 }
 
 export interface ITerminalOptions {
+  bellSound?: string;
+  bellStyles?: BellStylesEnum[];
   cancelEvents?: boolean;
   colors?: string[];
   cols?: number;
@@ -123,14 +125,12 @@ export interface ITerminalOptions {
   disableStdin?: boolean;
   geometry?: [number, number];
   handler?: (data: string) => void;
-  popOnBell?: boolean;
   rows?: number;
   screenKeys?: boolean;
   scrollback?: number;
   tabStopWidth?: number;
   termName?: string;
   useFlowControl?: boolean;
-  visualBell?: boolean;
 }
 
 export interface IBuffer {

src/Terminal.ts

@@ -39,6 +39,8 @@ import { CHARSETS } from './Charsets';
 import { getRawByteCoords } from './utils/Mouse';
 import { CustomKeyEventHandler, Charset, LinkMatcherHandler, LinkMatcherValidationCallback, CharData, LineData, Option, StringOption, BooleanOption, StringArrayOption, NumberOption, GeometryOption, HandlerOption } from './Types';
 import { ITerminal, IBrowser, ITerminalOptions, IInputHandlingTerminal, ILinkMatcherOptions, IViewport, ICompositionHelper } from './Interfaces';
+import { BellSound } from './utils/Sounds';
+import { BellStyles } from './utils/BellStyles';
 
 // Declare for RequireJS in loadAddon
 declare var define: any;
@@ -147,8 +149,8 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   geometry: [80, 24],
   cursorBlink: false,
   cursorStyle: 'block',
-  visualBell: false,
-  popOnBell: false,
+  bellSound: BellSound,
+  bellStyles: [BellStyles.Sound],
   scrollback: 1000,
   screenKeys: false,
   debug: false,
@@ -1882,12 +1884,17 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
    * Note: We could do sweet things with webaudio here
    */
   public bell(): void {
-    if (!this.options.visualBell) return;
-    this.element.style.borderColor = 'white';
-    setTimeout(() => {
-      this.element.style.borderColor = '';
-    }, 10);
-    if (this.options.popOnBell) this.focus();
+    this.emit('bell');
+    if (this.options.bellStyles.indexOf(BellStyles.Sound) > -1) {
+      this.bellAudioElement.play();
+    }
+    if (this.options.bellStyles.indexOf(BellStyles.Visual) > -1) {
+      var cursor = this.element.querySelector('.terminal-cursor') as HTMLElement;
+      cursor.style.backgroundColor = "#fff";
+      setTimeout(function() {
+        cursor.style.backgroundColor = "#e6e6e6";
+      }, 200);
+    }
   }
 
   /**

src/Types.ts

@@ -2,6 +2,8 @@
  * @license MIT
  */
 
+import { BellStyles } from './utils/BellStyles';
+
 export type LinkMatcher = {
   id: number,
   regex: RegExp,
@@ -26,10 +28,8 @@ export type BooleanOption =
     'cursorBlink' |
     'debug' |
     'disableStdin' |
-    'popOnBell' |
     'screenKeys' |
-    'useFlowControl' |
-    'visualBell';
+    'useFlowControl';
 export type StringOption =
     'cursorStyle' |
     'termName';
@@ -41,3 +41,5 @@ export type NumberOption =
     'scrollback';
 export type GeometryOption = 'geometry';
 export type HandlerOption = 'handler';
+
+export type BellStylesEnum = BellStyles;

src/utils/BellStyles.ts

@@ -0,0 +1,5 @@
+export enum BellStyles {
+  None,
+  Sound,
+  Visual
+}

src/xterm.css

@@ -94,12 +94,12 @@
 }
 
 .terminal:not(.focus) .terminal-cursor {
-    outline: 1px solid #fff;
+    outline: 1px solid #e6e6e6;
     outline-offset: -1px;
 }
 
 .terminal.xterm-cursor-style-block.focus:not(.xterm-cursor-blink-on) .terminal-cursor {
-    background-color: #fff;
+    background-color: #e6e6e6;
     color: #000;
 }
 
@@ -107,7 +107,7 @@
 .terminal.focus.xterm-cursor-style-underline:not(.xterm-cursor-blink-on) .terminal-cursor::before {
     content: '';
     position: absolute;
-    background-color: #fff;
+    background-color: ##e6e6e6;
 }
 
 .terminal.focus.xterm-cursor-style-bar:not(.xterm-cursor-blink-on) .terminal-cursor::before {