diff --git a/__mocks__/FontManager.js b/__mocks__/FontManager.js deleted file mode 100644 index 41eab4bf94..0000000000 --- a/__mocks__/FontManager.js +++ /dev/null @@ -1,6 +0,0 @@ -// Stub out FontManager for tests as it doesn't validate anything we don't already know given -// our fixed test environment and it requires the installation of node-canvas. - -module.exports = { - fixupColorFonts: () => Promise.resolve(), -}; diff --git a/jest.config.ts b/jest.config.ts index 04f1a91e77..326f2040d9 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -32,7 +32,6 @@ const config: Config = { "decoderWorker\\.min\\.wasm": "/__mocks__/empty.js", "waveWorker\\.min\\.js": "/__mocks__/empty.js", "context-filter-polyfill": "/__mocks__/empty.js", - "FontManager.ts": "/__mocks__/FontManager.js", "workers/(.+)Factory": "/__mocks__/workerFactoryMock.js", "^!!raw-loader!.*": "jest-raw-loader", "recorderWorkletFactory": "/__mocks__/empty.js", diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 deleted file mode 100644 index 90f444b1a1..0000000000 Binary files a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 and /dev/null differ diff --git a/res/themes/light/css/_fonts.pcss b/res/themes/light/css/_fonts.pcss index 62613fcee5..a9d31f2b2b 100644 --- a/res/themes/light/css/_fonts.pcss +++ b/res/themes/light/css/_fonts.pcss @@ -143,3 +143,21 @@ $inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +/* Twemoji COLR */ +@font-face { + font-family: "Twemoji"; + font-weight: 400; + src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2"); +} +/* For at least Chrome on Windows 10, we have to explictly add extra weights for the emoji to appear in bold messages, etc. */ +@font-face { + font-family: "Twemoji"; + font-weight: 600; + src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2"); +} +@font-face { + font-family: "Twemoji"; + font-weight: 700; + src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2"); +} diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 0042169f45..019f9cd1a8 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -23,7 +23,6 @@ import classNames from "classnames"; import { isOnlyCtrlOrCmdKeyEvent, Key } from "../../Keyboard"; import PageTypes from "../../PageTypes"; import MediaDeviceHandler from "../../MediaDeviceHandler"; -import { fixupColorFonts } from "../../utils/FontManager"; import dis from "../../dispatcher/dispatcher"; import { IMatrixClientCreds } from "../../MatrixClientPeg"; import SettingsStore from "../../settings/SettingsStore"; @@ -149,8 +148,6 @@ class LoggedInView extends React.Component { MediaDeviceHandler.loadDevices(); - fixupColorFonts(); - this._roomView = React.createRef(); this._resizeContainer = React.createRef(); this.resizeHandler = React.createRef(); diff --git a/src/components/views/verification/VerificationShowSas.tsx b/src/components/views/verification/VerificationShowSas.tsx index 139c5f7286..1e053a7e99 100644 --- a/src/components/views/verification/VerificationShowSas.tsx +++ b/src/components/views/verification/VerificationShowSas.tsx @@ -14,7 +14,6 @@ import SasEmoji from "@matrix-org/spec/sas-emoji.json"; import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler"; import { PendingActionSpinner } from "../right_panel/EncryptionInfo"; import AccessibleButton from "../elements/AccessibleButton"; -import { fixupColorFonts } from "../../../utils/FontManager"; interface IProps { pending?: boolean; @@ -88,11 +87,6 @@ export default class VerificationShowSas extends React.Component this.state = { pending: false, }; - - // As this component is also used before login (during complete security), - // also make sure we have a working emoji font to display the SAS emojis here. - // This is also done from LoggedInView. - fixupColorFonts(); } private onMatchClick = (): void => { diff --git a/src/utils/FontManager.ts b/src/utils/FontManager.ts deleted file mode 100644 index 1ffa653a27..0000000000 --- a/src/utils/FontManager.ts +++ /dev/null @@ -1,124 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2019-2021 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -/* - * Based on... - * ChromaCheck 1.16 - * author Roel Nieskens, https://pixelambacht.nl - * MIT license - */ -import { logger } from "matrix-js-sdk/src/logger"; - -function safariVersionCheck(ua: string): boolean { - logger.log("Browser is Safari - checking version for COLR support"); - try { - const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/); - if (safariVersionMatch) { - const macOSVersionStr = safariVersionMatch[1]; - const safariVersionStr = safariVersionMatch[2]; - const macOSVersion = macOSVersionStr.split("_").map((n) => parseInt(n, 10)); - const safariVersion = safariVersionStr.split(".").map((n) => parseInt(n, 10)); - const colrFontSupported = - macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12 && safariVersion[0] < 17; - // https://www.colorfonts.wtf/ states Safari supports COLR fonts from this version on but Safari 17 breaks it - logger.log( - `COLR support on Safari requires macOS 10.14 and Safari 12-16, ` + - `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` + - `COLR supported: ${colrFontSupported}`, - ); - return colrFontSupported; - } - } catch (err) { - logger.error("Error in Safari COLR version check", err); - } - logger.warn("Couldn't determine Safari version to check COLR font support, assuming no."); - return false; -} - -async function isColrFontSupported(): Promise { - logger.log("Checking for COLR support"); - - const { userAgent } = navigator; - // Firefox has supported COLR fonts since version 26 - // but doesn't support the check below without - // "Extract canvas data" permissions - // when content blocking is enabled. - if (userAgent.includes("Firefox")) { - logger.log("Browser is Firefox - assuming COLR is supported"); - return true; - } - // Safari doesn't wait for the font to load (if it doesn't have it in cache) - // to emit the load event on the image, so there is no way to not make the check - // reliable. Instead sniff the version. - // Excluding "Chrome", as it's user agent unhelpfully also contains Safari... - if (!userAgent.includes("Chrome") && userAgent.includes("Safari")) { - return safariVersionCheck(userAgent); - } - - try { - const canvas = document.createElement("canvas"); - const context = canvas.getContext("2d")!; - const img = new Image(); - // eslint-disable-next-line - const fontCOLR = - "d09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA=="; - const svg = ` - - - - - - `; - canvas.width = 20; - canvas.height = 100; - - img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg); - - logger.log("Waiting for COLR SVG to load"); - await new Promise((resolve) => (img.onload = resolve)); - logger.log("Drawing canvas to detect COLR support"); - context.drawImage(img, 0, 0); - const colrFontSupported = context.getImageData(10, 10, 1, 1).data[0] === 200; - logger.log("Canvas check revealed COLR is supported? " + colrFontSupported); - return colrFontSupported; - } catch (e) { - logger.error("Couldn't load COLR font", e); - return false; - } -} - -let colrFontCheckStarted = false; -export async function fixupColorFonts(): Promise { - if (colrFontCheckStarted) { - return; - } - colrFontCheckStarted = true; - - if (await isColrFontSupported()) { - // eslint-disable-next-line @typescript-eslint/no-require-imports - const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`; - document.fonts.add(new FontFace("Twemoji", path, {})); - // For at least Chrome on Windows 10, we have to explictly add extra - // weights for the emoji to appear in bold messages, etc. - document.fonts.add(new FontFace("Twemoji", path, { weight: "600" })); - document.fonts.add(new FontFace("Twemoji", path, { weight: "700" })); - } else { - // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix - // eslint-disable-next-line @typescript-eslint/no-require-imports - const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`; - document.fonts.add(new FontFace("Twemoji", path, {})); - document.fonts.add(new FontFace("Twemoji", path, { weight: "600" })); - document.fonts.add(new FontFace("Twemoji", path, { weight: "700" })); - } - // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified. -}