Fixes #162320: Add a button and a hover when a long line is truncated

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

@@ -354,11 +354,10 @@ export class ViewLine implements IVisibleLine {
 		endColumn = Math.min(this._renderedViewLine.input.lineContent.length + 1, Math.max(1, endColumn));
 
 		const stopRenderingLineAfter = this._renderedViewLine.input.stopRenderingLineAfter;
-		let outsideRenderedLine = false;
 
 		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter + 1 && endColumn > stopRenderingLineAfter + 1) {
 			// This range is obviously not visible
-			outsideRenderedLine = true;
+			return new VisibleRanges(true, [new FloatHorizontalRange(this.getWidth(), 0)]);
 		}
 
 		if (stopRenderingLineAfter !== -1 && startColumn > stopRenderingLineAfter + 1) {
@@ -371,7 +370,7 @@ export class ViewLine implements IVisibleLine {
 
 		const horizontalRanges = this._renderedViewLine.getVisibleRangesForRange(lineNumber, startColumn, endColumn, context);
 		if (horizontalRanges && horizontalRanges.length > 0) {
-			return new VisibleRanges(outsideRenderedLine, horizontalRanges);
+			return new VisibleRanges(false, horizontalRanges);
 		}
 
 		return null;

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

@@ -19,6 +19,20 @@
 	background: rgb(150, 0, 0) !important;
 }
 
+.mtkoverflow {
+	background-color: var(--vscode-button-background, --vscode-editor-background);
+	color: var(--vscode-button-foreground, --vscode-editor-foreground);
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--vscode-contrastBorder);
+	border-radius: 5px;
+	padding: 4px;
+	cursor: pointer;
+}
+.mtkoverflow:hover {
+	background-color: var(--vscode-button-hoverBackground);
+}
+
 .monaco-editor.no-user-select .lines-content,
 .monaco-editor.no-user-select .view-line,
 .monaco-editor.no-user-select .view-lines {

src/vs/editor/common/viewLayout/viewLineRenderer.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import * as nls from 'vs/nls';
 import { CharCode } from 'vs/base/common/charCode';
 import * as strings from 'vs/base/common/strings';
 import { IViewLineTokens } from 'vs/editor/common/tokens/lineTokens';
@@ -422,6 +423,7 @@ class ResolvedRenderLineInput {
 		public readonly lineContent: string,
 		public readonly len: number,
 		public readonly isOverflowing: boolean,
+		public readonly overflowingCharCount: number,
 		public readonly parts: LinePart[],
 		public readonly containsForeignElements: ForeignElementType,
 		public readonly fauxIndentLength: number,
@@ -441,13 +443,16 @@ function resolveRenderLineInput(input: RenderLineInput): ResolvedRenderLineInput
 	const lineContent = input.lineContent;
 
 	let isOverflowing: boolean;
+	let overflowingCharCount: number;
 	let len: number;
 
 	if (input.stopRenderingLineAfter !== -1 && input.stopRenderingLineAfter < lineContent.length) {
 		isOverflowing = true;
+		overflowingCharCount = lineContent.length - input.stopRenderingLineAfter;
 		len = input.stopRenderingLineAfter;
 	} else {
 		isOverflowing = false;
+		overflowingCharCount = 0;
 		len = lineContent.length;
 	}
 
@@ -490,6 +495,7 @@ function resolveRenderLineInput(input: RenderLineInput): ResolvedRenderLineInput
 		lineContent,
 		len,
 		isOverflowing,
+		overflowingCharCount,
 		tokens,
 		containsForeignElements,
 		input.fauxIndentLength,
@@ -911,6 +917,7 @@ function _renderLine(input: ResolvedRenderLineInput, sb: StringBuilder): RenderL
 	const lineContent = input.lineContent;
 	const len = input.len;
 	const isOverflowing = input.isOverflowing;
+	const overflowingCharCount = input.overflowingCharCount;
 	const parts = input.parts;
 	const fauxIndentLength = input.fauxIndentLength;
 	const tabSize = input.tabSize;
@@ -1120,7 +1127,9 @@ function _renderLine(input: ResolvedRenderLineInput, sb: StringBuilder): RenderL
 	}
 
 	if (isOverflowing) {
-		sb.appendString('<span>&hellip;</span>');
+		sb.appendString('<span class="mtkoverflow">');
+		sb.appendString(nls.localize('showMore', "Show more ({0})", renderOverflowingCharCount(overflowingCharCount)));
+		sb.appendString('</span>');
 	}
 
 	sb.appendString('</span>');
@@ -1131,3 +1140,13 @@ function _renderLine(input: ResolvedRenderLineInput, sb: StringBuilder): RenderL
 function to4CharHex(n: number): string {
 	return n.toString(16).toUpperCase().padStart(4, '0');
 }
+
+function renderOverflowingCharCount(n: number): string {
+	if (n < 1024) {
+		return nls.localize('overflow.chars', "{0} chars", n);
+	}
+	if (n < 1024 * 1024) {
+		return `${(n / 1024).toFixed(1)} KB`;
+	}
+	return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}

src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts

@@ -21,6 +21,7 @@ import * as nls from 'vs/nls';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ILanguageFeaturesService } from 'vs/editor/common/services/languageFeatures';
+import { EditorOption } from 'vs/editor/common/config/editorOptions';
 
 const $ = dom.$;
 
@@ -73,10 +74,18 @@ export class MarkdownHoverParticipant implements IEditorHoverParticipant<Markdow
 
 		const lineLength = model.getLineLength(lineNumber);
 		const languageId = model.getLanguageIdAtPosition(anchor.range.startLineNumber, anchor.range.startColumn);
+		const stopRenderingLineAfter = this._editor.getOption(EditorOption.stopRenderingLineAfter);
 		const maxTokenizationLineLength = this._configurationService.getValue<number>('editor.maxTokenizationLineLength', {
 			overrideIdentifier: languageId
 		});
-		if (typeof maxTokenizationLineLength === 'number' && lineLength >= maxTokenizationLineLength) {
+		let stopRenderingMessage = false;
+		if (stopRenderingLineAfter >= 0 && lineLength > stopRenderingLineAfter && anchor.range.startColumn >= stopRenderingLineAfter) {
+			stopRenderingMessage = true;
+			result.push(new MarkdownHover(this, anchor.range, [{
+				value: nls.localize('stopped rendering', "Rendering paused for long line for performance reasons. This can be configured via `editor.stopRenderingLineAfter`.")
+			}], false, index++));
+		}
+		if (!stopRenderingMessage && typeof maxTokenizationLineLength === 'number' && lineLength >= maxTokenizationLineLength) {
 			result.push(new MarkdownHover(this, anchor.range, [{
 				value: nls.localize('too many characters', "Tokenization is skipped for long lines for performance reasons. This can be configured via `editor.maxTokenizationLineLength`.")
 			}], false, index++));

src/vs/editor/contrib/longLinesHelper/browser/longLinesHelper.ts

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from 'vs/base/common/lifecycle';
+import { ICodeEditor, MouseTargetType } from 'vs/editor/browser/editorBrowser';
+import { registerEditorContribution } from 'vs/editor/browser/editorExtensions';
+import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import { IEditorContribution } from 'vs/editor/common/editorCommon';
+
+class LongLinesHelper extends Disposable implements IEditorContribution {
+	public static readonly ID = 'editor.contrib.longLinesHelper';
+
+	public static get(editor: ICodeEditor): LongLinesHelper | null {
+		return editor.getContribution<LongLinesHelper>(LongLinesHelper.ID);
+	}
+
+	constructor(
+		private readonly _editor: ICodeEditor,
+	) {
+		super();
+
+		this._register(this._editor.onMouseDown((e) => {
+			const stopRenderingLineAfter = this._editor.getOption(EditorOption.stopRenderingLineAfter);
+			if (stopRenderingLineAfter >= 0 && e.target.type === MouseTargetType.CONTENT_TEXT && e.target.position.column >= stopRenderingLineAfter) {
+				this._editor.updateOptions({
+					stopRenderingLineAfter: -1
+				});
+			}
+		}));
+	}
+}
+
+registerEditorContribution(LongLinesHelper.ID, LongLinesHelper);

src/vs/editor/editor.all.ts

@@ -38,6 +38,7 @@ import 'vs/editor/contrib/lineSelection/browser/lineSelection';
 import 'vs/editor/contrib/linesOperations/browser/linesOperations';
 import 'vs/editor/contrib/linkedEditing/browser/linkedEditing';
 import 'vs/editor/contrib/links/browser/links';
+import 'vs/editor/contrib/longLinesHelper/browser/longLinesHelper';
 import 'vs/editor/contrib/multicursor/browser/multicursor';
 import 'vs/editor/contrib/parameterHints/browser/parameterHints';
 import 'vs/editor/contrib/rename/browser/rename';