Changeset 31875

Timestamp:

03/24/2015 11:32:23 PM (12 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 );