Changeset 38869

Timestamp:

10/22/2016 11:59:56 PM (8 years ago)

Author:

peterwilsoncc

Message:

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 #37817.

Location:

trunk/src

Files:

• wp-admin/js/bookmarklet.min.js (modified) (1 diff)
• wp-includes/js/wp-emoji-loader.js (modified) (5 diffs)

trunk/src/wp-admin/js/bookmarklet.min.js

@@ -1 @@
-(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.getElementsByTagName("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);
+(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.getElementsByTagName("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);

trunk/src/wp-includes/js/wp-emoji-loader.js

@@ -1 +1 @@
 ( function( window, document, settings ) {
     var src, ready, ii, tests;
+
+    /*
+     * Create a canvas element for testing native browser support
+     * of emoji.
+     */
+    var canvas = document.createElement( 'canvas' );
+    var context = canvas.getContext && canvas.getContext( '2d' );
 
     /**
@@ -8 +15 @@
      * @since 4.2.0
      *
-     * @param type {String} Whether to test for support of "simple", "flag", "diversity" or "unicode8" emoji.
+     * @param type {String} Whether to test for support of "flag" or "emoji4" emoji.
      * @return {Boolean} True if the browser can render emoji, false if it cannot.
      */
     function browserSupportsEmoji( type ) {
-        var canvas = document.createElement( 'canvas' ),
-            context = canvas.getContext && canvas.getContext( '2d' ),
-            stringFromCharCode = String.fromCharCode,
-            flag, flag2, tonedata, tone, tone2, technologist, technologist2;
+        var stringFromCharCode = String.fromCharCode,
+            flag, flag2, technologist, technologist2;
 
         if ( ! context || ! context.fillText ) {
             return false;
         }
+
+        // Cleanup from previous test.
+        context.clearRect( 0, 0, canvas.width, canvas.height );
 
         /*
@@ -34 +42 @@
                  * This works because the image will be one of three things:
                  * - Two empty squares, if the browser doesn't render emoji
-                 * - Two squares with 'A' and 'U' in them, if the browser doesn't render flag emoji
-                 * - The Australian flag
+                 * - Two squares with 'U' and 'N' in them, if the browser doesn't render flag emoji
+                 * - The United Nations flag
                  *
                  * The first two will encode to small images (1-2KB data URLs), the third will encode
                  * to a larger image (4-5KB data URL).
                  */
-                context.fillText( stringFromCharCode( 55356, 56806, 55356, 56826 ), 0, 0 );
+                context.fillText( stringFromCharCode( 55356, 56826, 55356, 56819 ), 0, 0 );
                 if ( canvas.toDataURL().length < 3000 ) {
                     return false;
@@ -64 +72 @@
 
                 return flag !== flag2;
-            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;
             case 'emoji4':
                 /*
@@ -129 +98 @@
 
         script.src = src;
-        script.type = 'text/javascript';
+        script.defer = script.type = 'text/javascript';
         document.getElementsByTagName( 'head' )[0].appendChild( script );
     }
 
-    tests = Array( 'simple', 'flag', 'unicode8', 'diversity', 'unicode9', 'emoji4' );
+    tests = Array( 'flag', 'emoji4' );
 
     settings.supports = {