Merge pull request #46029 from gizm0bill/46027_fix_guides_display

Fixes #46027 by using box-shadow css to render guides

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

@@ -9,4 +9,6 @@
 */
 .monaco-editor .lines-content .cigr {
 	position: absolute;
+	--box-shadow-color: rgba(0, 0, 0, 0);
+	box-shadow: 1px 0 0 0 var(--box-shadow-color) inset;
 }

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

@@ -12,7 +12,6 @@ import { RenderingContext } from 'vs/editor/common/view/renderingContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorIndentGuides } from 'vs/editor/common/view/editorColorRegistry';
-import * as dom from 'vs/base/browser/dom';
 import { Position } from 'vs/editor/common/core/position';
 
 export class IndentGuidesOverlay extends DynamicViewOverlay {
@@ -94,7 +93,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
 		const tabSize = this._context.model.getTabSize();
 		const tabWidth = tabSize * this._spaceWidth;
 		const lineHeight = this._lineHeight;
-		const indentGuideWidth = dom.computeScreenAwareSize(1);
+		const indentGuideWidth = tabWidth;
 
 		const indents = this._context.model.getLinesIndentGuides(visibleStartLineNumber, visibleEndLineNumber);
 
@@ -131,6 +130,6 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
 registerThemingParticipant((theme, collector) => {
 	let editorGuideColor = theme.getColor(editorIndentGuides);
 	if (editorGuideColor) {
-		collector.addRule(`.monaco-editor .lines-content .cigr { background-color: ${editorGuideColor}; }`);
+		collector.addRule(`.monaco-editor .lines-content .cigr { --box-shadow-color: ${editorGuideColor}; }`);
 	}
 });

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

@@ -6,4 +6,6 @@
 .monaco-editor .view-ruler {
 	position: absolute;
 	top: 0;
+	--box-shadow-color: rgba(0, 0, 0, 0);
+	box-shadow: 1px 0 0 0 var(--box-shadow-color) inset;
 }
\ No newline at end of file

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

@@ -13,7 +13,6 @@ import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/v
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorRuler } from 'vs/editor/common/view/editorColorRegistry';
-import * as dom from 'vs/base/browser/dom';
 
 export class Rulers extends ViewPart {
 
@@ -67,7 +66,7 @@ export class Rulers extends ViewPart {
 		}
 
 		if (currentCount < desiredCount) {
-			const rulerWidth = dom.computeScreenAwareSize(1);
+			const rulerWidth = this._context.model.getTabSize();
 			let addCount = desiredCount - currentCount;
 			while (addCount > 0) {
 				let node = createFastDomNode(document.createElement('div'));
@@ -104,6 +103,6 @@ export class Rulers extends ViewPart {
 registerThemingParticipant((theme, collector) => {
 	let rulerColor = theme.getColor(editorRuler);
 	if (rulerColor) {
-		collector.addRule(`.monaco-editor .view-ruler { background-color: ${rulerColor}; }`);
+		collector.addRule(`.monaco-editor .view-ruler { --box-shadow-color: ${rulerColor}; }`);
 	}
 });