Use native unicode emojis

 - gl_emoji for falling back to image/css-sprite when the browser
   doesn't support an emoji
 - Markdown rendering (Banzai filter)
 - Autocomplete
 - Award emoji menu
    - Perceived perf
    - Immediate response because we now build client-side
 - Update `digests.json` generation in gemojione rake task to be more
   useful and  include `unicodeVersion`

MR: !9437

See issues

 - #26371
 - #27250
 - #22474

1 files changed, 65 insertions, 25 deletions

diff --git a/lib/tasks/gemojione.rake b/lib/tasks/gemojione.rake
index 993112aee3b..b8a6ba7e77c 100644
--- a/lib/tasks/gemojione.rake
+++ b/lib/tasks/gemojione.rake
@@ -5,29 +5,29 @@ namespace :gemojione do
     require 'json'
 
     dir = Gemojione.images_path
-    digests = []
-    aliases = Hash.new { |hash, key| hash[key] = [] }
-    aliases_path = File.join(Rails.root, 'fixtures', 'emojis', 'aliases.json')
-
-    JSON.parse(File.read(aliases_path)).each do |alias_name, real_name|
-      aliases[real_name] << alias_name
-    end
-
-    Gitlab::AwardEmoji.emojis.map do |name, emoji_hash|
-      fpath = File.join(dir, "#{emoji_hash['unicode']}.png")
-      digest = Digest::SHA256.file(fpath).hexdigest
-
-      digests << { name: name, unicode: emoji_hash['unicode'], digest: digest }
+    resultant_emoji_map = {}
+
+    Gitlab::Emoji.emojis.map do |name, emoji_hash|
+      # Ignore aliases
+      unless Gitlab::Emoji.emojis_aliases.key?(name)
+        fpath = File.join(dir, "#{emoji_hash['unicode']}.png")
+        hash_digest = Digest::SHA256.file(fpath).hexdigest
+
+        entry = {
+          category: emoji_hash['category'],
+          moji: emoji_hash['moji'],
+          unicodeVersion: Gitlab::Emoji.emoji_unicode_version(name),
+          digest: hash_digest,
+        }
 
-      aliases[name].each do |alias_name|
-        digests << { name: alias_name, unicode: emoji_hash['unicode'], digest: digest }
+        resultant_emoji_map[name] = entry
       end
     end
 
     out = File.join(Rails.root, 'fixtures', 'emojis', 'digests.json')
 
     File.open(out, 'w') do |handle|
-      handle.write(JSON.pretty_generate(digests))
+      handle.write(JSON.pretty_generate(resultant_emoji_map))
     end
   end
 
@@ -55,21 +55,42 @@ namespace :gemojione do
     SPRITESHEET_WIDTH = 860
     SPRITESHEET_HEIGHT = 840
 
+    # Setup a map to rename image files
+    emoji_uncicode_string_to_name_map = {}
+    Gitlab::Emoji.emojis.map do |name, emoji_hash|
+      # Ignore aliases
+      unless Gitlab::Emoji.emojis_aliases.key?(name)
+        emoji_uncicode_string_to_name_map[emoji_hash['unicode']] = name
+      end
+    end
+
+    # Copy the Gemojione assets to the temporary folder for renaming
+    emoji_dir = "app/assets/images/emoji"
+    FileUtils.rm_rf(emoji_dir)
+    FileUtils.mkdir_p(emoji_dir, mode: 0700)
+    FileUtils.cp_r(File.join(Gemojione.images_path, '.'), emoji_dir)
+    Dir.chdir(emoji_dir) do
+      Dir["**/*.png"].each do |png|
+        image_path = File.join(Dir.pwd, png)
+        rename_to_named_emoji_image!(emoji_uncicode_string_to_name_map, image_path)
+      end
+    end
+
     Dir.mktmpdir do |tmpdir|
-      # Copy the Gemojione assets to the temporary folder for resizing
-      FileUtils.cp_r(Gemojione.images_path, tmpdir)
+      FileUtils.cp_r(File.join(emoji_dir, '.'), tmpdir)
 
       Dir.chdir(tmpdir) do
         Dir["**/*.png"].each do |png|
-          resize!(File.join(tmpdir, png), SIZE)
+          tmp_image_path = File.join(tmpdir, png)
+          resize!(tmp_image_path, SIZE)
         end
       end
 
-      style_path = Rails.root.join(*%w(app assets stylesheets pages emojis.scss))
+      style_path = Rails.root.join(*%w(app assets stylesheets framework emoji-sprites.scss))
 
       # Combine the resized assets into a packed sprite and re-generate the SCSS
       SpriteFactory.cssurl = "image-url('$IMAGE')"
-      SpriteFactory.run!(File.join(tmpdir, 'png'), {
+      SpriteFactory.run!(tmpdir, {
         output_style: style_path,
         output_image: "app/assets/images/emoji.png",
         selector:     '.emoji-',
@@ -83,7 +104,7 @@ namespace :gemojione do
       # let's simplify it
       system(%Q(sed -i '' "s/width: #{SIZE}px; height: #{SIZE}px; background: image-url('emoji.png')/background-position:/" #{style_path}))
       system(%Q(sed -i '' "s/ no-repeat//" #{style_path}))
-      system(%Q(sed -i '' "s/ 0px/ 0/" #{style_path}))
+      system(%Q(sed -i '' "s/ 0px/ 0/g" #{style_path}))
 
       # Append a generic rule that applies to all Emojis
       File.open(style_path, 'a') do |f|
@@ -92,6 +113,8 @@ namespace :gemojione do
         .emoji-icon {
           background-image: image-url('emoji.png');
           background-repeat: no-repeat;
+          color: transparent;
+          text-indent: -99em;
           height: #{SIZE}px;
           width: #{SIZE}px;
 
@@ -112,16 +135,17 @@ namespace :gemojione do
     # Now do it again but for Retina
     Dir.mktmpdir do |tmpdir|
       # Copy the Gemojione assets to the temporary folder for resizing
-      FileUtils.cp_r(Gemojione.images_path, tmpdir)
+      FileUtils.cp_r(File.join(emoji_dir, '.'), tmpdir)
 
       Dir.chdir(tmpdir) do
         Dir["**/*.png"].each do |png|
-          resize!(File.join(tmpdir, png), RETINA)
+          tmp_image_path = File.join(tmpdir, png)
+          resize!(tmp_image_path, RETINA)
         end
       end
 
       # Combine the resized assets into a packed sprite and re-generate the SCSS
-      SpriteFactory.run!(File.join(tmpdir), {
+      SpriteFactory.run!(tmpdir, {
         output_image: "app/assets/images/emoji@2x.png",
         style:        false,
         nocomments:   true,
@@ -155,4 +179,20 @@ namespace :gemojione do
     image.write(image_path) { self.quality = 100 }
     image.destroy!
   end
+
+  EMOJI_IMAGE_PATH_RE = /(.*?)(([0-9a-f]-?)+)\.png$/i
+  def rename_to_named_emoji_image!(emoji_uncicode_string_to_name_map, image_path)
+    # Rename file from unicode to emoji name
+    matches = EMOJI_IMAGE_PATH_RE.match(image_path)
+    preceding_path = matches[1]
+    unicode_string = matches[2]
+    name = emoji_uncicode_string_to_name_map[unicode_string]
+    if name
+      new_png_path = File.join(preceding_path, "#{name}.png")
+      FileUtils.mv(image_path, new_png_path)
+      new_png_path
+    else
+      puts "Warning: emoji_uncicode_string_to_name_map missing entry for #{unicode_string}. Full path: #{image_path}"
+    end
+  end
 end