Merge pull request microsoft#153968 from chengluyu/main

Support variable fonts (microsoft#153291)

Author: hediet

src/vs/base/browser/fastDomNode.ts

@@ -21,6 +21,7 @@ export class FastDomNode<T extends HTMLElement> {
 	private _fontSize: string = '';
 	private _fontStyle: string = '';
 	private _fontFeatureSettings: string = '';
+	private _fontVariationSettings: string = '';
 	private _textDecoration: string = '';
 	private _lineHeight: string = '';
 	private _letterSpacing: string = '';
@@ -178,6 +179,14 @@ export class FastDomNode<T extends HTMLElement> {
 		this.domNode.style.fontFeatureSettings = this._fontFeatureSettings;
 	}
 
+	public setFontVariationSettings(fontVariationSettings: string): void {
+		if (this._fontVariationSettings === fontVariationSettings) {
+			return;
+		}
+		this._fontVariationSettings = fontVariationSettings;
+		this.domNode.style.fontVariationSettings = this._fontVariationSettings;
+	}
+
 	public setTextDecoration(textDecoration: string): void {
 		if (this._textDecoration === textDecoration) {
 			return;

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

@@ -12,13 +12,15 @@ export function applyFontInfo(domNode: FastDomNode<HTMLElement> | HTMLElement, f
 		domNode.setFontWeight(fontInfo.fontWeight);
 		domNode.setFontSize(fontInfo.fontSize);
 		domNode.setFontFeatureSettings(fontInfo.fontFeatureSettings);
+		domNode.setFontVariationSettings(fontInfo.fontVariationSettings);
 		domNode.setLineHeight(fontInfo.lineHeight);
 		domNode.setLetterSpacing(fontInfo.letterSpacing);
 	} else {
 		domNode.style.fontFamily = fontInfo.getMassagedFontFamily();
 		domNode.style.fontWeight = fontInfo.fontWeight;
 		domNode.style.fontSize = fontInfo.fontSize + 'px';
 		domNode.style.fontFeatureSettings = fontInfo.fontFeatureSettings;
+		domNode.style.fontVariationSettings = fontInfo.fontVariationSettings;
 		domNode.style.lineHeight = fontInfo.lineHeight + 'px';
 		domNode.style.letterSpacing = fontInfo.letterSpacing + 'px';
 	}

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

@@ -20,6 +20,7 @@ export interface ISerializedFontInfo {
 	readonly fontWeight: string;
 	readonly fontSize: number;
 	readonly fontFeatureSettings: string;
+	readonly fontVariationSettings: string;
 	readonly lineHeight: number;
 	readonly letterSpacing: number;
 	readonly isMonospace: boolean;
@@ -128,6 +129,7 @@ export class FontMeasurementsImpl extends Disposable {
 					fontWeight: readConfig.fontWeight,
 					fontSize: readConfig.fontSize,
 					fontFeatureSettings: readConfig.fontFeatureSettings,
+					fontVariationSettings: readConfig.fontVariationSettings,
 					lineHeight: readConfig.lineHeight,
 					letterSpacing: readConfig.letterSpacing,
 					isMonospace: readConfig.isMonospace,
@@ -219,6 +221,7 @@ export class FontMeasurementsImpl extends Disposable {
 			fontWeight: bareFontInfo.fontWeight,
 			fontSize: bareFontInfo.fontSize,
 			fontFeatureSettings: bareFontInfo.fontFeatureSettings,
+			fontVariationSettings: bareFontInfo.fontVariationSettings,
 			lineHeight: bareFontInfo.lineHeight,
 			letterSpacing: bareFontInfo.letterSpacing,
 			isMonospace: isMonospace,

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

@@ -231,6 +231,11 @@ export interface IEditorOptions {
 	 * Defaults to false.
 	 */
 	fontLigatures?: boolean | string;
+	/**
+	 * Enable font variations.
+	 * Defaults to false.
+	 */
+	fontVariations?: boolean | string;
 	/**
 	 * Disable the use of `transform: translate3d(0px, 0px, 0px)` for the editor margin and lines layers.
 	 * The usage of `transform: translate3d(0px, 0px, 0px)` acts as a hint for browsers to create an extra layer.
@@ -1649,6 +1654,66 @@ export class EditorFontFamily extends BaseEditorOption<EditorOption.fontFamily,
 
 //#endregion
 
+//#region fontVariations
+
+/**
+ * @internal
+ */
+export class EditorFontVariations extends BaseEditorOption<EditorOption.fontVariations, boolean | string, string> {
+	// Text is laid out using default settings.
+	public static OFF = 'normal';
+
+	// Translate `fontWeight` config to the `font-variation-settings` CSS property.
+	public static TRANSLATE = 'translate';
+
+	constructor() {
+		super(
+			EditorOption.fontVariations, 'fontVariations', EditorFontVariations.OFF,
+			{
+				anyOf: [
+					{
+						type: 'boolean',
+						description: nls.localize('fontVariations', "Enables/Disables the translation from font-weight to font-variation-settings. Change this to a string for fine-grained control of the 'font-variation-settings' CSS property."),
+					},
+					{
+						type: 'string',
+						description: nls.localize('fontVariationSettings', "Explicit 'font-variation-settings' CSS property. A boolean can be passed instead if one only needs to translate font-weight to font-variation-settings.")
+					}
+				],
+				description: nls.localize('fontVariationsGeneral', "Configures font variations. Can be either a boolean to enable/disable the translation from font-weight to font-variation-settings or a string for the value of the CSS 'font-variation-settings' property."),
+				default: false
+			}
+		);
+	}
+
+	public validate(input: any): string {
+		if (typeof input === 'undefined') {
+			return this.defaultValue;
+		}
+		if (typeof input === 'string') {
+			if (input === 'false') {
+				return EditorFontVariations.OFF;
+			}
+			if (input === 'true') {
+				return EditorFontVariations.TRANSLATE;
+			}
+			return input;
+		}
+		if (Boolean(input)) {
+			return EditorFontVariations.TRANSLATE;
+		}
+		return EditorFontVariations.OFF;
+	}
+
+	public override compute(env: IEnvironmentalOptions, options: IComputedEditorOptions, value: string): string {
+		// The value is computed from the fontWeight if it is true.
+		// So take the result from env.fontInfo
+		return env.fontInfo.fontVariationSettings;
+	}
+}
+
+//#endregion
+
 //#region fontInfo
 
 class EditorFontInfo extends ComputedEditorOption<EditorOption.fontInfo, FontInfo> {
@@ -4709,6 +4774,7 @@ export const enum EditorOption {
 	fontLigatures,
 	fontSize,
 	fontWeight,
+	fontVariations,
 	formatOnPaste,
 	formatOnType,
 	glyphMargin,
@@ -5057,6 +5123,7 @@ export const EditorOptions = {
 	fontLigatures2: register(new EditorFontLigatures()),
 	fontSize: register(new EditorFontSize()),
 	fontWeight: register(new EditorFontWeight()),
+	fontVariations: register(new EditorFontVariations()),
 	formatOnPaste: register(new EditorBooleanOption(
 		EditorOption.formatOnPaste, 'formatOnPaste', false,
 		{ description: nls.localize('formatOnPaste', "Controls whether the editor should automatically format the pasted content. A formatter must be available and the formatter should be able to format a range in a document.") }

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as platform from 'vs/base/common/platform';
-import { EditorOptions, EditorOption, FindComputedEditorOptionValueById, EDITOR_FONT_DEFAULTS } from 'vs/editor/common/config/editorOptions';
+import { EditorFontVariations, EditorOptions, EditorOption, FindComputedEditorOptionValueById, EDITOR_FONT_DEFAULTS } from 'vs/editor/common/config/editorOptions';
 import { EditorZoom } from 'vs/editor/common/config/editorZoom';
 
 /**
@@ -36,28 +36,30 @@ export class BareFontInfo {
 		const fontWeight = options.get(EditorOption.fontWeight);
 		const fontSize = options.get(EditorOption.fontSize);
 		const fontFeatureSettings = options.get(EditorOption.fontLigatures);
+		const fontVariationSettings = options.get(EditorOption.fontVariations);
 		const lineHeight = options.get(EditorOption.lineHeight);
 		const letterSpacing = options.get(EditorOption.letterSpacing);
-		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, pixelRatio, ignoreEditorZoom);
+		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, fontVariationSettings, lineHeight, letterSpacing, pixelRatio, ignoreEditorZoom);
 	}
 
 	/**
 	 * @internal
 	 */
-	public static createFromRawSettings(opts: { fontFamily?: string | string[]; fontWeight?: string; fontSize?: number; fontLigatures?: boolean | string; lineHeight?: number; letterSpacing?: number }, pixelRatio: number, ignoreEditorZoom: boolean = false): BareFontInfo {
+	public static createFromRawSettings(opts: { fontFamily?: string | string[]; fontWeight?: string; fontSize?: number; fontLigatures?: boolean | string; fontVariations?: boolean | string; lineHeight?: number; letterSpacing?: 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 fontVariationSettings = EditorOptions.fontVariations.validate(opts.fontVariations);
 		const lineHeight = EditorOptions.lineHeight.validate(opts.lineHeight);
 		const letterSpacing = EditorOptions.letterSpacing.validate(opts.letterSpacing);
-		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, lineHeight, letterSpacing, pixelRatio, ignoreEditorZoom);
+		return BareFontInfo._create(fontFamily, fontWeight, fontSize, fontFeatureSettings, fontVariationSettings, lineHeight, letterSpacing, pixelRatio, ignoreEditorZoom);
 	}
 
 	/**
 	 * @internal
 	 */
-	private static _create(fontFamily: string, fontWeight: string, fontSize: number, fontFeatureSettings: string, lineHeight: number, letterSpacing: number, pixelRatio: number, ignoreEditorZoom: boolean): BareFontInfo {
+	private static _create(fontFamily: string, fontWeight: string, fontSize: number, fontFeatureSettings: string, fontVariationSettings: string, lineHeight: number, letterSpacing: number, pixelRatio: number, ignoreEditorZoom: boolean): BareFontInfo {
 		if (lineHeight === 0) {
 			lineHeight = GOLDEN_LINE_HEIGHT_RATIO * fontSize;
 		} else if (lineHeight < MINIMUM_LINE_HEIGHT) {
@@ -75,12 +77,23 @@ export class BareFontInfo {
 		fontSize *= editorZoomLevelMultiplier;
 		lineHeight *= editorZoomLevelMultiplier;
 
+		if (fontVariationSettings === EditorFontVariations.TRANSLATE) {
+			if (fontWeight === 'normal' || fontWeight === 'bold') {
+				fontVariationSettings = EditorFontVariations.OFF;
+			} else {
+				const fontWeightAsNumber = parseInt(fontWeight, 10);
+				fontVariationSettings = `'wght' ${fontWeightAsNumber}`;
+				fontWeight = 'normal';
+			}
+		}
+
 		return new BareFontInfo({
 			pixelRatio: pixelRatio,
 			fontFamily: fontFamily,
 			fontWeight: fontWeight,
 			fontSize: fontSize,
 			fontFeatureSettings: fontFeatureSettings,
+			fontVariationSettings,
 			lineHeight: lineHeight,
 			letterSpacing: letterSpacing
 		});
@@ -91,6 +104,7 @@ export class BareFontInfo {
 	readonly fontWeight: string;
 	readonly fontSize: number;
 	readonly fontFeatureSettings: string;
+	readonly fontVariationSettings: string;
 	readonly lineHeight: number;
 	readonly letterSpacing: number;
 
@@ -103,6 +117,7 @@ export class BareFontInfo {
 		fontWeight: string;
 		fontSize: number;
 		fontFeatureSettings: string;
+		fontVariationSettings: string;
 		lineHeight: number;
 		letterSpacing: number;
 	}) {
@@ -111,6 +126,7 @@ export class BareFontInfo {
 		this.fontWeight = String(opts.fontWeight);
 		this.fontSize = opts.fontSize;
 		this.fontFeatureSettings = opts.fontFeatureSettings;
+		this.fontVariationSettings = opts.fontVariationSettings;
 		this.lineHeight = opts.lineHeight | 0;
 		this.letterSpacing = opts.letterSpacing;
 	}
@@ -119,7 +135,7 @@ export class BareFontInfo {
 	 * @internal
 	 */
 	public getId(): string {
-		return `${this.pixelRatio}-${this.fontFamily}-${this.fontWeight}-${this.fontSize}-${this.fontFeatureSettings}-${this.lineHeight}-${this.letterSpacing}`;
+		return `${this.pixelRatio}-${this.fontFamily}-${this.fontWeight}-${this.fontSize}-${this.fontFeatureSettings}-${this.fontVariationSettings}-${this.lineHeight}-${this.letterSpacing}`;
 	}
 
 	/**
@@ -148,7 +164,7 @@ export class BareFontInfo {
 }
 
 // change this whenever `FontInfo` members are changed
-export const SERIALIZED_FONT_INFO_VERSION = 1;
+export const SERIALIZED_FONT_INFO_VERSION = 2;
 
 export class FontInfo extends BareFontInfo {
 	readonly _editorStylingBrand: void = undefined;
@@ -173,6 +189,7 @@ export class FontInfo extends BareFontInfo {
 		fontWeight: string;
 		fontSize: number;
 		fontFeatureSettings: string;
+		fontVariationSettings: string;
 		lineHeight: number;
 		letterSpacing: number;
 		isMonospace: boolean;
@@ -205,6 +222,7 @@ export class FontInfo extends BareFontInfo {
 			&& this.fontWeight === other.fontWeight
 			&& this.fontSize === other.fontSize
 			&& this.fontFeatureSettings === other.fontFeatureSettings
+			&& this.fontVariationSettings === other.fontVariationSettings
 			&& this.lineHeight === other.lineHeight
 			&& this.letterSpacing === other.letterSpacing
 			&& this.typicalHalfwidthCharacterWidth === other.typicalHalfwidthCharacterWidth