Introduce and adopt IModelDecorationOptions.zIndex (#46995)

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

@@ -85,8 +85,14 @@ export class DecorationsOverlay extends DynamicViewOverlay {
 
 		// Sort decorations for consistent render output
 		decorations = decorations.sort((a, b) => {
-			let aClassName = a.options.className;
-			let bClassName = b.options.className;
+			if (a.options.zIndex < b.options.zIndex) {
+				return -1;
+			}
+			if (a.options.zIndex > b.options.zIndex) {
+				return 1;
+			}
+			const aClassName = a.options.className;
+			const bClassName = b.options.className;
 
 			if (aClassName < bClassName) {
 				return -1;

src/vs/editor/common/model.ts

@@ -81,7 +81,12 @@ export interface IModelDecorationOptions {
 	 * Always render the decoration (even when the range it encompasses is collapsed).
 	 * @internal
 	 */
-	readonly showIfCollapsed?: boolean;
+	showIfCollapsed?: boolean;
+	/**
+	 * Specifies the stack order of a decoration.
+	 * A decoration with greater stack order is always in front of a decoration with a lower stack order.
+	 */
+	zIndex?: number;
 	/**
 	 * If set, render this decoration in the overview ruler.
 	 */

src/vs/editor/common/model/intervalTree.ts

@@ -12,14 +12,11 @@ import { IModelDecoration } from 'vs/editor/common/model';
 // The red-black tree is based on the "Introduction to Algorithms" by Cormen, Leiserson and Rivest.
 //
 
-/**
- * The class name sort order must match the severity order. Highest severity last.
- */
 export const ClassName = {
-	EditorHintDecoration: 'squiggly-a-hint',
-	EditorInfoDecoration: 'squiggly-b-info',
-	EditorWarningDecoration: 'squiggly-c-warning',
-	EditorErrorDecoration: 'squiggly-d-error'
+	EditorHintDecoration: 'squiggly-hint',
+	EditorInfoDecoration: 'squiggly-info',
+	EditorWarningDecoration: 'squiggly-warning',
+	EditorErrorDecoration: 'squiggly-error'
 };
 
 /**

src/vs/editor/common/model/textModel.ts

@@ -2585,22 +2585,20 @@ export class ModelDecorationOverviewRulerOptions implements model.IModelDecorati
 	}
 }
 
-let lastStaticId = 0;
-
 export class ModelDecorationOptions implements model.IModelDecorationOptions {
 
 	public static EMPTY: ModelDecorationOptions;
 
 	public static register(options: model.IModelDecorationOptions): ModelDecorationOptions {
-		return new ModelDecorationOptions(++lastStaticId, options);
+		return new ModelDecorationOptions(options);
 	}
 
 	public static createDynamic(options: model.IModelDecorationOptions): ModelDecorationOptions {
-		return new ModelDecorationOptions(0, options);
+		return new ModelDecorationOptions(options);
 	}
 
-	readonly staticId: number;
 	readonly stickiness: model.TrackedRangeStickiness;
+	readonly zIndex: number;
 	readonly className: string;
 	readonly hoverMessage: IMarkdownString | IMarkdownString[];
 	readonly glyphMarginHoverMessage: IMarkdownString | IMarkdownString[];
@@ -2614,9 +2612,9 @@ export class ModelDecorationOptions implements model.IModelDecorationOptions {
 	readonly beforeContentClassName: string;
 	readonly afterContentClassName: string;
 
-	private constructor(staticId: number, options: model.IModelDecorationOptions) {
-		this.staticId = staticId;
+	private constructor(options: model.IModelDecorationOptions) {
 		this.stickiness = options.stickiness || model.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges;
+		this.zIndex = options.zIndex || 0;
 		this.className = options.className ? cleanClassName(options.className) : strings.empty;
 		this.hoverMessage = options.hoverMessage || [];
 		this.glyphMarginHoverMessage = options.glyphMarginHoverMessage || [];

src/vs/editor/common/services/modelServiceImpl.ts

@@ -118,26 +118,31 @@ class ModelMarkerHandler {
 		let className: string;
 		let color: ThemeColor;
 		let darkColor: ThemeColor;
+		let zIndex: number;
 
 		switch (marker.severity) {
 			case MarkerSeverity.Hint:
 				className = ClassName.EditorHintDecoration;
+				zIndex = 0;
 				break;
 			case MarkerSeverity.Warning:
 				className = ClassName.EditorWarningDecoration;
 				color = themeColorFromId(overviewRulerWarning);
 				darkColor = themeColorFromId(overviewRulerWarning);
+				zIndex = 20;
 				break;
 			case MarkerSeverity.Info:
 				className = ClassName.EditorInfoDecoration;
 				color = themeColorFromId(overviewRulerInfo);
 				darkColor = themeColorFromId(overviewRulerInfo);
+				zIndex = 10;
 				break;
 			case MarkerSeverity.Error:
 			default:
 				className = ClassName.EditorErrorDecoration;
 				color = themeColorFromId(overviewRulerError);
 				darkColor = themeColorFromId(overviewRulerError);
+				zIndex = 30;
 				break;
 		}
 
@@ -177,7 +182,8 @@ class ModelMarkerHandler {
 				color,
 				darkColor,
 				position: OverviewRulerLane.Right
-			}
+			},
+			zIndex
 		};
 	}
 }

src/vs/monaco.d.ts

@@ -1193,6 +1193,11 @@ declare namespace monaco.editor {
 		 * Should the decoration expand to encompass a whole line.
 		 */
 		isWholeLine?: boolean;
+		/**
+		 * Specifies the stack order of a decoration.
+		 * A decoration with greater stack order is always in front of a decoration with a lower stack order.
+		 */
+		zIndex?: number;
 		/**
 		 * If set, render this decoration in the overview ruler.
 		 */