Merge pull request #88453 from mallardduck/color_rulers

Add support for multiple rulers with different colors

src/vs/base/browser/fastDomNode.ts

@@ -28,6 +28,7 @@ export class FastDomNode<T extends HTMLElement> {
 	private _backgroundColor: string;
 	private _layerHint: boolean;
 	private _contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint';
+	private _boxShadow: string;
 
 	constructor(domNode: T) {
 		this.domNode = domNode;
@@ -51,6 +52,7 @@ export class FastDomNode<T extends HTMLElement> {
 		this._backgroundColor = '';
 		this._layerHint = false;
 		this._contain = 'none';
+		this._boxShadow = '';
 	}
 
 	public setMaxWidth(maxWidth: number): void {
@@ -218,6 +220,14 @@ export class FastDomNode<T extends HTMLElement> {
 		this.domNode.style.transform = this._layerHint ? 'translate3d(0px, 0px, 0px)' : '';
 	}
 
+	public setBoxShadow(boxShadow: string): void {
+		if (this._boxShadow === boxShadow) {
+			return;
+		}
+		this._boxShadow = boxShadow;
+		this.domNode.style.boxShadow = boxShadow;
+	}
+
 	public setContain(contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'): void {
 		if (this._contain === contain) {
 			return;

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

@@ -11,13 +11,13 @@ import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/v
 import { ViewContext } from 'vs/editor/common/view/viewContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
-import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import { EditorOption, IRulerOption } from 'vs/editor/common/config/editorOptions';
 
 export class Rulers extends ViewPart {
 
 	public domNode: FastDomNode<HTMLElement>;
 	private readonly _renderedRulers: FastDomNode<HTMLElement>[];
-	private _rulers: number[];
+	private _rulers: IRulerOption[];
 	private _typicalHalfwidthCharacterWidth: number;
 
 	constructor(context: ViewContext) {
@@ -92,9 +92,11 @@ export class Rulers extends ViewPart {
 
 		for (let i = 0, len = this._rulers.length; i < len; i++) {
 			const node = this._renderedRulers[i];
+			const ruler = this._rulers[i];
 
+			node.setBoxShadow(ruler.color ? `1px 0 0 0 ${ruler.color} inset` : ``);
 			node.setHeight(Math.min(ctx.scrollHeight, 1000000));
-			node.setLeft(this._rulers[i] * this._typicalHalfwidthCharacterWidth);
+			node.setLeft(ruler.column * this._typicalHalfwidthCharacterWidth);
 		}
 	}
 }

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

@@ -58,7 +58,7 @@ export interface IEditorOptions {
 	 * Render vertical lines at the specified columns.
 	 * Defaults to empty array.
 	 */
-	rulers?: number[];
+	rulers?: (number | IRulerOption)[];
 	/**
 	 * A string containing the word separators used when doing word navigation.
 	 * Defaults to `~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?
@@ -2361,16 +2361,37 @@ export function filterValidationDecorations(options: IComputedEditorOptions): bo
 
 //#region rulers
 
-class EditorRulers extends SimpleEditorOption<EditorOption.rulers, number[]> {
+export interface IRulerOption {
+	readonly column: number;
+	readonly color: string | null;
+}
+
+class EditorRulers extends BaseEditorOption<EditorOption.rulers, IRulerOption[]> {
 
 	constructor() {
-		const defaults: number[] = [];
+		const defaults: IRulerOption[] = [];
+		const columnSchema: IJSONSchema = { type: 'number', description: nls.localize('rulers.size', "Number of monospace characters at which this editor ruler will render.") };
 		super(
 			EditorOption.rulers, 'rulers', defaults,
 			{
 				type: 'array',
 				items: {
-					type: 'number'
+					anyOf: [
+						columnSchema,
+						{
+							type: [
+								'object'
+							],
+							properties: {
+								column: columnSchema,
+								color: {
+									type: 'string',
+									description: nls.localize('rulers.color', "Color of this editor ruler."),
+									format: 'color-hex'
+								}
+							}
+						}
+					]
 				},
 				default: defaults,
 				description: nls.localize('rulers', "Render vertical rulers after a certain number of monospace characters. Use multiple values for multiple rulers. No rulers are drawn if array is empty.")
@@ -2378,13 +2399,24 @@ class EditorRulers extends SimpleEditorOption<EditorOption.rulers, number[]> {
 		);
 	}
 
-	public validate(input: any): number[] {
+	public validate(input: any): IRulerOption[] {
 		if (Array.isArray(input)) {
-			let rulers: number[] = [];
-			for (let value of input) {
-				rulers.push(EditorIntOption.clampedInt(value, 0, 0, 10000));
+			let rulers: IRulerOption[] = [];
+			for (let _element of input) {
+				if (typeof _element === 'number') {
+					rulers.push({
+						column: EditorIntOption.clampedInt(_element, 0, 0, 10000),
+						color: null
+					});
+				} else if (typeof _element === 'object') {
+					const element = _element as IRulerOption;
+					rulers.push({
+						column: EditorIntOption.clampedInt(element.column, 0, 0, 10000),
+						color: element.color
+					});
+				}
 			}
-			rulers.sort((a, b) => a - b);
+			rulers.sort((a, b) => a.column - b.column);
 			return rulers;
 		}
 		return this.defaultValue;

src/vs/monaco.d.ts

@@ -2538,7 +2538,7 @@ declare namespace monaco.editor {
 		 * Render vertical lines at the specified columns.
 		 * Defaults to empty array.
 		 */
-		rulers?: number[];
+		rulers?: (number | IRulerOption)[];
 		/**
 		 * A string containing the word separators used when doing word navigation.
 		 * Defaults to `~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?
@@ -3445,6 +3445,11 @@ declare namespace monaco.editor {
 		readonly renderFn: ((lineNumber: number) => string) | null;
 	}
 
+	export interface IRulerOption {
+		readonly column: number;
+		readonly color: string | null;
+	}
+
 	/**
 	 * Configuration options for editor scrollbars
 	 */