<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[55241] trunk/src/js/_enqueues/lib/emoji-loader.js: Emoji: Fix emoji feature detection.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/55241">55241</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/55241","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>flixos90</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2023-02-06 21:35:25 +0000 (Mon, 06 Feb 2023)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Emoji: Fix emoji feature detection.
The emoji feature detection that occurs on every page load by default has been broken at least since <a href="https://core.trac.wordpress.org/changeset/45769">[45769]</a>, 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 <a href="https://core.trac.wordpress.org/ticket/57301">#57301</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueueslibemojiloaderjs">trunk/src/js/_enqueues/lib/emoji-loader.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueueslibemojiloaderjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/lib/emoji-loader.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/lib/emoji-loader.js 2023-02-06 21:34:56 UTC (rev 55240)
+++ trunk/src/js/_enqueues/lib/emoji-loader.js 2023-02-06 21:35:25 UTC (rev 55241)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -16,22 +16,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @private
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {number[]} set1 Set of Emoji character codes.
- * @param {number[]} set2 Set of Emoji character codes.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {string} set1 Set of Emoji to test.
+ * @param {string} set2 Set of Emoji to test.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {boolean} True if the two sets render the same.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function emojiSetsRenderIdentically( set1, set2 ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var stringFromCharCode = String.fromCharCode;
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Cleanup from previous test.
</span><span class="cx" style="display: block; padding: 0 10px"> context.clearRect( 0, 0, canvas.width, canvas.height );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ context.fillText( set1, 0, 0 );
</ins><span class="cx" style="display: block; padding: 0 10px"> var rendered1 = canvas.toDataURL();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Cleanup from previous test.
</span><span class="cx" style="display: block; padding: 0 10px"> context.clearRect( 0, 0, canvas.width, canvas.height );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ context.fillText( set2, 0, 0 );
</ins><span class="cx" style="display: block; padding: 0 10px"> var rendered2 = canvas.toDataURL();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return rendered1 === rendered2;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,11 +36,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Detects if the browser supports rendering emoji or flag emoji.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Determines if the browser properly renders Emoji that Twemoji can supplement.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Flag emoji are a single glyph made of two characters, so some browsers
- * (notably, Firefox OS X) don't support them.
- *
</del><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @private
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -69,15 +64,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> switch ( type ) {
</span><span class="cx" style="display: block; padding: 0 10px"> case 'flag':
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * 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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Test for Transgender flag compatibility. Added in Unicode 13.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * To test for support, we try to render it, and compare the rendering to how it would look if
</span><span class="cx" style="display: block; padding: 0 10px"> * the browser doesn't render it correctly (white flag emoji + transgender symbol).
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> isIdentical = emojiSetsRenderIdentically(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- [ 0x1F3F3, 0xFE0F, 0x200D, 0x26A7, 0xFE0F ],
- [ 0x1F3F3, 0xFE0F, 0x200B, 0x26A7, 0xFE0F ]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
+ '\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F' // separated by a zero-width space
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isIdentical ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -92,8 +86,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * the browser doesn't render it correctly ([U] + [N]).
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> isIdentical = emojiSetsRenderIdentically(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- [ 0xD83C, 0xDDFA, 0xD83C, 0xDDF3 ],
- [ 0xD83C, 0xDDFA, 0x200B, 0xD83C, 0xDDF3 ]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '\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
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isIdentical ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -102,14 +96,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Test for English flag compatibility. England is a country in the United Kingdom, it
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * does not have a two letter locale code but rather an five letter sub-division code.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * does not have a two letter locale code but rather a five letter sub-division code.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * To test for support, we try to render it, and compare the rendering to how it would look if
</span><span class="cx" style="display: block; padding: 0 10px"> * the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> isIdentical = emojiSetsRenderIdentically(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- [ 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 ]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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'
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return ! isIdentical;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -133,8 +129,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * sequence come from older emoji standards.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> isIdentical = emojiSetsRenderIdentically(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- [0x1FAF1, 0x1F3FB, 0x200D, 0x1FAF2, 0x1F3FF],
- [0x1FAF1, 0x1F3FB, 0x200B, 0x1FAF2, 0x1F3FF]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '\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
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return ! isIdentical;
</span></span></pre>
</div>
</div>
</body>
</html>