Fixes microsoft/monaco-editor#2276: Check pixel ratio after each render

src/vs/editor/browser/config/configuration.ts

@@ -12,7 +12,7 @@ import { CharWidthRequest, CharWidthRequestType, readCharWidths } from 'vs/edito
 import { ElementSizeObserver } from 'vs/editor/browser/config/elementSizeObserver';
 import { CommonEditorConfiguration, IEnvConfiguration } from 'vs/editor/common/config/commonEditorConfig';
 import { EditorOption, EditorFontLigatures } from 'vs/editor/common/config/editorOptions';
-import { BareFontInfo, FontInfo } from 'vs/editor/common/config/fontInfo';
+import { BareFontInfo, FontInfo, SERIALIZED_FONT_INFO_VERSION } from 'vs/editor/common/config/fontInfo';
 import { IDimension } from 'vs/editor/common/editorCommon';
 import { IAccessibilityService, AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
 import { IEditorConstructionOptions } from 'vs/editor/browser/editorBrowser';
@@ -76,11 +76,13 @@ export function serializeFontInfo(): ISerializedFontInfo[] | null {
 }
 
 export interface ISerializedFontInfo {
+	readonly version: number;
 	readonly zoomLevel: number;
+	readonly pixelRatio: number;
 	readonly fontFamily: string;
 	readonly fontWeight: string;
 	readonly fontSize: number;
-	fontFeatureSettings: string;
+	readonly fontFeatureSettings: string;
 	readonly lineHeight: number;
 	readonly letterSpacing: number;
 	readonly isMonospace: boolean;
@@ -88,8 +90,8 @@ export interface ISerializedFontInfo {
 	readonly typicalFullwidthCharacterWidth: number;
 	readonly canUseHalfwidthRightwardsArrow: boolean;
 	readonly spaceWidth: number;
-	middotWidth: number;
-	wsmiddotWidth: number;
+	readonly middotWidth: number;
+	readonly wsmiddotWidth: number;
 	readonly maxDigitWidth: number;
 }
 
@@ -158,10 +160,10 @@ class CSSBasedConfiguration extends Disposable {
 		// Take all the saved font info and insert them in the cache without the trusted flag.
 		// The reason for this is that a font might have been installed on the OS in the meantime.
 		for (const savedFontInfo of savedFontInfos) {
-			// compatibility with older versions of VS Code which did not store this...
-			savedFontInfo.fontFeatureSettings = savedFontInfo.fontFeatureSettings || EditorFontLigatures.OFF;
-			savedFontInfo.middotWidth = savedFontInfo.middotWidth || savedFontInfo.spaceWidth;
-			savedFontInfo.wsmiddotWidth = savedFontInfo.wsmiddotWidth || savedFontInfo.spaceWidth;
+			if (savedFontInfo.version !== SERIALIZED_FONT_INFO_VERSION) {
+				// cannot use older version
+				continue;
+			}
 			const fontInfo = new FontInfo(savedFontInfo, false);
 			this._writeToCache(fontInfo, fontInfo);
 		}
@@ -175,6 +177,7 @@ class CSSBasedConfiguration extends Disposable {
 				// Hey, it's Bug 14341 ... we couldn't read
 				readConfig = new FontInfo({
 					zoomLevel: browser.getZoomLevel(),
+					pixelRatio: browser.getPixelRatio(),
 					fontFamily: readConfig.fontFamily,
 					fontWeight: readConfig.fontWeight,
 					fontSize: readConfig.fontSize,
@@ -287,6 +290,7 @@ class CSSBasedConfiguration extends Disposable {
 		const canTrustBrowserZoomLevel = (browser.getTimeSinceLastZoomLevelChanged() > 2000);
 		return new FontInfo({
 			zoomLevel: browser.getZoomLevel(),
+			pixelRatio: browser.getPixelRatio(),
 			fontFamily: bareFontInfo.fontFamily,
 			fontWeight: bareFontInfo.fontWeight,
 			fontSize: bareFontInfo.fontSize,
@@ -353,6 +357,10 @@ export class Configuration extends CommonEditorConfiguration {
 		this._elementSizeObserver.observe(dimension);
 	}
 
+	public updatePixelRatio(): void {
+		this._recomputeOptions();
+	}
+
 	private static _getExtraEditorClassName(): string {
 		let extra = '';
 		if (!browser.isSafari && !browser.isWebkitWebView) {

src/vs/editor/browser/view/viewImpl.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as dom from 'vs/base/browser/dom';
+import * as browser from 'vs/base/browser/browser';
 import { Selection } from 'vs/editor/common/core/selection';
 import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -65,6 +66,7 @@ export class View extends ViewEventHandler {
 
 	private readonly _scrollbar: EditorScrollbar;
 	private readonly _context: ViewContext;
+	private _configPixelRatio: number;
 	private _selections: Selection[];
 
 	// The view lines
@@ -104,6 +106,7 @@ export class View extends ViewEventHandler {
 
 		// The view context is passed on to most classes (basically to reduce param. counts in ctors)
 		this._context = new ViewContext(configuration, themeService.getColorTheme(), model);
+		this._configPixelRatio = this._configPixelRatio = this._context.configuration.options.get(EditorOption.pixelRatio);
 
 		// Ensure the view is the first event handler in order to update the layout
 		this._context.addEventHandler(this);
@@ -298,6 +301,7 @@ export class View extends ViewEventHandler {
 		this._scheduleRender();
 	}
 	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
+		this._configPixelRatio = this._context.configuration.options.get(EditorOption.pixelRatio);
 		this.domNode.setClassName(this._getEditorClassName());
 		this._applyLayout();
 		return false;
@@ -408,6 +412,12 @@ export class View extends ViewEventHandler {
 			viewPart.render(renderingContext);
 			viewPart.onDidRender();
 		}
+
+		// Try to detect browser zooming and paint again if necessary
+		if (Math.abs(browser.getPixelRatio() - this._configPixelRatio) > 0.001) {
+			// looks like the pixel ratio has changed
+			this._context.configuration.updatePixelRatio();
+		}
 	}
 
 	// --- BEGIN CodeEditor helpers

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

@@ -318,6 +318,9 @@ export abstract class CommonEditorConfiguration extends Disposable implements IC
 	public observeReferenceElement(dimension?: IDimension): void {
 	}
 
+	public updatePixelRatio(): void {
+	}
+
 	protected _recomputeOptions(): void {
 		const oldOptions = this.options;
 		const newOptions = this._computeInternalOptions();
@@ -344,7 +347,7 @@ export abstract class CommonEditorConfiguration extends Disposable implements IC
 
 	private _computeInternalOptions(): ComputedEditorOptions {
 		const partialEnv = this._getEnvConfiguration();
-		const bareFontInfo = BareFontInfo.createFromValidatedSettings(this._validatedOptions, partialEnv.zoomLevel, this.isSimpleWidget);
+		const bareFontInfo = BareFontInfo.createFromValidatedSettings(this._validatedOptions, partialEnv.zoomLevel, partialEnv.pixelRatio, this.isSimpleWidget);
 		const env: IEnvironmentalOptions = {
 			memory: this._computeOptionsMemory,
 			outerWidth: partialEnv.outerWidth,

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

@@ -24,33 +24,33 @@ export class BareFontInfo {
 	/**
 	 * @internal
 	 */
-	public static createFromValidatedSettings(options: ValidatedEditorOptions, zoomLevel: number, ignoreEditorZoom: boolean): BareFontInfo {
+	public static createFromValidatedSettings(options: ValidatedEditorOptions, zoomLevel: number, pixelRatio: number, ignoreEditorZoom: boolean): BareFontInfo {
 		const fontFamily = options.get(EditorOption.fontFamily);
 		const fontWeight = options.get(EditorOption.fontWeight);
 		const fontSize = options.get(EditorOption.fontSize);
 		const fontFeatureSettings = options.get(EditorOption.fontLigatures);
 		const lineHeight = options.get(EditorOption.lineHeight);
 		const letterSpacing = options.get(EditorOption.letterSpacing);
-		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, zoomLevel, ignoreEditorZoom);
+		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, zoomLevel, pixelRatio, ignoreEditorZoom);
 	}
 
 	/**
 	 * @internal
 	 */
-	public static createFromRawSettings(opts: { fontFamily?: string; fontWeight?: string; fontSize?: number; fontLigatures?: boolean | string; lineHeight?: number; letterSpacing?: number; }, zoomLevel: number, ignoreEditorZoom: boolean = false): BareFontInfo {
+	public static createFromRawSettings(opts: { fontFamily?: string; fontWeight?: string; fontSize?: number; fontLigatures?: boolean | string; lineHeight?: number; letterSpacing?: number; }, zoomLevel: number, pixelRatio: number, ignoreEditorZoom: boolean = false): BareFontInfo {
 		const fontFamily = EditorOptions.fontFamily.validate(opts.fontFamily);
 		const fontWeight = EditorOptions.fontWeight.validate(opts.fontWeight);
 		const fontSize = EditorOptions.fontSize.validate(opts.fontSize);
 		const fontFeatureSettings = EditorOptions.fontLigatures2.validate(opts.fontLigatures);
 		const lineHeight = EditorOptions.lineHeight.validate(opts.lineHeight);
 		const letterSpacing = EditorOptions.letterSpacing.validate(opts.letterSpacing);
-		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, zoomLevel, ignoreEditorZoom);
+		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, zoomLevel, pixelRatio, ignoreEditorZoom);
 	}
 
 	/**
 	 * @internal
 	 */
-	private static _create(fontFamily: string, fontWeight: string, fontSize: number, fontFeatureSettings: string, lineHeight: number, letterSpacing: number, zoomLevel: number, ignoreEditorZoom: boolean): BareFontInfo {
+	private static _create(fontFamily: string, fontWeight: string, fontSize: number, fontFeatureSettings: string, lineHeight: number, letterSpacing: number, zoomLevel: number, pixelRatio: number, ignoreEditorZoom: boolean): BareFontInfo {
 		if (lineHeight === 0) {
 			lineHeight = Math.round(GOLDEN_LINE_HEIGHT_RATIO * fontSize);
 		} else if (lineHeight < MINIMUM_LINE_HEIGHT) {
@@ -63,6 +63,7 @@ export class BareFontInfo {
 
 		return new BareFontInfo({
 			zoomLevel: zoomLevel,
+			pixelRatio: pixelRatio,
 			fontFamily: fontFamily,
 			fontWeight: fontWeight,
 			fontSize: fontSize,
@@ -73,6 +74,7 @@ export class BareFontInfo {
 	}
 
 	readonly zoomLevel: number;
+	readonly pixelRatio: number;
 	readonly fontFamily: string;
 	readonly fontWeight: string;
 	readonly fontSize: number;
@@ -85,6 +87,7 @@ export class BareFontInfo {
 	 */
 	protected constructor(opts: {
 		zoomLevel: number;
+		pixelRatio: number;
 		fontFamily: string;
 		fontWeight: string;
 		fontSize: number;
@@ -93,6 +96,7 @@ export class BareFontInfo {
 		letterSpacing: number;
 	}) {
 		this.zoomLevel = opts.zoomLevel;
+		this.pixelRatio = opts.pixelRatio;
 		this.fontFamily = String(opts.fontFamily);
 		this.fontWeight = String(opts.fontWeight);
 		this.fontSize = opts.fontSize;
@@ -105,7 +109,7 @@ export class BareFontInfo {
 	 * @internal
 	 */
 	public getId(): string {
-		return this.zoomLevel + '-' + this.fontFamily + '-' + this.fontWeight + '-' + this.fontSize + '-' + this.fontFeatureSettings + '-' + this.lineHeight + '-' + this.letterSpacing;
+		return this.zoomLevel + '-' + this.pixelRatio + '-' + this.fontFamily + '-' + this.fontWeight + '-' + this.fontSize + '-' + this.fontFeatureSettings + '-' + this.lineHeight + '-' + this.letterSpacing;
 	}
 
 	/**
@@ -125,9 +129,13 @@ export class BareFontInfo {
 	}
 }
 
+// change this whenever `FontInfo` members are changed
+export const SERIALIZED_FONT_INFO_VERSION = 1;
+
 export class FontInfo extends BareFontInfo {
 	readonly _editorStylingBrand: void;
 
+	readonly version: number = SERIALIZED_FONT_INFO_VERSION;
 	readonly isTrusted: boolean;
 	readonly isMonospace: boolean;
 	readonly typicalHalfwidthCharacterWidth: number;
@@ -143,6 +151,7 @@ export class FontInfo extends BareFontInfo {
 	 */
 	constructor(opts: {
 		zoomLevel: number;
+		pixelRatio: number;
 		fontFamily: string;
 		fontWeight: string;
 		fontSize: number;

src/vs/editor/common/editorCommon.ts

@@ -160,6 +160,7 @@ export interface IConfiguration extends IDisposable {
 	updateOptions(newOptions: Readonly<IEditorOptions>): void;
 	getRawOptions(): IEditorOptions;
 	observeReferenceElement(dimension?: IDimension): void;
+	updatePixelRatio(): void;
 	setIsDominatedByLongLines(isDominatedByLongLines: boolean): void;
 }
 

src/vs/editor/test/common/mocks/testConfiguration.ts

@@ -30,6 +30,7 @@ export class TestConfiguration extends CommonEditorConfiguration {
 	protected readConfiguration(styling: BareFontInfo): FontInfo {
 		return new FontInfo({
 			zoomLevel: 0,
+			pixelRatio: 1,
 			fontFamily: 'mockFont',
 			fontWeight: 'normal',
 			fontSize: 14,

src/vs/editor/test/common/viewModel/monospaceLineBreaksComputer.test.ts

@@ -47,6 +47,7 @@ function toAnnotatedText(text: string, lineBreakData: LineBreakData | null): str
 function getLineBreakData(factory: ILineBreaksComputerFactory, tabSize: number, breakAfter: number, columnsForFullWidthChar: number, wrappingIndent: WrappingIndent, text: string, previousLineBreakData: LineBreakData | null): LineBreakData | null {
 	const fontInfo = new FontInfo({
 		zoomLevel: 0,
+		pixelRatio: 1,
 		fontFamily: 'testFontFamily',
 		fontWeight: 'normal',
 		fontSize: 14,

src/vs/monaco.d.ts

@@ -4949,6 +4949,7 @@ declare namespace monaco.editor {
 
 	export class FontInfo extends BareFontInfo {
 		readonly _editorStylingBrand: void;
+		readonly version: number;
 		readonly isTrusted: boolean;
 		readonly isMonospace: boolean;
 		readonly typicalHalfwidthCharacterWidth: number;
@@ -4963,6 +4964,7 @@ declare namespace monaco.editor {
 	export class BareFontInfo {
 		readonly _bareFontInfoBrand: void;
 		readonly zoomLevel: number;
+		readonly pixelRatio: number;
 		readonly fontFamily: string;
 		readonly fontWeight: string;
 		readonly fontSize: number;

src/vs/workbench/browser/workbench.ts

@@ -8,7 +8,7 @@ import 'vs/workbench/browser/style';
 import { localize } from 'vs/nls';
 import { Emitter, setGlobalLeakWarningThreshold } from 'vs/base/common/event';
 import { runWhenIdle } from 'vs/base/common/async';
-import { getZoomLevel, isFirefox, isSafari, isChrome } from 'vs/base/browser/browser';
+import { getZoomLevel, isFirefox, isSafari, isChrome, getPixelRatio } from 'vs/base/browser/browser';
 import { mark } from 'vs/base/common/performance';
 import { onUnexpectedError, setUnexpectedErrorHandler } from 'vs/base/common/errors';
 import { Registry } from 'vs/platform/registry/common/platform';
@@ -284,7 +284,7 @@ export class Workbench extends Layout {
 			}
 		}
 
-		readFontInfo(BareFontInfo.createFromRawSettings(configurationService.getValue('editor'), getZoomLevel()));
+		readFontInfo(BareFontInfo.createFromRawSettings(configurationService.getValue('editor'), getZoomLevel(), getPixelRatio()));
 	}
 
 	private storeFontInfo(storageService: IStorageService): void {

src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffEditor.ts

@@ -23,7 +23,7 @@ import { INotebookEditorWorkerService } from 'vs/workbench/contrib/notebook/comm
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { BareFontInfo } from 'vs/editor/common/config/fontInfo';
-import { getZoomLevel } from 'vs/base/browser/browser';
+import { getPixelRatio, getZoomLevel } from 'vs/base/browser/browser';
 import { NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
 import { DIFF_CELL_MARGIN, INotebookTextDiffEditor } from 'vs/workbench/contrib/notebook/browser/diff/common';
 import { Emitter } from 'vs/base/common/event';
@@ -75,7 +75,7 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 	) {
 		super(NotebookTextDiffEditor.ID, telemetryService, themeService, storageService);
 		const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
-		this._fontInfo = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel());
+		this._fontInfo = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel(), getPixelRatio());
 		this._revealFirst = true;
 
 		this._register(this._modifiedResourceDisposableStore);

src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { getZoomLevel } from 'vs/base/browser/browser';
+import { getPixelRatio, getZoomLevel } from 'vs/base/browser/browser';
 import * as DOM from 'vs/base/browser/dom';
 import * as strings from 'vs/base/common/strings';
 import { IMouseWheelEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -428,7 +428,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
 
 	private _generateFontInfo(): void {
 		const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
-		this._fontInfo = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel());
+		this._fontInfo = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel(), getPixelRatio());
 	}
 
 	private _createBody(parent: HTMLElement): void {

src/vs/workbench/contrib/notebook/browser/notebookServiceImpl.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { getZoomLevel } from 'vs/base/browser/browser';
+import { getPixelRatio, getZoomLevel } from 'vs/base/browser/browser';
 import { flatten } from 'vs/base/common/arrays';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { Emitter, Event } from 'vs/base/common/event';
@@ -366,7 +366,7 @@ export class NotebookService extends Disposable implements INotebookService, ICu
 							// there is a `::before` or `::after` text decoration whose position is above or below current line
 							// we at least make sure that the editor top padding is at least one line
 							const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
-							updateEditorTopPadding(BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel()).lineHeight + 2);
+							updateEditorTopPadding(BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel(), getPixelRatio()).lineHeight + 2);
 							decorationTriggeredAdjustment = true;
 							break;
 						}

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { getZoomLevel } from 'vs/base/browser/browser';
+import { getPixelRatio, getZoomLevel } from 'vs/base/browser/browser';
 import * as DOM from 'vs/base/browser/dom';
 import { domEvent } from 'vs/base/browser/event';
 import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
@@ -62,7 +62,7 @@ export class NotebookCellListDelegate implements IListVirtualDelegate<CellViewMo
 		@IConfigurationService private readonly configurationService: IConfigurationService
 	) {
 		const editorOptions = this.configurationService.getValue<IEditorOptions>('editor');
-		this.lineHeight = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel()).lineHeight;
+		this.lineHeight = BareFontInfo.createFromRawSettings(editorOptions, getZoomLevel(), getPixelRatio()).lineHeight;
 	}
 
 	getHeight(element: CellViewModel): number {

src/vs/workbench/contrib/notebook/test/testNotebookEditor.ts

@@ -291,7 +291,7 @@ export class TestNotebookEditor implements INotebookEditor {
 	getFontInfo(): BareFontInfo | undefined {
 		return BareFontInfo.createFromRawSettings({
 			fontFamily: 'Monaco',
-		}, 1, true);
+		}, 1, 1, true);
 	}
 	getOutputRenderer(): OutputRenderer {
 		throw new Error('Method not implemented.');