<!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>[38869] trunk/src: Emoji: Load polyfill responsibly.</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 { 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/38869">38869</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/38869","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>peterwilsoncc</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-22 23:59:56 +0000 (Sat, 22 Oct 2016)</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: Load polyfill responsibly.
Improve performance of Emoji tests and loading of the polyfill.
Reduces the number of tests to determine browser support for emoji to those most likely to fail. Adds the defer flag to the loaded scripts for browsers lacking support.
Props superpoincare for perf testing, peterwilsoncc.
Fixes <a href="https://core.trac.wordpress.org/ticket/37817">#37817</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjsbookmarkletminjs">trunk/src/wp-admin/js/bookmarklet.min.js</a></li>
<li><a href="#trunksrcwpincludesjswpemojiloaderjs">trunk/src/wp-includes/js/wp-emoji-loader.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjsbookmarkletminjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/bookmarklet.min.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/bookmarklet.min.js 2016-10-21 22:14:26 UTC (rev 38868)
+++ trunk/src/wp-admin/js/bookmarklet.min.js 2016-10-22 23:59:56 UTC (rev 38869)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight|
|b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");"canonical"!==A&&"icon"!==A&&"shortlink"!==A||e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsBy
TagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,window.pt_url);
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight|
|b.documentElement.clientHeight||700,f=f<800||f>5e3?600:.7*f,g=g<800||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");"canonical"!==A&&"icon"!==A&&"shortlink"!==A||e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsBy
TagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,window.pt_url);
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="trunksrcwpincludesjswpemojiloaderjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/wp-emoji-loader.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/wp-emoji-loader.js 2016-10-21 22:14:26 UTC (rev 38868)
+++ trunk/src/wp-includes/js/wp-emoji-loader.js 2016-10-22 23:59:56 UTC (rev 38869)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,25 +1,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ( function( window, document, settings ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var src, ready, ii, tests;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Create a canvas element for testing native browser support
+ * of emoji.
+ */
+ var canvas = document.createElement( 'canvas' );
+ var context = canvas.getContext && canvas.getContext( '2d' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
</span><span class="cx" style="display: block; padding: 0 10px"> * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</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 type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @return {Boolean} True if the browser can render emoji, false if it cannot.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function browserSupportsEmoji( type ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var canvas = document.createElement( 'canvas' ),
- context = canvas.getContext && canvas.getContext( '2d' ),
- stringFromCharCode = String.fromCharCode,
- flag, flag2, tonedata, tone, tone2, technologist, technologist2;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var stringFromCharCode = String.fromCharCode,
+ flag, flag2, technologist, technologist2;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! context || ! context.fillText ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Cleanup from previous test.
+ context.clearRect( 0, 0, canvas.width, canvas.height );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Chrome on OS X added native emoji rendering in M41. Unfortunately,
</span><span class="cx" style="display: block; padding: 0 10px"> * it doesn't work when the font is bolder than 500 weight. So, we
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -33,13 +41,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * This works because the image will be one of three things:
</span><span class="cx" style="display: block; padding: 0 10px"> * - Two empty squares, if the browser doesn't render emoji
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
- * - The Australian flag
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * - Two squares with 'U' and 'N' in them, if the browser doesn't render flag emoji
+ * - The United Nations flag
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * The first two will encode to small images (1-2KB data URLs), the third will encode
</span><span class="cx" style="display: block; padding: 0 10px"> * to a larger image (4-5KB data URL).
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( canvas.toDataURL().length < 3000 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,45 +71,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> flag2 = canvas.toDataURL();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return flag !== flag2;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- case 'diversity':
- /*
- * This tests if the browser supports the Emoji Diversity specification, by rendering an
- * emoji with no skin tone specified (in this case, Santa). It then adds a skin tone, and
- * compares if the emoji rendering has changed.
- */
- context.fillText( stringFromCharCode( 55356, 57221 ), 0, 0 );
- tonedata = context.getImageData( 16, 16, 1, 1 ).data;
- tone = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
-
- context.fillText( stringFromCharCode( 55356, 57221, 55356, 57343 ), 0, 0 );
- // Chrome has issues comparing arrays, and Safari has issues converting arrays to strings.
- // So, we create our own string and compare that, instead.
- tonedata = context.getImageData( 16, 16, 1, 1 ).data;
- tone2 = tonedata[0] + ',' + tonedata[1] + ',' + tonedata[2] + ',' + tonedata[3];
-
- return tone !== tone2;
- case 'simple':
- /*
- * This creates a smiling emoji, and checks to see if there is any image data in the
- * center pixel. In browsers that don't support emoji, the character will be rendered
- * as an empty square, so the center pixel will be blank.
- */
- context.fillText( stringFromCharCode( 55357, 56835 ), 0, 0 );
- return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
- case 'unicode8':
- /*
- * To check for Unicode 8 support, let's try rendering the most important advancement
- * that the Unicode Consortium have made in years: the burrito.
- */
- context.fillText( stringFromCharCode( 55356, 57135 ), 0, 0 );
- return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
- case 'unicode9':
- /*
- * Do Unicode 9 emoji render?
- * ¯\_(ツ)_/¯
- */
- context.fillText( stringFromCharCode( 55358, 56631 ), 0, 0 );
- return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
</del><span class="cx" style="display: block; padding: 0 10px"> case 'emoji4':
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Emoji 4 has the best technologists. So does WordPress!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -128,11 +97,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var script = document.createElement( 'script' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> script.src = src;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- script.type = 'text/javascript';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ script.defer = script.type = 'text/javascript';
</ins><span class="cx" style="display: block; padding: 0 10px"> document.getElementsByTagName( 'head' )[0].appendChild( script );
</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">- tests = Array( 'simple', 'flag', 'unicode8', 'diversity', 'unicode9', 'emoji4' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tests = Array( 'flag', 'emoji4' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> settings.supports = {
</span><span class="cx" style="display: block; padding: 0 10px"> everything: true,
</span></span></pre>
</div>
</div>
</body>
</html>