Changeset 55241

Timestamp:

02/06/2023 09:35:25 PM (2 years ago)

Author:

flixos90

Message:

Emoji: Fix emoji feature detection.

The emoji feature detection that occurs on every page load by default has been broken at least since [45769], causing the feature detection to fail for browsers that in fact support emoji correctly. This has led to the wp-emoji-release.min.js file being loaded unnecessarily even in modern browsers, which accounts for roughly 4.7 KB of extra JavaScript on every page load.

This changeset fixes the feature detection, by using the correct sequences of char codes.

Props sergiomdgomes, dmsnell, peterwilsoncc.
Fixes #57301.

File:

• trunk/src/js/_enqueues/lib/emoji-loader.js (modified) (8 diffs)

trunk/src/js/_enqueues/lib/emoji-loader.js

@@ -17 +17 @@
      * @private
      *
-     * @param {number[]} set1 Set of Emoji character codes.
-     * @param {number[]} set2 Set of Emoji character codes.
+     * @param {string} set1 Set of Emoji to test.
+     * @param {string} set2 Set of Emoji to test.
      *
      * @return {boolean} True if the two sets render the same.
      */
     function emojiSetsRenderIdentically( set1, set2 ) {
-        var stringFromCharCode = String.fromCharCode;
-
         // Cleanup from previous test.
         context.clearRect( 0, 0, canvas.width, canvas.height );
-        context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
+        context.fillText( set1, 0, 0 );
         var rendered1 = canvas.toDataURL();
 
         // Cleanup from previous test.
         context.clearRect( 0, 0, canvas.width, canvas.height );
-        context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
+        context.fillText( set2, 0, 0 );
         var rendered2 = canvas.toDataURL();
 
@@ -39 +37 @@
 
     /**
-     * Detects if the browser supports rendering emoji or flag emoji.
-     *
-     * Flag emoji are a single glyph made of two characters, so some browsers
-     * (notably, Firefox OS X) don't support them.
+     * Determines if the browser properly renders Emoji that Twemoji can supplement.
      *
      * @since 4.2.0
@@ -70 +65 @@
             case 'flag':
                 /*
-                 * Test for Transgender flag compatibility. This flag is shortlisted for the Emoji 13 spec,
-                 * but has landed in Twemoji early, so we can add support for it, too.
+                 * Test for Transgender flag compatibility. Added in Unicode 13.
                  *
                  * To test for support, we try to render it, and compare the rendering to how it would look if
@@ -77 +71 @@
                  */
                 isIdentical = emojiSetsRenderIdentically(
-                    [ 0x1F3F3, 0xFE0F, 0x200D, 0x26A7, 0xFE0F ],
-                    [ 0x1F3F3, 0xFE0F, 0x200B, 0x26A7, 0xFE0F ]
+                    '\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
+                    '\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F'  // separated by a zero-width space
                 );
 
@@ -93 +87 @@
                  */
                 isIdentical = emojiSetsRenderIdentically(
-                    [ 0xD83C, 0xDDFA, 0xD83C, 0xDDF3 ],
-                    [ 0xD83C, 0xDDFA, 0x200B, 0xD83C, 0xDDF3 ]
+                    '\uD83C\uDDFA\uD83C\uDDF3',       // as the sequence of two code points
+                    '\uD83C\uDDFA\u200B\uD83C\uDDF3'  // as the two code points separated by a zero-width space
                 );
 
@@ -103 +97 @@
                 /*
                  * Test for English flag compatibility. England is a country in the United Kingdom, it
-                 * does not have a two letter locale code but rather an five letter sub-division code.
+                 * does not have a two letter locale code but rather a five letter sub-division code.
                  *
                  * To test for support, we try to render it, and compare the rendering to how it would look if
@@ -109 +103 @@
                  */
                 isIdentical = emojiSetsRenderIdentically(
-                    [ 0xD83C, 0xDFF4, 0xDB40, 0xDC67, 0xDB40, 0xDC62, 0xDB40, 0xDC65, 0xDB40, 0xDC6E, 0xDB40, 0xDC67, 0xDB40, 0xDC7F ],
-                    [ 0xD83C, 0xDFF4, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC62, 0x200B, 0xDB40, 0xDC65, 0x200B, 0xDB40, 0xDC6E, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC7F ]
+                    // as the flag sequence
+                    '\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
+                    // with each code point separated by a zero-width space
+                    '\uD83C\uDFF4\u200B\uDB40\uDC67\u200B\uDB40\uDC62\u200B\uDB40\uDC65\u200B\uDB40\uDC6E\u200B\uDB40\uDC67\u200B\uDB40\uDC7F'
                 );
 
@@ -134 +130 @@
                  */
                 isIdentical = emojiSetsRenderIdentically(
-                    [0x1FAF1, 0x1F3FB, 0x200D, 0x1FAF2, 0x1F3FF],
-                    [0x1FAF1, 0x1F3FB, 0x200B, 0x1FAF2, 0x1F3FF]
+                    '\uD83E\uDEF1\uD83C\uDFFB\u200D\uD83E\uDEF2\uD83C\uDFFF', // as the zero-width joiner sequence
+                    '\uD83E\uDEF1\uD83C\uDFFB\u200B\uD83E\uDEF2\uD83C\uDFFF'  // separated by a zero-width space
                 );