perf: determine emoji support in reverse order (#160)

* perf: determine emoji support in reverse order

* fix: tweak code comment

* fix: tweak code comment

* refactor: refactor code a bit

bin/versionsAndTestEmoji.js

@@ -8,14 +8,14 @@
 // "face without mouth" plus "fog".) These emoji can only be filtered using the width test,
 // which happens in checkZwjSupport.js.
 export const versionsAndTestEmoji = {
-  '😃': 0.6,
-  '😐️': 0.7,
-  '😀': 1,
-  '👁️‍🗨️': 2,
-  '🤣': 3,
-  '👱‍♀️': 4,
-  '🤩': 5,
-  '🥰': 11, // smiling face with hearts
+  '🥲': 13.1, // smiling face with tear, technically from v13 but see note above
   '🥻': 12.1, // sari, technically from v12 but see note above
-  '🥲': 13.1 // smiling face with tear, technically from v13 but see note above
+  '🥰': 11,
+  '🤩': 5,
+  '👱‍♀️': 4,
+  '🤣': 3,
+  '👁️‍🗨️': 2,
+  '😀': 1,
+  '😐️': 0.7,
+  '😃': 0.6
 }

src/picker/utils/determineEmojiSupportLevel.js

@@ -6,18 +6,20 @@ import { testColorEmojiSupported } from './testColorEmojiSupported'
 /* istanbul ignore next */
 export function determineEmojiSupportLevel () {
   performance.mark('determineEmojiSupportLevel')
+  const entries = Object.entries(versionsAndTestEmoji)
   try {
-    let res
-    for (const [emoji, version] of Object.entries(versionsAndTestEmoji)) {
+    // start with latest emoji and work backwards
+    for (const [emoji, version] of entries) {
       if (testColorEmojiSupported(emoji)) {
-        res = version
+        return version
       }
     }
-    return res
   } catch (e) { // canvas error
     console.log('Ignoring canvas error', e)
-    return Math.max(...Object.values(versionsAndTestEmoji))
   } finally {
     performance.measure('determineEmojiSupportLevel', 'determineEmojiSupportLevel')
   }
+  // In case of an error, be generous and just assume all emoji are supported (e.g. for canvas errors
+  // due to anti-fingerprinting add-ons). Better to show some gray boxes than nothing at all.
+  return entries[0][1] // first one in the list is the most recent version
 }