Changeset 31875

Timestamp:

03/24/2015 11:32:23 PM (10 years ago)

Author:

pento

Message:

Emoji: Instead of loading the emoji JS files automatically, we now include a small JS shim in the header, to test if the user's browser needs Twemoji. It then loads the emoji JS files only if they're needed.

Props pento, azaozz.

Fixes #31701.

Location:

trunk

Files:

• Gruntfile.js (modified) (3 diffs)
• package.json (modified) (1 diff)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/formatting.php (modified) (3 diffs)
• src/wp-includes/js/wp-emoji-loader.js (added)
• src/wp-includes/js/wp-emoji.js (modified) (6 diffs)
• src/wp-includes/script-loader.php (modified) (1 diff)

trunk/Gruntfile.js

@@ -465 +465 @@
                 ],
                 dest: BUILD_DIR + 'wp-includes/js/tinymce/wp-tinymce.js'
+            },
+            emoji: {
+                options: {
+                    separator: '\n',
+                    process: function( src, filepath ) {
+                        return '// Source: ' + filepath.replace( BUILD_DIR, '' ) + '\n' + src;
+                    }
+                },
+                src: [
+                    BUILD_DIR + 'wp-includes/js/twemoji.min.js',
+                    BUILD_DIR + 'wp-includes/js/wp-emoji.min.js'
+                ],
+                dest: BUILD_DIR + 'wp-includes/js/wp-emoji-release.min.js'
             }
         },
@@ -501 +514 @@
                 ],
                 dest: SOURCE_DIR
+            }
+        },
+        includes: {
+            emoji: {
+                src: BUILD_DIR + 'wp-includes/formatting.php',
+                dest: '.'
             }
         },
@@ -616 +635 @@
         'compress:tinymce',
         'clean:tinymce',
+        'concat:emoji',
+        'includes:emoji',
         'jsvalidate:build'
     ] );

trunk/package.json

@@ -23 +23 @@
     "grunt-contrib-uglify": "~0.8.0",
     "grunt-contrib-watch": "~0.6.1",
+    "grunt-includes": "~0.4.5",
     "grunt-jsvalidate": "~0.2.2",
     "grunt-legacy-util": "^0.2.0",

trunk/src/wp-includes/default-filters.php

@@ -214 +214 @@
 add_action( 'publish_future_post', 'check_and_publish_future_post',   10, 1 );
 add_action( 'wp_head',             'noindex',                          1    );
+add_action( 'wp_head',             'print_emoji_detection_script',     7    );
 add_action( 'wp_head',             'wp_print_styles',                  8    );
 add_action( 'wp_head',             'wp_print_head_scripts',            9    );

trunk/src/wp-includes/formatting.php

@@ -4083 +4083 @@
  */
 function print_emoji_styles() {
+    static $printed = false;
+
+    if ( $printed ) {
+        return;
+    }
+
+    $printed = true;
 ?>
 <style type="text/css">
@@ -4099 +4106 @@
 </style>
 <?php
+}
+
+function print_emoji_detection_script() {
+    global $wp_version;
+    static $printed = false;
+
+    if ( $printed ) {
+        return;
+    }
+
+    $printed = true;
+
+    $settings = array(
+        /**
+         * Filter the URL where emoji images are hosted.
+         *
+         * @since 4.2.0
+         *
+         * @param string The emoji base URL.
+         */
+        'baseUrl' => apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ) ),
+
+        /**
+         * Filter the extension of the emoji files.
+         *
+         * @since 4.2.0
+         *
+         * @param string The emoji extension. Default .png.
+         */
+        'ext'     => apply_filters( 'emoji_ext', '.png' ),
+    );
+
+    $version = 'ver=' . $wp_version;
+
+    if ( SCRIPT_DEBUG ) {
+        $settings['source'] = array(
+            'wpemoji' => includes_url( "js/wp-emoji.js?$version" ),
+            'twemoji' => includes_url( "js/twemoji.js?$version" ),
+        );
+
+        ?>
+        <script type="text/javascript">
+            window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+            <?php readfile( ABSPATH . WPINC . "/js/wp-emoji-loader.js" ); ?>
+        </script>
+        <?php
+    } else {
+        $settings['source'] = array(
+            'concatemoji' => includes_url( "js/wp-emoji-release.min.js?$version" ),
+        );
+
+        ?>
+        <script type="text/javascript">
+            window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+            include "js/wp-emoji-loader.min.js"
+        </script>
+        <?php
+    }
 }
 
@@ -4164 +4229 @@
     }
 
-    /** This filter is documented in wp-includes/script-loader.php */
+    /** This filter is documented in wp-includes/formatting.php */
     $cdn_url = apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72/' ) );
 
-    /** This filter is documented in wp-includes/script-loader.php */
+    /** This filter is documented in wp-includes/formatting.php */
     $ext = apply_filters( 'emoji_ext', '.png' );
 

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

@@ -1 +1 @@
 
-( function( window, twemoji, settings ) {
+( function( window, settings ) {
     function wpEmoji() {
         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
@@ -29 +29 @@
          * @var Boolean
          */
-        replaceEmoji = false;
+        replaceEmoji = false,
+
+        // Private
+        twemoji, timer,
+        count = 0;
 
         /**
@@ -37 +41 @@
          */
         function load() {
+            if ( typeof window.twemoji === 'undefined' ) {
+                // Break if waiting for longer than 30 sec.
+                if ( count > 600 ) {
+                    return;
+                }
+
+                // Still waiting. 
+                window.clearTimeout( timer );
+                timer = window.setTimeout( load, 50 );
+                count++;
+
+                return;
+            }
+
+            twemoji = window.twemoji;
+
             if ( MutationObserver ) {
                 new MutationObserver( function( mutationRecords ) {
@@ -64 +84 @@
 
             parse( document.body );
-        }
-
-        /**
-         * Detect 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.
-         *
-         * @since 4.2.0
-         *
-         * @param type {String} Whether to test for support of "simple" or "flag" 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' );
-
-            if ( ! context || ! context.fillText ) {
-                return false;
-            }
-
-            /*
-             * Chrome on OS X added native emoji rendering in M41. Unfortunately,
-             * it doesn't work when the font is bolder than 500 weight. So, we
-             * check for bold rendering support to avoid invisible emoji in Chrome.
-             */
-            context.textBaseline = 'top';
-            context.font = '600 32px Arial';
-
-            if ( type === 'flag' ) {
-                /*
-                 * This works because the image will be one of three things:
-                 * - Two empty squares, if the browser doesn't render emoji
-                 * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
-                 * - The British 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( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
-                return canvas.toDataURL().length > 3000;
-            } else {
-                /*
-                 * 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( String.fromCharCode( 55357, 56835 ), 0, 0 );
-                return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
-            }
         }
 
@@ -158 +130 @@
         }
 
+        // Load when the readyState changes to 'interactive', not 'complete'.
+        function onLoad() {
+            if ( 'interactive' === document.readyState ) {
+                load();
+            }
+        }
+
         /**
          * Initialize our emoji support, and set up listeners.
          */
-        if ( twemoji && settings ) {
-            supportsEmoji = browserSupportsEmoji();
-            supportsFlagEmoji = browserSupportsEmoji( 'flag' );
+        if ( settings ) {
+            supportsEmoji = window._wpemojiSettings.supports.simple;
+            supportsFlagEmoji = window._wpemojiSettings.supports.flag;
             replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
 
-            if ( window.addEventListener ) {
-                window.addEventListener( 'load', load, false );
-            } else if ( window.attachEvent ) {
-                window.attachEvent( 'onload', load );
+            if ( 'loading' == document.readyState ) {
+                if ( document.addEventListener ) {
+                    document.addEventListener( 'readystatechange', onLoad, false );
+                } else if ( document.attachEvent ) {
+                    document.attachEvent( 'onreadystatechange', onLoad );
+                }
+            } else {
+                load();
             }
         }
 
         return {
-            browserSupportsEmoji: browserSupportsEmoji,
             replaceEmoji: replaceEmoji,
             parse: parse
@@ -183 +165 @@
     window.wp.emoji = new wpEmoji();
 
-} )( window, window.twemoji, window._wpemojiSettings );
+} )( window, window._wpemojiSettings );

trunk/src/wp-includes/script-loader.php

@@ -425 +425 @@
     $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models', 'media-audiovideo', 'wp-playlist' ), false, 1 );
 
-    $scripts->add( 'twemoji', "/wp-includes/js/twemoji$suffix.js", array(), '1.3.2', 1 );
-    $scripts->add( 'emoji', "/wp-includes/js/wp-emoji$suffix.js", array( 'twemoji' ), false, 1 );
-    did_action( 'init' ) && $scripts->localize( 'emoji', '_wpemojiSettings', array(
-        /**
-         * Filter the URL where emoji images are hosted.
-         *
-         * @since 4.2.0
-         *
-         * @param string The emoji base URL.
-         */
-        'baseUrl' => apply_filters( 'emoji_url', '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ),
-
-        /**
-         * Filter the extension of the emoji files.
-         *
-         * @since 4.2.0
-         *
-         * @param string The emoji extension. Default .png.
-         */
-        'ext'      => apply_filters( 'emoji_ext', '.png' ),
-    ) );
-    $scripts->enqueue( 'emoji' );
-
     if ( is_admin() ) {
         $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );