New cursor animation styles implemented

These are 'blink', 'smooth', 'phase', 'expand' and 'solid'.

Resolves #7923

src/vs/editor/browser/standalone/standaloneEditor.ts

@@ -416,6 +416,7 @@ export function createMonacoEditorAPI(): typeof monaco.editor {
 		CursorChangeReason: editorCommon.CursorChangeReason,
 		MouseTargetType: editorCommon.MouseTargetType,
 		TextEditorCursorStyle: editorCommon.TextEditorCursorStyle,
+		TextEditorCursorBlinkingStyle: editorCommon.TextEditorCursorBlinkingStyle,
 		ContentWidgetPositionPreference: ContentWidgetPositionPreference,
 		OverlayWidgetPositionPreference: OverlayWidgetPositionPreference,
 

src/vs/editor/browser/viewParts/viewCursors/viewCursors.css

@@ -46,3 +46,63 @@
 	border-color: #fff;
 	color: #000; /* opposite of #fff */
 }
+
+@keyframes cursor-blink {
+	0%,
+	49% {
+		opacity: 0;
+	}
+	51%,
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-smooth {
+	0%,
+	20% {
+		opacity: 0;
+	}
+	60%,
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-phase {
+	0%,
+	20% {
+		opacity: 0;
+	}
+	90%,
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes cursor-expand {
+	0%,
+	20% {
+		transform: scaleY(0);
+	}
+	80%,
+	100% {
+		transform: scaleY(1);
+	}
+}
+
+.cursor-blink > .cursor {
+	animation: cursor-blink 0.5s ease-in-out 0s infinite alternate;
+}
+
+.cursor-smooth > .cursor {
+	animation: cursor-smooth 0.5s ease-in-out 0s infinite alternate;
+}
+
+.cursor-phase > .cursor {
+	animation: cursor-phase 0.5s ease-in-out 0s infinite alternate;
+}
+
+.cursor-expand > .cursor {
+	animation: cursor-expand 0.5s ease-in-out 0s infinite alternate;
+}
\ No newline at end of file

src/vs/editor/browser/viewParts/viewCursors/viewCursors.ts

@@ -27,6 +27,7 @@ export class ViewCursors extends ViewPart {
 	private _readOnly: boolean;
 	private _cursorBlinking: string;
 	private _cursorStyle: editorCommon.TextEditorCursorStyle;
+	private _cursorBlinkingStyle: editorCommon.TextEditorCursorBlinkingStyle;
 	private _canUseTranslate3d: boolean;
 
 	private _isVisible: boolean;
@@ -34,6 +35,7 @@ export class ViewCursors extends ViewPart {
 	private _domNode: FastDomNode;
 
 	private _blinkTimer: number;
+	private _blinkingEnabled: boolean;
 
 	private _editorHasFocus: boolean;
 
@@ -45,6 +47,7 @@ export class ViewCursors extends ViewPart {
 
 		this._readOnly = this._context.configuration.editor.readOnly;
 		this._cursorBlinking = this._context.configuration.editor.viewInfo.cursorBlinking;
+		this._cursorBlinkingStyle = this._context.configuration.editor.viewInfo.cursorBlinkingStyle;
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		this._canUseTranslate3d = context.configuration.editor.viewInfo.canUseTranslate3d;
 
@@ -57,6 +60,7 @@ export class ViewCursors extends ViewPart {
 		this._domNode.domNode.appendChild(this._primaryCursor.getDomNode());
 
 		this._blinkTimer = -1;
+		this._blinkingEnabled = false;
 
 		this._editorHasFocus = false;
 		this._updateBlinking();
@@ -67,6 +71,7 @@ export class ViewCursors extends ViewPart {
 		if (this._blinkTimer !== -1) {
 			window.clearInterval(this._blinkTimer);
 			this._blinkTimer = -1;
+			this._blinkingEnabled = true;
 		}
 	}
 
@@ -150,6 +155,9 @@ export class ViewCursors extends ViewPart {
 		if (e.viewInfo.cursorBlinking) {
 			this._cursorBlinking = this._context.configuration.editor.viewInfo.cursorBlinking;
 		}
+		if (e.viewInfo.cursorBlinkingStyle) {
+			this._cursorBlinkingStyle = this._context.configuration.editor.viewInfo.cursorBlinkingStyle;
+		}
 		if (e.viewInfo.cursorStyle) {
 			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		}
@@ -159,7 +167,7 @@ export class ViewCursors extends ViewPart {
 
 		this._primaryCursor.onConfigurationChanged(e);
 		this._updateBlinking();
-		if (e.viewInfo.cursorStyle) {
+		if (e.viewInfo.cursorStyle || e.viewInfo.cursorBlinkingStyle) {
 			this._updateDomClassName();
 		}
 		for (var i = 0, len = this._secondaryCursors.length; i < len; i++) {
@@ -210,7 +218,7 @@ export class ViewCursors extends ViewPart {
 
 	private _updateBlinking(): void {
 		if (this._blinkTimer !== -1) {
-			window.clearInterval(this._blinkTimer);
+			window.clearTimeout(this._blinkTimer);
 			this._blinkTimer = -1;
 		}
 
@@ -221,9 +229,13 @@ export class ViewCursors extends ViewPart {
 		} else {
 			this._hide();
 		}
-
+		this._blinkingEnabled = false;
+		this._updateDomClassName();
 		if (renderType === RenderType.Blink) {
-			this._blinkTimer = window.setInterval(() => this._blink(), ViewCursors.BLINK_INTERVAL);
+			this._blinkTimer = window.setTimeout(() => {
+				this._blinkingEnabled = true;
+				this._updateDomClassName();
+			}, ViewCursors.BLINK_INTERVAL);
 		}
 	}
 	// --- end blinking logic
@@ -234,29 +246,41 @@ export class ViewCursors extends ViewPart {
 
 	private _getClassName(): string {
 		let result = ClassNames.VIEW_CURSORS_LAYER;
-		let extraClassName: string;
+		let cursorStyleClassName: string;
 		switch (this._cursorStyle) {
 			case editorCommon.TextEditorCursorStyle.Line:
-				extraClassName = 'cursor-line-style';
+				cursorStyleClassName = 'cursor-line-style';
 				break;
 			case editorCommon.TextEditorCursorStyle.Block:
-				extraClassName = 'cursor-block-style';
+				cursorStyleClassName = 'cursor-block-style';
 				break;
 			case editorCommon.TextEditorCursorStyle.Underline:
-				extraClassName = 'cursor-underline-style';
+				cursorStyleClassName = 'cursor-underline-style';
 				break;
 			default:
-				extraClassName = 'cursor-line-style';
+				cursorStyleClassName = 'cursor-line-style';
 		}
-		return result + ' ' + extraClassName;
-	}
-
-	private _blink(): void {
-		if (this._isVisible) {
-			this._hide();
-		} else {
-			this._show();
+		let cursorBlinkingStyleClassName: string = 'cursor-solid';
+		if (this._blinkingEnabled){
+			switch (this._cursorBlinkingStyle) {
+				case editorCommon.TextEditorCursorBlinkingStyle.Blink:
+					cursorBlinkingStyleClassName = 'cursor-blink';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Smooth:
+					cursorBlinkingStyleClassName = 'cursor-smooth';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Phase:
+					cursorBlinkingStyleClassName = 'cursor-phase';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Expand:
+					cursorBlinkingStyleClassName = 'cursor-expand';
+					break;
+				case editorCommon.TextEditorCursorBlinkingStyle.Solid:
+				default:
+					break;
+			}
 		}
+		return result + ' ' + cursorStyleClassName + ' ' + cursorBlinkingStyleClassName;
 	}
 
 	private _show(): void {

src/vs/editor/common/config/commonEditorConfig.ts

@@ -168,6 +168,7 @@ class InternalEditorOptionsHelper {
 			overviewRulerLanes: toInteger(opts.overviewRulerLanes, 0, 3),
 			cursorBlinking: opts.cursorBlinking,
 			cursorStyle: cursorStyleFromString(opts.cursorStyle),
+			cursorBlinkingStyle: cursorBlinkingStyleFromString(opts.cursorBlinkingStyle),
 			hideCursorInOverviewRuler: toBoolean(opts.hideCursorInOverviewRuler),
 			scrollBeyondLastLine: toBoolean(opts.scrollBeyondLastLine),
 			editorClassName: editorClassName,
@@ -310,6 +311,21 @@ function cursorStyleFromString(cursorStyle:string): editorCommon.TextEditorCurso
 	return editorCommon.TextEditorCursorStyle.Line;
 }
 
+function cursorBlinkingStyleFromString(cursorBlinkingStyle: string): editorCommon.TextEditorCursorBlinkingStyle {
+	if (cursorBlinkingStyle === 'blink') {
+		return editorCommon.TextEditorCursorBlinkingStyle.Blink;
+	} else if (cursorBlinkingStyle === 'smooth') {
+		return editorCommon.TextEditorCursorBlinkingStyle.Smooth;
+	} else if (cursorBlinkingStyle === 'phase') {
+		return editorCommon.TextEditorCursorBlinkingStyle.Phase;
+	} else if (cursorBlinkingStyle === 'expand') {
+		return editorCommon.TextEditorCursorBlinkingStyle.Expand;
+	} else if (cursorBlinkingStyle === 'solid') {
+		return editorCommon.TextEditorCursorBlinkingStyle.Solid;
+	}
+	return editorCommon.TextEditorCursorBlinkingStyle.Blink;
+}
+
 function toIntegerWithDefault(source:any, defaultValue:number): number {
 	if (typeof source === 'undefined') {
 		return defaultValue;
@@ -644,6 +660,12 @@ let editorConfiguration:IConfigurationNode = {
 			'default': DefaultConfig.editor.cursorStyle,
 			'description': nls.localize('cursorStyle', "Controls the cursor style, accepted values are 'block' and 'line'")
 		},
+		'editor.cursorBlinkingStyle' : {
+			'type': 'string',
+			'enum': ['blink', 'smooth', 'phase', 'expand', 'solid'],
+			'default': DefaultConfig.editor.cursorBlinkingStyle,
+			'description': nls.localize('cursorBlinkingStyle', "Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'")
+		},
 		'editor.fontLigatures' : {
 			'type': 'boolean',
 			'default': DefaultConfig.editor.fontLigatures,

src/vs/editor/common/config/defaultConfig.ts

@@ -59,6 +59,7 @@ class ConfigClass implements IConfiguration {
 			overviewRulerLanes: 2,
 			cursorBlinking: 'blink',
 			cursorStyle: 'line',
+			cursorBlinkingStyle: 'blink',
 			fontLigatures: false,
 			disableTranslate3d: false,
 			hideCursorInOverviewRuler: false,

src/vs/editor/common/editorCommon.ts

@@ -267,6 +267,11 @@ export interface IEditorOptions {
 	 * Defaults to 'line'.
 	 */
 	cursorStyle?:string;
+	/**
+	 * Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'.
+	 * Defaults to 'blink'.
+	 */
+	cursorBlinkingStyle?:string;
 	/**
 	 * Enable font ligatures.
 	 * Defaults to false.
@@ -606,6 +611,7 @@ export class InternalEditorViewOptions {
 	overviewRulerLanes:number;
 	cursorBlinking:string;
 	cursorStyle:TextEditorCursorStyle;
+	cursorBlinkingStyle:TextEditorCursorBlinkingStyle;
 	hideCursorInOverviewRuler:boolean;
 	scrollBeyondLastLine:boolean;
 	editorClassName: string;
@@ -631,6 +637,7 @@ export class InternalEditorViewOptions {
 		overviewRulerLanes:number;
 		cursorBlinking:string;
 		cursorStyle:TextEditorCursorStyle;
+		cursorBlinkingStyle: TextEditorCursorBlinkingStyle;
 		hideCursorInOverviewRuler:boolean;
 		scrollBeyondLastLine:boolean;
 		editorClassName: string;
@@ -652,6 +659,7 @@ export class InternalEditorViewOptions {
 		this.overviewRulerLanes = source.overviewRulerLanes|0;
 		this.cursorBlinking = String(source.cursorBlinking);
 		this.cursorStyle = source.cursorStyle|0;
+		this.cursorBlinkingStyle = source.cursorBlinkingStyle|0;
 		this.hideCursorInOverviewRuler = Boolean(source.hideCursorInOverviewRuler);
 		this.scrollBeyondLastLine = Boolean(source.scrollBeyondLastLine);
 		this.editorClassName = String(source.editorClassName);
@@ -707,6 +715,7 @@ export class InternalEditorViewOptions {
 			&& this.overviewRulerLanes === other.overviewRulerLanes
 			&& this.cursorBlinking === other.cursorBlinking
 			&& this.cursorStyle === other.cursorStyle
+			&& this.cursorBlinkingStyle === other.cursorBlinkingStyle
 			&& this.hideCursorInOverviewRuler === other.hideCursorInOverviewRuler
 			&& this.scrollBeyondLastLine === other.scrollBeyondLastLine
 			&& this.editorClassName === other.editorClassName
@@ -735,6 +744,7 @@ export class InternalEditorViewOptions {
 			overviewRulerLanes: this.overviewRulerLanes !== newOpts.overviewRulerLanes,
 			cursorBlinking: this.cursorBlinking !== newOpts.cursorBlinking,
 			cursorStyle: this.cursorStyle !== newOpts.cursorStyle,
+			cursorBlinkingStyle: this.cursorBlinkingStyle !== newOpts.cursorBlinkingStyle,
 			hideCursorInOverviewRuler: this.hideCursorInOverviewRuler !== newOpts.hideCursorInOverviewRuler,
 			scrollBeyondLastLine: this.scrollBeyondLastLine !== newOpts.scrollBeyondLastLine,
 			editorClassName: this.editorClassName !== newOpts.editorClassName,
@@ -767,6 +777,7 @@ export interface IViewConfigurationChangedEvent {
 	overviewRulerLanes: boolean;
 	cursorBlinking: boolean;
 	cursorStyle: boolean;
+	cursorBlinkingStyle: boolean;
 	hideCursorInOverviewRuler: boolean;
 	scrollBeyondLastLine: boolean;
 	editorClassName:  boolean;
@@ -4232,6 +4243,32 @@ export enum TextEditorCursorStyle {
 	Underline = 3
 }
 
+/**
+ * The kind of animation in which the editor's cursor should be rendered.
+ */
+export enum TextEditorCursorBlinkingStyle {
+	/**
+	 * Blinking
+	 */
+	Blink = 1,
+	/**
+	 * Blinking with smooth fading
+	 */
+	Smooth = 2,
+	/**
+	 * Blinking with prolonged filled state and smooth fading
+	 */
+	Phase = 3,
+	/**
+	 * Expand collapse animation on the y axis
+	 */
+	Expand = 4,
+	/**
+	 * No-Blinking
+	 */
+	Solid = 5
+}
+
 /**
  * @internal
  */

src/vs/monaco.d.ts

@@ -1122,6 +1122,11 @@ declare module monaco.editor {
          * Defaults to 'line'.
          */
         cursorStyle?: string;
+        /**
+         * Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'.
+         * Defaults to 'blink'.
+         */
+        cursorBlinkingStyle?: string;
         /**
          * Enable font ligatures.
          * Defaults to false.
@@ -1358,6 +1363,7 @@ declare module monaco.editor {
         overviewRulerLanes: number;
         cursorBlinking: string;
         cursorStyle: TextEditorCursorStyle;
+        cursorBlinkingStyle: TextEditorCursorBlinkingStyle;
         hideCursorInOverviewRuler: boolean;
         scrollBeyondLastLine: boolean;
         editorClassName: string;
@@ -1381,6 +1387,7 @@ declare module monaco.editor {
         overviewRulerLanes: boolean;
         cursorBlinking: boolean;
         cursorStyle: boolean;
+        cursorBlinkingStyle: boolean;
         hideCursorInOverviewRuler: boolean;
         scrollBeyondLastLine: boolean;
         editorClassName: boolean;
@@ -3294,6 +3301,32 @@ declare module monaco.editor {
         Underline = 3,
     }
 
+    /**
+     * The kind of animation in which the editor's cursor should be rendered.
+     */
+    export enum TextEditorCursorBlinkingStyle {
+        /**
+         * Blinking
+         */
+        Blink = 1,
+        /**
+         * Blinking with smooth fading
+         */
+        Smooth = 2,
+        /**
+         * Blinking with prolonged filled state and smooth fading
+         */
+        Phase = 3,
+        /**
+         * Expand collapse animation on the y axis
+         */
+        Expand = 4,
+        /**
+         * No-Blinking
+         */
+        Solid = 5,
+    }
+
     /**
      * A view zone is a full horizontal rectangle that 'pushes' text down.
      * The editor reserves space for view zones when rendering.