Show breakpoints in overview ruler

This makes life easier when working with breakpoints in large files. Introduce a
new setting `editor.showBreakpointsInOverviewRuler` that controls whether this
is enabled or not. This setting is `false` by default. Use maroon for breakpoint
markers in the overview ruler to differentiate them from error markers.

Closes #15104.

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

@@ -515,6 +515,11 @@ export interface IEditorOptions {
 	 * Controls fading out of unused variables.
 	 */
 	showUnused?: boolean;
+	/**
+	 * Controls whether breakpoints are shown in the overview ruler.
+	 * Defaults to false.
+	 */
+	showBreakpointsInOverviewRuler?: boolean;
 }
 
 export interface IEditorConstructionOptions extends IEditorOptions {
@@ -2771,6 +2776,7 @@ export const enum EditorOption {
 	selectionClipboard,
 	selectionHighlight,
 	selectOnLineNumbers,
+	showBreakpointsInOverviewRuler,
 	showFoldingControls,
 	showUnused,
 	snippetSuggestions,
@@ -3169,6 +3175,10 @@ export const EditorOptions = {
 	selectOnLineNumbers: register(new EditorBooleanOption(
 		EditorOption.selectOnLineNumbers, 'selectOnLineNumbers', true,
 	)),
+	showBreakpointsInOverviewRuler: register(new EditorBooleanOption(
+		EditorOption.showBreakpointsInOverviewRuler, 'showBreakpointsInOverviewRuler', false,
+		{ description: nls.localize('showBreakpointsInOverviewRuler', "Controls whether breakpoints should be shown in the overview ruler.") }
+	)),
 	showFoldingControls: register(new EditorStringEnumOption(
 		EditorOption.showFoldingControls, 'showFoldingControls',
 		'mouseover' as 'always' | 'mouseover',

src/vs/monaco.d.ts

@@ -2918,6 +2918,11 @@ declare namespace monaco.editor {
 		 * Controls fading out of unused variables.
 		 */
 		showUnused?: boolean;
+		/**
+		 * Controls whether breakpoints are shown in the overview ruler.
+		 * Defaults to false.
+		 */
+		showBreakpointsInOverviewRuler?: boolean;
 	}
 
 	export interface IEditorConstructionOptions extends IEditorOptions {

src/vs/platform/theme/common/colorRegistry.ts

@@ -403,6 +403,8 @@ export const overviewRulerFindMatchForeground = registerColor('editorOverviewRul
 
 export const overviewRulerSelectionHighlightForeground = registerColor('editorOverviewRuler.selectionHighlightForeground', { dark: '#A0A0A0CC', light: '#A0A0A0CC', hc: '#A0A0A0CC' }, nls.localize('overviewRulerSelectionHighlightForeground', 'Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.'), true);
 
+export const overviewRulerBreakpointForeground = registerColor('editorOverviewRuler.breakpointForeground', { dark: '#7C2831', light: '#7C2831', hc: '#7C2831' }, nls.localize('overviewRulerBreakpointForeground', 'Overview ruler marker color for breakpoints.'));
+
 export const minimapFindMatch = registerColor('minimap.findMatchHighlight', { light: '#d18616', dark: '#d18616', hc: '#AB5A00' }, nls.localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'), true);
 export const minimapSelection = registerColor('minimap.selectionHighlight', { light: '#ADD6FF', dark: '#264F78', hc: '#ffffff' }, nls.localize('minimapSelectionHighlight', 'Minimap marker color for the editor selection.'), true);
 

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

@@ -12,7 +12,7 @@ import { IAction, Action } from 'vs/base/common/actions';
 import { Range } from 'vs/editor/common/core/range';
 import { ICodeEditor, IEditorMouseEvent, MouseTargetType, IContentWidget, IActiveCodeEditor, IContentWidgetPosition, ContentWidgetPositionPreference } from 'vs/editor/browser/editorBrowser';
 import { registerEditorContribution } from 'vs/editor/browser/editorExtensions';
-import { IModelDecorationOptions, IModelDeltaDecoration, TrackedRangeStickiness, ITextModel } from 'vs/editor/common/model';
+import { IModelDecorationOptions, IModelDeltaDecoration, TrackedRangeStickiness, ITextModel, OverviewRulerLane, IModelDecorationOverviewRulerOptions } from 'vs/editor/common/model';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
@@ -30,7 +30,9 @@ import { memoize } from 'vs/base/common/decorators';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
 import { distinct } from 'vs/base/common/arrays';
 import { RunOnceScheduler } from 'vs/base/common/async';
-import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import { EditorOption, IComputedEditorOptions } from 'vs/editor/common/config/editorOptions';
+import { themeColorFromId } from 'vs/platform/theme/common/themeService';
+import { overviewRulerBreakpointForeground } from 'vs/platform/theme/common/colorRegistry';
 
 const $ = dom.$;
 
@@ -46,7 +48,7 @@ const breakpointHelperDecoration: IModelDecorationOptions = {
 	stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
 };
 
-function createBreakpointDecorations(model: ITextModel, breakpoints: ReadonlyArray<IBreakpoint>, debugService: IDebugService): { range: Range; options: IModelDecorationOptions; }[] {
+function createBreakpointDecorations(model: ITextModel, breakpoints: ReadonlyArray<IBreakpoint>, debugService: IDebugService, editorOptions: IComputedEditorOptions): { range: Range; options: IModelDecorationOptions; }[] {
 	const result: { range: Range; options: IModelDecorationOptions; }[] = [];
 	breakpoints.forEach((breakpoint) => {
 		if (breakpoint.lineNumber <= model.getLineCount()) {
@@ -56,8 +58,9 @@ function createBreakpointDecorations(model: ITextModel, breakpoints: ReadonlyArr
 					: new Range(breakpoint.lineNumber, column, breakpoint.lineNumber, column + 1) // Decoration has to have a width #20688
 			);
 
+			const showInOverviewRuler: boolean = editorOptions.get(EditorOption.showBreakpointsInOverviewRuler);
 			result.push({
-				options: getBreakpointDecorationOptions(model, breakpoint, debugService),
+				options: getBreakpointDecorationOptions(model, breakpoint, debugService, showInOverviewRuler),
 				range
 			});
 		}
@@ -66,7 +69,7 @@ function createBreakpointDecorations(model: ITextModel, breakpoints: ReadonlyArr
 	return result;
 }
 
-function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoint, debugService: IDebugService): IModelDecorationOptions {
+function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoint, debugService: IDebugService, showInOverviewRuler: boolean): IModelDecorationOptions {
 	const { className, message } = getBreakpointMessageAndClassName(debugService, breakpoint);
 	let glyphMarginHoverMessage: MarkdownString | undefined;
 
@@ -79,11 +82,22 @@ function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoi
 		}
 	}
 
+	let overviewRulerDecoration: IModelDecorationOverviewRulerOptions | null;
+	if (showInOverviewRuler) {
+		overviewRulerDecoration = {
+			color: themeColorFromId(overviewRulerBreakpointForeground),
+			position: OverviewRulerLane.Center
+		};
+	} else {
+		overviewRulerDecoration = null;
+	}
+
 	return {
 		glyphMarginClassName: className,
 		glyphMarginHoverMessage,
 		stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-		beforeContentClassName: breakpoint.column ? `debug-breakpoint-placeholder` : undefined
+		beforeContentClassName: breakpoint.column ? `debug-breakpoint-placeholder` : undefined,
+		overviewRuler: overviewRulerDecoration
 	};
 }
 
@@ -358,7 +372,7 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
 		const activeCodeEditor = this.editor;
 		const model = activeCodeEditor.getModel();
 		const breakpoints = this.debugService.getModel().getBreakpoints({ uri: model.uri });
-		const desiredBreakpointDecorations = createBreakpointDecorations(model, breakpoints, this.debugService);
+		const desiredBreakpointDecorations = createBreakpointDecorations(model, breakpoints, this.debugService, this.editor.getOptions());
 
 		try {
 			this.ignoreDecorationsChangedEvent = true;