From 8a1f365a7ecdc8b46891f95ce2bb4c1f38fbf8ef Mon Sep 17 00:00:00 2001
From: npezza93 <npezza93@gmail.com>
Date: Sat, 12 Aug 2017 11:28:29 -0400
Subject: [PATCH] Add ability to have a visual bell

---
 demo/main.js            |  3 ++-
 src/Interfaces.ts       |  6 +++---
 src/Terminal.ts         | 23 +++++++++++++++--------
 src/Types.ts            |  8 +++++---
 src/utils/BellStyles.ts |  5 +++++
 src/xterm.css           |  6 +++---
 6 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/BellStyles.ts

diff --git a/demo/main.js b/demo/main.js
index 9098c2f0..1464bcc6 100644
--- a/demo/main.js
+++ b/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) {
diff --git a/src/Interfaces.ts b/src/Interfaces.ts
index e9db3f9c..741ae09b 100644
--- a/src/Interfaces.ts
+++ b/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 {
diff --git a/src/Terminal.ts b/src/Terminal.ts
index 6cda1a6b..5c9b51a2 100644
--- a/src/Terminal.ts
+++ b/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);
+    }
   }
 
   /**
diff --git a/src/Types.ts b/src/Types.ts
index 0de78d52..e32f6295 100644
--- a/src/Types.ts
+++ b/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;
diff --git a/src/utils/BellStyles.ts b/src/utils/BellStyles.ts
new file mode 100644
index 00000000..5534ea54
--- /dev/null
+++ b/src/utils/BellStyles.ts
@@ -0,0 +1,5 @@
+export enum BellStyles {
+  None,
+  Sound,
+  Visual
+}
diff --git a/src/xterm.css b/src/xterm.css
index 89daf9e3..299b1e37 100644
--- a/src/xterm.css
+++ b/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 {