From 90868bc0ad4b69ccd7a37c1e3a5e61d716bcee11 Mon Sep 17 00:00:00 2001 From: Aditya Bist Date: Tue, 13 Apr 2021 18:37:55 -0700 Subject: [PATCH] fixed css for font family (#15119) --- .../editor/common/viewModel/viewModelImpl.ts | 18 +++++++++++++++++- .../contrib/codelens/codelensController.ts | 7 ++++++- .../comments/browser/commentThreadWidget.ts | 13 ++++++++++--- .../contrib/debug/browser/media/repl.css | 10 ++++++++++ .../workbench/contrib/debug/browser/repl.ts | 17 ++++------------- .../browser/view/renderers/cellRenderer.ts | 19 ++++++++++++++----- 6 files changed, 61 insertions(+), 23 deletions(-) diff --git a/src/vs/editor/common/viewModel/viewModelImpl.ts b/src/vs/editor/common/viewModel/viewModelImpl.ts index aaf9aad9c3..e73d29f259 100644 --- a/src/vs/editor/common/viewModel/viewModelImpl.ts +++ b/src/vs/editor/common/viewModel/viewModelImpl.ts @@ -808,7 +808,23 @@ export class ViewModel extends Disposable implements IViewModel { const fontInfo = this._configuration.options.get(EditorOption.fontInfo); const colorMap = this._getColorMap(); - const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`; + const hasBadChars = (/[:;\\\/<>]/.test(fontInfo.fontFamily)); + const useDefaultFontFamily = (hasBadChars || fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily); + let fontFamily: string; + if (useDefaultFontFamily) { + fontFamily = EDITOR_FONT_DEFAULTS.fontFamily; + } else { + fontFamily = fontInfo.fontFamily; + fontFamily = fontFamily.replace(/"/g, '\''); + const hasQuotesOrIsList = /[,']/.test(fontFamily); + if (!hasQuotesOrIsList) { + const needsQuotes = /[+ ]/.test(fontFamily); + if (needsQuotes) { + fontFamily = `'${fontFamily}'`; + } + } + fontFamily = `${fontFamily}, ${EDITOR_FONT_DEFAULTS.fontFamily}`; + } return { mode: languageId.language, diff --git a/src/vs/editor/contrib/codelens/codelensController.ts b/src/vs/editor/contrib/codelens/codelensController.ts index b409309d48..939527a5a5 100644 --- a/src/vs/editor/contrib/codelens/codelensController.ts +++ b/src/vs/editor/contrib/codelens/codelensController.ts @@ -98,14 +98,19 @@ export class CodeLensContribution implements IEditorContribution { const fontFamily = this._editor.getOption(EditorOption.codeLensFontFamily); const editorFontInfo = this._editor.getOption(EditorOption.fontInfo); + const fontFamilyVar = `--codelens-font-family${this._styleClassName}`; + const fontFeaturesVar = `--codelens-font-features${this._styleClassName}`; + let newStyle = ` - .monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: ${editorFontInfo.fontFeatureSettings} } + .monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: var(${fontFeaturesVar}) } .monaco-editor .codelens-decoration.${this._styleClassName} span.codicon { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; } `; if (fontFamily) { newStyle += `.monaco-editor .codelens-decoration.${this._styleClassName} { font-family: ${fontFamily}}`; } this._styleElement.textContent = newStyle; + this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily ?? 'inherit'); + this._editor.getContainerDomNode().style.setProperty(fontFeaturesVar, editorFontInfo.fontFeatureSettings); // this._editor.changeViewZones(accessor => { diff --git a/src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts b/src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts index 87e92a4aec..59ea1f4eff 100644 --- a/src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts +++ b/src/vs/workbench/contrib/comments/browser/commentThreadWidget.ts @@ -950,10 +950,17 @@ export class ReviewZoneWidget extends ZoneWidget implements ICommentThreadWidget } const fontInfo = this.editor.getOption(EditorOption.fontInfo); + const fontFamilyVar = '--comment-thread-editor-font-family'; + const fontSizeVar = '--comment-thread-editor-font-size'; + const fontWeightVar = '--comment-thread-editor-font-weight'; + this.container?.style.setProperty(fontFamilyVar, fontInfo.fontFamily); + this.container?.style.setProperty(fontSizeVar, `${fontInfo.fontSize}px`); + this.container?.style.setProperty(fontWeightVar, fontInfo.fontWeight); + content.push(`.monaco-editor .review-widget .body code { - font-family: ${fontInfo.fontFamily}; - font-size: ${fontInfo.fontSize}px; - font-weight: ${fontInfo.fontWeight}; + font-family: var(${fontFamilyVar}); + font-weight: var(${fontWeightVar}); + font-size: var(${fontSizeVar}); }`); this._styleElement.textContent = content.join('\n'); diff --git a/src/vs/workbench/contrib/debug/browser/media/repl.css b/src/vs/workbench/contrib/debug/browser/media/repl.css index fb3e32aae7..5030d532ab 100644 --- a/src/vs/workbench/contrib/debug/browser/media/repl.css +++ b/src/vs/workbench/contrib/debug/browser/media/repl.css @@ -17,6 +17,16 @@ white-space: pre; } +.monaco-workbench .repl .repl-tree .monaco-tl-contents .expression { + font-family: var(--vscode-repl-font-family); + font-size: var(--vscode-repl-font-size); + line-height: var(--vscode-repl-line-height); +} + +.monaco-workbench .repl .repl-tree .monaco-tl-twistie { + background-position-y: calc(100% - (var(--vscode-repl-font-size-for-twistie))); +} + .monaco-workbench .repl .repl-tree.word-wrap .monaco-tl-contents { /* Wrap words but also do not trim whitespace #6275 */ word-wrap: break-word; diff --git a/src/vs/workbench/contrib/debug/browser/repl.ts b/src/vs/workbench/contrib/debug/browser/repl.ts index 37e4329e79..2001f2fa40 100644 --- a/src/vs/workbench/contrib/debug/browser/repl.ts +++ b/src/vs/workbench/contrib/debug/browser/repl.ts @@ -319,19 +319,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget { // Set the font size, font family, line height and align the twistie to be centered, and input theme color this.styleElement.textContent = ` - .repl .repl-tree .expression { - font-size: ${fontSize}px; - font-family: ${fontFamily}; - } - - .repl .repl-tree .expression { - line-height: ${lineHeight}; - } - - .repl .repl-tree .monaco-tl-twistie { - background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px); - } - .repl .repl-input-wrapper .repl-input-chevron { line-height: ${replInputLineHeight}px } @@ -340,6 +327,10 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget { background-color: ${backgroundColor}; } `; + this.container.style.setProperty(`--vscode-repl-font-family`, fontFamily); + this.container.style.setProperty(`--vscode-repl-font-size`, `${fontSize}px`); + this.container.style.setProperty(`--vscode-repl-font-size-for-twistie`, `${fontSize * 1.4 / 2 - 8}px`); + this.container.style.setProperty(`--vscode-repl-line-height`, lineHeight); this.tree.rerender(); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts index 74e0fcb10f..26a0f4a932 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts @@ -18,7 +18,7 @@ import { deepClone } from 'vs/base/common/objects'; import * as platform from 'vs/base/common/platform'; import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget'; -import { EditorOption, EDITOR_FONT_DEFAULTS, IEditorOptions } from 'vs/editor/common/config/editorOptions'; +import { EditorOption, IEditorOptions } from 'vs/editor/common/config/editorOptions'; import { BareFontInfo } from 'vs/editor/common/config/fontInfo'; import { Range } from 'vs/editor/common/core/range'; import { EditorContextKeys } from 'vs/editor/common/editorContextKeys'; @@ -579,20 +579,29 @@ class EditorTextRenderer { const colorMap = this.getDefaultColorMap(); const fontInfo = editor.getOptions().get(EditorOption.fontInfo); - const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`; + + const fontFamilyVar = '--notebook-editor-font-family'; + const fontSizeVar = '--notebook-editor-font-size'; + const fontWeightVar = '--notebook-editor-font-weight'; const style = `` + `color: ${colorMap[modes.ColorId.DefaultForeground]};` + `background-color: ${colorMap[modes.ColorId.DefaultBackground]};` - + `font-family: ${fontFamily};` - + `font-weight: ${fontInfo.fontWeight};` - + `font-size: ${fontInfo.fontSize}px;` + + `font-family: var(${fontFamilyVar});` + + `font-weight: var(${fontWeightVar});` + + `font-size: var(${fontSizeVar});` + `line-height: ${fontInfo.lineHeight}px;` + `white-space: pre;`; const element = DOM.$('div', { style }); + const fontSize = fontInfo.fontSize; + const fontWeight = fontInfo.fontWeight; + element.style.setProperty(fontFamilyVar, fontInfo.fontFamily); + element.style.setProperty(fontSizeVar, `${fontSize}px`); + element.style.setProperty(fontWeightVar, fontWeight); + const linesHtml = this.getRichTextLinesAsHtml(model, modelRange, colorMap); element.innerHTML = linesHtml as unknown as string; return element;