Defining variable fonts

extensions/typescript-language-features/src/languageFeatures/documentSymbol.ts

@@ -124,11 +124,14 @@ class TypeScriptDocumentSymbolProvider implements vscode.DocumentSymbolProvider
 	}
 }
 
+export let typeScriptDocumentSymbolProvider: TypeScriptDocumentSymbolProvider | undefined = undefined;
+
 export function register(
 	selector: DocumentSelector,
 	client: ITypeScriptServiceClient,
 	cachedResponse: CachedResponse<Proto.NavTreeResponse>,
 ) {
+	typeScriptDocumentSymbolProvider = new TypeScriptDocumentSymbolProvider(client, cachedResponse);
 	return vscode.languages.registerDocumentSymbolProvider(selector.syntax,
-		new TypeScriptDocumentSymbolProvider(client, cachedResponse), { label: 'TypeScript' });
+		typeScriptDocumentSymbolProvider, { label: 'TypeScript' });
 }

extensions/typescript-language-features/src/languageProvider.ts

@@ -19,13 +19,51 @@ import TypeScriptServiceClient from './typescriptServiceClient';
 import TypingsStatus from './ui/typingsStatus';
 import { Disposable } from './utils/dispose';
 import { isWeb, isWebAndHasSharedArrayBuffers, supportsReadableByteStreams } from './utils/platform';
+import { typeScriptDocumentSymbolProvider } from './languageFeatures/documentSymbol';
 
 
 const validateSetting = 'validate.enable';
 const suggestionSetting = 'suggestionActions.enabled';
 
 export default class LanguageProvider extends Disposable {
 
+	private readonly _classFontSizeDecorationType1: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 60, fontWeight: 'bold', fontFamily: 'Arial' });
+	private readonly _interfaceFontSizeDecorationType1: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 80, fontWeight: 'bold' }); // fontFamily: 'Times New Roman'
+	private readonly _functionFontSizeDecorationType1: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 50, fontSize: 40, fontWeight: 'italic', fontFamily: 'Courier New' });
+	private readonly _methodFontSizeDecorationType1: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 30, fontSize: 20, fontWeight: 'italic', fontFamily: 'Georgia' });
+
+	private readonly _classFontSizeDecorationType2: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 60, fontWeight: 'italic', fontFamily: 'Georgia' });
+	private readonly _interfaceFontSizeDecorationType2: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 60, fontWeight: 'italic' }); //  fontFamily: 'Arial'
+	private readonly _functionFontSizeDecorationType2: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 50, fontSize: 30, fontWeight: 'bold', fontFamily: 'Times New Roman' });
+	private readonly _methodFontSizeDecorationType2: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 30, fontSize: 10, fontWeight: 'bold', fontFamily: 'Courier New' });
+
+	private readonly _classFontSizeDecorationType3: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 20, fontWeight: 'bold', fontFamily: 'Consolas' });
+	private readonly _interfaceFontSizeDecorationType3: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 20, fontWeight: 'bold', fontFamily: 'Consolas' });
+	private readonly _functionFontSizeDecorationType3: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 50, fontSize: 20, fontWeight: 'italic', fontFamily: 'Consolas' });
+	private readonly _methodFontSizeDecorationType3: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 30, fontSize: 10, fontWeight: 'italic', fontFamily: 'Consolas' });
+
+	private readonly _classFontSizeDecorationType4: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 20, fontWeight: 'italic', fontFamily: 'Consolas' });
+	private readonly _interfaceFontSizeDecorationType4: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 70, fontSize: 20, fontWeight: 'italic', fontFamily: 'Consolas' });
+	private readonly _functionFontSizeDecorationType4: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 50, fontSize: 20, fontWeight: 'bold', fontFamily: 'Consolas' });
+	private readonly _methodFontSizeDecorationType4: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 30, fontSize: 10, fontWeight: 'bold', fontFamily: 'Consolas' });
+
+	// private readonly _classFontSizeDecorationTypeInjectedText: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ after: { contentText: 'AFTER CLASS', fontWeight: 'italic', fontFamily: 'Segoe' } });
+	// private readonly _interfaceFontSizeDecorationTypeInjectedText: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ after: { contentText: 'AFTER INTERFACE', fontWeight: 'italic', fontFamily: 'Roboto' } });
+	// private readonly _functionFontSizeDecorationTypeInjectedText: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ after: { contentText: 'AFTER FUNCTION', fontWeight: 'bold', fontFamily: 'Nunito' } });
+	// private readonly _methodFontSizeDecorationTypeInjectedText: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ after: { contentText: 'AFTER METHOD', fontWeight: 'bold', fontFamily: 'Arial' } });
+
+	// PROD CODE
+
+	// private readonly _classLineHeightDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 22 });
+	// private readonly _interfaceLineHeightDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 22 });
+	// private readonly _functionLineHeightDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 20 });
+	// private readonly _methodLineHeightDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ lineHeight: 20 });
+
+	// private readonly _classFontSizeDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ fontSize: 20 });
+	// private readonly _interfaceFontSizeDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ fontSize: 20 });
+	// private readonly _functionFontSizeDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ fontSize: 18 });
+	// private readonly _methodFontSizeDecorationType: vscode.TextEditorDecorationType = vscode.window.createTextEditorDecorationType({ fontSize: 18 });
+
 	constructor(
 		private readonly client: TypeScriptServiceClient,
 		private readonly description: LanguageDescription,
@@ -39,7 +77,139 @@ export default class LanguageProvider extends Disposable {
 		vscode.workspace.onDidChangeConfiguration(this.configurationChanged, this, this._disposables);
 		this.configurationChanged();
 
-		client.onReady(() => this.registerProviders());
+		client.onReady(async () => {
+			await this.registerProviders();
+			vscode.window.onDidChangeVisibleTextEditors(e => {
+				e.forEach(async editor => {
+					this._registerDecorationsForEditor(editor);
+					setTimeout(() => {
+						console.log('Changing decorations after 5 seconds');
+						this._clearDecorationsForEditor(editor);
+						this._registerDecorationsForEditor2(editor);
+					}, 5000);
+				});
+			});
+			vscode.window.visibleTextEditors.forEach(async editor => {
+				this._registerDecorationsForEditor(editor);
+				setTimeout(() => {
+					console.log('Changing decorations after 5 seconds');
+					this._clearDecorationsForEditor(editor);
+					this._registerDecorationsForEditor2(editor);
+				}, 5000);
+			});
+			vscode.workspace.onDidChangeTextDocument(_ => {
+				const activeTextEditor = vscode.window.activeTextEditor;
+				if (!activeTextEditor) {
+					return;
+				}
+			});
+		});
+	}
+
+
+	private async _registerDecorationsForEditor(editor: vscode.TextEditor): Promise<void> {
+		if (!typeScriptDocumentSymbolProvider) {
+			return;
+		}
+		const document = editor.document;
+		const token = new vscode.CancellationTokenSource().token;
+		const result = await typeScriptDocumentSymbolProvider.provideDocumentSymbols(document, token);
+		if (result === undefined) {
+			return;
+		}
+
+		const classRangesFonts1: vscode.Range[] = [];
+		const classRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Class, classRangesFonts1, classRangesFonts2);
+
+		const interfaceRangesFonts1: vscode.Range[] = [];
+		const interfaceRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Interface, interfaceRangesFonts1, interfaceRangesFonts2);
+
+		const functionRangesFonts1: vscode.Range[] = [];
+		const functionRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Function, functionRangesFonts1, functionRangesFonts2);
+
+		const methodRangesFonts1: vscode.Range[] = [];
+		const methodRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Method, methodRangesFonts1, methodRangesFonts2);
+
+		editor.setDecorations(this._classFontSizeDecorationType1, classRangesFonts1);
+		editor.setDecorations(this._interfaceFontSizeDecorationType1, interfaceRangesFonts1);
+		editor.setDecorations(this._functionFontSizeDecorationType1, functionRangesFonts1);
+		editor.setDecorations(this._methodFontSizeDecorationType1, methodRangesFonts1);
+
+		editor.setDecorations(this._classFontSizeDecorationType2, classRangesFonts2);
+		editor.setDecorations(this._interfaceFontSizeDecorationType2, interfaceRangesFonts2);
+		editor.setDecorations(this._functionFontSizeDecorationType2, functionRangesFonts2);
+		editor.setDecorations(this._methodFontSizeDecorationType2, methodRangesFonts2);
+
+		// editor.setDecorations(this._classFontSizeDecorationTypeInjectedText, classRangesFonts2);
+		// editor.setDecorations(this._interfaceFontSizeDecorationTypeInjectedText, interfaceRangesFonts2);
+		// editor.setDecorations(this._functionFontSizeDecorationTypeInjectedText, functionRangesFonts2);
+		// editor.setDecorations(this._methodFontSizeDecorationTypeInjectedText, methodRangesFonts2);
+	}
+
+	private _clearDecorationsForEditor(editor: vscode.TextEditor): void {
+		editor.setDecorations(this._classFontSizeDecorationType1, []);
+		editor.setDecorations(this._interfaceFontSizeDecorationType1, []);
+		editor.setDecorations(this._functionFontSizeDecorationType1, []);
+		editor.setDecorations(this._methodFontSizeDecorationType1, []);
+
+		editor.setDecorations(this._classFontSizeDecorationType2, []);
+		editor.setDecorations(this._interfaceFontSizeDecorationType2, []);
+		editor.setDecorations(this._functionFontSizeDecorationType2, []);
+		editor.setDecorations(this._methodFontSizeDecorationType2, []);
+	}
+
+	private async _registerDecorationsForEditor2(editor: vscode.TextEditor): Promise<void> {
+		if (!typeScriptDocumentSymbolProvider) {
+			return;
+		}
+		const document = editor.document;
+		const token = new vscode.CancellationTokenSource().token;
+		const result = await typeScriptDocumentSymbolProvider.provideDocumentSymbols(document, token);
+		if (result === undefined) {
+			return;
+		}
+
+		const classRangesFonts1: vscode.Range[] = [];
+		const classRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Class, classRangesFonts1, classRangesFonts2);
+
+		const interfaceRangesFonts1: vscode.Range[] = [];
+		const interfaceRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Interface, interfaceRangesFonts1, interfaceRangesFonts2);
+
+		const functionRangesFonts1: vscode.Range[] = [];
+		const functionRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Function, functionRangesFonts1, functionRangesFonts2);
+
+		const methodRangesFonts1: vscode.Range[] = [];
+		const methodRangesFonts2: vscode.Range[] = [];
+		this._getRanges(editor, result, vscode.SymbolKind.Method, methodRangesFonts1, methodRangesFonts2);
+
+		editor.setDecorations(this._classFontSizeDecorationType3, classRangesFonts1);
+		editor.setDecorations(this._interfaceFontSizeDecorationType3, interfaceRangesFonts1);
+		editor.setDecorations(this._functionFontSizeDecorationType3, functionRangesFonts1);
+		editor.setDecorations(this._methodFontSizeDecorationType3, methodRangesFonts1);
+
+		editor.setDecorations(this._classFontSizeDecorationType4, classRangesFonts2);
+		editor.setDecorations(this._interfaceFontSizeDecorationType4, interfaceRangesFonts2);
+		editor.setDecorations(this._functionFontSizeDecorationType4, functionRangesFonts2);
+		editor.setDecorations(this._methodFontSizeDecorationType4, methodRangesFonts2);
+	}
+
+	private _getRanges(activeTextEditor: vscode.TextEditor, symbols: vscode.DocumentSymbol[], kind: vscode.SymbolKind, rangesForFontSize1: vscode.Range[], rangesForFontSize2: vscode.Range[]) {
+		const border = 10; // Infinity in production
+		for (const symbol of symbols) {
+			if (symbol.kind === kind) {
+				const line = symbol.range.start.line;
+				rangesForFontSize1.push(activeTextEditor.document.validateRange(new vscode.Range(line, 0, line, border)));
+				rangesForFontSize2.push(activeTextEditor.document.validateRange(new vscode.Range(line, border - 5, line, Infinity)));
+			}
+			this._getRanges(activeTextEditor, symbol.children, kind, rangesForFontSize1, rangesForFontSize2);
+		}
 	}
 
 	private get documentSelector(): DocumentSelector {

src/vs/editor/browser/controller/editContext/native/nativeEditContext.ts

@@ -72,7 +72,7 @@ export class NativeEditContext extends AbstractEditContext {
 	private readonly _selectionChangeListener: MutableDisposable<IDisposable>;
 
 	constructor(
-		ownerID: string,
+		owner: number,
 		context: ViewContext,
 		overflowGuardContainer: FastDomNode<HTMLElement>,
 		private readonly _viewController: ViewController,
@@ -211,7 +211,7 @@ export class NativeEditContext extends AbstractEditContext {
 				reenableTracking = true;
 			}
 		}));
-		this._register(NativeEditContextRegistry.register(ownerID, this));
+		this._register(NativeEditContextRegistry.register(owner, this));
 	}
 
 	// --- Public methods ---

src/vs/editor/browser/controller/editContext/native/nativeEditContextRegistry.ts

@@ -8,19 +8,19 @@ import { NativeEditContext } from './nativeEditContext.js';
 
 class NativeEditContextRegistryImpl {
 
-	private _nativeEditContextMapping: Map<string, NativeEditContext> = new Map();
+	private _nativeEditContextMapping: Map<number, NativeEditContext> = new Map();
 
-	register(ownerID: string, nativeEditContext: NativeEditContext): IDisposable {
-		this._nativeEditContextMapping.set(ownerID, nativeEditContext);
+	register(owner: number, nativeEditContext: NativeEditContext): IDisposable {
+		this._nativeEditContextMapping.set(owner, nativeEditContext);
 		return {
 			dispose: () => {
-				this._nativeEditContextMapping.delete(ownerID);
+				this._nativeEditContextMapping.delete(owner);
 			}
 		};
 	}
 
-	get(ownerID: string): NativeEditContext | undefined {
-		return this._nativeEditContextMapping.get(ownerID);
+	get(owner: number): NativeEditContext | undefined {
+		return this._nativeEditContextMapping.get(owner);
 	}
 }
 

src/vs/editor/browser/controller/editContext/textArea/textAreaEditContext.ts

@@ -112,6 +112,7 @@ const canUseZeroSizeTextarea = (browser.isFirefox);
 
 export class TextAreaEditContext extends AbstractEditContext {
 
+	private readonly _ownerId: number;
 	private readonly _viewController: ViewController;
 	private readonly _visibleRangeProvider: IVisibleRangeProvider;
 	private _scrollLeft: number;
@@ -146,6 +147,7 @@ export class TextAreaEditContext extends AbstractEditContext {
 	private readonly _textAreaInput: TextAreaInput;
 
 	constructor(
+		ownerId: number,
 		context: ViewContext,
 		overflowGuardContainer: FastDomNode<HTMLElement>,
 		viewController: ViewController,
@@ -155,6 +157,7 @@ export class TextAreaEditContext extends AbstractEditContext {
 	) {
 		super(context);
 
+		this._ownerId = ownerId;
 		this._viewController = viewController;
 		this._visibleRangeProvider = visibleRangeProvider;
 		this._scrollLeft = 0;
@@ -742,8 +745,8 @@ export class TextAreaEditContext extends AbstractEditContext {
 				}
 
 				// Try to render the textarea with the color/font style to match the text under it
-				const viewPosition = this._context.viewModel.coordinatesConverter.convertViewPositionToModelPosition(new Position(startPosition.lineNumber, 1));
-				const lineHeight = this._context.viewLayout.getLineHeightForLineNumber(viewPosition.lineNumber);
+				const lineHeight = this._context.viewLayout.getLineHeightForLineNumber(startPosition.lineNumber);
+				const fontSize = this._getFontSizeAtPosition(this._primaryCursorPosition);
 				const viewLineData = this._context.viewModel.getViewLineData(startPosition.lineNumber);
 				const startTokenIndex = viewLineData.tokens.findTokenIndexAtOffset(startPosition.column - 1);
 				const endTokenIndex = viewLineData.tokens.findTokenIndexAtOffset(endPosition.column - 1);
@@ -766,7 +769,8 @@ export class TextAreaEditContext extends AbstractEditContext {
 					italic: presentation.italic,
 					bold: presentation.bold,
 					underline: presentation.underline,
-					strikethrough: presentation.strikethrough
+					strikethrough: presentation.strikethrough,
+					fontSize
 				});
 			}
 			return;
@@ -845,6 +849,7 @@ export class TextAreaEditContext extends AbstractEditContext {
 		const tac = this.textAreaCover;
 
 		applyFontInfo(ta, this._fontInfo);
+		ta.setFontSize(renderData.fontSize ?? this._fontInfo.fontSize);
 		ta.setTop(renderData.top);
 		ta.setLeft(renderData.left);
 		ta.setWidth(renderData.width);
@@ -876,6 +881,20 @@ export class TextAreaEditContext extends AbstractEditContext {
 			}
 		}
 	}
+
+	private _getFontSizeAtPosition(position: Position): number {
+		const viewModel = this._context.viewModel;
+		const modelPosition = viewModel.coordinatesConverter.convertViewPositionToModelPosition(position);
+		const fontDecorations = viewModel.model.getFontDecorationsInRange(Range.fromPositions(modelPosition), this._ownerId);
+		let fontSize: number = this._fontInfo.fontSize;
+		for (const fontDecoration of fontDecorations) {
+			if (fontDecoration.options.fontSize) {
+				fontSize = fontDecoration.options.fontSize;
+				break;
+			}
+		}
+		return fontSize;
+	}
 }
 
 interface IRenderData {
@@ -889,6 +908,7 @@ interface IRenderData {
 	color?: Color | null;
 	italic?: boolean;
 	bold?: boolean;
+	fontSize?: number;
 	underline?: boolean;
 	strikethrough?: boolean;
 }

src/vs/editor/browser/editorBrowser.ts

@@ -1011,6 +1011,12 @@ export interface ICodeEditor extends editorCommon.IEditor {
 	 */
 	getDecorationsInRange(range: Range): IModelDecoration[] | null;
 
+	/**
+	 * Get all the font decorations for a range (filtering out decorations from other editors).
+	 * @param range The range to get font decorations for.
+	 */
+	getFontDecorationsInRange(range: Range): IModelDecoration[] | null;
+
 	/**
 	 * All decorations added through this call will get the ownerId of this editor.
 	 * @deprecated Use `createDecorationsCollection`

src/vs/editor/browser/gpu/renderStrategy/fullFileRenderStrategy.ts

@@ -376,7 +376,7 @@ export class FullFileRenderStrategy extends BaseRenderStrategy {
 					decorationStyleSetOpacity = undefined;
 
 					// Apply supported inline decoration styles to the cell metadata
-					for (decoration of lineData.inlineDecorations) {
+					for (decoration of lineData.inlineDecorations.decorations) {
 						// This is Range.strictContainsPosition except it works at the cell level,
 						// it's also inlined to avoid overhead.
 						if (

src/vs/editor/browser/gpu/renderStrategy/viewportRenderStrategy.ts

@@ -279,7 +279,7 @@ export class ViewportRenderStrategy extends BaseRenderStrategy {
 					decorationStyleSetOpacity = undefined;
 
 					// Apply supported inline decoration styles to the cell metadata
-					for (decoration of lineData.inlineDecorations) {
+					for (decoration of lineData.inlineDecorations.decorations) {
 						// This is Range.strictContainsPosition except it works at the cell level,
 						// it's also inlined to avoid overhead.
 						if (