From fc1ac53ef397a47d7e3f4d13cd008ae78cdabef3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 24 May 2019 10:36:07 -0600 Subject: [PATCH 01/11] Add some logging for COLR checks --- src/utils/FontManager.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index b4123c6368..a54efa4384 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -28,10 +28,13 @@ async function isColrFontSupported() { return colrFontSupported; } + console.log("Checking for COLR support"); + // Firefox has supported COLR fonts since version 26 // but doesn't support the check below with content blocking enabled. if (navigator.userAgent.includes("Firefox")) { colrFontSupported = true; + console.log("Browser is Firefox - assuming COLR is supported"); return colrFontSupported; } @@ -62,12 +65,16 @@ async function isColrFontSupported() { const wait = ms => new Promise((r, j)=>setTimeout(r, ms)); await wait(500); + console.log("Drawing canvas to detect COLR support"); context.drawImage(img, 0, 0); colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200); + console.log("Canvas check revealed COLR is supported? " + colrFontSupported); } catch (e) { - console.error("Couldn't load colr font", e); + console.error("Couldn't load COLR font", e); colrFontSupported = false; } + + console.log({colrFontSupported}); return colrFontSupported; } From d17ea516cce0340a696fbb0c64736e5b02b2a77d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 24 May 2019 10:53:24 -0600 Subject: [PATCH 02/11] Minus one log --- src/utils/FontManager.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index a54efa4384..7e8fc9d67e 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -74,7 +74,6 @@ async function isColrFontSupported() { colrFontSupported = false; } - console.log({colrFontSupported}); return colrFontSupported; } From 85b0107f6cf9088ea0313612d5ae52e022860b1e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 10:11:14 +0200 Subject: [PATCH 03/11] fix COLR font check being racy 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. --- src/utils/FontManager.js | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 7e8fc9d67e..bf47bcd7d2 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -21,21 +21,16 @@ limitations under the License. * MIT license */ -let colrFontSupported = undefined; - async function isColrFontSupported() { - if (colrFontSupported !== undefined) { - return colrFontSupported; - } - console.log("Checking for COLR support"); // 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")) { - colrFontSupported = true; console.log("Browser is Firefox - assuming COLR is supported"); - return colrFontSupported; + return true; } try { @@ -61,26 +56,25 @@ async function isColrFontSupported() { img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); - // FIXME wait for safari load our colr font - const wait = ms => new Promise((r, j)=>setTimeout(r, ms)); - await wait(500); - + console.log("Waiting for COLR SVG to load"); + await new Promise(resolve => img.onload = resolve); console.log("Drawing canvas to detect COLR support"); 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); + return colrFontSupported; } catch (e) { console.error("Couldn't load COLR font", e); - colrFontSupported = false; + return false; } - - return colrFontSupported; } +let colrFontCheckStarted = false; export async function fixupColorFonts() { - if (colrFontSupported !== undefined) { + if (colrFontCheckStarted) { return; } + colrFontCheckStarted = true; if (await isColrFontSupported()) { const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`; From 43f642a8fe70175a28da0b934db00dc1a07e528c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 11:59:50 +0200 Subject: [PATCH 04/11] sniff safari 12, macos 10.14 to support COLR, as safari doesn't wait for the font to load to emit load --- src/utils/FontManager.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index bf47bcd7d2..2d5f7c5dc0 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -21,6 +21,23 @@ limitations under the License. * MIT license */ +function safariVersionCheck(ua) { + 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; + // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on + console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr},` + + `supported: ${colrFontSupported}`); + return colrFontSupported; + } + return false; +} + async function isColrFontSupported() { console.log("Checking for COLR support"); @@ -32,6 +49,12 @@ async function isColrFontSupported() { console.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. + if (navigator.userAgent.includes("Safari")) { + return safariVersionCheck(navigator.userAgent); + } try { const canvas = document.createElement('canvas'); From ced55552dabaa87a2bcba9c38cf6673b617cbd00 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 12:03:38 +0200 Subject: [PATCH 05/11] make sure the check doesn't blow up --- src/utils/FontManager.js | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 2d5f7c5dc0..7fb14b56fd 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -22,18 +22,22 @@ limitations under the License. */ function safariVersionCheck(ua) { - 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; - // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on - console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + - `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr},` + - `supported: ${colrFontSupported}`); - return colrFontSupported; + 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; + // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on + console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr},` + + `supported: ${colrFontSupported}`); + return colrFontSupported; + } + } catch (err) { + console.error("Couldn't determine Safari version to check COLR font support, assuming no.", err); } return false; } From a295d7badaefcbd4c609bc905ed5843922b9adb6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 10:08:59 +0000 Subject: [PATCH 06/11] Update src/utils/FontManager.js Co-Authored-By: J. Ryan Stinnett --- src/utils/FontManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 7fb14b56fd..29789b90f2 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -33,7 +33,7 @@ function safariVersionCheck(ua) { // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr},` + - `supported: ${colrFontSupported}`); + `COLR supported: ${colrFontSupported}`); return colrFontSupported; } } catch (err) { From 2fb451c43f3d0ccc5b5d8ddbc2538e9bbeee7d86 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 10:09:10 +0000 Subject: [PATCH 07/11] Update src/utils/FontManager.js Co-Authored-By: J. Ryan Stinnett --- src/utils/FontManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 29789b90f2..462ac94580 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -32,7 +32,7 @@ function safariVersionCheck(ua) { const colrFontSupported = macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12; // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + - `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr},` + + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` + `COLR supported: ${colrFontSupported}`); return colrFontSupported; } From f2a649e6113cfdb6c2d2e85b2bbca7486abd4919 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 10:10:18 +0000 Subject: [PATCH 08/11] Update src/utils/FontManager.js Co-Authored-By: J. Ryan Stinnett --- src/utils/FontManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 462ac94580..e51efb8a2c 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -31,7 +31,7 @@ function safariVersionCheck(ua) { const safariVersion = safariVersionStr.split(".").map(n => parseInt(n, 10)); const colrFontSupported = macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12; // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on - console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12,` + + console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12, ` + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` + `COLR supported: ${colrFontSupported}`); return colrFontSupported; From 729806b9b4c0a9f5a3172a6b9318115e013efb99 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 12:16:40 +0200 Subject: [PATCH 09/11] fix lint & make regex more robust --- src/utils/FontManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index e51efb8a2c..c7a1f5e0b6 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -23,7 +23,7 @@ limitations under the License. function safariVersionCheck(ua) { try { - const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|\.]+) Safari/); + const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/); if (safariVersionMatch) { const macOSVersionStr = safariVersionMatch[1]; const safariVersionStr = safariVersionMatch[2]; From 22efb31781baadbe623c48deb2c23aff4cb89e99 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 13:05:59 +0200 Subject: [PATCH 10/11] exclude chrome in ua from safari version check for colr support --- src/utils/FontManager.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index c7a1f5e0b6..b9e33c2c4e 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -22,6 +22,7 @@ limitations under the License. */ function safariVersionCheck(ua) { + console.log("Browser is Safari - checking version for COLR support"); try { const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/); if (safariVersionMatch) { @@ -31,7 +32,7 @@ function safariVersionCheck(ua) { const safariVersion = safariVersionStr.split(".").map(n => parseInt(n, 10)); const colrFontSupported = macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12; // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on - console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12, ` + + console.log(`COLR support on Safari requires macOS 10.14 and Safari 12, ` + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` + `COLR supported: ${colrFontSupported}`); return colrFontSupported; @@ -45,19 +46,21 @@ function safariVersionCheck(ua) { async function isColrFontSupported() { console.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 (navigator.userAgent.includes("Firefox")) { + if (userAgent.includes("Firefox")) { console.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. - if (navigator.userAgent.includes("Safari")) { - return safariVersionCheck(navigator.userAgent); + // Excluding "Chrome", as it's user agent unhelpfully also contains Safari... + if (!userAgent.includes("Chrome") && userAgent.includes("Safari")) { + return safariVersionCheck(userAgent); } try { From aeaa4c0848e53e4097b41c1a54f02caaf1fffc15 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 29 May 2019 13:24:46 +0200 Subject: [PATCH 11/11] always log on return false --- src/utils/FontManager.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index b9e33c2c4e..796018a497 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -38,8 +38,9 @@ function safariVersionCheck(ua) { return colrFontSupported; } } catch (err) { - console.error("Couldn't determine Safari version to check COLR font support, assuming no.", err); + console.error("Error in Safari COLR version check", err); } + console.warn("Couldn't determine Safari version to check COLR font support, assuming no."); return false; }