Fixes #9634: Set rulers width with a value that maximizez the likelihood that...

Fixes #9634: Set rulers width with a value that maximizez the likelihood that all rulers are rendered with equal screen width

src/vs/base/browser/dom.ts

@@ -1041,3 +1041,16 @@ export function domContentLoaded(): TPromise<any> {
 		}
 	});
 }
+
+/**
+ * Find a value usable for a dom node size such that the likelihood that it would be
+ * displayed with constant screen pixels size is as high as possible.
+ *
+ * e.g. We would desire for the cursors to be 2px (CSS px) wide. Under a devicePixelRatio
+ * of 1.25, the cursor will be 2.5 screen pixels wide. Depending on how the dom node aligns/"snaps"
+ * with the screen pixels, it will sometimes be rendered with 2 screen pixels, and sometimes with 3 screen pixels.
+ */
+export function computeScreenAwareSize(cssPx: number): number {
+	const screenPx = window.devicePixelRatio * cssPx;
+	return Math.max(1, Math.floor(screenPx)) / window.devicePixelRatio;
+}

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

@@ -5,6 +5,5 @@
 
 .monaco-editor .view-ruler {
 	position: absolute;
-	width: 1px;
 	top: 0;
 }
\ No newline at end of file

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

@@ -13,6 +13,7 @@ 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 {
 
@@ -69,11 +70,12 @@ export class Rulers extends ViewPart {
 		}
 
 		if (currentCount < desiredCount) {
-			// Add more rulers
+			const rulerWidth = dom.computeScreenAwareSize(1);
 			let addCount = desiredCount - currentCount;
 			while (addCount > 0) {
 				let node = createFastDomNode(document.createElement('div'));
 				node.setClassName('view-ruler');
+				node.setWidth(rulerWidth);
 				this.domNode.appendChild(node);
 				this._renderedRulers.push(node);
 				addCount--;