Ticket #31701: 31701.diff

src/wp-includes/default-filters.php

@@ -224 +224 @@
 add_action( 'init',                'check_theme_switched',            99    );
 add_action( 'after_switch_theme',  '_wp_sidebars_changed'                   );
 add_action( 'wp_print_styles',     'print_emoji_styles'                     );
+add_action( 'wp_print_styles',     'print_emoji_detection_script'           );
 
 if ( isset( $_GET['replytocom'] ) )
     add_action( 'wp_head', 'wp_no_robots' );

src/wp-includes/formatting.php

@@ -4055 +4055 @@
 <?php
 }
 
+function print_emoji_detection_script() {
+        $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', '//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' ),
+        );
+
+        if ( SCRIPT_DEBUG ) {
+?>
+<script type="text/javascript">
+( function( window ) {
+        /**
+         * 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.
+         */
+        browserSupportsEmoji = function( 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;
+                }
+        }
+
+        if ( ! browserSupportsEmoji( 'simple' ) || ! browserSupportsEmoji( 'flag' ) ) {
+                var script = document.createElement( 'script' );
+                script.src = '/wp-includes/js/twemoji.js';
+                script.type = 'text/javascript';
+                document.getElementsByTagName( 'head' )[0].appendChild( script );
+
+                waitForTwemoji();
+        }
+
+        function waitForTwemoji() {
+                if ( ! window.twemoji ) {
+                        // Still waiting.
+                        window.setTimeout( waitForTwemoji, 50 );
+                }
+
+                var script = document.createElement( 'script' );
+                script.src = '/wp-includes/js/wp-emoji.js';
+                script.type = 'text/javascript';
+                document.getElementsByTagName( 'head' )[0].appendChild( script );
+        }
+
+        window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+} )( window );
+</script>
+<?php
+        } else { // ! SCRIPT_DEBUG
+?>
+<script type="text/javascript">
+// TODO: Minified version of the emoji detection script
+</script>
+<?php
+        }
+}
+
 /**
  * Convert any 4 byte emoji in a string to their equivalent HTML entity.
  *

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

@@ -165 +165 @@
                         supportsFlagEmoji = browserSupportsEmoji( '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 ( window.addEventListener ) {
+                                        window.addEventListener( 'load', load, false );
+                                } else if ( window.attachEvent ) {
+                                        window.attachEvent( 'onload', load );
+                                }
+                        } else {
+                                load();
                         }
                 }
 

src/wp-includes/script-loader.php

@@ -424 +424 @@
         $scripts->add( 'media-audiovideo', "/wp-includes/js/media/audio-video$suffix.js", array( 'media-editor' ), false, 1 );
         $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 );
                 did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(