Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix COLR font check being racy

Browse Source 
also make sure it doesn't run more than once.
keeping the FF sniffing because missing "extract canvas data" permissions
would still break the check.
This commit is contained in:
Bruno Windels 2019-05-29 10:11:14 +02:00 committed by J. Ryan Stinnett
parent d17ea516cc
commit 85b0107f6c
1 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/utils/FontManager.js
View File

@ -21,21 +21,16 @@ limitations under the License.
* MIT license * MIT license
*/ */
let colrFontSupported = undefined;
async function isColrFontSupported() { async function isColrFontSupported() {
if (colrFontSupported !== undefined) {
return colrFontSupported;
}
console.log("Checking for COLR support"); console.log("Checking for COLR support");
// Firefox has supported COLR fonts since version 26 // Firefox has supported COLR fonts since version 26
// but doesn't support the check below with content blocking enabled. // but doesn't support the check below without
// "Extract canvas data" permissions
// when content blocking is enabled.
if (navigator.userAgent.includes("Firefox")) { if (navigator.userAgent.includes("Firefox")) {
colrFontSupported = true;
console.log("Browser is Firefox - assuming COLR is supported"); console.log("Browser is Firefox - assuming COLR is supported");
return colrFontSupported; return true;
} }
try { try {
@ -61,26 +56,25 @@ async function isColrFontSupported() {
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
// FIXME wait for safari load our colr font console.log("Waiting for COLR SVG to load");
const wait = ms => new Promise((r, j)=>setTimeout(r, ms)); await new Promise(resolve => img.onload = resolve);
await wait(500);
console.log("Drawing canvas to detect COLR support"); console.log("Drawing canvas to detect COLR support");
context.drawImage(img, 0, 0); context.drawImage(img, 0, 0);
colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200); const colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200);
console.log("Canvas check revealed COLR is supported? " + colrFontSupported); console.log("Canvas check revealed COLR is supported? " + colrFontSupported);
return colrFontSupported;
} catch (e) { } catch (e) {
console.error("Couldn't load COLR font", e); console.error("Couldn't load COLR font", e);
colrFontSupported = false; return false;
} }
return colrFontSupported;
} }
let colrFontCheckStarted = false;
export async function fixupColorFonts() { export async function fixupColorFonts() {
if (colrFontSupported !== undefined) { if (colrFontCheckStarted) {
return; return;
} }
colrFontCheckStarted = true;
if (await isColrFontSupported()) { if (await isColrFontSupported()) {
const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`; const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`;