Merge VS Code 1.21 source code (#1067)

* Initial VS Code 1.21 file copy with patches

* A few more merges

* Post npm install

* Fix batch of build breaks

* Fix more build breaks

* Fix more build errors

* Fix more build breaks

* Runtime fixes 1

* Get connection dialog working with some todos

* Fix a few packaging issues

* Copy several node_modules to package build to fix loader issues

* Fix breaks from master

* A few more fixes

* Make tests pass

* First pass of license header updates

* Second pass of license header updates

* Fix restore dialog issues

* Remove add additional themes menu items

* fix select box issues where the list doesn't show up

* formatting

* Fix editor dispose issue

* Copy over node modules to correct location on all platforms

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

@@ -18,7 +18,6 @@ export class CurrentLineHighlightOverlay extends DynamicViewOverlay {
 	private _lineHeight: number;
 	private _renderLineHighlight: 'none' | 'gutter' | 'line' | 'all';
 	private _selectionIsEmpty: boolean;
-	private _primaryCursorIsInEditableRange: boolean;
 	private _primaryCursorLineNumber: number;
 	private _scrollWidth: number;
 	private _contentWidth: number;
@@ -30,7 +29,6 @@ export class CurrentLineHighlightOverlay extends DynamicViewOverlay {
 		this._renderLineHighlight = this._context.configuration.editor.viewInfo.renderLineHighlight;
 
 		this._selectionIsEmpty = true;
-		this._primaryCursorIsInEditableRange = true;
 		this._primaryCursorLineNumber = 1;
 		this._scrollWidth = 0;
 		this._contentWidth = this._context.configuration.editor.layoutInfo.contentWidth;
@@ -61,11 +59,6 @@ export class CurrentLineHighlightOverlay extends DynamicViewOverlay {
 	public onCursorStateChanged(e: viewEvents.ViewCursorStateChangedEvent): boolean {
 		let hasChanged = false;
 
-		if (this._primaryCursorIsInEditableRange !== e.isInEditableRange) {
-			this._primaryCursorIsInEditableRange = e.isInEditableRange;
-			hasChanged = true;
-		}
-
 		const primaryCursorLineNumber = e.selections[0].positionLineNumber;
 		if (this._primaryCursorLineNumber !== primaryCursorLineNumber) {
 			this._primaryCursorLineNumber = primaryCursorLineNumber;
@@ -127,14 +120,12 @@ export class CurrentLineHighlightOverlay extends DynamicViewOverlay {
 		return (
 			(this._renderLineHighlight === 'line' || this._renderLineHighlight === 'all')
 			&& this._selectionIsEmpty
-			&& this._primaryCursorIsInEditableRange
 		);
 	}
 
 	private _willRenderMarginCurrentLine(): boolean {
 		return (
 			(this._renderLineHighlight === 'gutter' || this._renderLineHighlight === 'all')
-			&& this._primaryCursorIsInEditableRange
 		);
 	}
 }

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

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-editor .margin-view-overlays .current-line-margin {
+.monaco-editor .margin-view-overlays .current-line {
 	display: block;
 	position: absolute;
 	left: 0;
@@ -11,6 +11,6 @@
 	box-sizing: border-box;
 }
 
-.monaco-editor .margin-view-overlays .current-line-margin.current-line-margin-both {
+.monaco-editor .margin-view-overlays .current-line.current-line-margin.current-line-margin-both {
 	border-right: 0;
 }

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

@@ -18,7 +18,6 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 	private _lineHeight: number;
 	private _renderLineHighlight: 'none' | 'gutter' | 'line' | 'all';
 	private _selectionIsEmpty: boolean;
-	private _primaryCursorIsInEditableRange: boolean;
 	private _primaryCursorLineNumber: number;
 	private _contentLeft: number;
 
@@ -29,7 +28,6 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 		this._renderLineHighlight = this._context.configuration.editor.viewInfo.renderLineHighlight;
 
 		this._selectionIsEmpty = true;
-		this._primaryCursorIsInEditableRange = true;
 		this._primaryCursorLineNumber = 1;
 		this._contentLeft = this._context.configuration.editor.layoutInfo.contentLeft;
 
@@ -59,11 +57,6 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 	public onCursorStateChanged(e: viewEvents.ViewCursorStateChangedEvent): boolean {
 		let hasChanged = false;
 
-		if (this._primaryCursorIsInEditableRange !== e.isInEditableRange) {
-			this._primaryCursorIsInEditableRange = e.isInEditableRange;
-			hasChanged = true;
-		}
-
 		const primaryCursorLineNumber = e.selections[0].positionLineNumber;
 		if (this._primaryCursorLineNumber !== primaryCursorLineNumber) {
 			this._primaryCursorLineNumber = primaryCursorLineNumber;
@@ -98,21 +91,21 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 
 	public render(startLineNumber: number, lineNumber: number): string {
 		if (lineNumber === this._primaryCursorLineNumber) {
+			let className = 'current-line';
 			if (this._shouldShowCurrentLine()) {
 				const paintedInContent = this._willRenderContentCurrentLine();
-				const className = 'current-line-margin' + (paintedInContent ? ' current-line-margin-both' : '');
-				return (
-					'<div class="'
-					+ className
-					+ '" style="width:'
-					+ String(this._contentLeft)
-					+ 'px; height:'
-					+ String(this._lineHeight)
-					+ 'px;"></div>'
-				);
-			} else {
-				return '';
+				className = 'current-line current-line-margin' + (paintedInContent ? ' current-line-margin-both' : '');
 			}
+
+			return (
+				'<div class="'
+				+ className
+				+ '" style="width:'
+				+ String(this._contentLeft)
+				+ 'px; height:'
+				+ String(this._lineHeight)
+				+ 'px;"></div>'
+			);
 		}
 		return '';
 	}
@@ -120,7 +113,6 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 	private _shouldShowCurrentLine(): boolean {
 		return (
 			(this._renderLineHighlight === 'gutter' || this._renderLineHighlight === 'all')
-			&& this._primaryCursorIsInEditableRange
 		);
 	}
 
@@ -128,7 +120,6 @@ export class CurrentLineMarginHighlightOverlay extends DynamicViewOverlay {
 		return (
 			(this._renderLineHighlight === 'line' || this._renderLineHighlight === 'all')
 			&& this._selectionIsEmpty
-			&& this._primaryCursorIsInEditableRange
 		);
 	}
 }

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

@@ -202,7 +202,7 @@ export class DecorationsOverlay extends DynamicViewOverlay {
 		}
 		let lineIndex = lineNumber - startLineNumber;
 		if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
-			throw new Error('Unexpected render request');
+			return '';
 		}
 		return this._renderResult[lineIndex];
 	}

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

@@ -99,7 +99,13 @@ export class EditorScrollbar extends ViewPart {
 		const layoutInfo = this._context.configuration.editor.layoutInfo;
 
 		this.scrollbarDomNode.setLeft(layoutInfo.contentLeft);
-		this.scrollbarDomNode.setWidth(layoutInfo.contentWidth + layoutInfo.minimapWidth);
+
+		const side = this._context.configuration.editor.viewInfo.minimap.side;
+		if (side === 'right') {
+			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth + layoutInfo.minimapWidth);
+		} else {
+			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth);
+		}
 		this.scrollbarDomNode.setHeight(layoutInfo.contentHeight);
 	}
 

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

@@ -193,8 +193,8 @@ export class GlyphMarginOverlay extends DedupOverlay {
 		}
 		let lineIndex = lineNumber - startLineNumber;
 		if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
-			throw new Error('Unexpected render request');
+			return '';
 		}
 		return this._renderResult[lineIndex];
 	}
-}
+}

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

@@ -122,7 +122,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
 		}
 		let lineIndex = lineNumber - startLineNumber;
 		if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
-			throw new Error('Unexpected render request');
+			return '';
 		}
 		return this._renderResult[lineIndex];
 	}

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

@@ -6,7 +6,7 @@
 'use strict';
 
 import 'vs/css!./lineNumbers';
-import { editorLineNumbers } from 'vs/editor/common/view/editorColorRegistry';
+import { editorLineNumbers, editorActiveLineNumber } from 'vs/editor/common/view/editorColorRegistry';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import * as platform from 'vs/base/common/platform';
 import { DynamicViewOverlay } from 'vs/editor/browser/view/dynamicViewOverlay';
@@ -162,7 +162,7 @@ export class LineNumbersOverlay extends DynamicViewOverlay {
 		}
 		let lineIndex = lineNumber - startLineNumber;
 		if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
-			throw new Error('Unexpected render request');
+			return '';
 		}
 		return this._renderResult[lineIndex];
 	}
@@ -175,4 +175,8 @@ registerThemingParticipant((theme, collector) => {
 	if (lineNumbers) {
 		collector.addRule(`.monaco-editor .line-numbers { color: ${lineNumbers}; }`);
 	}
+	const activeLineNumber = theme.getColor(editorActiveLineNumber);
+	if (activeLineNumber) {
+		collector.addRule(`.monaco-editor .current-line ~ .line-numbers { color: ${activeLineNumber}; }`);
+	}
 });

src/vs/editor/browser/viewParts/lines/viewLine.ts

@@ -228,9 +228,12 @@ export class ViewLine implements IVisibleLine {
 				isRegularASCII = strings.isBasicASCII(lineData.content);
 			}
 
-			if (isRegularASCII && lineData.content.length < 1000) {
+			if (isRegularASCII && lineData.content.length < 1000 && renderLineInput.lineTokens.getCount() < 100) {
 				// Browser rounding errors have been observed in Chrome and IE, so using the fast
 				// view line only for short lines. Please test before removing the length check...
+				// ---
+				// Another rounding error has been observed on Linux in VSCode, where <span> width
+				// rounding errors add up to an observable large number...
 				renderedViewLine = new FastRenderedViewLine(
 					this._renderedViewLine ? this._renderedViewLine.domNode : null,
 					renderLineInput,
@@ -278,8 +281,27 @@ export class ViewLine implements IVisibleLine {
 	}
 
 	public getVisibleRangesForRange(startColumn: number, endColumn: number, context: DomReadingContext): HorizontalRange[] {
+		startColumn = startColumn | 0; // @perf
+		endColumn = endColumn | 0; // @perf
+
 		startColumn = Math.min(this._renderedViewLine.input.lineContent.length + 1, Math.max(1, startColumn));
 		endColumn = Math.min(this._renderedViewLine.input.lineContent.length + 1, Math.max(1, endColumn));
+
+		const stopRenderingLineAfter = this._renderedViewLine.input.stopRenderingLineAfter | 0; // @perf
+
+		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter && endColumn > stopRenderingLineAfter) {
+			// This range is obviously not visible
+			return null;
+		}
+
+		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter) {
+			startColumn = stopRenderingLineAfter;
+		}
+
+		if (stopRenderingLineAfter !== -1 && endColumn > stopRenderingLineAfter) {
+			endColumn = stopRenderingLineAfter;
+		}
+
 		return this._renderedViewLine.getVisibleRangesForRange(startColumn, endColumn, context);
 	}
 
@@ -325,23 +347,6 @@ class FastRenderedViewLine implements IRenderedViewLine {
 	}
 
 	public getVisibleRangesForRange(startColumn: number, endColumn: number, context: DomReadingContext): HorizontalRange[] {
-		startColumn = startColumn | 0; // @perf
-		endColumn = endColumn | 0; // @perf
-		const stopRenderingLineAfter = this.input.stopRenderingLineAfter | 0; // @perf
-
-		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter && endColumn > stopRenderingLineAfter) {
-			// This range is obviously not visible
-			return null;
-		}
-
-		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter) {
-			startColumn = stopRenderingLineAfter;
-		}
-
-		if (stopRenderingLineAfter !== -1 && endColumn > stopRenderingLineAfter) {
-			endColumn = stopRenderingLineAfter;
-		}
-
 		const startPosition = this._getCharPosition(startColumn);
 		const endPosition = this._getCharPosition(endColumn);
 		return [new HorizontalRange(startPosition, endPosition - startPosition)];
@@ -432,23 +437,6 @@ class RenderedViewLine implements IRenderedViewLine {
 	 * Visible ranges for a model range
 	 */
 	public getVisibleRangesForRange(startColumn: number, endColumn: number, context: DomReadingContext): HorizontalRange[] {
-		startColumn = startColumn | 0; // @perf
-		endColumn = endColumn | 0; // @perf
-		const stopRenderingLineAfter = this.input.stopRenderingLineAfter | 0; // @perf
-
-		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter && endColumn > stopRenderingLineAfter) {
-			// This range is obviously not visible
-			return null;
-		}
-
-		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter) {
-			startColumn = stopRenderingLineAfter;
-		}
-
-		if (stopRenderingLineAfter !== -1 && endColumn > stopRenderingLineAfter) {
-			endColumn = stopRenderingLineAfter;
-		}
-
 		if (this._pixelOffsetCache !== null) {
 			// the text is LTR
 			let startOffset = this._readPixelOffset(startColumn, context);

src/vs/editor/browser/viewParts/lines/viewLines.css

@@ -14,21 +14,21 @@
 	100% { background-color: none }
 }*/
 
-.monaco-editor .lines-content,
-.monaco-editor .view-line,
-.monaco-editor .view-lines {
+.monaco-editor.safari .lines-content,
+.monaco-editor.safari .view-line,
+.monaco-editor.safari .view-lines {
 	-webkit-user-select: text;
-	-ms-user-select: text;
-	-khtml-user-select: text;
-	-moz-user-select: text;
-	-o-user-select: text;
 	user-select: text;
 }
 
-.monaco-editor.ie .lines-content,
-.monaco-editor.ie .view-line,
-.monaco-editor.ie .view-lines {
+.monaco-editor .lines-content,
+.monaco-editor .view-line,
+.monaco-editor .view-lines {
+	-webkit-user-select: none;
 	-ms-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
 	user-select: none;
 }
 

src/vs/editor/browser/viewParts/lines/viewLines.ts

@@ -455,6 +455,10 @@ export class ViewLines extends ViewPart implements IVisibleLinesHost<ViewLine>,
 
 	// --- implementation
 
+	public updateLineWidths(): void {
+		this._updateLineWidths(false);
+	}
+
 	/**
 	 * Updates the max line width if it is fast to compute.
 	 * Returns true if all lines were taken into account.

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

@@ -82,6 +82,10 @@ class MinimapOptions {
 
 	public readonly lineHeight: number;
 
+	/**
+	 * container dom node left position (in CSS px)
+	 */
+	public readonly minimapLeft: number;
 	/**
 	 * container dom node width (in CSS px)
 	 */
@@ -121,6 +125,7 @@ class MinimapOptions {
 		this.pixelRatio = pixelRatio;
 		this.typicalHalfwidthCharacterWidth = fontInfo.typicalHalfwidthCharacterWidth;
 		this.lineHeight = configuration.editor.lineHeight;
+		this.minimapLeft = layoutInfo.minimapLeft;
 		this.minimapWidth = layoutInfo.minimapWidth;
 		this.minimapHeight = layoutInfo.height;
 
@@ -138,6 +143,7 @@ class MinimapOptions {
 			&& this.pixelRatio === other.pixelRatio
 			&& this.typicalHalfwidthCharacterWidth === other.typicalHalfwidthCharacterWidth
 			&& this.lineHeight === other.lineHeight
+			&& this.minimapLeft === other.minimapLeft
 			&& this.minimapWidth === other.minimapWidth
 			&& this.minimapHeight === other.minimapHeight
 			&& this.canvasInnerWidth === other.canvasInnerWidth
@@ -456,7 +462,6 @@ export class Minimap extends ViewPart {
 		this._domNode.setPosition('absolute');
 		this._domNode.setAttribute('role', 'presentation');
 		this._domNode.setAttribute('aria-hidden', 'true');
-		this._domNode.setRight(this._context.configuration.editor.layoutInfo.verticalScrollbarWidth);
 
 		this._shadow = createFastDomNode(document.createElement('div'));
 		this._shadow.setClassName('minimap-shadow-hidden');
@@ -563,6 +568,7 @@ export class Minimap extends ViewPart {
 	}
 
 	private _applyLayout(): void {
+		this._domNode.setLeft(this._options.minimapLeft);
 		this._domNode.setWidth(this._options.minimapWidth);
 		this._domNode.setHeight(this._options.minimapHeight);
 		this._shadow.setHeight(this._options.minimapHeight);
@@ -654,6 +660,8 @@ export class Minimap extends ViewPart {
 		const renderMinimap = this._options.renderMinimap;
 		if (renderMinimap === RenderMinimap.None) {
 			this._shadow.setClassName('minimap-shadow-hidden');
+			this._sliderHorizontal.setWidth(0);
+			this._sliderHorizontal.setHeight(0);
 			return;
 		}
 		if (renderingCtx.scrollLeft + renderingCtx.viewportWidth >= renderingCtx.scrollWidth) {
@@ -868,10 +876,9 @@ export class Minimap extends ViewPart {
 		let charIndex = 0;
 		let tabsCharDelta = 0;
 
-		for (let tokenIndex = 0, tokensLen = tokens.length; tokenIndex < tokensLen; tokenIndex++) {
-			const token = tokens[tokenIndex];
-			const tokenEndIndex = token.endIndex;
-			const tokenColorId = token.getForeground();
+		for (let tokenIndex = 0, tokensLen = tokens.getCount(); tokenIndex < tokensLen; tokenIndex++) {
+			const tokenEndIndex = tokens.getEndOffset(tokenIndex);
+			const tokenColorId = tokens.getForeground(tokenIndex);
 			const tokenColor = colorTracker.getColor(tokenColorId);
 
 			for (; charIndex < tokenEndIndex; charIndex++) {
@@ -927,4 +934,4 @@ registerThemingParticipant((theme, collector) => {
 	if (shadow) {
 		collector.addRule(`.monaco-editor .minimap-shadow-visible { box-shadow: ${shadow} -6px 0 6px -6px inset; }`);
 	}
-});
+});

src/vs/editor/browser/viewParts/overviewRuler/decorationsOverviewRuler.ts

@@ -207,6 +207,7 @@ export class DecorationsOverviewRuler extends ViewPart {
 		this._domNode.setClassName('decorationsOverviewRuler');
 		this._domNode.setPosition('absolute');
 		this._domNode.setLayerHinting(true);
+		this._domNode.setAttribute('aria-hidden', 'true');
 
 		this._settings = null;
 		this._updateSettings(false);

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

@@ -6,37 +6,41 @@
 
 import { ViewEventHandler } from 'vs/editor/common/viewModel/viewEventHandler';
 import { IOverviewRuler } from 'vs/editor/browser/editorBrowser';
-import { OverviewRulerImpl } from 'vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl';
 import { ViewContext } from 'vs/editor/common/view/viewContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { OverviewRulerPosition } from 'vs/editor/common/config/editorOptions';
-import { OverviewRulerZone } from 'vs/editor/common/view/overviewZoneManager';
+import { OverviewRulerZone, OverviewZoneManager, ColorZone } from 'vs/editor/common/view/overviewZoneManager';
+import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
 
 export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 
 	private _context: ViewContext;
-	private _overviewRuler: OverviewRulerImpl;
+	private _domNode: FastDomNode<HTMLCanvasElement>;
+	private _zoneManager: OverviewZoneManager;
 
-	constructor(context: ViewContext, cssClassName: string, minimumHeight: number, maximumHeight: number) {
+	constructor(context: ViewContext, cssClassName: string) {
 		super();
 		this._context = context;
-		this._overviewRuler = new OverviewRulerImpl(
-			0,
-			cssClassName,
-			this._context.viewLayout.getScrollHeight(),
-			this._context.configuration.editor.lineHeight,
-			this._context.configuration.editor.pixelRatio,
-			minimumHeight,
-			maximumHeight,
-			(lineNumber: number) => this._context.viewLayout.getVerticalOffsetForLineNumber(lineNumber)
-		);
+
+		this._domNode = createFastDomNode(document.createElement('canvas'));
+		this._domNode.setClassName(cssClassName);
+		this._domNode.setPosition('absolute');
+		this._domNode.setLayerHinting(true);
+
+		this._zoneManager = new OverviewZoneManager((lineNumber: number) => this._context.viewLayout.getVerticalOffsetForLineNumber(lineNumber));
+		this._zoneManager.setDOMWidth(0);
+		this._zoneManager.setDOMHeight(0);
+		this._zoneManager.setOuterHeight(this._context.viewLayout.getScrollHeight());
+		this._zoneManager.setLineHeight(this._context.configuration.editor.lineHeight);
+
+		this._zoneManager.setPixelRatio(this._context.configuration.editor.pixelRatio);
 
 		this._context.addEventHandler(this);
 	}
 
 	public dispose(): void {
 		this._context.removeEventHandler(this);
-		this._overviewRuler.dispose();
+		this._zoneManager = null;
 		super.dispose();
 	}
 
@@ -44,40 +48,118 @@ export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 
 	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
 		if (e.lineHeight) {
-			this._overviewRuler.setLineHeight(this._context.configuration.editor.lineHeight, true);
+			this._zoneManager.setLineHeight(this._context.configuration.editor.lineHeight);
+			this._render();
 		}
 
 		if (e.pixelRatio) {
-			this._overviewRuler.setPixelRatio(this._context.configuration.editor.pixelRatio, true);
+			this._zoneManager.setPixelRatio(this._context.configuration.editor.pixelRatio);
+			this._domNode.setWidth(this._zoneManager.getDOMWidth());
+			this._domNode.setHeight(this._zoneManager.getDOMHeight());
+			this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
+			this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
+			this._render();
 		}
 
 		return true;
 	}
-
 	public onFlushed(e: viewEvents.ViewFlushedEvent): boolean {
+		this._render();
 		return true;
 	}
-
 	public onScrollChanged(e: viewEvents.ViewScrollChangedEvent): boolean {
-		this._overviewRuler.setScrollHeight(e.scrollHeight, true);
-		return super.onScrollChanged(e) || e.scrollHeightChanged;
+		if (e.scrollHeightChanged) {
+			this._zoneManager.setOuterHeight(e.scrollHeight);
+			this._render();
+		}
+		return true;
 	}
-
 	public onZonesChanged(e: viewEvents.ViewZonesChangedEvent): boolean {
+		this._render();
 		return true;
 	}
 
 	// ---- end view event handlers
 
 	public getDomNode(): HTMLElement {
-		return this._overviewRuler.getDomNode();
+		return this._domNode.domNode;
 	}
 
 	public setLayout(position: OverviewRulerPosition): void {
-		this._overviewRuler.setLayout(position, true);
+		this._domNode.setTop(position.top);
+		this._domNode.setRight(position.right);
+
+		let hasChanged = false;
+		hasChanged = this._zoneManager.setDOMWidth(position.width) || hasChanged;
+		hasChanged = this._zoneManager.setDOMHeight(position.height) || hasChanged;
+
+		if (hasChanged) {
+			this._domNode.setWidth(this._zoneManager.getDOMWidth());
+			this._domNode.setHeight(this._zoneManager.getDOMHeight());
+			this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
+			this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
+
+			this._render();
+		}
 	}
 
 	public setZones(zones: OverviewRulerZone[]): void {
-		this._overviewRuler.setZones(zones, true);
+		this._zoneManager.setZones(zones);
+		this._render();
 	}
-}
+
+	private _render(): boolean {
+		if (this._zoneManager.getOuterHeight() === 0) {
+			return false;
+		}
+
+		const width = this._zoneManager.getCanvasWidth();
+		const height = this._zoneManager.getCanvasHeight();
+
+		let colorZones = this._zoneManager.resolveColorZones();
+		let id2Color = this._zoneManager.getId2Color();
+
+		let ctx = this._domNode.domNode.getContext('2d');
+		ctx.clearRect(0, 0, width, height);
+		if (colorZones.length > 0) {
+			this._renderOneLane(ctx, colorZones, id2Color, width);
+		}
+
+		return true;
+	}
+
+	private _renderOneLane(ctx: CanvasRenderingContext2D, colorZones: ColorZone[], id2Color: string[], width: number): void {
+
+		let currentColorId = 0;
+		let currentFrom = 0;
+		let currentTo = 0;
+
+		for (let i = 0, len = colorZones.length; i < len; i++) {
+			const zone = colorZones[i];
+
+			const zoneColorId = zone.colorId;
+			const zoneFrom = zone.from;
+			const zoneTo = zone.to;
+
+			if (zoneColorId !== currentColorId) {
+				ctx.fillRect(0, currentFrom, width, currentTo - currentFrom);
+
+				currentColorId = zoneColorId;
+				ctx.fillStyle = id2Color[currentColorId];
+				currentFrom = zoneFrom;
+				currentTo = zoneTo;
+			} else {
+				if (currentTo >= zoneFrom) {
+					currentTo = Math.max(currentTo, zoneTo);
+				} else {
+					ctx.fillRect(0, currentFrom, width, currentTo - currentFrom);
+					currentFrom = zoneFrom;
+					currentTo = zoneTo;
+				}
+			}
+		}
+
+		ctx.fillRect(0, currentFrom, width, currentTo - currentFrom);
+
+	}
+}

src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts

@@ -1,250 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-'use strict';
-
-import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
-import { OverviewRulerLane } from 'vs/editor/common/editorCommon';
-import { OverviewZoneManager, ColorZone, OverviewRulerZone } from 'vs/editor/common/view/overviewZoneManager';
-import { Color } from 'vs/base/common/color';
-import { OverviewRulerPosition } from 'vs/editor/common/config/editorOptions';
-import { ThemeType, LIGHT } from 'vs/platform/theme/common/themeService';
-
-export class OverviewRulerImpl {
-
-	private _canvasLeftOffset: number;
-	private _domNode: FastDomNode<HTMLCanvasElement>;
-	private _lanesCount: number;
-	private _zoneManager: OverviewZoneManager;
-	private _background: Color;
-
-	constructor(
-		canvasLeftOffset: number, cssClassName: string, scrollHeight: number, lineHeight: number,
-		pixelRatio: number, minimumHeight: number, maximumHeight: number,
-		getVerticalOffsetForLine: (lineNumber: number) => number
-	) {
-		this._canvasLeftOffset = canvasLeftOffset;
-
-		this._domNode = createFastDomNode(document.createElement('canvas'));
-
-		this._domNode.setClassName(cssClassName);
-		this._domNode.setPosition('absolute');
-		this._domNode.setLayerHinting(true);
-
-		this._lanesCount = 3;
-
-		this._background = null;
-
-		this._zoneManager = new OverviewZoneManager(getVerticalOffsetForLine);
-		this._zoneManager.setMinimumHeight(minimumHeight);
-		this._zoneManager.setMaximumHeight(maximumHeight);
-		this._zoneManager.setThemeType(LIGHT);
-		this._zoneManager.setDOMWidth(0);
-		this._zoneManager.setDOMHeight(0);
-		this._zoneManager.setOuterHeight(scrollHeight);
-		this._zoneManager.setLineHeight(lineHeight);
-
-		this._zoneManager.setPixelRatio(pixelRatio);
-	}
-
-	public dispose(): void {
-		this._zoneManager = null;
-	}
-
-	public setLayout(position: OverviewRulerPosition, render: boolean): void {
-		this._domNode.setTop(position.top);
-		this._domNode.setRight(position.right);
-
-		let hasChanged = false;
-		hasChanged = this._zoneManager.setDOMWidth(position.width) || hasChanged;
-		hasChanged = this._zoneManager.setDOMHeight(position.height) || hasChanged;
-
-		if (hasChanged) {
-			this._domNode.setWidth(this._zoneManager.getDOMWidth());
-			this._domNode.setHeight(this._zoneManager.getDOMHeight());
-			this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
-			this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
-
-			if (render) {
-				this.render(true);
-			}
-		}
-	}
-
-	public getLanesCount(): number {
-		return this._lanesCount;
-	}
-
-	public setLanesCount(newLanesCount: number, render: boolean): void {
-		this._lanesCount = newLanesCount;
-
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public setThemeType(themeType: ThemeType, render: boolean): void {
-		this._zoneManager.setThemeType(themeType);
-
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public setUseBackground(background: Color, render: boolean): void {
-		this._background = background;
-
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public getDomNode(): HTMLCanvasElement {
-		return this._domNode.domNode;
-	}
-
-	public getPixelWidth(): number {
-		return this._zoneManager.getCanvasWidth();
-	}
-
-	public getPixelHeight(): number {
-		return this._zoneManager.getCanvasHeight();
-	}
-
-	public setScrollHeight(scrollHeight: number, render: boolean): void {
-		this._zoneManager.setOuterHeight(scrollHeight);
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public setLineHeight(lineHeight: number, render: boolean): void {
-		this._zoneManager.setLineHeight(lineHeight);
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public setPixelRatio(pixelRatio: number, render: boolean): void {
-		this._zoneManager.setPixelRatio(pixelRatio);
-		this._domNode.setWidth(this._zoneManager.getDOMWidth());
-		this._domNode.setHeight(this._zoneManager.getDOMHeight());
-		this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
-		this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
-		if (render) {
-			this.render(true);
-		}
-	}
-
-	public setZones(zones: OverviewRulerZone[], render: boolean): void {
-		this._zoneManager.setZones(zones);
-		if (render) {
-			this.render(false);
-		}
-	}
-
-	public render(forceRender: boolean): boolean {
-		if (this._zoneManager.getOuterHeight() === 0) {
-			return false;
-		}
-
-		const width = this._zoneManager.getCanvasWidth();
-		const height = this._zoneManager.getCanvasHeight();
-
-		let colorZones = this._zoneManager.resolveColorZones();
-		let id2Color = this._zoneManager.getId2Color();
-
-		let ctx = this._domNode.domNode.getContext('2d');
-		if (this._background === null) {
-			ctx.clearRect(0, 0, width, height);
-		} else {
-			ctx.fillStyle = Color.Format.CSS.formatHex(this._background);
-			ctx.fillRect(0, 0, width, height);
-		}
-
-		if (colorZones.length > 0) {
-			let remainingWidth = width - this._canvasLeftOffset;
-
-			if (this._lanesCount >= 3) {
-				this._renderThreeLanes(ctx, colorZones, id2Color, remainingWidth);
-			} else if (this._lanesCount === 2) {
-				this._renderTwoLanes(ctx, colorZones, id2Color, remainingWidth);
-			} else if (this._lanesCount === 1) {
-				this._renderOneLane(ctx, colorZones, id2Color, remainingWidth);
-			}
-		}
-
-		return true;
-	}
-
-	private _renderOneLane(ctx: CanvasRenderingContext2D, colorZones: ColorZone[], id2Color: string[], w: number): void {
-
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Left | OverviewRulerLane.Center | OverviewRulerLane.Right, this._canvasLeftOffset, w);
-
-	}
-
-	private _renderTwoLanes(ctx: CanvasRenderingContext2D, colorZones: ColorZone[], id2Color: string[], w: number): void {
-
-		let leftWidth = Math.floor(w / 2);
-		let rightWidth = w - leftWidth;
-		let leftOffset = this._canvasLeftOffset;
-		let rightOffset = this._canvasLeftOffset + leftWidth;
-
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Left | OverviewRulerLane.Center, leftOffset, leftWidth);
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Right, rightOffset, rightWidth);
-	}
-
-	private _renderThreeLanes(ctx: CanvasRenderingContext2D, colorZones: ColorZone[], id2Color: string[], w: number): void {
-
-		let leftWidth = Math.floor(w / 3);
-		let rightWidth = Math.floor(w / 3);
-		let centerWidth = w - leftWidth - rightWidth;
-		let leftOffset = this._canvasLeftOffset;
-		let centerOffset = this._canvasLeftOffset + leftWidth;
-		let rightOffset = this._canvasLeftOffset + leftWidth + centerWidth;
-
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Left, leftOffset, leftWidth);
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Center, centerOffset, centerWidth);
-		this._renderVerticalPatch(ctx, colorZones, id2Color, OverviewRulerLane.Right, rightOffset, rightWidth);
-	}
-
-	private _renderVerticalPatch(ctx: CanvasRenderingContext2D, colorZones: ColorZone[], id2Color: string[], laneMask: number, xpos: number, width: number): void {
-
-		let currentColorId = 0;
-		let currentFrom = 0;
-		let currentTo = 0;
-
-		for (let i = 0, len = colorZones.length; i < len; i++) {
-			let zone = colorZones[i];
-
-			if (!(zone.position & laneMask)) {
-				continue;
-			}
-
-			let zoneColorId = zone.colorId;
-			let zoneFrom = zone.from;
-			let zoneTo = zone.to;
-
-			if (zoneColorId !== currentColorId) {
-				ctx.fillRect(xpos, currentFrom, width, currentTo - currentFrom);
-
-				currentColorId = zoneColorId;
-				ctx.fillStyle = id2Color[currentColorId];
-				currentFrom = zoneFrom;
-				currentTo = zoneTo;
-			} else {
-				if (currentTo >= zoneFrom) {
-					currentTo = Math.max(currentTo, zoneTo);
-				} else {
-					ctx.fillRect(xpos, currentFrom, width, currentTo - currentFrom);
-					currentFrom = zoneFrom;
-					currentTo = zoneTo;
-				}
-			}
-		}
-
-		ctx.fillRect(xpos, currentFrom, width, currentTo - currentFrom);
-
-	}
-}

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

@@ -387,7 +387,7 @@ export class SelectionsOverlay extends DynamicViewOverlay {
 		}
 		let lineIndex = lineNumber - startLineNumber;
 		if (lineIndex < 0 || lineIndex >= this._renderResult.length) {
-			throw new Error('Unexpected render request');
+			return '';
 		}
 		return this._renderResult[lineIndex];
 	}

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

@@ -23,53 +23,44 @@ export interface IViewCursorRenderData {
 }
 
 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;
-	}
+	constructor(
+		public readonly top: number,
+		public readonly left: number,
+		public readonly width: number,
+		public readonly height: number,
+		public readonly textContent: string
+	) { }
 }
 
 export class ViewCursor {
 	private readonly _context: ViewContext;
-	private readonly _isSecondary: boolean;
 	private readonly _domNode: FastDomNode<HTMLElement>;
 
 	private _cursorStyle: TextEditorCursorStyle;
+	private _lineCursorWidth: number;
 	private _lineHeight: number;
 	private _typicalHalfwidthCharacterWidth: number;
 
 	private _isVisible: boolean;
 
 	private _position: Position;
-	private _isInEditableRange: boolean;
 
 	private _lastRenderedContent: string;
 	private _renderData: ViewCursorRenderData;
 
-	constructor(context: ViewContext, isSecondary: boolean) {
+	constructor(context: ViewContext) {
 		this._context = context;
-		this._isSecondary = isSecondary;
 
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		this._lineHeight = this._context.configuration.editor.lineHeight;
 		this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
+		this._lineCursorWidth = Math.min(this._context.configuration.editor.viewInfo.cursorWidth, this._typicalHalfwidthCharacterWidth);
 
 		this._isVisible = true;
 
 		// Create the dom node
 		this._domNode = createFastDomNode(document.createElement('div'));
-		if (this._isSecondary) {
-			this._domNode.setClassName('cursor secondary');
-		} else {
-			this._domNode.setClassName('cursor');
-		}
+		this._domNode.setClassName('cursor');
 		this._domNode.setHeight(this._lineHeight);
 		this._domNode.setTop(0);
 		this._domNode.setLeft(0);
@@ -77,7 +68,6 @@ export class ViewCursor {
 		this._domNode.setDisplay('none');
 
 		this.updatePosition(new Position(1, 1));
-		this._isInEditableRange = true;
 
 		this._lastRenderedContent = '';
 		this._renderData = null;
@@ -87,10 +77,6 @@ export class ViewCursor {
 		return this._domNode;
 	}
 
-	public getIsInEditableRange(): boolean {
-		return this._isInEditableRange;
-	}
-
 	public getPosition(): Position {
 		return this._position;
 	}
@@ -113,23 +99,26 @@ export class ViewCursor {
 		if (e.lineHeight) {
 			this._lineHeight = this._context.configuration.editor.lineHeight;
 		}
-		if (e.viewInfo) {
-			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
-		}
 		if (e.fontInfo) {
 			Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
 			this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
 		}
+		if (e.viewInfo) {
+			this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
+			this._lineCursorWidth = Math.min(this._context.configuration.editor.viewInfo.cursorWidth, this._typicalHalfwidthCharacterWidth);
+		}
+
 		return true;
 	}
 
-	public onCursorPositionChanged(position: Position, isInEditableRange: boolean): boolean {
+	public onCursorPositionChanged(position: Position): boolean {
 		this.updatePosition(position);
-		this._isInEditableRange = isInEditableRange;
 		return true;
 	}
 
 	private _prepareRender(ctx: RenderingContext): ViewCursorRenderData {
+		let textContent = '';
+
 		if (this._cursorStyle === TextEditorCursorStyle.Line || this._cursorStyle === TextEditorCursorStyle.LineThin) {
 			const visibleRange = ctx.visibleRangeForPosition(this._position);
 			if (!visibleRange) {
@@ -138,12 +127,16 @@ export class ViewCursor {
 			}
 			let width: number;
 			if (this._cursorStyle === TextEditorCursorStyle.Line) {
-				width = dom.computeScreenAwareSize(2);
+				width = dom.computeScreenAwareSize(this._lineCursorWidth > 0 ? this._lineCursorWidth : 2);
+				if (width > 2) {
+					const lineContent = this._context.model.getLineContent(this._position.lineNumber);
+					textContent = lineContent.charAt(this._position.column - 1);
+				}
 			} else {
 				width = dom.computeScreenAwareSize(1);
 			}
 			const top = ctx.getVerticalOffsetForLineNumber(this._position.lineNumber) - ctx.bigNumbersDelta;
-			return new ViewCursorRenderData(top, visibleRange.left, width, '');
+			return new ViewCursorRenderData(top, visibleRange.left, width, this._lineHeight, textContent);
 		}
 
 		const visibleRangeForCharacter = ctx.linesVisibleRangesForRange(new Range(this._position.lineNumber, this._position.column, this._position.lineNumber, this._position.column + 1), false);
@@ -156,14 +149,21 @@ export class ViewCursor {
 		const range = visibleRangeForCharacter[0].ranges[0];
 		const width = range.width < 1 ? this._typicalHalfwidthCharacterWidth : range.width;
 
-		let textContent = '';
 		if (this._cursorStyle === TextEditorCursorStyle.Block) {
 			const lineContent = this._context.model.getLineContent(this._position.lineNumber);
 			textContent = lineContent.charAt(this._position.column - 1);
 		}
 
-		const top = ctx.getVerticalOffsetForLineNumber(this._position.lineNumber) - ctx.bigNumbersDelta;
-		return new ViewCursorRenderData(top, range.left, width, textContent);
+		let top = ctx.getVerticalOffsetForLineNumber(this._position.lineNumber) - ctx.bigNumbersDelta;
+		let height = this._lineHeight;
+
+		// Underline might interfere with clicking
+		if (this._cursorStyle === TextEditorCursorStyle.Underline || this._cursorStyle === TextEditorCursorStyle.UnderlineThin) {
+			top += this._lineHeight - 2;
+			height = 2;
+		}
+
+		return new ViewCursorRenderData(top, range.left, width, height, textContent);
 	}
 
 	public prepareRender(ctx: RenderingContext): void {
@@ -185,14 +185,14 @@ export class ViewCursor {
 		this._domNode.setTop(this._renderData.top);
 		this._domNode.setLeft(this._renderData.left);
 		this._domNode.setWidth(this._renderData.width);
-		this._domNode.setLineHeight(this._lineHeight);
-		this._domNode.setHeight(this._lineHeight);
+		this._domNode.setLineHeight(this._renderData.height);
+		this._domNode.setHeight(this._renderData.height);
 
 		return {
 			domNode: this._domNode.domNode,
 			position: this._position,
 			contentLeft: this._renderData.left,
-			height: this._lineHeight,
+			height: this._renderData.height,
 			width: 2
 		};
 	}

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

@@ -10,9 +10,7 @@
 .monaco-editor .cursors-layer > .cursor {
 	position: absolute;
 	cursor: text;
-}
-.monaco-editor .cursors-layer > .cursor.secondary {
-	opacity: 0.6;
+	overflow: hidden;
 }
 
 /* -- block-outline-style -- */

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

@@ -49,7 +49,7 @@ export class ViewCursors extends ViewPart {
 		this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
 		this._selectionIsEmpty = true;
 
-		this._primaryCursor = new ViewCursor(this._context, false);
+		this._primaryCursor = new ViewCursor(this._context);
 		this._secondaryCursors = [];
 		this._renderData = [];
 
@@ -101,15 +101,15 @@ export class ViewCursors extends ViewPart {
 		}
 		return true;
 	}
-	private _onCursorPositionChanged(position: Position, secondaryPositions: Position[], isInEditableRange: boolean): void {
-		this._primaryCursor.onCursorPositionChanged(position, isInEditableRange);
+	private _onCursorPositionChanged(position: Position, secondaryPositions: Position[]): void {
+		this._primaryCursor.onCursorPositionChanged(position);
 		this._updateBlinking();
 
 		if (this._secondaryCursors.length < secondaryPositions.length) {
 			// Create new cursors
 			let addCnt = secondaryPositions.length - this._secondaryCursors.length;
 			for (let i = 0; i < addCnt; i++) {
-				let newCursor = new ViewCursor(this._context, true);
+				let newCursor = new ViewCursor(this._context);
 				this._domNode.domNode.insertBefore(newCursor.getDomNode().domNode, this._primaryCursor.getDomNode().domNode.nextSibling);
 				this._secondaryCursors.push(newCursor);
 			}
@@ -123,7 +123,7 @@ export class ViewCursors extends ViewPart {
 		}
 
 		for (let i = 0; i < secondaryPositions.length; i++) {
-			this._secondaryCursors[i].onCursorPositionChanged(secondaryPositions[i], isInEditableRange);
+			this._secondaryCursors[i].onCursorPositionChanged(secondaryPositions[i]);
 		}
 
 	}
@@ -132,7 +132,7 @@ export class ViewCursors extends ViewPart {
 		for (let i = 0, len = e.selections.length; i < len; i++) {
 			positions[i] = e.selections[i].getPosition();
 		}
-		this._onCursorPositionChanged(positions[0], positions.slice(1), e.isInEditableRange);
+		this._onCursorPositionChanged(positions[0], positions.slice(1));
 
 		const selectionIsEmpty = e.selections[0].isEmpty();
 		if (this._selectionIsEmpty !== selectionIsEmpty) {
@@ -198,7 +198,7 @@ export class ViewCursors extends ViewPart {
 		if (!this._editorHasFocus) {
 			return TextEditorCursorBlinkingStyle.Hidden;
 		}
-		if (this._readOnly || !this._primaryCursor.getIsInEditableRange()) {
+		if (this._readOnly) {
 			return TextEditorCursorBlinkingStyle.Solid;
 		}
 		return this._cursorBlinking;