Add "sprite" parameter to emoji_icon helper

The emoji_icon helper used to display the award emoji in Issue and Merge Request views. By default the spritesheet is used, but passing `sprite: false` to the `emoji_icon` helper makes the emoji render as separate images. For award emoji displayed by default (e.g. thumbs-up, thumbs-down, and any that have been awarded to the issue/MR) the independent images are used. Only when the full emoji menu is opened does the full spritesheet load. On a normal issue this change decreases the page load by 670KB or 250KB depending on pixel density. Resolves #14334.

Add "sprite" parameter to emoji_icon helper
3a196317 · connorshea · 8419f355 · 3a196317 · 3a196317 · 3a196317
Commit 3a196317 authored Apr 07, 2016 by connorshea
Hide whitespace changes
Inline Side-by-side

Showing with 26 additions and 10 deletions

CHANGELOG CHANGELOG +1 -0

issues_helper.rb app/helpers/issues_helper.rb +24 -9

_votes_block.html.haml app/views/votes/_votes_block.html.haml +1 -1

No files found.
--- a/CHANGELOG
+++ b/CHANGELOG
 Please view this file on the master branch, on stable branches it's out of date.

 v 8.7.0 (unreleased)
+  - Load award emoji images separately unless opening the full picker. Saves several hundred KBs of data for most pages. (Connor Shea)
  - All images in discussions and wikis now link to their source files !3464 (Connor Shea).
  - Return status code 303 after a branch DELETE operation to avoid project deletion (Stan Hu)
  - Improved Markdown rendering performance !3389 (Yorick Peterse)

--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -115,17 +115,32 @@ module IssuesHelper
    icon('eye-slash') if issue.confidential?
  end

-  def emoji_icon(name, unicode = nil, aliases = [])
+  def emoji_icon(name, unicode = nil, aliases = [], sprite: true)
    unicode ||= Emoji.emoji_filename(name) rescue ""

-    content_tag :div, "",
-      class: "icon emoji-icon emoji-#{unicode}",
-      title: name,
-      data: {
-        aliases: aliases.join(' '),
-        emoji: name,
-        unicode_name: unicode
-      }
+    data = {
+      aliases: aliases.join(" "),
+      emoji: name,
+      unicode_name: unicode
+    }
+
+    if sprite
+      # Emoji icons for the emoji menu, these use a spritesheet.
+      content_tag :div, "",
+        class: "icon emoji-icon emoji-#{unicode}",
+        title: name,
+        data: data
+    else 
+      # Emoji icons displayed separately, used for the awards already given
+      # to an issue or merge request.
+      content_tag :img, "",
+        class: "icon emoji",
+        title: name,
+        height: "20px",
+        width: "20px",
+        src: url_to_image("#{unicode}.png"),
+        data: data
+    end
  end

  def emoji_author_list(notes, current_user)

--- a/app/views/votes/_votes_block.html.haml
+++ b/app/views/votes/_votes_block.html.haml
 .awards.votes-block
  - awards_sort(votable.notes.awards.grouped_awards).each do |emoji, notes|
    %button.btn.award-control.js-emoji-btn.has-tooltip{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user), data: {placement: "top"}}
-      = emoji_icon(emoji)
+      = emoji_icon(emoji, sprite: false)
      %span.award-control-text.js-counter
        = notes.count