Optimize reading done in viewCursor

src/vs/base/browser/styleMutator.ts

@@ -194,6 +194,10 @@ export abstract class FastDomNode {
 		this._lineNumber = lineNumber;
 		this._domNode.setAttribute('lineNumber', this._lineNumber);
 	}
+
+	public setAttribute(name: string, value: string): void {
+		this._domNode.setAttribute(name, value);
+	}
 }
 
 class WebKitFastDomNode extends FastDomNode {

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

@@ -5,66 +5,82 @@
 'use strict';
 
 import { FastDomNode, createFastDomNode } from 'vs/base/browser/styleMutator';
+import { Position } from 'vs/editor/common/core/position';
+import { Range } from 'vs/editor/common/core/range';
 import { IConfigurationChangedEvent, IPosition, TextEditorCursorStyle } from 'vs/editor/common/editorCommon';
 import { Configuration } from 'vs/editor/browser/config/configuration';
 import { ViewContext } from 'vs/editor/common/view/viewContext';
 import { IRenderingContext, IRestrictedRenderingContext } from 'vs/editor/common/view/renderingContext';
 
 export interface IViewCursorRenderData {
-	position: IPosition;
+	position: Position;
 	contentTop: number;
 	contentLeft: number;
 	width: number;
 	height: number;
 }
 
+export class ViewCursorRenderData {
+	public readonly top: number;
+	public readonly left: number;
+	public readonly width: number;
+	public readonly textContent: string;
+
+	constructor(top: number, left: number, width: number, textContent: string) {
+		this.top = top;
+		this.left = left;
+		this.width = width;
+		this.textContent = textContent;
+	}
+}
+
 export class ViewCursor {
-	private _context: ViewContext;
-	private _position: IPosition;
-	private _domNode: FastDomNode;
-	private _positionTop: number;
-	private _positionLeft: number;
-	private _isInEditableRange: boolean;
-	private _isVisible: boolean;
-	private _isInViewport: boolean;
+	private readonly _context: ViewContext;
+	private readonly _isSecondary: boolean;
+	private readonly _domNode: FastDomNode;
+
 	private _cursorStyle: TextEditorCursorStyle;
-	private _cursorStyleChanged: boolean;
-	private _lastRenderedContent: string;
 	private _lineHeight: number;
-	private _characterWidth: number;
+	private _typicalHalfwidthCharacterWidth: number;
+
+	private _isVisible: boolean;
+
+	private _position: Position;
+	private _isInEditableRange: boolean;
+
+	private _lastRenderedContent: string;
+	private _renderData: ViewCursorRenderData;
 
 	constructor(context: ViewContext, isSecondary: boolean) {
 		this._context = context;
+		this._isSecondary = isSecondary;
+
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
-		this._cursorStyleChanged = false;
 		this._lineHeight = this._context.configuration.editor.lineHeight;
-		this._lastRenderedContent = '';
-
-		this._isInEditableRange = true;
+		this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
 
-		this._domNode = this._createCursorDomNode(isSecondary);
-		Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
 		this._isVisible = true;
-		this._domNode.setDisplay('none');
-		this.updatePosition({
-			lineNumber: 1,
-			column: 1
-		});
-	}
 
-	private _createCursorDomNode(isSecondary: boolean): FastDomNode {
-		let domNode = createFastDomNode(document.createElement('div'));
-		if (isSecondary) {
-			domNode.setClassName('cursor secondary');
+		// Create the dom node
+		this._domNode = createFastDomNode(document.createElement('div'));
+		if (this._isSecondary) {
+			this._domNode.setClassName('cursor secondary');
 		} else {
-			domNode.setClassName('cursor');
+			this._domNode.setClassName('cursor');
 		}
-		domNode.setHeight(this._lineHeight);
-		domNode.setTop(0);
-		domNode.setLeft(0);
-		domNode.domNode.setAttribute('role', 'presentation');
-		domNode.domNode.setAttribute('aria-hidden', 'true');
-		return domNode;
+		this._domNode.setHeight(this._lineHeight);
+		this._domNode.setTop(0);
+		this._domNode.setLeft(0);
+		this._domNode.setAttribute('role', 'presentation');
+		this._domNode.setAttribute('aria-hidden', 'true');
+		Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
+		this._domNode.setDisplay('none');
+
+		this.updatePosition(new Position(1, 1));
+		this._isInEditableRange = true;
+
+		this._lastRenderedContent = '';
+		this._renderData = null;
 	}
 
 	public getDomNode(): HTMLElement {
@@ -75,10 +91,6 @@ export class ViewCursor {
 		return this._isInEditableRange;
 	}
 
-	public getPositionTop(): number {
-		return this._positionTop;
-	}
-
 	public getPosition(): IPosition {
 		return this._position;
 	}
@@ -98,15 +110,12 @@ export class ViewCursor {
 	}
 
 	public onModelFlushed(): boolean {
-		this.updatePosition({
-			lineNumber: 1,
-			column: 1
-		});
+		this.updatePosition(new Position(1, 1));
 		this._isInEditableRange = true;
 		return true;
 	}
 
-	public onCursorPositionChanged(position: IPosition, isInEditableRange: boolean): boolean {
+	public onCursorPositionChanged(position: Position, isInEditableRange: boolean): boolean {
 		this.updatePosition(position);
 		this._isInEditableRange = isInEditableRange;
 		return true;
@@ -118,93 +127,80 @@ export class ViewCursor {
 		}
 		if (e.viewInfo.cursorStyle) {
 			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
-			this._cursorStyleChanged = true;
 		}
 		if (e.fontInfo) {
 			Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
+			this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
 		}
 		return true;
 	}
 
-	public prepareRender(ctx: IRenderingContext): void {
-		let visibleRange = ctx.visibleRangeForPosition(this._position);
-		if (visibleRange) {
-			this._positionTop = visibleRange.top;
-			this._positionLeft = visibleRange.left;
-			this._isInViewport = true;
-
-			if (this._cursorStyle !== TextEditorCursorStyle.Line) {
-				let visibleRangeForCharacter = ctx.linesVisibleRangesForRange({
-					startLineNumber: this._position.lineNumber,
-					startColumn: this._position.column,
-					endLineNumber: this._position.lineNumber,
-					endColumn: this._position.column + 1
-				}, false);
-
-				if (visibleRangeForCharacter.length > 0 && visibleRangeForCharacter[0].ranges.length > 0) {
-					this._characterWidth = visibleRangeForCharacter[0].ranges[0].width;
-				}
+	private _prepareRender(ctx: IRenderingContext): ViewCursorRenderData {
+		if (this._cursorStyle === TextEditorCursorStyle.Line) {
+			let visibleRange = ctx.visibleRangeForPosition(this._position);
+			if (!visibleRange) {
+				// Outside viewport
+				return null;
 			}
-		} else {
-			this._isInViewport = false;
+			let width = this._isSecondary ? 1 : 2;
+			return new ViewCursorRenderData(visibleRange.top, visibleRange.left, width, '');
 		}
-	}
 
-	private _getRenderedContent(): string {
+		let visibleRangeForCharacter = ctx.linesVisibleRangesForRange(new Range(this._position.lineNumber, this._position.column, this._position.lineNumber, this._position.column + 1), false);
+
+		if (!visibleRangeForCharacter || visibleRangeForCharacter.length === 0 || visibleRangeForCharacter[0].ranges.length === 0) {
+			// Outside viewport
+			return null;
+		}
+
+		let range = visibleRangeForCharacter[0].ranges[0];
+		let top = ctx.getViewportVerticalOffsetForLineNumber(this._position.lineNumber);
+		let width = range.width < 1 ? this._typicalHalfwidthCharacterWidth : range.width;
+
+		let textContent = '';
 		if (this._cursorStyle === TextEditorCursorStyle.Block) {
 			let lineContent = this._context.model.getLineContent(this._position.lineNumber);
-			return lineContent.charAt(this._position.column - 1);
+			textContent = lineContent.charAt(this._position.column - 1);
 		}
-		return '';
+
+		return new ViewCursorRenderData(top, range.left, width, textContent);
 	}
 
-	public render(ctx: IRestrictedRenderingContext): IViewCursorRenderData {
-		if (this._isInViewport) {
-			let top = this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta;
-			let renderContent = this._getRenderedContent();
-			if (this._lastRenderedContent !== renderContent) {
-				this._lastRenderedContent = renderContent;
-				this._domNode.domNode.textContent = this._lastRenderedContent;
-			}
+	public prepareRender(ctx: IRenderingContext): void {
+		this._renderData = this._prepareRender(ctx);
+	}
 
-			this._domNode.setDisplay('block');
-			this._domNode.setLeft(this._positionLeft);
-			this._domNode.setTop(top);
-			this._domNode.setLineHeight(this._lineHeight);
-			this._domNode.setHeight(this._lineHeight);
-
-			if (this._cursorStyle !== TextEditorCursorStyle.Line) {
-				let desiredWidth = '1ch';
-
-				if (this._characterWidth > 0) {
-					desiredWidth = `${this._characterWidth}px`;
-				}
-
-				if (this._domNode.domNode.style.width !== desiredWidth) {
-					this._domNode.domNode.style.width = desiredWidth;
-				}
-			} else if (this._cursorStyleChanged) {
-				this._domNode.domNode.style.width = '2px';
-				this._cursorStyleChanged = false;
-			}
+	public render(ctx: IRestrictedRenderingContext): IViewCursorRenderData {
+		if (!this._renderData) {
+			this._domNode.setDisplay('none');
+			return null;
+		}
 
-			return {
-				position: this._position,
-				contentTop: top,
-				contentLeft: this._positionLeft,
-				height: this._lineHeight,
-				width: 2
-			};
+		if (this._lastRenderedContent !== this._renderData.textContent) {
+			this._lastRenderedContent = this._renderData.textContent;
+			this._domNode.domNode.textContent = this._lastRenderedContent;
 		}
 
-		this._domNode.setDisplay('none');
-		return null;
+		let top = this._renderData.top + ctx.viewportTop - ctx.bigNumbersDelta;
+		this._domNode.setDisplay('block');
+		this._domNode.setTop(top);
+		this._domNode.setLeft(this._renderData.left);
+		this._domNode.setWidth(this._renderData.width);
+		this._domNode.setLineHeight(this._lineHeight);
+		this._domNode.setHeight(this._lineHeight);
+
+		return {
+			position: this._position,
+			contentTop: top,
+			contentLeft: this._renderData.left,
+			height: this._lineHeight,
+			width: 2
+		};
 	}
 
-	private updatePosition(newPosition: IPosition): void {
+	private updatePosition(newPosition: Position): void {
 		this._position = newPosition;
 		this._domNode.domNode.setAttribute('lineNumber', this._position.lineNumber.toString());
 		this._domNode.domNode.setAttribute('column', this._position.column.toString());
-		this._isInViewport = false;
 	}
 }

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

@@ -15,16 +15,8 @@
 	opacity: 0.6;
 }
 
-/* -- line-style -- */
-.monaco-editor .cursors-layer.cursor-line-style > .cursor { width: 2px; }
-.monaco-editor .cursors-layer.cursor-line-style > .cursor.secondary { width: 1px; }
-
-/* -- block-style -- */
-.monaco-editor .cursors-layer.cursor-block-style > .cursor { width: 1ch; }
-
 /* -- under-line-style -- */
 .monaco-editor .cursors-layer.cursor-underline-style > .cursor {
-	width: 1ch;
 	border-bottom-width: 2px;
 	border-bottom-style: solid;
 	background: transparent !important;