emoji: Switch to using iamcal sprite sheets for reactions and pickers.

Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.

It requires some small changes to CSS to ensure emoji are centered
properly in the new design.

Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".

static/js/emoji.js

@@ -19,18 +19,19 @@ var zulip_emoji = {
 
 _.each(emoji_codes.names, function (value) {
     var base_name = emoji_codes.name_to_codepoint[value];
-    default_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
+    default_emojis.push({emoji_name: value,
+                         codepoint: emoji_codes.name_to_codepoint[value],
+                         emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
 });
 
 _.each(emoji_codes.codepoints, function (value) {
-    default_unicode_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
+    default_unicode_emojis.push({emoji_name: value,
+                                 codepoint: value,
+                                 emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
 });
 
 exports.emoji_name_to_css_class = function (emoji_name) {
-    if (emoji_name.indexOf("+") >= 0) {
-        return emoji_name.replace("+", "");
-    }
-    return emoji_name;
+    return emoji_codes.name_to_codepoint[emoji_name];
 };
 
 exports.update_emojis = function update_emojis(realm_emojis) {
@@ -50,7 +51,7 @@ exports.update_emojis = function update_emojis(realm_emojis) {
 
     exports.emojis_by_name = {};
     exports.emojis_name_to_css_class = {};
-    _.each(exports.emojis, function (emoji) {
+    _.each(default_emojis, function (emoji) {
         var css_class = exports.emoji_name_to_css_class(emoji.emoji_name);
         exports.emojis_name_to_css_class[emoji.emoji_name] = css_class;
         exports.emojis_by_name[emoji.emoji_name] = emoji.emoji_url;
@@ -65,7 +66,7 @@ exports.initialize = function initialize() {
     // Load the sprite image in the background so that the browser
     // can cache it for later use.
     var sprite = new Image();
-    sprite.src = '/static/generated/emoji/sprite.png';
+    sprite.src = '/static/generated/emoji/sheet_google_32.png';
 };
 
 exports.update_emojis(page_params.realm_emoji);

static/styles/zulip.css

@@ -2337,6 +2337,16 @@ button.topic_edit_cancel {
     margin-top: -7px;
 }
 
+div.emoji {
+    /* This is needed when using the sprite sheets */
+    top: 6px;
+}
+
+img.emoji {
+    /* This is the right offset for <img> style emoji */
+    top: 3px;
+}
+
 .emoji.realm-emoji {
     background-size: contain;
     background-position: center;

templates/zerver/index.html

@@ -14,7 +14,7 @@ var page_params = {{ page_params }};
 {% block customhead %}
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
-<link rel="stylesheet" type="text/css" href="/static/generated/emoji/sprite.css" />
+<link rel="stylesheet" type="text/css" href="/static/generated/emoji/google_sprite.css" />
 <style type="text/css">
 
 #css-loading {

version.py

@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.5.1+git"
-PROVISION_VERSION = '4.22'
+PROVISION_VERSION = '4.23'