Remove Twemoji SBIX font in favour of COLRv0 (#28549)
* Remove Twemoji SBIX font in favour of COLRv0 as it is supported everywhere we need it Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused mock Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
0333cba258
commit
de820e11fc
7 changed files with 18 additions and 140 deletions
|
|
@ -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(),
|
||||
};
|
||||
|
|
@ -32,7 +32,6 @@ const config: Config = {
|
|||
"decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
|
||||
"waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
|
||||
"context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
|
||||
"FontManager.ts": "<rootDir>/__mocks__/FontManager.js",
|
||||
"workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
|
||||
"^!!raw-loader!.*": "jest-raw-loader",
|
||||
"recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps, IState> {
|
|||
|
||||
MediaDeviceHandler.loadDevices();
|
||||
|
||||
fixupColorFonts();
|
||||
|
||||
this._roomView = React.createRef();
|
||||
this._resizeContainer = React.createRef();
|
||||
this.resizeHandler = React.createRef();
|
||||
|
|
|
|||
|
|
@ -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<IProps, IState>
|
|||
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 => {
|
||||
|
|
|
|||
|
|
@ -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<boolean> {
|
||||
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 = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="100" style="background:#fff;fill:#000;">
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: "chromacheck-colr";
|
||||
src: url(data:application/x-font-woff;base64,${fontCOLR}) format("woff");
|
||||
}
|
||||
</style>
|
||||
<text x="0" y="0" font-size="20">
|
||||
<tspan font-family="chromacheck-colr" x="0" dy="20"></tspan>
|
||||
</text>
|
||||
</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<void> {
|
||||
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.
|
||||
}
|
||||
Loading…
Reference in a new issue